n Prag, who has an extensive print design background, and Didier Hilhorst, an incredible designer obsessed with everything from the smallest detail to the largest workflow. I think we make a great team. But I can’t forget about the rest of the company. More than often, many outside the design team have made huge contributions to the design of our app. Our iOS team is incredibly sharp in thinking about user experience. Our co-founder, Evan leads the pack in that front. And what an incredible team. True warriors. So meticulous about every single detail in the app. These are the guys who stay up all night, who work through weekends, just to get that transition right.
Designed to look great at small sizes and scale up elegantly.
We designed Maki with the goal of creating an international, comprehensive, and stylistically unified point of interest icon set. In order to maximize crispness and clarity, we've made three size variations for each symbol. Use all three sizes to scale the icons with the map as you zoom in and out.
Each icon is a single Photoshop shape layer, meaning they can be scaled up-and down-without loss of quality. Adding layer styles and blend modes is also a breeze.
I think most of you agree that when it comes to websites, design matters! Sometimes, that's what the project is all about. "Life moves pretty fast; if you don't stop and look around once in a while, you could miss it". There are some patterns which are quite easy to notice in how people design.
Back in 2003, I wrote a post about designing the blank slate. BTW: The web-based application mentioned in the post was the original version of Basecamp which wasn’t released until 2004.
The blank slate is the initial state of an application right after someone signs up. It’s blank, there’s no data, no photos, no content at all. A bad blank slate is like someone opening the door and just staring at you uncomfortably. A great blank slate is like someone opening the door, smiling, and warmly welcoming you inside.
Designing the blank slates for the all new Basecamp
We’ve been obsessed with the blank slate since the first version of Basecamp back in 2004. So when we designed the all new Basecamp (the 2012 version), we wanted to make sure we paid close attention to the blank slates.
We captured all the work that went into the blank slate designs in a Basecamp project called “Blank Slates”. We’ve made it entirely public so feel free to poke round. I’ll be highlighting some interesting parts below.
No projects, one project
Here we discuss what the projects list should look like when there are no projects. We referenced the rough sketch concept we liked from Sortfolio (then called Haystack). And here’s a related discussion about what the page should look like when you have a single project, no more, no less.
Fine art
Here’s a discussion we had about a “painterly-style” brush stroke on the blank slates. We saw the blank slate as an opportunity to “smile” at our customers with friendly colors and comfortable shapes. A brushstroke felt good, but we wanted to try on a few different styles.
A blank project
We struggled with how a blank project should look. In fact, we didn’t come up with the final design you see today until a few weeks before launch. But, here’s a particularly meaty discussion that shows a bunch of early design concepts.
No to-dos
What should it look like if someone doesn’t have any to-dos? Here, Scott and I discuss a few ideas and designs.
Designs galore
Want to see every design, iteration, and concept we discussed? They’re all on one page in the all new Basecamp.
Relive the entire project, one day at a time
One of the great new features of the all new Basecamp is the ability to page through an entire project one day at a time. This is especially useful if you’re out of the office, out sick, or otherwise too occupied to pay close attention to a project every day. Just sign in to Basecamp, click the Catch Up link, and page through the days you missed.
More public projects soon
We hope you’re enjoying these Backstage looks at how we used Basecamp to build Basecamp. We’ll try to post one a week for as many weeks as we have projects to share.
n Prag, who has an extensive print design background, and Didier Hilhorst, an incredible designer obsessed with everything from the smallest detail to the largest workflow. I think we make a great team. But I can’t forget about the rest of the company. More than often, many outside the design team have made huge contributions to the design of our app. Our iOS team is incredibly sharp in thinking about user experience. Our co-founder, Evan leads the pack in that front. And what an incredible team. True warriors. So meticulous about every single detail in the app. These are the guys who stay up all night, who work through weekends, just to get that transition right.
video by 37signals
A compilation of some older design explorations for the Projects screen in Basecamp Next. What you're seeing here are discarded ideas. But new ideas are often built on old ideas, so you may recognize some of the design concepts you see here in the actual final product.
Five essential tools optimized for the creative process to Sketch, Write, Draw, Outline and Color. Start with Draw and purchase additional tools from the in-app store.
Draw
Capture ideas beautifully.
This versatile fountain pen draws from thick to thin based on your movement. It's the quintessential drawing tool for any idea.Free
Sketch
Start with a sketch.
This soft lead pencil blends from light to dark for sketching scenes, objects, and ideas in rough form.In-App Purchase
Outline
Think bold.
Graph insights, draft a plan, or outline a presentation with this bold marker.In-App Purchase
Write
The power of words.
Write messages, add captions, or capture your thoughts with this quality ink pen. The written word never looked so beautiful.In-App Purchase
Color
Give color to your ideas.
Master watercolor as you move from a light wash to deep, rich color with the speed of the brush as colors blend naturally on the page.In-App Purchase
RETINA RESOLUTION
Built for the new iPad's brilliant display. With a full 2048x1536 canvas, see stunning details in your creations you couldn’t before—like pencil texture and watercolor edge bleed.EXPRESSIVE INK ENGINE
Our custom ink engine reacts to your movements to optimize each tool for the process of creation. Get a range of expressions from a single tool without fussing with settings for great handwriting, beautiful coloring, and sketching that just works.REWIND™
We love mistakes. Use two fingers to Rewind to any previous point in time without leaving the flow.
Get inthe flow.AT LAST, MOBILE CREATION DONE RIGHT. Paper was designed from the ground up for touch and creating on the go. It keeps you in the flow with no fussy buttons, settings or other distractions. Paper works the way you think, like a familiar notebook or journal. Have all of your ideas with you in one place.
Powerhouse Graphics.
Built with the powerful OpenGL framework, Paper is the first productivity tool to match the rich, immersive world of games with realtime 3D and shadows all with incredible speed.Keep moving forward.
Our custom gesture-based interface keeps you in the creative flow. No folders, buttons, or menus. Just tap to open, pinch to close.Make it yours.
Choose your own images to customize journal covers.
Paper theweb.Share your ideas instantly. Stream pages to Tumblr, send them over email, or share pages with your friends on Facebook and Twitter.
get a stylus.Paper is finger-friendly but for finer, more natural control we recommend using a stylus.
Disqus is a global comment system that improves discussion on websites and connects conversations across the web.
Side Projects
When not doing client work, I tend to keep busy working on websites and side projects that are fun and occasionally even helpful to others. Below is a selection of some of the projects I've worked on which are still up and running.
Don't Fear the Internet
Jessica and Russ (Strange Native) collaborate to demystify coding and teach html and css to the non-web-savvy.
52x52
Give to charity every week for one year. 52x52 was set up to help bring weekly attention to deserving charities and encourage people to give more.
Daily Drop Cap
Twelve alphabets worth of illustrative initial caps, this project is now complete but the site remains up for your enjoyment and inspiration.
I Can Haz Art School
Just for fun, I posted my high school portfolio and artwork from freshman year of college—before I really knew what graphic design was.
The Accidental Hipster
Jessica’s non-business writing blog which includes narrative restaurant reviews and essays about everything from tattoos to rain boots.
Inker Linker
Inker Linker is a great way to find the right printer. The site is searchable by service, availability, price range and of course printing method!
Should I Work for Free?
A very handy and humorous chart which will help you figure out whether or not a project should be done pro-bono or if the client should MAKE IT RAIN.
Mom, This is How Twitter Works
Not just for moms! This single page site helps explain the nuances of twitter. Now translatable to any language thanks to Google Translate and HTML.
Blurry Pictures of my Friends
A place for all the beautiful but "bad" photos you tried to take of your friends at dimly lit parties and social gatherings. Submissions welcome.
The Internet Sends Me Cake
The URL says it all. The project is somewhat defunct but the site remains intact.
Online portfolio and blog of graphic designer, web designer and illustrator Mike Kus
Interesting on hover effect in the picture.
View all ratings and reviews on Oink for Cafe Au Lait. Download the Oink app and start rating items today!
This post describes “How Print Design is the Future of Interaction,” a talk I gave at SXSW Interactive on March 12, 2011. The slides from the talk are available to view on Slideshare, and you can see some of the discussion that followed on Twitter here.
Introduction
There are three areas that I covered in the talk. First, how the visual language of UI has evolved and been shaped in to what we find in the interfaces we are familiar with today. Second, I’ll discuss why I think a new approach to the visual design of interfaces, influenced by Print Design, is emerging and necessary. And finally, why I think Print Design is an important influence to the next evolution of UI, and what we (as UI and Interaction Designers) can learn from the discipline of Print.
When I talk about “Print” here, I’m not interested in the literal transfer of printed media on to screen, like we see in some applications which try to recreate the exact textures and layouts of newspapers, for example. What’s interesting for me is the broader practice of designing for print over the last few hundred years, and the resulting principles of design and information communication which they’ve refined. It’s those fundamental principles of Design which I think have a huge amount of relevance and are important to Interaction and UI Design.
A Brief History of Interaction Design
If we trace the history of modern User Interface, it all begins with Vannevar Bush’s Memex machine. In a 1945 letter to the editor in The Atlantic Monthly, Bush described a machine built in to a desk, that would allow its owner to store, annotate, and link documents and media. The interface to the desk was two displays; one would display information, the other was a surface for taking notes, annotations, or linking to other material. The machine would help humans organize large collections of knowledge, and is regarded by some as one of the original blueprints for the modern web.
At the very least, the Memex was an important inspiration for the first computer designs at SRI and Xerox PARC, which formed the foundation for the PC’s we use and live with today. In 1973, the first graphical user interface was built at PARC, using the desktop as a metaphor. The UI introduced windows, icons, menus, file management, and tool palettes. Looking back at the screenshots of this first GUI, the designs feel familiar even now. In 1974 PARC developed a What-You-See-Is-What-You-Get cut & paste interface, and in 1975 they demonstrated the first pop-up menus. The desktop concept was pushed quite a bit further by 1981 in the commercial Xerox Star PC interface, which was an important influence for the PC UI’s created at Microsoft, Apple, NeXT, and Sun Microsystems. In the 80’s and 90’s, the metaphor was extended (with much less success) to include other tangible objects and environments such as offices, bookshelves, doors, hallways, people, animals, and even streetscapes in Magic Cap and Microsoft BOB.
Fast forward years later to modern PC interfaces and you can see those same initial metaphors and design patterns have firmly cemented themselves. The increase of resolution from 16 to 32 bit saw UI rendered in increasingly greater detail. The extra pixels and colors gave our metaphors the textures of real materials, including bevels, glows, shadows, reflections and gloss. Controls are rendered as knobs, switches, dials, tools, and three-dimensional buttons to evoke the familiarity of their analogy counterpart.
The extreme rendering of interface elements has become sophisticated, but hasn’t subsided. Media, like books, photos and music, are packaged and presented with outdated details, shading or textures to simulate the look and feel of real world artifacts. While most mainstream UI’s rely on simulated texture, drop-shadows and lighting effects to mimic the materiality of their metaphors on an upright 2D plane, some concept interfaces like Bumptop push the desktop metaphor deeper by adding a 3rd dimension to the desktop, and physics to the icons to allow them to move more realistically across the desktop surface. On the web, the Web 2.0 aesthetic streamlined and cleaned up the look and feel of the desktop, but the metaphors and textures remain. As computers have become faster and resolution surface higher, the focus of visual UI design has been on polishing metaphors rather than exploring other approaches: more detail, more shine, more texture, more depth, more shading, more transparency. It’s as if we are trying to rebuild the physical artifacts around us inside of our computers. But that approach makes less sense today than it did 30 years ago.
Because of bandwidth constraints and limitations of rendering technologies, UI development on the web saw a different approach from UI on the desktop. The focus on the first web sites was on delivering only the most essential information, which came in the form of text and links. Over time, websites added more information and more content, such as photos and videos, so the design of websites has been primarily focused on improving the organization and interactivity of that content. Rather than recreating and polishing physical control metaphors, the web polishes the information instead.
Artifacts and Information
The first interfaces were built on a need to communicate what they were. They were like a desk, but better. They were completely new, so an approach of direct representation was appropriate. To understand that a word such as “ok” was a new kind of action; surrounding it with the texture and shading of a button made it clear that it should be pressed. Today however, most onscreen content is assumed to be interactive. The literal analog affordance is no longer necessary, and yet, it’s the default path that so many interactive experiences follow. We don’t need to make an eBook look like a book for people to understand how to use it. The book isn’t the cover and binding, it’s the images and the text that make the story. Similarly, a movie doesn’t need to look like a DVD on a shelf to understand that it belongs to a collection, and an audio mixer doesn’t require cables and knobs to be capable as a tool, and a Notebook does not require leather and a spiral bind to be familiar. In the early days of interaction design when software concepts were best explained through heavy handed metaphors, the familiarity of these objects and textures was appropriate. However, the rendering of artifacts has outlived its usefulness as the definitive approach to UI design. As Designers we should be critiquing it for what it often is: shallow, meaningless, and often distracting from the information it surrounds.
“Leather buttons…feels very much like real leather buttons would feel: Tacky. It feels wrong and it is wrong. It’s kitsch. If you favor style over function to make something look like something it is not, you are not a product designer, you are an illusion artist.”
— Oliver Reichenstein
“Chrome arises from a chronic case of object-envy. We like interacting with physical objects in the real world, goes the reasoning, so it will presumably be more pleasant to interact with computer software if it pretends to be a physical object too. But why?
— Steven Poole
Functionally speaking, the use of analog metaphors are at best limiting, and at worst, misleading. I expect that my digital and networked content has new and superior capabilities compared to that of my physical and unconnected content. The new interfaces that are needed to support these emerging interactions continue to break down the usefulness of any surrounding analog metaphors, if they aren’t outright hindered by them. For so much digital content, there is no good metaphor to render anymore – the content is just information, text and images – so new approaches to visual UI design are needed. In an age where our interactions are information-based rather than tool oriented, a visual communication language that is hinged on arcane artifacts is no longer relevant. The value of interfaces today is the information it wants to present, not the physical vessel that the information once resided.
“…a networked, digital, interactive copy of, say, the Tao Te Ching is simultaneously more and less than the one I keep on my shelf. You give up the tangible, phenomenological’isness of the book, and in return you’re afforded an extraordinary new range of capabilities. Shouldn’t the interface, y’know, reflect this?”
— Adam Greenfield
This change in value deserves a change in expression. Interface mechanics themselves are no longer something that needs to be explained or reinforced. As interaction designers, our role of making UI’s familiar as tools has shifted to one of communicating vast amounts of connected information. It tilts the form and function balance from a focus on how things work to how information and meaning is conveyed. The visual quality of UI is critical, but, today we owe more to the existing look and feel of digital devices to the engineers at SRI and Xerox Parc, than the early leaders of information design such as Paul Rand, or Massimo Vignelli…Learning from Print
As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. The movement of the International Style – or Swiss Style – in particular established a way of thinking that is particularly relevant to challenges that concern Interaction Design now.
The International Style rallied against the overuse of ornamentation, embellishment, illustrations, and decoration that was common in graphic design prior to the 1950‘s. Functionally, the International Style created a foundation for thinking about information that is very useful for UI Design: a mathematical grid for organizing information, a tight structure, iconography that is recognizable and memorable, simplicity and clarity through the fierce reduction of clutter, authenticity, objectivity through photography, and a keen attention to detail. Even as Graphic Design has continued to evolve, those principles of design persist as a foundation in contemporary Print Design practice today.
In 1999, Jakob Nielsen stated that “Anything that is a great print design is likely to be a lousy web design. There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses.” I disagree. The design principles established through the history of Print Design are also true for Interaction. In our exploration of the differences, we’ve forgotten how much they are the same. They are both about clarity in communication and simplicity through systems. I believe we can learn from Print Design and apply to Interactive experiences:
1. Hierarchy and Structure with Grids
“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
Much of Interaction Design is about reducing complexity. A grid system organizes information in a logical, consistent, and meaningful framework, which both designers and developers can work within. A grid provides anchors for the eyes, improving readability. Strong use of geometry in a layout creates a visual hierarchy that allows users to easily scan and discover information.
2. Confident use of Negative space
“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove” — Antoine de Saint-Exupery
A common goal of UI design has been to densely pack as much information as is possible on a given screen. However, giving content some space to breathe provides critical focal points. It allows the positive space to communicate clearly and create impact. A balanced page makes the promoted information more easily digestible.
3. Reduction of Elements
“Less is More” — Robert Browning
“Make everything as simple as possible, but not simpler” — Albert Einstein
UI elements clutter the content it contains. The role of the designer is to edit, to find balance. Reducing an interface to only the most essential elements puts focus on the primary tasks of the UI. What may be lost in information density is gained in simplicity. The resulting UI will feel light, smart, easy, fast and responsive.
4. Objectivity through Imagery
Though much of Swiss graphic design is remembered for its powerful use of typography, photography was also an important part of the style. Photos were seen as a more accurate means to convey information compared to illustrations. Similarly in a UI, it’s the content that people want, not the chrome. Using imagery instead of iconography or illustration reduces the need to translate metaphors, and promotes direct interaction with content.
5. Emphasis on Typography
Emphasizing typography is not about reducing an interface to only text. Good type is about appreciating the ability of type to create impact, hierarchy, direction, and rhythm through size and weight. Diogo Terror described the power of a typographic approach to UI well in Lessons from Swiss Style Graphic Design:
“Font-size is a tool for readability, impact and rhythm. Different font-sizes not only generate visual impact, but also provide readers with a hint about the hierarchy of the presented data. Huge words are the entry points, the top-level elements in the content’s information architecture and page’s hierarchy. This is a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.”
6. Proportion and Pacing
In Print, the proportion of elements creates a pace for a story to unfold over time. It leads the direction of the eyes over content, and gives character to the information.
7. Universal Iconography
The International Style pursued standardization and simplification of iconography so that icons were universally understood. The use of icons today has become so rampant and gratuitous that we’ve lost a lot of common understanding. They are used too often as decorative elements and are losing a lot of communication value.
Inspired by Print
There are already a lot of designers that beginning to approach UI in a way that is inspired by Print Design. A couple years ago Dustin Curtis popularly proposed a redesign of the American Airlines front page. Though he didn’t explicitly state print being an inspiration, the clean, photographic, and strongly structured result feels familiar. In my own spare time, I’ve toyed with a redesign of facebook.com using print principles. At this year’s IxDA conference, designers from Adobe cited print as an inspiration for the new Photoshop.com. At Microsoft, Print Design has been an important inspiration for a lot of work, going as far back as Encarta 95, Media Center, and more recently in Zune and the Windows Phone 7 redesign. Some other recent examples include the Nike Betterworld microsite, Edition 29, Flipboard, and the Popular Science magazine app designed by BERG London.
The Undesigning
In an essay in The Atlantic in November, Dylan Tweeney attempted to dissect the trend behind new content readers such as Flipboard and Readability. He describes the separating of content from its original format in to clean, minimalist, easy-to-read designs as “The Undesigned Web”. It suggests that users don’t want design, and are taking to minimalist, “undersigned” tools like Instapaper for relief. It’s unfortunate that “Design” has become synonymous with noise, overly graphic, heavily decorated, ornamented experiences that stand in the way of content. The problem is well described by Andrei Herasimchuk in his post, The Culture of Fugly:
“Paul Rand famously wrote: The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring. In the context of web and high-technology product design, this observation from Mr. Rand takes on special import.”
- Andrei Herasimchuk
It’s with that in mind that I believe UI design needs to look to Print Design as an inspiration and a quality bar to hold our work to. Regardless the debate of whether Print is dead, Print Design is not. We need the thinking, the aesthetic, and the quality of Print Design applied to the digital surface. And we need the designers that are skilled in Print to bring their sensibilities to User Interface design. The so-called undesigning of the web needs to recognized as the best examples of design today, not a lack of.
“I say that flat is the new black, that 2D is the new avant-garde; that a surface doesn’t have to be ashamed of being a surface”
- Steven Poole
Products like Flipboard are attractive because they are consciously and carefully designed to highlight the content, instead of crowding the experience with UI tools. The design of these experiences is being driven by new thinking in interaction design, where visual design is central to the experience, rather than painted on at the end. Once the traditional elements of UI are torn away, designers can concentrate their efforts on working iwth the content that remains. And it ends up looking a lot like Print. If we pull Visual Design to the front of the product creation process, we can break free of the bad design habits that surround us. As Interaction Designers we can stop polishing our icons, and focus on communicating the content inside, clearly and with style. The rewards are simple: more beautiful products that are easier to use, and beautifully branded experiences with more room for self-expression.
De BeneficiisBook I.
Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. Nor need we wonder that while the greatest vices are common, none is more common than ingratitude: for this I see is brought about by various causes. The first of these is, that we do not choose worthy persons upon whom to bestow our bounty, but although when we are about to lend money we first make a careful enquiry into the means and habits of life of our debtor, and avoid sowing seed in a worn-out or unfruitful soil, yet without any discrimination we scatter our benefits at random rather than bestow them. It is hard to say whether it is more dishonourable for the receiver to disown a benefit, or for the giver to demand a return of it: for a benefit is a loan, the repayment of which depends merely upon the good feeling of the debtor. To misuse a benefit like a spendthrift is most shameful, because we do not need our wealth but only our intention to set us free from the obligation of it; for a benefit is repaid by being acknowledged. Yet while they are to blame who do not even show so much gratitude as to acknowledge their debt, we ourselves are to blame no less. We find many men ungrateful, yet we make more men so, because at one time we harshly and reproachfully demand some return for our bounty, at another we are fickle and regret what we have given, at another we are peevish and apt to find fault with trifles. By acting thus we destroy all sense of gratitude, not only after we have given anything, but while we are in the act of giving it. Who has ever thought it enough to be asked for anything in an off-hand manner, or to be asked only once? Who, when he suspected that he was going to be asked for any thing, has not frowned, turned away his face, pretended to be busy, or purposely talked without ceasing, in order not to give his suitor a chance of preferring his request, and avoided by various tricks having to help his friend in his pressing need? and when driven into a corner, has not either put the matter off, that is, given a cowardly refusal, or promised his help ungraciously, with a wry face, and with unkind words, of which he seemed to grudge the utterance. Yet no one is glad to owe what he has not so much received from his benefactor, as wrung out of him. Who can be grateful for what has been disdainfully flung to him, or angrily cast at him, or been given him out of weariness, to avoid further trouble? No one need expect any return from those whom he has tired out with delays, or sickened with expectation. A benefit is received in the same temper in which it is given, and ought not, therefore, to be given carelessly, for a man thanks himself for that which he receives without the knowledge of the giver.
Let’s make our Windows Phone apps look great, ok?
I am not a designer. I am not a developer-designer. I am a developer and spend my days coding. But I love the concept of “metro” design and believe that it has the potential to bring a beautiful story to Windows Phone, and potentially millions of people. This is Microsoft moving beyond battleship grey buttons for its developer base, and all we need is just a little extra help to get there.
I don’t have a design background, my app is not the most beautiful app ever, but I’m fairly confident in what I would regard as a “80%-accurate” metro implementation. I’m trying to mimic the core Windows Phone operating system’s design, and in return users are getting a consistent interface, and one that respects their desires for how their phone should work.
Over time we can all work together to make all the apps beautiful by default, it doesn’t need to be a special exception to the rule.
If metro was inspired by transportation, just remember that there’s some awful looking transit out there. A few misaligned margins and your app’s going to look like a rusty bus. Just a little maintenance every time you create a page, check-in a page, or look over your app before submitting to the Windows Phone Marketplace will not only yield a good-looking app – but will probably get you some good recognition, too.
What sort of transportation best defines your metro-inspired app? Is it clean, functional?This is my first attempt to share just a few things that I’ve learned while developing a few Windows Phone applications, as I feel that developers just love rules, so maybe having suggested rules will help. We love to fight about code style guidelines, and this whole “metro-design-thing” is really just more of that. Please, let’s get some comments flowing on the topic, start a discussion, and I hope to revise this kind of thing and publish again. I started this list in December and am very happy to share it!
I’m talking about
- simplicity
- ease of use
- discoverability
- conformance
- the right alignment & spacing
- using the proper styles
- other random tips and suggestions
Scott Barnes has previously covered a lot about the potential of metro for developers, calling it the first real compromise between developers and designers. He goes on to say “Metro simply put feels like I am shoplifting design. It’s not a lot of work and the main focus I have is controlling myself from adding too many elements to the screen or keeping the typography unbalanced.”
I read that to mean “copy what the phone does! it is simple and works!” – I’m also focusing here just on the Windows Phone user interface, but it could apply more openly to other apps and platforms in some situations.
I created these tips while building 4th & Mayor. It’s almost like a checklist, I s’pose. Originally ported from my OneNote notebook… and sorry, not enough visual examples.
“Metro” rules for codersIn no particular order…
Metro 100
Resources and Styles exist for a reason
The default Windows Phone styles exist to help you make your application fit in with the intended visual design and appeal of the Windows Phone. You should use styles with text, and consider using the static resources for margins, spacing, brushes, and more.
You’ll find the file with these special resources defined here on a 64-bit machine:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\
Understand what margins you get with styles
Styles may bring in a margin. If you have a StackPanel with both a text block and a button, you should have:
- The TextBlock requires a style such as PhoneTextNormalStyle or PhoneTextSmallStyle
- The button has no style (the default style is already appropriately setup for use in all phone apps)
If you do this properly,you will notice that the button and text are properly left-aligned.
If instead you just have a text block as-is, and a button, the text will be 12px to the left of the Button. That is not good at all! You want a visually straight line in your app on the left.
Mind the gap: Alignment, spacing and margins
12px is the golden Windows Phone number
Almost everything in the grid of the Windows Phone design system is pretty much 12px. Sometimes that means a margin of 12px, added to a container that is already left-aligned out by 12px, yielding a 24px actual visual amount of pixels – but it’s about 12px increments.
In some situations it may be appropriate to use 6px or 18px numbers (often when spacing text and other elements vertically), but try 12px first, it’s consistent and clear. The magic number of Windows Phone.
Pages should align to the left, and a pivot header item should align down the left of the page
Your page should have a nice, visually crisp line that is 24 pixels from the left of the device’s screen. It may be easiest to test for this while using the light theme on the phone. Pivot header items naturally should line up to the 24 pixel point, allowing for a quick and easy visual check. Don’t forget to check every single pivot item so that your UI is completely great.
Text that uses the proper styles should be aligned fine with other controls like the Button. Do not allow items to be indented by 12px, or back by 12px, the jagged line is not attractive and breaks the clean design line.
ALIGNMENT IS KING
Repeating… It is worth shouting out: alignment is one of the easiest ways to make your application look professional, easy to follow, and takes very little effort on the part of the developer. Align everything.
Scrollbars are flush with the right of the device
This means that often the margin of a ListBox may be “0,0,-12,0” – to offset the difference and allow the scroll viewer to be flush with the device. In some situations it may need to be –24px or 0px depending on the container and other situations.
Text that does not fit should be clipped, flush to the right
Unless you have a specific business reason to use ellipsis at the end of an item (which is not officially supported in Silverlight 3 and therefore the current Windows Phone release), just let content “clip” at the far right when it is longer than the device. Of course, wrapping has a place, so wrap if you don’t want the clip.
Don’t fade the “clip” at the end.
Colors and brushes
The static resources for colors and brushes exist for a reason, and should almost always be used.
Avoid hard-coded colors
Hard-coded colors introduce bugs and may affect marketplace ingestion in light or dark theme modes.
There are a few situations that may warrant a hard-coded background color when the color is the same in the light and dark themes, as well as a situation where a fixed foreground of white may be acceptable – in a long list selector’s group header, for example, when the background is the phone accent brush.
Accent colors were built to be used and respected
Respect your users. Honor their accent color choices by using that color for important user interface elements that indicate touchable elements, actionable information, headings, errors, etc.
Use accents sparingly and mostly for emphasis
Accent colors should be used to differentiate content but not to confuse the user. A good data-heavy example application is the people hub in the Windows Phone – open any person’s information up and see how it presents the headings and text for items such as phone numbers and e-mail addresses.
Use the light theme often
Dedicate at least one day a week to using your application, both in the emulator and on the device, in the light theme.
Change accent colors as often as you change your t-shirt
You want to make sure that you are using and respecting the user’s personalization choice for their device. They’ve made it yours, and now you have the option to make your app personal to them, too.
Tread carefully with branding
A brand and its coloring is important, but consider that not all users will want to have the brand’s colors and experience oozing from every corner of your application. A simple logo or small amount of contrast in the user interface, centered around the brand, may be enough – coupled with respecting a user’s phone light/dark theme and accent color choice.
Beware the pains of light-only and inverse theming
If you want to go for the light-forced experience like the Mail app, you might find that it’s a big challenge. Having to retemplate controls, templates, styles, and so on, it’s a big challenge, and easy to get wrong.
Text
Text is a super-important part of metro. Love text. And love Segoe WP!
Always use a text style
They exist for a reason. They give you the phone margins of 12px on the left horizontal, so you want that. Without it, you will have misaligned visuals.
So this is the GOOD text example:
<TextBlock Text="Good Text" Style="{StaticResource PhoneTextNormalStyle}"/> <Button Content="text"/>Use PhoneTextNormalStyle often.
It’s a pretty easy-to-read style and should be the default for most UI.
Use PhoneTextLargeStyle occasionally.
It’s good to use for special visuals like groups, important instructions, and some UI features (such as loading text). Often this is combined with a PhoneAccentBrush on the foreground for even more visual distinction, especially if the item can be interacted with.
Use PhoneTextSmallStyle sparingly.
For small text, such as detailed info or legalease, it might be a good fit. Otherwise it is often too small for many users to easily read and digest.
Do not hard-code font size, font family, or other properties
You should not have hard-coded font sizes or families, unless you are using the static resources to make a specific change to text. (It is o.k. to reference the PhoneFontFamilySemiLight and PhoneFontFamilySemiBold resources, for example, but not to FontSize=”16.667”.
Do not use raw text blocks (without a style)
A text block without a style is a bug with the small exception of including a hard-coded margin of 12 on the left. It may be acceptable to achieve a desired look to have a margin such as “12,18,0,6”, for example, but in most situations this is easier to accomplish by using a style such as {StaticResource PhoneTextLargeStyle} and then just overriding the Margin value.
Text boxes and password boxes should be watermarked text boxes
Although not built into the phone, you will have a more beautiful UI if you use watermarked text boxes and password boxes instead of field labels and then the text box.
Evaluate every text block for its wrapping potential
Every single TextBlock instance needs to be evaluated for the need for wrapping content. Descriptions, important titles and place names, etc. should probably have a wrapping experience and not clip. Don’t forget to think about pivot titles, either, which may need a wrapping title.
Text boxes should tombstone nicely
Remember to tombstone the contents of a text box. You can do better by also storing selection information or other important properties. In some situations, you may even want a tombstoning text box to record its focus information, so that when the app activates again, you can even have the software keyboard open (text box focused).
Hyperlink Buttons
They can be difficult to touch accurately, especially the default template, and when in a big list of other hyperlink buttons. Be careful.
Double-check target names for web addresses
It can be very time-consuming to test every single hyperlink in an application for its behavior. To avoid unknown or unexpected crashes, if using an absolute URI (such as a web site or address), check that the TargetName is something such as “_self” or “_new” to enforce the browser opening.
Consider re-templating for additional touch target space
You may want to use negative margins or other tricks to give hyperlink buttons just a little extra space (such as 6px top and bottom) to still have a clear appearance but to allow for more touch target space.
Images
Large image thumbnails look wonderful.
Instead of sticking with the small thumbnail experience often used in other platforms, think about having beautiful, large images within a wrap panel. You will have a nice-looking UI if you have 200x200px images, for example:
Full-bleed images have a place
There are situations where a full-bleed photo, image, or user interface element is appropriate, will look great, and give users maximum screen real estate for the bleed item (item that goes to the edge of the device’s screen).
For example, here is a static map that bleeds to the edge of the screen:
Link images to a large image viewer
It is a nice courtesy to have image thumbnails actually be buttons that move to a full-screen photo/image exploration environment. Whether that environment just shows the picture (in any orientation), or goes above-and-beyond to also do pinch & zoom, is an exercise left up for the bored developer.
Scrolling & Touch
Always check the light theme and look for your scroll bars
A very common mistake for developers who override the theme to be light (to mimic the behavior of the official Mail app for Windows Phone) is to not re-template the scroll bars throughout the application. This is difficult, as it may require retemplating scroll bars, scroll viewers, list boxes, and more.
If you simply change a background color, and do not retemplate the scroll bar, you’ll usually see no scroll bar at all – it’s a white-colored object on top of a white background, and not so useful!
Scrollbars are flush with the right of the device
A repeat, but worth it: even the official Twitter app for the Windows Phone got this design nit-pic wrong, and scrolling feels disconnected as a result. The –12px margin is your friend.
You may have 6-12px too many at the top of a list
In some situations, your scrolling containers, items, or other elements may in fact be 6px or 12px too low. To ensure the proper alignment, touch the scroll viewer and move your first up just a very slight amount. Your object should immediately start to get clipped, indicating that it was properly positioned at the very top of your scroll viewer.
You might need to use a negative top margin of -6px or –12px to fix this small thing.
Remember to pad the bottom of scroll viewers or ListBoxes
If you have item templates or others that do not include a bottom margin, it may be possible for your list to end with the very bottom of the content being flush against the bottom of the phone (or the application bar, or other visual underneath). This often is not a visually appealing thing, so you might need to add a bottom margin of 12px to the template or container.
Tombstone scroll viewers to be nice to your users
Users expect that if they leave your app, have scrolled down a list, and come back, that it is restored in the same position. It takes more work as a developer, but really shows off the polish your app can have.
Bounce the touch screen often
You should always be touching your screen. Even when nothing looks actionable. Almost everything needs to be contained in a ScrollViewer, even if it is a simple page. Here’s why:
- Landscape pages are difficult and annoying if nothing scrolls!
- If the software keyboard opens up, it will want to use the scroll viewer to adjust the viewport just right.
- Many users expect the main content of any page to have an associated bounce effect.
- Including a scroll viewer will make sure that landscape mode or re-using components in other amounts of screen real-estate will still yield a usable result.
System Tray
Please have a system tray on most pages.
I personally expect to have the system tray available at almost any time. When I am running an app, I really do want to know the time, battery life, if I’m on 3G, etc. Please keep the system tray on pages that you create. Even if it means there’s a little visual glitch / gap at the top where you cannot control the color of the system tray. It’s worth it from a functionality standpoint, I believe.
Application Bar
Favor 3 menu items in an application bar (or 5) if any
The application bar moves to a specific size depending on the number of menu items in it. If you have 4 items, it will show the size for 5 – so visually it may not look quite right. Try optimizing for 3 or 5 menu items if you can for the best, tightest look.
Consider making the app bar transparent on photo pages when there’s a menu of choices
There are situations where an Opacity=0 app bar is the right call, leaving just the ellipsis for the user to touch to get to menu items. If you don’t have any icons, consider it, but keep it consistent.
Every page in your app
Take the time to double-check every page, no matter how minor, so that you can ensure integrity in design and a consistent experience for your users. This is about XAML and not visual design as much.
Page Orientation
Be consistent, and consider allowing every single page in your app to be viewed in both Portrait and Landscape, with the exception of Pano.
Panorama pages should only use the Portrait orientation
Due to the large title font size of a panorama (hub), such experiences should only be contained within a Portrait-designated page.
Tilt Effect
Be consistent if using the tilt effect attached property by including it at the top of every page in the app.
Toolkit Transitions
If using the transitions from the Silverlight for Windows Phone Toolkit, remember to audit all of your pages for the transition service being set. By default no transition service data means no transitions for any page lacking this data.
Consistent XAML XML namespaces
For your own sanity, and that of your team, consider using a standard set of XMLNS names that you can include in the top of pages. Wavering or changing them per-page may yield to difficult to understand XAML when comparing across the app, or working with designers.
Avoid per-page progress bar experiences
It is often easier to have a single performance progress bar instance in the frame of the app, binding it to your data model’s loading events. This reduces the overhead of many progress bars, and is easier to hook up for automatic load detection and notification.
Avoid popups {a performance tip, not a design thing}
The popup control in Windows Phone can have negative performance implications, not allowing its members to be properly accelerated. Consider using a trick method where your frame contains an overlaying Grid instead of a Popup control.
Panorama / Hub Experiences
Hubs should be like a magazine cover.
Keep it simple, engaging, users must click something to go to a sub-page.
Consider a pivot control instead.
Panorama is a “hot” and popular control to offer that hub experience in any app, but it can be overused. Consider whether a pivot control may be more appropriate.
Whitespace is wonderful.
Help the user to focus on just what is important. Do this by minimizing the number of things to distract them: less text, less crazy pictures, just a few simple things. It will go a long way.
Interactive controls don’t usually belong on a panorama page.
If you start seeing buttons, text boxes, password boxes, check boxes, or other multiple control types in a panorama item, re-think whether it’s a magazine cover at that point, and perhaps redesign your app’s experience.
Use at least 3 panorama items in a pano.
If you use only 2 panorama items, you will not get the appropriate visual mirroring, and may see visual glitches. 1 panorama item is not supported. So, start with 3, and try not to have many more than that at all.
Pivot Control and Pivot Items
No more than 7 items please.
It’s a general guideline (I believe from the official UI guide) that 7 items is the max. But that doesn’t mean you should always use 7 pivot items in a pivot control!
Pivot item margins may need to be altered in some situations.
In some advanced scenarios, it is appropriate to set the pivot item margin values. Examples include edge-bleed images and multi-select controls on the Windows Phone (such as the Mail application). Building such a control is another challenge but it will be clipped if the pivot item is smaller than the edges.
Consider a new page instead of a new pivot item.
When adding a new item or data type to a pivot page, think long and hard about whether it’s an appropriate additional as yet another pivot item. For less-used data and information, perhaps a link to a new page with that content may be more appropriate. It will also yield better performance, having less in the visual tree, a quicker startup time, etc.
Always restore the right pivot item when tombstoning.
As a courtesy, a polished app should store the pivot item you were on and when you come back, make sure you’re looking at the same thing.
Using the correct language/wording for your users
You want to maintain a simple, friendly, friendly voice in your application. More is available in the UI Design and Interaction Guide for Windows Phone 7.
App polish
You need a basic but slick about page.
All great apps should have an about page, to offer information about the developer (or company). Though the marketplace guidelines no longer require it, do consider offering support contact information, a feedback link, and links to privacy policies and other guidelines as appropriate.
The about page should be easy to locate in your app, not hidden away too much.
Consider including legal notices.
Consider including the text of legal notices for components that you’re using in your application. This helps give credit to the components that make your application possible, credit the authors with a little pride, and helps protect your application as appropriate by complying with any license terms.
Message boxes: throttling
If you display a message box to your users (especially for errors or notices), consider using a throttling mechanism to limit the number of message boxes per minute that might appear.
Message boxes: consider custom buttons
Consider building your own message box look-alike to offer buttons with actionable text (such as “delete file” instead of “ok”).
Message boxes: consider a checkbox to stop the reminder type
If you add a reminder for your users to go to a meeting, or to review your app, or to purchase your trial app, consider adding a check-box to a custom message box-looking popup, allowing the user the stop the type of notification in the future. The flag is an easy true/false value to store in your app settings.
Phone numbers
Always display a phone number in a hyperlink button when possible, linking that action to make a phone call. You may need to extend or use custom helpers to get the right behavior.
Consider “random witty banter”
A fun experience app developers often use is that of “witty banter”: that is, friendly headings or text that often change randomly. For example, by having a library of sample text, you can offer watermarked text box that has a watermark that says “search for pizza”, and sometimes “search for Italian”, making the experience a little more fun, friendly, and engaging for the user.
This also helps remove boredom: a user likes to see their apps come alive, and fixed, static text, is never that much fun.
Getting the reviews you deserve
I hope these tips help you. Often all people want to know is how to improve the perf of their apps, and though important, a lot of an app’s review is about perception as well, granted you have your functionality down pat. As of 3/24 my app is currently the #1 free app in the Windows Phone Marketplace by rating, skyrocketing to the top – and those 5 stars often are attributed in reviews to some semblance of an emphasis on the metro design. Sample 5-stars:
“UI is well-designed!”
“Simply irresistible”
“Optimized for WP7, Metro UI, and fast”
“Excellent app very well done uses the metro design language beautifully
”
“Shows how easy and beautiful a WP7 app can be.”
“Simply, this is how WP7 apps should all look.”
“Wow, you’ve encouraged me to go out and look into building my own metro WP7 app!”
This makes me think, we can all do so well. Enjoy the tips, I hope they are useful. And tell me when I’m wrong! Let’s get those 3-star apps up to 4-star, and so on, thanks to more consistent design. And remember to mind your margins – all 12px of it when appropriate for alignment.
Hope this helps. Photo credits: Westminster Tube ‘06 by Davide Simonetti and Old Bus by Barry Maas.
Don't mimic UI elements from other platforms
Platforms typically provide a carefully designed set of UI elements that are themed in a very distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others use gradients in their title bars. In some cases, elements may have the same purpose, but are designed to work a bit differently.
As you build your app for Android, don't carry over themed UI elements from other platforms and don't mimic their specific behaviors. Review the Building Blocks section in this styleguide to learn about Android's most important UI elements and the way they look in the system default themes. Also examine Android's platform apps to get a sense of how elements are applied in the context of an app. If you want to customize the theme of UI elements, customize carefully according to your specific branding - and not according to the conventions of a different platform.
Sampling of UI elements from Android, iOS and Windows Phone 7.
Don't worry, we won't post anything.
29
25
