WEB202 » Visual Design
Here is where we finally take the arrangements of elements and function and add a bit of personality. We are now dealing with the visual presentation of the logical arrangements that make up the skeleton of the site.
Through attention to visual design, we now determine how the arrangements we have defined should be presented visually on our pages.
Defining the Surface
We might think to ourselves, “great… I can make it look ‘COOL’ now!” However, we need to remember that everyone has a different idea of what “cool” actually is and that people have different tastes.
We need to evaluate in terms of what will actually work together with what instead of just trying to make things look aesthetically pleasing:
- How effectively will our surface design support the objectives we defined in all of our other planes?
- Communicating a Brand Identity is a common strategic objective for any website – it can come across in terms of language, placement, type, color and overall visuals
- Visual Design is not just a matter of aesthetics, it is a matter of strategy as well
See Also:
- 35 Excellent Ecommerce User Interface Designs | Vandelay Design Blog
- Shopping Carts Gallery: Examples and Good Practices | Smashing Magazine
- Why Visual Design is More Than Making Things “Pretty” | Atomic Object
- How Visual Design Makes for Great UX | UX Booth
Examples:
vermontteddybear.com
proflowers.com
nordstrom.com
oldnavy.com
converse.com
target.com
walmart.com
petsmart.com
homedepot.com
bustedtees.com
timbuk2.com
tullys.com
cariboucoffee.com
specialized.com
trekbikes.com
Following the Eye
One simple rule in evaluating the visual design of the page is to simply ask, “where does the eye go first?” What element of the design initially draws the users attention? Is this strategic? Or a distraction?
By asking your potential users to look at your page, or using sophisticated eye-tracking equipment, you can determine where most users look first and why, where they look second and why, etc.—does this align with your goals?
The movement of the user’s eye across the page shouldn’t be by accident it is the result of ingrained responses that the user has to visual stimuli.
See Also:
- Eyetracking Web Usability, by Jakob Nielsen and Kara Pernice
If your design is successful, the pattern that the user’s eye follows around the page will have two fundamental qualities:
- Smooth Flow: a design that has a smooth flow will lead the eye smoothly from one object to the next without the page seeming “cluttered” or “busy.”
- Guided Tour: in your design you want to show the user the possibilities of what they can see and where they can go without overwhelming them.
Contrast
In visual design, a primary tool that is used to draw attention is the technique of contrast, which will:
- Help the user understand relationships between elements of the page
- Communicate conceptual groups of information
A design without contrast will be seen as a gray featureless mass.
Uniformity & Consistency
Uniformity in design is key to effective communication in the fact that your user will be able to draw conclusions based on size, color, typeface, etc.—your main navigation should always look the same on each and every page!
By elements that are consistent and adhere to uniformity, you will provide the user with an easily identifiable mental map of your site and it’s elements.
By developing a uniform and consistent system of elements that work well together, your user will be much more likely to follow along with how the site works as whole.
Using Grid Based Design
A technique from print design is the use of grids to layout the page – grids are a precise means of creating a master layout that will adhere to uniformity.
Grids are a combination of verticle columns, horizontal fields, and white space gutters:
Designers have often thought that working inside a grid can be restrictive rather than a creative process. Untrue:
- Grids serve as a guide to designers to follow when placing objects on a page
- Grids provide structure and add rhythm to a design
- Using grids will help a designer to create a composition that is easier for a user/reader to scan
- Grids also present information in a way that is more neatly organized and easier to follow
This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
Social