Moleskine, an exceptionally popular sketchbook/notebook manufacturer, recently sponsored an exhibition at the Art Directors Club in New York called Detour. The exhibition featured 70 Moleskine notebooks filled by various designers, architects, artists and writers providing a glimpse into the minds and process of many creative minds.
read on »Aarron Walter
Inside Designer's Sketchbooks
The Power of Contrast in Design
Deconstructing the Design Process
1) What Are Your Goals?
Design is inherently connected to specific goals, which are often, but not always, business focused. Clearly define what you are trying to achieve with your design. Are you trying to increase sales of a product, establish brand credibility, or build a community? Be specific, be clear, be concise. You can not evaluate the success of a design without first knowing what your goals are. It is also not very logical to start a design without knowing what you are trying to achieve. If you do, you can bank on the results being off their mark.2) Conceptualization, What is the Message?
The central focus of any type of design work, whether it’s architecture, print, web design, or industrial design, is the message. The goal of design is to lead the viewer to a predefined message. Always start with the question “What am I trying to say?”. Once you have established clarity on this issue, you can define how you want to say it. The how part of the design is the concept, and concept is king. Think about the designs that you find most inspiring and memorable. Chances are that it was a strong concept that made the impact upon you.“A good concept poorly executed is better than a bad concept well executed.”- Curt Cloninger Concepts vary broadly from overt metaphors that are immediately recognizable, to subtle allusions to design history that establish authority in the message. A concept can provide an interesting hook into your message, or simply provide needed support. Either way, defining the message and concept of your design should always be priority number one and should be completed before you start wrestling with aesthetics.
3) Define the User Experience
A list of keywords that sum up the experience users might have helps keep you focused on the big picture. You might include concrete words such as “usable”, and “intuitive”, or more abstract words such as “environmental”, and “trustworthy”. Think about what design techniques could invoke such experiences. Sticking to navigation conventions may help you build the first two experiences, while a natural color palette, photography, and classic serif typefaces may help achieve the second two. No matter how abstract your keywords might be, visual design can communicate your message.4) List All Elements and Assign Hierarchy
Identify all of the elements that need to be included in your interface. Include the exact labels for the navigation, headings and subheadings, logos, local navigation, utility navigation, content areas (promo spaces, call outs, etc.), and anything else that needs to be included. With your detailed inventory compiled, rank each item according to importance considering your business goals. Now you are ready to position them on the page.5) Solve the Interface With Wireframes
A wireframe is a simple drawing of a web page that focuses on optimal placement to achieve goals. It is a visualization of the above content inventory, but it does not address aesthetics at all. Don’t get caught up in color, typography, form, and shape. Stick to grayscale and simply position the elements on the page according to their importance. Do consider scale and proportion, though, as you don’t want to have less significant elements occupying an inordinate amount of space. You may want to check out Jakob Nielsen’s research on common eye paths in web pages to determine where the important elements need to be placed. Jason Santa Maria has a great article on wireframes, and shares a helpful case study of a client project. Here’s what a wireframe might look like: Daniel Richards Home Wireframe | Daniel Richards Interior Wireframe. You can compare it to the completed design mockups: Daniel Richards Home Page | Daniel Richards Interior Page, and the final web site. I find the wireframe process the most valuable part of the design process as it allows me to really solve the interface design issues without getting bogged down in type, color, and other aesthetic decisions. You can make significant progress fast. It’s also a great time to check in with a client to ensure that you are still addressing their needs correctly before gettings tarted with teh design mockups.
6) Isolate Aesthetic Decisions
With a solid set of wireframes, you are ready to tackle the aesthetics. Start by considering the grid system you want to use. A 12 unit grid is exceptionally flexible, allowing you to create 2 columns of 6, 3 columns of 4, or 4 columns of 3. If you have a number of different content display scenarios in your site, a flexible grid system like this can be exceptionally valuable. Define your grid unit scale in the preferences of Photoshop, Illustrator, or your favorite design software. As a quick example, if you have a 1000 pixel wide canvas, the individual grid units of a 12 column grid would be approximately 83 pixels. For more on how to use grids in your design, see the Khoi Vinh and Mark Boulton presentation on the topic at South By Southwest, or read Josef Muller’s Grid Systems in Graphic Design. With your grid system solved, next consider the most appropriate typography. The first consideration would be what typeface best relates to the content. If your content is humorous, informal faces may work best. If your content is authoritative, a classic face like Trajan or Garamond convey tradition, and credibility. Knowing a bit about the history of typography is extremely useful in this endeavor. Consider typographic contrast as well. Rather than setting all of the type in the same face, use a complimentary pair or a family if possible (remember that font availability is still a problem on the Web, but we can use CSS font-family lists for ideal preferences). Make sure that heading, subheading, and general copy have unique treatments that effectively communicate the information hierarchy. The type and treatment of copy text needs to, of course, maintain legibility if your readers are going to stick around. When you are setting type, be sure to provide generous margins with a limited line length (around 70 words is ideal) so the content is legible, and feels comfortable to read. Daunting blocks of copy with narrow margins is a sure way to keep your audience from reading a single line. Next, consider a color system for the design. Color has many powerful, psychological associations to be considered. The color system you choose should relate very closely to your user experience keywords, and your design concept. Also consider how your color system can help communicate information hierarchy, or tell the viewer where to look. If you use a monochromatic color system, an accent color will capture the viewer’s attention quickly, as it is clearly different from the rest. Use the accent color sparingly to draw the viewer’s attention to key elements such as the logo, navigation, or an important heading.7) Refine
As your design builds, inevitably you will have elements that at first seemed important, but soon became superfluous. Refine the design to remove all elements that are unnecessary. If you can take away an element and the design still functions well, then the element is not needed.8) Revisit Your Message, Goals, and Concept
Design is an iterative process (that’s part of the fun too). You make a design, evaluate it, then make changes, and repeat. A good design is one that has been distilled down to the essentials, and functions as well as it looks. When your design appears to be complete, take another look at your goals, message, and concept. Does the design do what was intended, or does it need to be realigned with the message? It’s a good idea to continually revisit the goals along the way too, to ensure you are not being seduced by discrete design decisions rather than keeping your eye on the big picture. Pin up the goals, user experience, and concept in your work space to keep them in your periphery at all times.Conclusion
The more you can subdivide the design process into individual problems rather than facing a Mount Everest of a problem, the less you will be intimidated by starting your design. You can tackle design in a rational manor that will help ensure that your designs are more functional, more attractive, and more memorable for your viewers.Jonathan Snook Guest Lecture at The Art Institute of Atlanta
Jonathan Snook, who recently spoke via Skype to my User-Centered Interface Design class at The Art Institute of Atlanta, exemplifies the traits we work to instill in our students. Jonathan is a renaissance web designer who understands aesthetic principles as well as he understands web application development, project planning, and interface design. There are few such people in the industry that can bridge the divide between each facet of the web world, but Jonathan does it with grace, skill and humility.
Jonathan shared some interesting case studies of the design process of a client web application, and the design evolution of his own blog. Whether you are a design veteran or a novice, there is always much to be learned from an inside glimpse into another designer’s process. Jonathan’s slides and the podcast of his lecture are listed below for your learning pleasure.
Jonathan Snook’s Guest Lecture Podcast | Jonathan Snook’s Presentation Slides Mark Boulton on Design
Mark Boulton recently spoke via Skype to my User-Centered Interface Design class at The Art Institute of Atlanta on the principles of design as they apply to the web, and his experience in the industry. Mark has made a name for himself in the web industry as a typographer, designer, and a skilled writer on these topics. He’s perhaps best known for his insightful, self-published series of articles entitled 5 Simple Steps, which explores core design topics such as the grid, and typography, and will soon be spun into a PDF book of the same name. Perhaps you have seen some of his other articles on A List Part and Vitamin. Mark brings together two traits in his work that rarely mingle, brilliant design talent, and humility that seems to keep him learning and sharing his wealth of knowledge.
Mark recently spoke at South by Southwest in two panels, one with Khoi Vinh about grid systems, and the other with Richard Rutter about web typography. I recommend keeping an eye on the SXSW podcast page for the release of these lectures, as they were some of the best of the year, in my humble opinion.
