If you have been listening to the experts this past year, you should know that the web is dead. This month Wired magazine proclaims "Long Live The Internet." So what does that mean for Web design? We must evolve to Internet Design! The rise of NUI [touch screen or natural user interface] and mobile based hardware is driving lighter, simpler services and apps. This evolution has tremendous impact for designers.
There’s a lot that goes into crafting a fabulous internet or digital experience, but I believe it can be broken down into four main components. Over the next four days I will break down the four key components of a great internet design with examples and resources. Follow along and feel free to contribute!
Part One: Your Audience Needs A Solid Layout!
It all starts with an idea, a goal or a vision. All aspects of a great design must compliment each other while helping achieve the end goals of the service or app. The importance of having a good foundation applies to just about everything in life. If the foundation is wrong, everything on top of it will crumble. In app and internet service design, the foundation is your layout. Your layout should dramatize an idea or core service behind the app. Laying out an app or internet service involves placing all the content and navigational elements. Dependent on how you bring your app to life, you must establish a hierarchy in these elements that gives the most important ones prominence, and this should be determined by how you think your audience should use the app.
1.1: The Audience: Learn as much as you can about your audience. Ethnographic research has been my favorite form of research. When you can't do that eMarketer and internet listening will also give you a basis of insights about your audience and what they expect out of the brand.
1.2: Wireframes: No matter the audience, I start by sketching out basic wireframes. I put all of my digital toys away and pick up a paper and pencil. I am not a fan of art direction in a wireframe. However, I do believe that it's an easy way to nail down an idea through layout.
Wireframes should be seen as the bare-bones representation of the various elements that will appear in the interface. Wire frames are typically made up of gray scale boxes and blocks of placeholder text. The key is to keep things simple and not get caught up in color and design elements.
[ image via dirtyalpacas ]
Not everyone feels good about the presenting their ideas via pad and paper. I usually take my pencils and then use a digital tool to organize them for presentations. There are several different routes that a designer can take for creating wireframes, and there are tons of applications designed specifically for this. Here are some of my favorite digital wire framing tools:
- OmniGraffle
- Cacoo
- MockFlow
- Balsamiq Mockups
- Pencil Project
I would recommend reading or subscribing to
Wireframes Magazine. It is a blog written by information architects and interaction designers that has lots of info and examples of layouts and wireframing.
1.3 Whitespace: Lots of white space is the new black!
One sign you have a great layout can can be found in the negative space. [ No the space does not have to be physically white.] Many designers make the mistake of over crowding their app designs. Don’t be afraid to let your pages breathe. Adding larger amounts of white or negative space will actually give your design a more sophisticated and updated look. Take a look at the use of negative space in these apps and services:
- reeder
- Awesome Note
- Color Stream
- iShots
- Weightbot
- Incredibooth
- Camera +
Stay Tuned...Next Up: Part Two: Typography!
