Adam Haider | User Interface Designer

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

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

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.”

gregmelander: TYPOGRAPHIC DESIGN “Metro, the design...

Sun, 15 Jan 2012 13:04:32 +0000

gregmelander:

TYPOGRAPHIC DESIGN

“Metro, the design paradigm behind Windows Phone is in part, a celebration of typography. In this short film, godfather of modern type, Erik Spiekermann talks about how typography is used in the digital domain.” via nitingarg

Inspiration: Petcurean packaging

Sat, 31 Dec 2011 00:27:48 +0000

See the rest here

Redesign: Windows Phone Marketplace UX

Thu, 29 Dec 2011 19:21:00 +0000

The Windows Phone marketplace was the first website that Microsoft released that had a feel of Metro to it. It’s a dramatic shift from how Microsoft were previously designing their web pages. Text, DIVs and graphic elements have better spacing, heading fonts are better (but far from perfect) and because the page is cleaner looking it is a lot easier to navigate and find where you are.

The Problem? See below.

I highlighted the most prominent issues regarding the layout and design. There are certain aspects to the page that are either unnecessary or could be improved. Such as the way users navigation through app screenshots in a way that isn’t generically copying Android’s marketplace and improves upon what Apple has done with their basic horizontal scrolling. (that’s so 2007)

Disclaimer: All images used are for illustration purposes. No copyright infringement intended.

Compare the two images and you will notice a dramatic improvement. Elements on the page are correctly sized and positioned. And the main featured element on the page becomes the most important section, the screenshots instead of the tile icon which is still important but not so much that it takes away from the reason users are on the page in the first place, TO SEE THE APP!

How users navigate app screenshots

Instead of the generic grid of portrait images, users are presented with a modern stylish looking Windows Phone (HTC Titan) that immediately makes the Windows Phone marketplace stand out as unique featuring it’s own product with pride as the main interaction element.

Using the Metro Panorama UX:
What better way to illustrate the beauty of Windows Phone than to make use of the panorama controls as a slideshow. This can easily be done in purely HTML5 or as a JQuery script. (but should not be in Silverlight which is not supported on mobile devices)

* Notice something unique? The screenshots are displayed in their correct orientation and not forced in portrait. I imagine Microsoft uses some form of CMS system to input app data into the marketplace. Developers should be able to select whether their app should be displayed in portrait or landscape when submitting their app. The CMS will then use two different sets of CSS and asset files as templates so the CMS can make the adequate changes to reflect the orientation change. This solves the problem of a developer manually making the changes for each app.

Support for Video playback
Developers will have the option to feature a H.264 HTML5 video (Silverlight or Flash as a fall-back if they’re using an old browser) of their app in action that will play in-line inside the Windows Phone. Videos tend to attract more attention because by nature humans are visual so by creating more engagement with users they are more likely to take up a ‘call to action’ such as sharing, downloading or purchasing an app. (Videos must be in sizzle-reel style showing real-time playback through capture software and not a video captured through a camera with narration. This is to maintain continuity with a high-end level of quality)

Navigation controls
Users will navigate screenshots by either:

Clicking and dragging/grabbing the far right or left of a screen and moving either way
On a touch device? Swipe left or right because the slideshow would be optimised for HTML5, CSS3 and jQuery instead of SL or Flash.
Use the directional keys on your keyboard

There are rumours circulating that Microsoft may merge the Windows Phone marketplace inside the Windows Store and so my design proposal would by default be defunct. However I still believe that it is important that they pay more attention to little details as the UX and get that Windows Phone on the page.

"I’m no more intelligent than the next guy. I’m just more curious."

Thu, 29 Dec 2011 05:47:46 +0000

“I’m no more intelligent than the next guy. I’m just more curious.”

- Albert Einstein (via stoweboyd)

bylinebeat: Path app aims to make a social network more...

Tue, 27 Dec 2011 03:29:23 +0000

bylinebeat:

Path app aims to make a social network more personal

Interested in sharing more personal moments of life to a small group of friends rather than a large network? An app called Path could help.

Originally conceived as a way to post photos and videos for close family and friends to see, the app was re-released this month as a “smart journal” to enable users to share more about their lives.

“Because Path is a smaller network that’s built for the people you love — the closest friends and family in your life — people are willing to share more intimate content as a result of that,” said Matt Van Horn, a vice president at Path.

He added that although some of details of life might seem mundane when broadcast to the masses, they can take on a newlight when shared with closer connections.

“Taking a photo on the porch with your sister if you were to post to a larger network might not be that interesting. But if your mom, who is on the other side of the country, sees it then it’s magical,” he said.

The app also learns a user’s habits, such as favorite places, and can recognize deviations in patterns and broadcast them to their ‘path’, the social stream visible to a user’s connections.

Photo Credit: (path.com)

10 Most Beautiful UI Shots on Dribbble

Fri, 23 Dec 2011 21:55:17 +0000

pixelcloudsblog:

Today I have brought together what I believe to be 10 of the most beautiful user interface shots on dribbble. I hope this helps inspire you. Please feel free to add any others via the comment area below.

I hope you liked them as much as I do! Please share any others you love below!

And this is simply why user interface design rocks! Just look at that attention to detail with every pixel. As we enter into 2012 we are going to start to see a shift in the way apps are presented, display panels are improving in quality and mobile graphics are advancing which means for designers every pixel on the screen needs to be perfect!

40 Excellent iPhone App Website Designs

Fri, 23 Dec 2011 20:01:04 +0000

40 Excellent iPhone App Website Designs:

If you are a developer and own your own iPhone app, here is a collection of 40 beautiful websites featuring iPhone apps to provide you with some inspiration on how to present your app in a clear and visually appealing way. Below are my two favourite examples because they use my favourite blend of colours, which is lime-green, mauve and teal, in the perfect way.

Head over to DesignBeep to see the rest.

GOOGLE NAVIGATION MENU Google has updated it’s navigation...

Fri, 16 Dec 2011 19:44:00 +0000

GOOGLE NAVIGATION MENU

Google has updated it’s navigation menu from what was the fixed horizontal bar to what’s now a dropdown menu when hovering over the Google logo. This was most likely done for usability reasons, seeing as the average person focuses on left elements first which means it will now be a lot easier to get to common Google section. In terms of design, I would have preferred the menu to be completely white, I’m not sold on the heavy use of dark grey I think it’s detracting and at least should be toned down to a lighter grey.

gregmelander: THE NOUN PROJECT I love the Metro feel of...

Fri, 16 Dec 2011 19:26:00 +0000

gregmelander:

THE NOUN PROJECT

I love the Metro feel of this site. “The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world’s visual language, so we may share them in a fun and meaningful way.” via Tom Jensen