Techniques For Strong Web Design

When designing for the web, there a couple things you need to take into consideration. Here are the dos and don’ts of web design.

Dos:

  • Keep all file sizes as small as possible for faster downloads
  • Inverted pyramid (put your most important information in the first screenful)
  • Limit the lengths of your page to two or three screenfuls
  • Use same styles for similar elements (eg. all headings in bold red)
  • Break content into small paragraphs
  • Use anti-aliasing in text in graphics (except for under 9p)
  • Save transparent images to png to prevent white halos
  • Provide alt text for images

 

Don’ts:

  • Designing explicitly for one web browser
  • Using too many animations
  • Uploading a page that is not yet finished
  • Setting type in all capital letters, bold, or italics
  • Setting type significantly smaller than the default
  • Making graphics that look like buttons but don’t link to anything
  • Making thumbnail images by scaling down full-size images using width and height properties
  • Centering everything on the page
  • Having different text alignments on one page
  • Using too many colors
  • Using wild patterns for backgrounds
  • Using knock out type for a large body of text
  • Using clipart images

Here are a few examples of good and bad websites…

Good Websites:

www.cvs.com – This site is very clean. The homepage can be fully seen in two scrolls of the mouse. They have clearly defined headers at the top of the page that gives links to their sister-sites. Next to their logo, they have the most popular categories (with accompanying icons) that customers look for when coming to their site. At the bottom of the page, they have more specific links for those who know exactly what they are looking for. This website caters to both types of web users.

www.deerpark.com – The design of this site is as refreshing as its water. There is a peaceful background image, but it doesn’t distract from the rest of the website. The colors reflect the brand. The type is legible and contrasts nicely with the blue background. The links are simple, all the info is contained within the first screenful, so there is no need to scroll.

Bad Websites:

www.getglue.com – When you first log in on this website, the layout is overwhelming. You are bombarded with a ton of information on the front page from people whose activity you follow. If you scroll. you scroll down endlessly at past activities. The tabs at the top offer no description, so you really don’t know where you’re headed until you click on it. You can’t view all the information you want at once; you have to keep clicking and scrolling to see it all. This is bad for users who know what they are looking for and want to reach their information quickly.

www.craigslist.org – HORRIBLE layout. Very overwhelming, just strictly text. Your eyes already feel fatigued after you scroll and scroll, desperately searching for a place to rest your eye on the page. If someone was using a screen reader, I’m sure they’d want to hit their head on the wall after all of this. There is no visual hierarchy, all the text is the same size, and the links are the default links with no design scheme.

Project Definition

Sample Client interview—website planning

Project Name: Pizza Italia

Contacts for this project:

Phone: (202) 589-0899,
Address: 1917 F Street NW, Washington, DC 20005

 

1. Where?

I. Preferred/existing domain name (URL): http://www.pizzaitalianw.com

II. Domain name already registered: No

III. Preferred/existing web server: N/A

2. When?

I. Preferred target date for launching the new site: January 1, 2013

II. Any external factors that influence/affect the schedule: Budget

3. Why?

I. Business problem(s) you hope to solve with this site:

People can order their food online and have it hot and ready to purchase as soon as they get there

II. Primary business objectives/goals for this site:

Increase customer retention, customer convenience, have detailed description of our products

4. Who?

I. Primary customer/target audience:

George Washington University students (late night) Government workers (lunch time)

II. Target audience description

Age: 18-24
Gender: Male/Female
Education: Some College
Occupation: Student, Government employee
Income: Less than $20,000 – up
Preferred browser: Google Chrome, Internet Explorer
Computer Device: Smartphone, desktop computer
Internet skill level: Moderate

 

5. What?

I. Function

  1. Why do your customers need you?
    We sell delicious food at small prices, a huge contrast to the expensiveness of the big city.

What is the most important benefit you offer (from your customers’ perspective)?

Tasty food at convenient times, short lines, great prices

  1. Who are your direct competitors? (include URLs)
    7-Eleven (www.7Eleven.com)
    Subway (www.subway.com)
  1. What do you offer that is different from your competition?
    Big slices of pizza in a variety of flavors
    Spaghetti and meatballs with sauce
    Fresh salads
  1. How do (will) customers use your site? What are their goals?
    See our menu and all that we offer
    Use it to place an order online before picking it up

II. Perception

  1. What are some adjectives describing how you want visitors to perceive the new site?
    Fresh, User-friendly, fun
  1. Is this different than their current perception? N/A
  1. URLs of sites you like. What do you like about these sites?
    www.fiveguys.com – Pretty much the goal of our website, links to a menu, and an order online form

III. Content

  1. Do you have existing content for the site or will you create new content? Who will write the new content?
    The only thing we have is the name of our place, the menu, and ideas for the form. We would need someone to write the content, preferably the owner with a backstory and someone to edit it.
  1. B. Any visuals or content you want to use from your current site or marketing materials (logo, color scheme, navigation, naming conventions, etc.)?
    Logo and color scheme

IV. Technology

  1. Do you already have a content management system?
    No
  1. Do you already have content in a database? Database Type (Access, MySQL, Oracle…)?
    No
  1. List special features you would like to have on the site. For each intermediate or advanced technology, explain how this feature will solve the primary business objectives and benefit the target audience and their goals.
    1. Basic: Search engine
      Yes, to search for specific products and menu information
  1. Intermediate:
  1.                                iv.     Surveys/polls
    Yes, we can conduct popularity polls to find out which item is the most popular so that we can have it available more often
  1. Advanced:
    1.        i.     Customization/personalization for users
      Yes, a custom log in form where users can input what foods they want
  1.      iv.     Rich Internet apps (AJAX, Flash, Java, Silverlight)
    Yes, for our college demographic to be able to order food from their smartphone

6. How will you use resources to pay for, market, and maintain the site?

I. Budget

  1. Pick Two: Low Cost, Fast Timeline, Full Featured
    Low Cost, Fast Timeline

II. Marketing

  1. Do you have a marketing strategy in mind to promote this project?
    Tell the customers about the upcoming site, hopefully they’ll like the idea and support

If yes, could you describe it?
Increased business

III. Maintenance

  1. How do you plan to keep the content on the site current?
    Update the polls/surveys
  1. How often should content change on your site?
    Once a month
  1. Who is responsible for providing and updating content?
    Someone on our staff

Sample Project brief

1. Project name: Pizza Italia NW

2. Big picture: This is a website that serves to inform our customers of our menu and give them the option to order online.

3. Project summary: The website will have a full menu for customers to look at, and a custom order form that customers can use to place their order for pick up.

4. Business objectives/goals:
With this website, Pizza Italia hopes to create more convience for the customer. They want to provide a place where returning customers can order online and pick it up, and for new customers to discover their shop and be able to look at their menu.

5. Preferred date for launch by client:
Pizza Italia wants the website to be up by the start of the year, January 1, 2013.

6. Target audience:
The target audience are college kids from George Washington University, and also government employees.

7. Perception strategy:
Current Perception: go to restaurant, order food, wait for it to be made, and then receive and pay for and either sit down or leave.
Desired Perception: Have food already hot and ready for me when I arrive
Strategy: On the website, have a form where people can order in advance what they want, estimate a ready time, and they can come in and skip the line and pick it up

8. Message Strategy:
Primary message: Pizza Italia caters to your busy schedule.
Strategy: Make everything easy to access, emphasizing important aspect of the site, like menu and ordering online so that people can get on the website, quickly find the information that they are looking for.

9. Competitive Advantages:
Pizza Italia has friendly staff, customizable, hot and fresh food and consistency in flavors.