Types of Visual and Interaction Design for Websites - dummies

Types of Visual and Interaction Design for Websites

By Lisa Lopuck

One of the best ways to get ideas for the visual appeal and interaction strategy of your website is, well, to peruse the web. There are several websites that aggregate great design examples in various categories and industries, such as e-commerce or health care. (For a quick look at some of them, just use the names of those industries as search words.) While it’s helpful to look at websites within the same industry as your client’s, good design ideas come from everywhere. You must learn how to isolate design approaches, break them down to essentials, and see how you can utilize them to influence your own designs.

Cinematic websites

One of the more popular trends is to design cinematic websites: A large hero image serves as a literal backdrop for the website, taking up the entire browser window. This dramatic approach really “romances” the product and forces the designer to come up with a visually clean system of supportive navigation. In such sites, interface elements and main navigation float on top of the backdrop, often with a degree of transparency so as to retain the larger-than-life look.

What is unique about the Specialized website (below) is that the large photo backdrop is the content itself: The minimalistic, transparent, overlaid elements of the interface reveal different parts of the bike or offer access to video segments about the making of the bike. There is also a mobile-friendly version of the site (since Apple devices don’t support Flash animation).

[Credit: © Specialized Bicycle Components ]
Credit: © Specialized Bicycle Components
[Credit: © Specialized Bicycle Components]
Credit: © Specialized Bicycle Components

Innovative interaction design

Any way a designer can make efficient use of screen real estate and, at the same time, keep users mentally grounded in terms of where they are in a website, is innovative and good design. Two examples illustrate a creative use of two common ingredients: maximizing a content area and scrolling (up and down) or panning (side to side) within a controlled space.

An excellent example of interaction and visual design is the Salt Lake City Public Library System website. This simple, clean site has two areas that are maximized in terms of their content display. The top portion has a rotating hero area (not uncommon); what’s nice is that unlike many sites that use this convention, the open, layered visual approach breaks up the region so it doesn’t look boxed in. The lower portion has two design features going on: Not only does a tabbed system allow the user to flip among four categories of content display (Movies, Books, Graphic Novels, and Zines), but also each tabbed display scrolls horizontally, revealing a nicely designed collage of products. Upon rolling over a product, the user sees a pop-up display offering more information, plus a link to the detail page. The compressed interaction in this design approach can provide quick access to hundreds of products, in one small portion of a page.

[Credit: © Salt Lake City Public Library ]
Credit: © Salt Lake City Public Library

Capturing the brand experience

The ultimate goal of your visual-design efforts is to capture the essence of the brand experience. One site that is beautifully designed yet houses a lot of information is the Sheffa Foods site, as you’ll see in the following figure. Notice how simple and clean the interface components are designed. If you were to remove the photography, the site template design is actually very plain and monochromatic. That is the key to this design strategy. By keeping all support components simple and using just a few colors, you allow the content itself to take center stage. In this case, the content features bold photography that reinforces the Sheffa Foods brand image of fresh, high-quality products.

[Credit: © Sheffa Foods, Inc.]
Credit: © Sheffa Foods, Inc.
[Credit: © Sheffa Foods, Inc.]
Credit: © Sheffa Foods, Inc.