Episode 3: Visual Design
Experience has taught me that when clients think about websites they think visually. What does the website look like? In last month’s podcast on the subject of information architecture I talked about the foundation that is put down before we do any design work. Today I will talk about what goes into creating a good design and you will see how that information architecture foundation helps make good design decisions possible.
The ultimate goal of website design
Usually I start at the beginning but when talking about design issues I actually like to start at the end. What is the goal of website design? Quite simply, it’s to create an interface that is usable, easy to navigate and presents content in a logical, easy to read manner. And thanks to the information architecture work that was done in our previous step we have already defined our navigation and know what should figure more prominently and less prominently in the design.
The nuts and bolts of getting to our goal
Perhaps the best way to illustrate how we’ll achieve our goal of a user friendly interface is to talk about the different steps in the design process and pay close attention to how they dovetail with our previous information architecture work to create a finished product that not only looks great but keeps usability at the forefront.
With all the technology out there you may think that there are all kinds of outstanding solutions for starting a design. However, for my money, nothing beats a blank piece of paper and a pencil (preferably with a large eraser) to sketch out the overall design. During the sketching process I’m working closely with the information architecture document and literally sketching out how the interface may layout. Where will the navigation be placed? Main content? Related features? Logo? Ads? Mailing list signup? Legal statement? The sketching process allows me to look a the big picture and find a place for all of the elements the website requires and, more importantly, how these elements will help guide the user through the website. Frequent erasing and re-sketching is common at this stage as different approaches are thought through.
Grids and layout
Once the sketches are flushed out and I’m happy with the interface from a big picture standpoint it’s time to open Photoshop and bring those sketches to life. But before we talk about colors and fonts and imagery I want to talk about grids. Grid-based design has been used in traditional printed media forever. In recent years there has been a trend to use them in website design as well. Why grids? Grids help align elements on the screen to create a clean, uniform look that also improves the overall user experience by allowing visitors to easily scan the screen. I’m a huge fan of grid-based design and like to start my Photoshop file by creating grids that will accommodate the elements in my sketches. You’d be amazed what a difference alignment can make with any design. They are the skeleton that we’ll hang everything on.
OK, so we have our sketches of how the overall interface will fit together and we’ve created a grid that will help us with aligning the elements used in our design. The next step is to define a color palette. Colors can be warm or cool. They can convey happiness or anger, elegance or aggression. The color palette will largely set the overall tone of the design. Now a color palette should not consist of too many colors. I tend to use no more than three main colors (and often related shades of those colors). I also like to use one accent color that will pop against the other colors in the palette for accent pieces that we’ll want to draw attention to. Many people tend to think that more is better when it comes to defining a color palette but just the opposite is the case. A small color palette will provide a solid, unified look across the entire website.
Imagery to be used on a website can come from many sources. Most of the time the imagery I’m working with is photographic, although sometimes illustrations are used as well. I’ve worked on projects with clients who’ve had amazing professional photography available and I’ve worked with clients who had snapshots they took in low light on a camera phone. As you might imagine there is a rather sizable discrepancy in quality of these photos. Imagery - be it photographs or illustrations - should be something to highlight and pull people into the design and not be something that your designer has to work around. As such I always recommend considering either a professional photographer and/or illustrator or professional stock imagery, particularly if the design is going to rely heavily on this imagery. Imagery needn’t be overwhelming to be effective. I usually find that a single piece of well placed imagery can have an outstanding effect on the overall design.
Textures and backgrounds
So at this point we are moving right along and the design is coming together nicely. We have our layout established (again, based on our information architecture work), we’ve defined a solid color palette and we’ve added some great imagery to the design. At this stage I usually have a solid visual for the new website but it tends to be a little flat. This is where textures and backgrounds come into play. Now a texture or a backgrounds need not be big and gaudy to add dimensionality to the design. A gentle background fade can make the difference between an OK design and one that really jumps out and feels very modern. So in this step of the design process I’m dealing with more subtle enhancements to give the design a little more pop and dimensionality that it had before this step.
And speaking of subtle enhancements that can make a big difference ... let’s talk about fonts. I tend to start with a standard arial or helvetica font when beginning a design and then come back to adjust the fonts later as the design nears completion. Each font has it’s own feeling so matching the font to the overall feeling of the website is important. If the website is trying to convey a very elegant and posh feeling perhaps a flowing cursive font will be used. If the website is striving for a more industrial feeling a block font will convey strength far better than that flowing cursive font. Selecting the right fonts (and font combinations) can make or break a design. Now you may be saying to yourself, “Hey, I thought there were only a handful of fonts a website could use?” Yes. This is true to a degree. We are limited to a handful of fonts that all browsers and operating systems will display, however there are a number of font replacement techniques that will allow us to use any font we choose for headlines across the website. These non-standard website fonts will be used sparingly in our design and provide accents rather than altering all the fonts across the website (which would present usability issues).
We’re almost there. Everything is looking great! At this point I’m almost ready to present the design for review. However before so doing I like to stress about the little details. It may be the addition of a stylized line to separate sections or a rough edged background in the header or an accent used for lists on the website. These little details add that final bit of uniqueness that will make the website inviting to visitors and draw them in. With these little touches in place it is time to finalize the design.
Delivery of comps
We made it! The design is ready for review. When I deliver design comps I post them as standard .jpg files on a client page along with notes I made during the design process describing decisions I made along the way. These decisions will be based on the information architecture of the website and the priority that has been placed on each element. Once presented there are usually some revisions to make based on your feedback. Once these are done the design phase is complete!
While the visual aspects of website design tends to be what people focus on, it is important to note the solid foundation information architecture provided before any visual aspect of the design ever begins. This foundation played a role in all of the key decisions made with the visual design from our sketches right through to our finishing touches. Because of this work we are able to create an interface that is usable, easy to navigate and presents content in a logical, easy to read manner. The visual aspects of the design may pull people in but a solid information architecture will help keep them on your new website.