Nur Ahmad Furlong

Islamic Experience Designer

Design

Modular Smart Phone by Phonebloks – So cool I had to share

By Leave a Comment

broken iPhone
Photo by Lars Plougmann on Flickr

I haven’t posted anything to any of my sites for absolutely ages but the following project is just so inspiring and “necessary” that I thought it’s a definite must share. I know more than anyone else the problem we have with our “smart device” becoming unusable because one small little part broke. In many cases the cost of repairs are so high we end up tossing the device and just getting another, which is an extremely wasteful practice. My daughter just washed my iPhone and destroyed the screen. Even though all the other parts work perfectly fine the phone is useless and I’m struggling to find someone to repair it at a decent rate. I wouldn’t have a problem if I was using a Phonebloks Modular Smart Phone.

THE PROBLEM

A phone only lasts a couple of years before it breaks or becomes obsolete. Although it’s often just one part that killed it, we throw everything away because it’s almost impossible to repair or upgrade.

DESIGNED TO LAST

Phonebloks is made of detachable bloks. The bloks are connected to the base which locks everything together into a solid phone. If a blok breaks you can easily replace it; if it’s getting old just upgrade.

Modular and Reusable Phoneblocks
Modular and Reusable Phonebloks

I’m absolutely stunned that we’ve come so far without solutions like these becoming mainstream. Of course we know that’s driven by the consumerism being shoved down our throats by the corporations merely interested in profits and not sustainability. If we can use collaboration and networking to create mass movements we can surely get 1 simple and very necessary product developed.

A movement not a product

I think The Phonebloks project is more of a movement that a 1 off product and deserves our energies to see it realized. These types of solutions are what improve people’s lives drastically while not completely destroying the environment. It’s a matter of changing our mindsets and looking further than the status of the latest and most flashy device.

I highly recommend giving this project your support, getting the word out there and adding your voice to the Thunderclap.

I’m working with another like minded designer to create a community directory of dwelling modules along a similar lines. It’s called Wikidwell, the brainchild of Irina Papuc. It will contain fully modular items, free of toxins and completely recyclable

WDC2014 taking Cape Town Design onto the World Stage

By Leave a Comment

You may not have heard but there’s a City down South, at the very tip of Africa that’s been buzzing with the sound of creative innovation for some time. It’s a really beautiful place like none other, almost laid back and extremely friendly and hospitable. It recently hosted thousands of International visitors as part of the Soccer World Cup and is about to make an even more ambitious Bid to launch itself into the creative psyche of the globe. You guessed it, yes, Cape Town, the place I currently call home.

Creative Cape Town communicates, supports and facilitates the development of the creative and knowledge economy in the Central City of Cape Town.

The WDC2014 Initiative is aimed at getting Cape Town voted as the “World Design Capital 2014″ as a recognition of the advances in use of design to enhance society. Seoul was voted the 2010 World Design Capital and Helsinki for 2012.

What is WDC2014?

This prestigious status is designated biennially by the International Council of Societies of Industrial Design (ICSID) to cities that are dedicated to using design for social, cultural and economic development.

Also View some of the Case Studies posted on the official website to see how the vision outlined above is coming to life

Visit the Following 2 Websites which are currently spear heading the initiative to find out more about the why and how of the project.

Cape Town’s World Design Capital 2014 bid concept, “Live Design, Transform Life”, focuses strongly on socially responsive design. – www.capetown2014.co.za

Join the Facebook Page and become part of the effort to get Cape Town recognized on the World Design Stage

Grab your supporter’s badge and be part of the team

Now go out there and slap some design on The Mother City! And don’t forget to share!

Mixing in HTML5, CSS3 and @Media Queries for studentology minisite

By 1 Comment

A few days ago I was approach by a good friend, Jamaal Khan who runs www.jayz.co.za to design & develop a splash page for one of his clients, Studentology. The site he required needed to be completed within 24 hours, which was a tough ask at that point but I obliged seeing things were relatively calm work wise for me at that point. In hindsight I should have known that was going to be impossible considering client feedback cycles testing and changes but I dove in none-the-less.

Grab the Pencil & paper just to be sure

I didn’t want to end up diving in too soon with photoshop and ending up shooting myself in the foot by spending too much time on prepping a look and feel without a clear layout approval, so I quickly threw together a couple of sketches based on the elements the client requested.

First Draft Sketch

I made a quick pencil sketch with some important bits highlighted to outline my thinking on how I planned to approach the page layout followed by a phonecall to make sure I’m understanding what each element actually is and what it’s function/priority is. In cases like this one there’s no need to go the full digital wireframe and a well planned pencil sketch could very much suffice.

Finalised Wireframe Sketch

Using Pre-designed graphic elements to speed up the process

Based on the concept I knew I had to create a box for the competition they were running as their concept relied on the users guessing what’s inside the box. Soi a quick search on google for some freely available vector graphics gave me a few options to work with.

I also regularly collect web elements and graphic styles which provide photoshop layered documents when I need to throw together a quick UI in emergency situations like this one, so I tapped into that folder and threw together a few Photoshop layouts within an hour or 2.

No time to think, just whack it out now

I initially decided to just hunt down an existing free HTML template which had enough of the ingredients to bash into shape. I had to make some quick decisions about how we’d approach the design & build due to the limited timeframe, but also wanted to explore some newer un-chartered territory.

Draft 1 - Graph Paper bg
Draft 2 - Brownpaper bg

I’d been eyeing the CSS3 & HTML5 framework called Less which is now in version 3 of it’s development. With it one can quickly build HTML 5, cross browser web layouts which re-adjust themselves to the specific media or device resolution being used to view it. I also employed a few simple CSS3 techniques to give the design a little spice without needing to use too many complicated background graphics or image text. This included text-shadow, border radius and box shadows as well as background gradients.

Granted not all of these techniques are completely cross browser compatible, but at least with the text-shadow being the least supported feature, I could still have a decent enough looking design in lower end browsers without too many graphics needed.

The full width was really the main focus, so most of the design and styling considerations were applied to work better in this width.

Studentology Full Page Width

Studentology - The Student Connection - Full width
This is the main layout suitable for average computer screen resolutions

Once that was established, I had to use the maximum width for smaller more tablet like screens like the iPad for a slightly narrower layout. In this site, CSS media queries are used to switch the width and layout styles for certain elements so they realign and reorder themselves to fit into the new screen width. For example, most of the elements within the blue content area are 30% width and floating to arrange themselves next to each other, which will be switched to a different percentage for smaller screens.

Scripts, scripts and more scripts

To avoid needing additional pages I made use of a jquery fancybox script to allow the video and entry form to popup over the page. I also used Jquery solutions to save space with the competition steps, using a slider to show each step of the process, and for the twitter feed in the footer. JQUERY is your friend, as long as you don’t mix it with too many other Javascript libraries which leads to script conflicts.

iPad width

Studentology - Tablet PC or small screen resolution
This is the main layout suitable for tablet screens like iPad

As you can see that some elements are now 50% of the full width of the layout while others are 100%, now changing the layout and order of the elements.

On another note, and even though CSS3 is completely capable of generating the effect I’ve used on the call to action buttons, I stuck to using graphics instead there as I didn’t want to run into too many degradation problems with the call to action items. At least for those elements it doesn’t matter what browser you’re using you’re pretty much going to get a nicely styled call to action without too many hours or device specific code.

Mobile Width

Studentology - Mobile Phone Layout
This layout configured to display for small screens like mobile phones

I ran into a few problems with older versions of Internet explorer as you would imagine, so ended up employing a javascript solution called If Oldie, which redirects the Internet Explorer viewer to a plain HTML version of the site which has a fixed width and makes use of XHTML instead of HTML5. I didn’t have enough time to troubleshoot the HTML5 shiv script which comes with the Less Framework and is meant to allow IE to recognize HTML5 tags, so that part didn’t work out as planned.

Even though due to time constraints I wasn’t able to craft everything to perfection I’ve learnt some really valuable lessons by tackling this project in the way that I did.

  1. Use frameworks and existing tools instead of always building from scratch, it helps with rapid development.
  2. Building device specific web pages is easy when you use the right tools.
  3. When you run into problem, don’t waste too much time trouble shooting, change direction quickly.
  4. Collect freely available web resources for emergencies, it’ll save your life when you need it most.
  5. Use 1 Javascript library for all your needs to avoid script conflicts, JQUERY is your Friend!
  6. 24 Hours is a ridiculous timeframe so never agree to design & code a page in that amount of time unless you’re gonna hack & smack.

This post basically outlines some of the decision making, tools and processes I employed to whack out a really quick but effective minisite which looks good, works across devices yet still employs some of the latest development tricks. It’s not perfect nor 100% bulletproof but it did the job in the time and budget available.

If I had a little extra time I think I could have implemented a much more HTML5 compliant solution which works across most browser using many of the fallback methods available at this well organised resource.

Web Trends Map 2009 – An Information Design Masterpiece

By Leave a Comment

Following a re-tweet about a post discussing web typography, sorry I forget who initially tweeted this one, I was confronted with a piece of information design work which had me absolutely speechless. I’ve seen previous versions of the Web Trends Map, but this latest installment is a real work of art.

Information Design to make your mouth Water

This is a masterpiece of information design
This is a masterpiece of information design

The Web Trend Map is a yearly publication by Information Architects Inc. (iA). It maps the 333 leading Web domains and the 111 most influential Internet people onto the Tokyo Metro map.

I can’t wait for this to be finalized so I can get hold of a printed copy for my office.

What the Map really means.

According to the creator’s of this map of juicy web goodness, countless hours of research was undertaken to assess to most effective, profitable and traffic generating websites and web gurus to put together a resource which is filled with the web’s most influential spaces and faces.

These web trends have been intelligently super-imposed over a map of the Tokyo Metro System, aligning those web venues which have similar characteristics to the actually Tokyo Metro spaces they virtually occupy. For example:

Google is placed in the busiest, most highly trafficked train station in the world: Shinjuku.

The width of an entities station represents it’s stability in the web space.

Trend Lines/Genres

Metro lines were established to group similar web entities. Upon investigation you’ll quickly realise what a mammoth task of information architecture this must have been. Further more, characteristics like the height of specific stations on the Virtual Map, represent the web entities success in terms of both traffic & revenue, which explains of course why Google towers above the rest. The use of various coloured lines and the position of certain stations at intersections of 1, 2 or 3 lines expresses which trend lines specific web entities actually cross or overlap.

Just a quick glance across the Trend Map reveals a wealth of information and insight into the current shape of the web sphere. I can see this map being presented in thousands of boardrooms and strategic sessions world-wide. It’s got that buzz appeal which the Orielly Web 2.0 Tag Cloud held at the beginning of the entrance of Web 2.0 into the mainstream. The many so called “social media gurus” out there are gonna eat this one up for breakfast lunch & supper.

This is very much still a work of art and feedback is being taken currently to make it as accurate, error free and apt as it can possibly be.

I’ve spent only a few minutes glancing at this web wonder and have already foreseen endless hours of my future dissappear in the journey this one is about to open for me. I’ll stop myself from using the cliche’s of beautiful, stunning, elegant to describe this one, even though these and more over used adjectives definitely apply in this case.

Ideas for nomad-one redesign.

By 4 Comments

I’m starting to get carried away with look & feel design on the nomad-one redesign. This is even before my wire-framing is properly completed, but I just can’t help myself at the moment. I’ve just really enjoyed working on this design. There are a load of changes I want to make to my site, graphic design, functional, content and information architecture & usability, so it’s all over the place at the moment. This post lists a few of my thoughts, but I hope to get more ideas from you about what you think would make my space special. I’ve suggest how the best advice might be rewarded down at the end of this post.

nomad-one-new2

Look & Feel

I suppose explaining where I’m going with this desert scene might help for starters. The nomad concept has been with me for some time, though not in this form. As you may know, I’m no city slicker. I’m also very much set on remaining as independent as possible, something the Bedouin values extremely highly. I’m a traveler at heart. So this is partly where the desert scene comes in.

Saving Space with some Ajax/Design Patterns

Regarding the layout and general interface, there’s a few space saving design patterns I want to build into the homepage, which include using some jquery tabs, a slider and an accordion to fit everything into a smaller space. My current design is way too long and lacks a few features above the fold. I don’t want to loose anything but feel I need to tuck lots of excess away in a more logical manner.

Integrating Social

I definitely need to integrate my social links into the interface much higher up the page, as well as include a twitter feed, what would we do without twitter. I like the idea of a user generated feed or post wall but am uncertain how this might impact the space on the homepage.

Showing my Portfolio work

Something I have failed hopelessly at s keeping an up to date portfolio area. I don;t even have a latest work feature on my current site so this is a must have i think. Of course it needs to be coded in such a way that it’s easy to maintain as well me always being pressed for time.

Quick Contact & Chat widget

I’d also like to include a few quick ways of getting in touch, like a mini form as well as skype me & gtalk widgets which allow people to chat with me directly when I’m online, which is like all the time.

My Blog area will remain pretty much the same in terms of it’s location and general functionality, but of course in needs some space saving neatening up. I also need to get a featured post sorted. I’ve been toying with the idea of having 3 main areas of featured posts, and running titles of these in the header area somewhere but haven’t fully embraced this idea yet.

Menu with Subtext

I really love the idea of menu links with sub text explaining the links in more detail so these are almost definitley going to be part of my next menu. I also need to rework the way I display my pages, what stays, what goes and what needs to be added. Lots of information-architecture work lies ahead, and the dreaded writing!

Header Message

My header will have to have a brief explanation of where you are and who i am, some kind of elevator pitch style slogan. I’m considering having a few messages, one for first timers and a few others for returning visitors. I like the way yoast.com addresses the visitor based on where they have come from.

What do you think? Want to earn your own design/redesign?

I’m thinking of turning this into some kind of competition, asking for feedback and awarding the best advice a design of their own. What you you think? Would you be interested in participating in something like that?