BBC Homepage Responsive Redesign

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. :-)

DC Ent Reveals New Logo Identity

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

Inspiration: Petcurean packaging

See the rest here

Redesign: Windows Phone Marketplace UX

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.

10 Most Beautiful UI Shots on Dribbble

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!