Adam Haider | User Interface Designer

"The Floppy Disk icon means “Save” for a whole generation of people who have never seen one."

Thu, 17 May 2012 10:02:07 +0100

“The Floppy Disk icon means “Save” for a whole generation of people who have never seen one.”

- Whether it be with web design or user interface design, if you are using iconography to communicate a specific task that has no relevant context to the period you are in then you are not doing your job properly and just rehashing what other designers are doing without taking the time to consider the overall UX. The floppy disk icon needs to go!

Principles of User Interface Design

Fri, 11 May 2012 05:01:49 +0100

Principles of User Interface Design:

“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” - Paul Rand

Nokia Lumia 900 Windows Phone May be my next phone or I might...

Thu, 05 Apr 2012 18:26:28 +0100

Nokia Lumia 900 Windows Phone

May be my next phone or I might just wait several more months till more information surfaces about Windows Phone 8, codenamed ‘Apollo’.

This Is How Design Works: User Interface Design

Tue, 03 Apr 2012 14:03:00 +0100

This Is How Design Works: User Interface Design:

We're in an icon-sharpness limbo

Mon, 26 Mar 2012 16:52:42 +0100

We're in an icon-sharpness limbo:

simurai:

With the rise of Retina displays people are looking for resolution independent alternatives to PNG icons. Some fell in love with font-icons, some are shouting “SVG”. But I’m sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist. Let’s take a closer look at our options:

Icon fonts are awesome, but..

jonathanmoore: Fantasy Interactive Case Studies Fi’s case...

Mon, 19 Mar 2012 22:22:06 +0000

jonathanmoore:

Fantasy Interactive Case Studies

Fi’s case studies are clearly in a league of their own to show off their client work. As a potential client you gain insight to their entire process and strategy, but as a designer the case studies are valuable tools in learning how to communicate design strategy with a client.

If you are a designer or a small design studio, this is the level of detail that you need to pour into every project to move beyond your tired hourly-based billing into the promise land of value based pricing. Charging by the hour is for chumps.

See the whole Broadway.com iPad App case study as well as Redbull TV, HTC Global, and History Channel’s Civil War 150.

Windows 8 Consumer Preview: What's Changed?

Thu, 15 Mar 2012 13:16:00 +0000

As I have spent a few weeks using Windows 8 on both my netbook and my main desktop computer I thought it would be a good idea to go over what has changed.

The biggest and most noticeable change coming from previous Windows versions is that of the new ‘Metro’ Windows Runtime (WinRT) environment. From my understanding this is not merely a touch-based shell that sits on top of Windows but rather a core level environment that provides four new distinct paradigms for Windows users: a fullscreen immersive app experience, side-by-side app snapping, pinned live tiles and a touch-centric metro-inspired user interface.

The Start Screen (Metro)

By grouping the live tiles and changing certain properties like tile size and position I was able to organise my start screen to look more uniform and clean by de-cluttering the unnecessary apps that plagued the start screen upon first install. As you can see you are able to pin not only metro apps but legacy shortcuts as well. (each time you install a legacy app the shortcuts appear at the end of the start screen just like the start menu)

More Settings (Metro)

This is the new settings page where users can customise and control certain new features which are provided in Windows 8 such as the lock screen which appears when you are aren’t logged into Windows as well as changing your theme which consists of a background pattern and a selection of fixed colour variants.

One of the great benifits of using Windows 8 is that it is integrated with Microsoft’s cloud storage solution SkyDrive, which means that if you are logged into Windows using a Microsoft ID (such as a Live account) all your apps, app settings and legacy explorer configurations are saved to the cloud which will enable you to sync them to multiple devices. So far this seems to work well and syncing is surprisingly fast.

Desktop (Legacy)

What is now known as the legacy desktop environment is essentially Windows 7, so little has changed but that is not necessarily a bad thing as Windows 7 is still a very solid OS. However one of the main differences you will instantly notice is that Windows Explorer not only looks different but that file management performance has greatly improved.

The explorer ribbon in it’s current implementation is still quite bad, though I must confess as a power-user one feature I do like is the ability to pin any explorer option found in the ribbon to the ‘Quick Access Toolbar’ which is displayed on the Aero glass part of the window. For me every folder needs to be displayed and structured a certain way i.e: grouping files by file-type and then sorting by date modified or name, so I have pinned the ‘View’ and ‘Group by’ options so now I can quickly change the folder properties a lot more easily.

Compact Windows explorer list view

This may or may not be a new feature but is something I came across. If you resize a window right down to it’s smallest width the navigation pane disappears so that you are left with a list of files with the folder. This is great because if you do what I do and ‘hide file names’ for photos in a large photoset for example, what you are left with is a nice orderly list of photos with no extra chrome which makes viewing files much cleaner. Another great option for viewing items in this compact list view is ‘Content’ which you can see in the photo above. This would be also be a nice way to view files if you are multitasking and don’t want to take up a lot of screen space if say you’re using a netbook, just snap the folder to the side where you can scroll through the list of files or photos without cluttering the desktop space with unnecessary explorer chrome.

Detailed Pane moved

Another change to explorer which I particularly like is that the detailed pane is no longer at the bottom of the window which I always found to take up too much space but instead is now placed in the same position as where the preview pane exists, to the right side of the window. For power-users this will be useful, especially for photographers as the camera’s EXIF data is more prominently displayed.

Side-by-side Multitasking (Dual-Metro View)

Much like the snap function in Windows 7 (although this works differently) Windows 8 allows users to snap apps to either side of the screen for multitasking purposes. Essentially developers provide two layouts for their apps, one for fullscreen viewing and another for viewing in snapped mode. In the screenshot above I have opened to the left the Windows Store where I am viewing an app and to the right I have snapped another metro app which is Music - which by the way is poorly designed and thought out to the extent that the app is rendered useless.

Side-by-side Multitasking (Legacy/Metro View)

You can also use the legacy desktop while viewing a metro app. In this instance I am showing Adobe Photoshop running beside the People app displaying recent tweets from The Verge. (Unfortunately there are no social networking apps in the store as of yet but in a ideal situation when more apps are available I would have a metro version of Twitter or a news feed snapped to the side)

So what do I make of Windows 8 Consumer Preview? It is hard to say right now, as a designer I feel compelled to point out all the UX inconsistencies (which I will be doing in a later article) but I do realise that this is only a beta release and that I am assuming many features are yet to be revealed so I am reserving complete judgement till later builds are made available.

The main aspect that will determine if Windows 8 is a success on an UX level is if Microsoft is able to offer a great selection of extremely high quality apps that are not generic in the sense that apps do not merely stick to the default layout and controls (which so far all Windows 8 apps have done) but that they should make use of the APIs to create some innovative and creative interactive experience. Judging by what I have seen so far with Windows Phone and it’s marketplace I am not so optimistic. Will HTML5 be enough to convince developers to build these high quality apps? I’m not so sure.

“When you see a particular ability you admire,...

Fri, 09 Mar 2012 13:07:21 +0000

“When you see a particular ability you admire, don’t look for the talent, look for the work; If you want to achieve that talent work yourself and you will get there.” — Stefan Molyneux

A More Beautiful Web is… Internet Explorer TV Ad I’m...

Mon, 05 Mar 2012 16:59:48 +0000

A More Beautiful Web is… Internet Explorer TV Ad

I’m not an IE user but the TV ad looks compelling, much more engaging than the Google Chrome ads.

IE is definately not the sluggish web browser it once was, it’s suprisngly good and I love some of their new features. However, one thing still missing which makes IE unusable is the fact it does not offer conventional add-ons which extends the functionality of ones web experience.

So until they can provide a compelling selection of add-ons I will continue to use Chromium.

jonathanmoore: To Do List A personal project created by Yaniv...

Wed, 22 Feb 2012 18:47:24 +0000

jonathanmoore:

To Do List

A personal project created by Yaniv Fridman illustrating his to do (and not to do) list for “the things we cherish and aspire to in life”. Read more, browse less. Travel more, plan less.

“the point is that these devices are simply dispenses of...

Thu, 16 Feb 2012 17:25:58 +0000

“the point is that these devices are simply dispenses of content for us nowadays and so we want large screens with easy connectivity to any content we want. It’s less how the devices look and more about how they behave.”

Good aesthetics and industrial design will always be an integral part of the products we use going forward but I do agree with the notion that we are moving towards a time when sooner or later hardware will be less of a differentiating factor and UX (software) instead will be of more importance for both the OEMs and the consumers.

szymon: iOS ‘86 by Anton Repponen Despite this being a...

Wed, 15 Feb 2012 16:30:42 +0000

szymon:

iOS ‘86 by Anton Repponen

Despite this being a somewhat humorous conceptual design piece in which the iPhone user interface is swapped with that of the Macintosh’s low-fi pixel-based iconography. I have to admit that a part of me actually likes the flat 2D style, if the icons were in full colour it would look surprisingly clean and stylish.

"Our sub-conscious often tells us the answers"

Tue, 14 Feb 2012 05:14:31 +0000

“Our sub-conscious often tells us the answers”

- Greg Melander - Our brains are amazing tools that keep working on our design problems long after we have quit. How often have you worked all day on a design problem without results, until later when you are doing something else, the answer pops in your head. That is our subconscious telling us the answers. I have found our brains will make unlikely connections to help solve the problems at hand…we just need to write it down when the inspiration hits us. It isn’t magic, it is just how it works. (via gregmelander)

iOS Photoshop Actions & Workflows

Fri, 10 Feb 2012 16:11:10 +0000

iOS Photoshop Actions & Workflows:

Facebook changes Pictures Display Interface (again)

Fri, 10 Feb 2012 15:54:06 +0000

starbase421:

Facebook has improved its picture display system again. This time, the picture orients slightly to the left, and the original post and comments are place at the right. It looks very similar to Instagram’s display system… hmmm…

Better, but still not useful. To me it just looks like another boring ‘light-box’ with a Google+ looking comment list.

I want Facebook to adapt it’s layout based on photo resolution. So if the photo offers a higher resolution image then it should stretch full-bleed against the canvas edge and display a carousel below, showing more photos in the album allowing a user to jump to another photo without being taken back out of the experience which is jarring to say the least.

I just signed up for early access to MockupEverything, a...

Thu, 09 Feb 2012 00:02:18 +0000

I just signed up for early access to MockupEverything, a realistic mockup tool for designers.

Sat, 04 Feb 2012 20:31:48 +0000

BBC Homepage Responsive Redesign

Wed, 25 Jan 2012 20:26:00 +0000

The BBC homepage has recently been updated with a new much cleaner design. What is noticeably different is in how the webpage functions. Users navigate via a horizontal slider where content is broken up into 5 categories and sub-divided into 3 main screens (left, middle, right). Below the top DIV content is further organised into 3 sections which expand into accordions. The homepage uses a ‘responsive’ layout which will adapt to two different sets of layout styles.

Main Layout Style
A style for higher resolutions that takes advantage of the dead white space surrounding the main canvas area in order to display additional content. Something I have been urging websites to do well back in 2009, it just seems so logical especially now as larger monitors are more widely adopted.

Tablet Layout Style
The second style maintains the clean layout structure but cuts off the additional surrounding white space and reduces the navigation buttons to fit inside the window.

It doesn’t seem that they added an additional style for mobile devices which is unfortunate but I guess they did this because it will enforce their own mobile version to display or that they didn’t want to impact the page loading speed. Either way, the website looks pretty and is now good enough for it to become my web browser homepage. :-)

gregmelander: SUBWAY SYSTEM Helvetica and the New York City...

Thu, 19 Jan 2012 17:45:45 +0000

gregmelander:

SUBWAY SYSTEM

Helvetica and the New York City Subway System is a book describing one of the great parts of design history. designcloud

The original inspiration behind the Metro Design Language and Principles behind Windows Phone, Windows 8 and Xbox 360.

DC Ent Reveals New Logo Identity

Thu, 19 Jan 2012 17:39:23 +0000

When I first looked at the new logo design my first reaction was, oh it’s a peeled back fold over the letter C? But then when I read the thinking behind the actual process and how this identity may be used in website and mobile form it totally makes sense. It’s a fantastic example of the way things should be designed.

“We didn’t want a static logo, but a living identity that could capture the power of our characters and storytelling,” says Amit Desai, senior vice president of franchise management. “What is special about DC content is the notion of a dual identity. When you think about our DC Comics superheroes, there’s a secret identity. When you think about Vertigo, it’s this notion of good vs. evil in many of the stories. And so, in addition to flexibility, the new logo communicates this idea of dual identity: There’s more than meets the eye. You have to take a closer look to understand the richness of our characters and stories.”

Hence, the reveal aspect of the corporate mark.

The “DC” logo reads as a “D”-shaped page that pulls back to reveal a “C” that could either be an obvious letter or infused with elements of a property or character. Digital devices (computers, tablets, smartphones, touch-screen displays, gaming consoles) will enable users to peel back the “D” to expose a character, image, or story. The “C” can be customized to the colors and qualities of the property it’s promoting: silver and gray for the corporation, blue for DC Comics, or—as suggested by the graphic below—sparks for The Flash, green for Green Lantern, or a mist for Batman. All are unified by a common font—the serendipitously named Gotham Bold.

The logo’s adaptability will facilitate a fresh and innovative way to reflect ongoing corporate and creative initiatives. “The peel element can tie back to the storytelling content or character we’re showcasing, and leverage those colors,“ says Desai. “The ‘C’ can be a vessel to showcase stories and character. It’s unexpected, requires a little thnking and some storytelling behind that mark.”