Archive for the ‘Design’ Category


How to Create Effective Site Navigation

Effective navigation can make your site easy to use or can cause visitors to leave your site in frustration.  How many times have you been on a site and been annoyed because you couldn’t find what you wanted or the information you were looking for wasn’t where you expected it to be?  Website visitors have been trained to a certain degree to look for information in the most probable places, and when they don’t find what they’re looking for, they get frustrated and leave.  With some planning, you can create your next site so that website visitors can find what they want quickly and easily.

Organize Your Information Well

When designing a website, think about the structure of the site first.  Create an outline of all of the pages and try to organize the information in the most logical way.  What will make the most sense to your website visitors? 

sitemap

 

Get the Most out of Your Primary and Secondary Navigation

The primary navigation will help visitors drill down to the information they are looking for.  From within those main sections, display a list of secondary navigation items to help the user find the page that he is looking for within that section. 

 You can design these links however you want, but the important thing is to be consistent.  Keep your primary navigation in the same place on the page no matter what page the visitor is on.  This continuity on each page will allow the user to easily navigate through the rest of your site.  Here are some other helpful tips:

  • Order your links in terms of the importance of each page.  If your website is selling books, make the links to the different book departments very prominent. 
  •  Remind the user where they are.  When a user clicks on the About Us section, change the color of that navigation item to something different to show the user where they are.   
  • Don’t overload your primary navigation with links to every page in your site.  Simple is better.  If you have too many primary navigation links, think about consolidating some of the pages or moving some information to sub-sections on your site.
  • Keep the names of your site navigation meaningful.  Don’t use terms that are internal to your organization.  Someone who has never been to your site before should know immediately where the link will take them. 

Here are examples of effective primary and secondary navigation:

oc_register

bloomingdales

 apple

 

Create Your Footer Navigation Wisely

There are some links that need to be on every page, but don’t neccessarily need to be featured prominently on the site.  These links can be part of your footer navigation.  Here are some examples of links that can be linked from your footer:

  • Privacy Policy
  • Terms and Conditions
  • Site Map
  • Shipping Information
  • Returns Policy


Use Progression Navigation

If your website contains a shopping cart or a multi-page registration form, it’s a good idea to display progression navigation.  You can do this at the top of the page by displaying where the user is at in the process, such as “Step 2 of 4 – Billing Information”.  This sets the expectation with the visitor how many screens he must go through in order to finish the process.  It also allows the visitor to click to one of the previous steps if they need to make changes. 

amazon

 

Create a Breadcrumb Trail

On sites that are large, it can be useful to implement breadcrumb navigation.  This provides the visitor some visual clues that tell them where they are and how they can navigate back to any previous section.  Breadcrumbs are extremely helpful if the website visitor is linked from an external site.  It gives them a sense of where this page fits in with the rest of the site structure.  Generally these breadcrumbs are displayed toward the top of the page, below the main navigation. 

bn

 

Other Helpful Tips

  • Try to minimize the number of clicks it takes to get to the relevant information as possible.
  • Don’t open pages in new windows, unless they go to an external site.  This confuses users and disables their “Back” button.
  • Make your “Contact Us” link prominent and obvious.
  • Don’t change the position of design elements from page to page.  As a general rule, keep the header and footer of the site consistent on every page. 
  • Use consistent names in your page headers.  If the user clicks on “About Us”, display “About Us” as the header on that page.
  • Always have your logo link to your site’s home page.
  • Use a site map of text links to provide structure of your site to provide direct access to your site’s content.  Make sure that your site map reinforces your site’s hierarchy.
  • Unless your site is small, don’t put every link on every page.  This can be confusing and can overwhelm your visitor.  Create a logical organization of pages using sub-navigation and provide a link to your site map. 
  • Above everything else, make your site’s navigation consistent!  Don’t make your visitors have to re-learn the navigation depending on what page they are on. 

 What tips do you have for creating effective site navigation?  What sites have you found that use effective navigation?  Share in the comments below!

Film Screening: Art & Copy

 

Art & Copy

 

Tonight the Orange County Chapter of AIGA and the Art Institute of Orange County will be offering a free special screening of the documentary film Art & Copy.  This documentary portrays the profound effects that advertising and creativity have on modern culture. The film intimately reveals the relatively unknown personalities and stories of some of the most influential advertising minds of our time.

Location: Art Institute of California, Orange County Campus (3601 W. Sunflower, Costa Mesa, California 92704 )
Date:  Friday, November 6th
Time: 5:00 – 8:00pm
Cost: Free, event is open to the public.  Click here to register. 

Event Schedule
:
5:00pm – Film screens (in outside tent on campus of A.I.)
6:30pm – 30 minute break for refreshments (pizza & beverages provided)
7:00pm – Panel Discussion*
7:30pm – After-Party event at 8 Steers restaurant (3751 S. Harbor Blvd. at Sunflower)

*Panel speakers:
Jimmy Greenway, Film Maker of ‘Art & Copy’
Dan Wayland, Broadcom
Joseph Banuelos, Creative Director Extraordinaire
Jon Gothold, Creative Partner/Prinicpal of DGWB
Ron Leland, RealLife Branding
Kathleen Kaiser, PencilBox Studios

ART & COPY is a powerful new film about advertising and inspiration. Directed by Doug Pray, it reveals the work and wisdom of some of the most influential advertising creatives of our time — people who’ve profoundly impacted our culture, yet are virtually unknown outside their industry.

Exploding forth from advertising’s “creative revolution” of the 1960s, these artists and writers all brought a surprisingly rebellious spirit to their work in a business more often associated with mediocrity or manipulation: George Lois, Mary Wells, Dan Wieden, Lee Clow, Hal Riney and others featured in ART & COPY were responsible for “Just Do It,” “I Love NY,” “Where’s the Beef?,” “Got Milk,” “Think Different,” and brilliant campaigns for everything from cars to presidents.

They managed to grab the attention of millions and truly move them. Visually interwoven with their stories, TV satellites are launched, billboards are erected, and the social and cultural impact of their ads are brought to light in this dynamic exploration of art, commerce, and human emotion.

Read more at http://artandcopyfilm.org/synopsis/

What size should I design my website?

Today we got asked this question, and thought it would be worth posting:
What size should I design my website?

The answer varies depending on who is going to be viewing the website and, more importantly, what size screen they are using.  As a general rule, your website should be as small as it has to be to fit comfortably in your viewer’s smallest screen resolution without creating a horizontal scroll bar.

As of today, the average website visitor (typically more than 90-95% of your visitors) is using a screen resolution that is at least 1024 x 768 (according to http://www.w3counter.com/globalstats.php).  This is the standard resolution for a 17monitor.  The larger the screen, the larger the resolution that can be displayed.

To find out what size screen resolutions your visitors are using, you can install Google Analytics on your website.  This code will also tell you what browsers they are using and other helpful information.  The following is a screenshot from the Google Analytics for FlipStudios.com.  You can see the break down of the various screen resolutions for our website visitors.

analytics-screenshot-550

Rule of Thumb
A good rule of thumb is that you create your website design with a width of 960px. This will allow for some space on either side of your site design, which will give your website visitor a sense of balance to the design. This also allows you some additional benefits that we’ll cover in a future article.

The height of your site really depends on how much content you have and how much you want your website visitors to scroll up and down to view your website content.  Generally 1500px is a good standard height for your website content, but keep in mind that the less scrolling that has to take place, the more likely your website visitors are to see the content you are providing.

Display Important Info “Above the Fold”
As with print design, it’s a good idea to display the most important text or images “above the fold” or “above the scroll line”.  A website user at a resolution of 1024 x 768 will see about 550px of your design without having to scroll down to see more, so try to design the important elements of your design within the top 550px.

Design Templates
Click below to download a Photoshop or Illustrator design template to help structure your website design files:

Download Adobe Photoshop template
Download Adobe Illustrator template