Quantcast
Channel: Vectorform Labs » User Experience
Viewing all articles
Browse latest Browse all 10

Introducing Your Brand to a Metro Style Windows 8 App

0
0

Windows 8 Brand Intro Image

Designing Metro style apps on Windows 8 can be challenging just like any other new platform.  It is especially challenging on a platform that’s so radically different than its predecessors. The most fundamental part about abiding by Metro standards is to not lose your brand’s personality and unique elements in the process.  Metro as a design style should never replace your brand as a whole.

Using Metro as a foundation along with your brand’s style guide is key.  It’s a common misconception that every app will look the same if you’re using Metro properly.

Beyond the squares and tiles there is a well-established grid.  Beyond Segoe there’s the concept of a well-designed typographical-based layout.  Utilize your brand’s rhetorical elements and unique shapes.  Although Metro standards emphasize ‘content over chrome’ it doesn’t mean to throw out chrome altogether.  It means to use it sparingly and only when it makes sense.

A brand creates valuable emotional connection between a customer and a product or service.  The components of a brand will leave lasting impressions on its customers and this is what makes the product unique.  These components shouldn’t be thrown out to make room for Metro standards; they should simply be re-considered.  Brand elements such as messaging and voice, typography, rhetorical elements, logo usage and placement, color schemes make up the personality and identity of the brand.  They should be leveraged to differentiate the company in the marketplace.

Example of Brand Elements

So how do you find the perfect marriage between Metro and your brand? The answer is to revisit your brand’s core fundamentals.  Very few brands have “iPhone style app bar” as a core brand principle. Most brands focus on emotion through color and photography, typographical hierarchy, and a mission statement of their intended user perception. Returning to these key elements is the best way to adapt to the new Windows platform and will produce extremely compelling apps. So where do you begin when thinking about returning to the basics?

TYPOGRAPHY

First of all, you don’t HAVE to use Segoe for everything.  Segoe is ideal for large bodies of text or for captions in the same way you would use a web safe font (pre CSS3) on a web page.  Use brand specific fonts in areas that will showcase your brand, like for headings.

Example of Typography in Headings

Metro favors the use of typography over buttons with gradients and strokes. The list view is a common Metro section layout that features typography really well. This could also be a place to feature your brand’s unique typefaces.  Although brand fonts may be used, it’s a good idea to abide by the metro type ramp.  It’s flexible and helps keep the integrity of Metro while providing options.

PLAY WITH THE GRID

Don’t get stuck on the simple square grid layouts.  If you are using the hub and spoke navigation model and developing a panorama view as your hub, make it interesting. Use different sizes to indicate importance or what ever is relevant to what you’re trying to convey.  Use compelling imagery in your tiles; think about weight, proximity and color usage.

Examples of Grid

You don’t even have to use the hub and spoke model if your experience doesn’t require it. Explore other navigation models.

Example of Hub and Spoke Model

Hub and Spoke Navigation Model

KNOW WHEN ‘CHROME’ HELPS

I LOVE the concept of content over chrome.  Sometimes designers (myself included) will over design things to the point where there are too many bells and whistles, even if strategically placed.  These additional elements often get in the way of what the designer is actually trying to convey.  The first rule of Metro standards is content over chrome; it is meant to embody the concept that less is more. Be selective of what needs extra visual treatment to support your end goal. Unfortunately some of the apps that have early adopted this platform have a sea of black text that could be easily broken up by supporting visual elements or compelling imagery.

Example of Details Page

It is especially evident on displays with higher resolutions or different aspect ratios.

This is why it takes a skilled designer to work on a Windows 8 app.  How do you find the perfect balance between too much chrome and too little? Chrome should be used sparingly and only when it makes sense.

A great place to use a small amount of chrome is to differentiate between list items that have multiple data types. A simple background shift between each item could help the user identify each item better.

Example of List Items Separated By Chrome

Is this adding a little bit of chrome? Yes. Is it still keeping the content king? Yes. “Content OVER chrome”…not “Content ONLY.” The key is to eliminate the problem where people get frustrated by all the unnecessary UI that smothers the content they are looking for.

If your brand is recognizable through unique forms, patterns, and rhetorical elements, use them appropriately.  Don’t get stuck on squares.  Introduce diagonals or circles in the background or within a content tile to indicate fresh content or to distinguish one element from another.

Example of Rhetorical Elements used in Design

There will be times when a simple square will be enough but if you’re trying to create a unique experience, your layouts and applications should not be templates.

These methods of retaining brand voice through layout design are key for having a successful and memorable app. Metro standards guide the design to be grid centric, have beautiful type and keep the content front and center.  The same can be said about designing for any platform.  Remembering this eliminates the theory of: Metro = squares and lists.

Despite some criticism, Windows 8 is an excellent playground for designers looking to create unique and functional experiences.  It also is a great place for a brand to shine.  As long as Metro is used as a foundation rather than a template to just swap in text and background images, a designer has the opportunity to create unique brand experiences that are both compelling and easily digestible.  Metro is rooted in some of the best design principles in history and emphasizes good guidelines to keep in mind during the design process.

To view this sample project and to learn more about building great Metro apps please visit: design.windows.com


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images