Chapter 4: Web Design Basics

ByQuest Jelinek

?

When designing, you should analyze your target audience.

Design you webpage around your target audience

Target Audience

In addition…Make sure that your webpage is technically compatible with your users (target audience)

Keep in mind:-Screen Resolution (If the screen has more pixels, how will my webpage look?)

-Browser Compatibility (Does my webpage look the same on Mozilla Firefox as it does on Google Chrome?)

Website Organization?When your webpage users get to the site,how will they navigate it?

Common Layouts-Hierarchical (Several Major pages; a well defined homepage)

-Linear (sequential, you can’t directly access pages from a home)

-Random (No recognizable organization; the site offers no clear directions)

Principles of Visual DesignRepetition – Parts of a webpage are repeated, creating a uniform style which is recognizable throughout website

Contrast – Page elements are different from one another. Can direct attention toward certain aspects

Proximity – Related items are grouped with one another. Information can thus be organized by meaning

Alignment – Certain elements may be vertical or horizontal in order to deliver a clearer message to users

Universal AccessibilityCertain considerations should be made for people that may need extra accessibility features

Features include:-alternate text for images-descriptive hyperlinks-descriptive titles-search engine optimization (better search results)

Font and Text ConsiderationsUsing the right font for your website is very important

It is good practice to do the following before publishing your webpage:

-Readability of fonts -Test How well the font appears on different computers-Length of text-Hyperlink tags-Spelling and Grammar

ColorColors in webpage code are written using a special numbering system (Hexadecimal)

Hexadecimal Color Values -Hexadecimals specify the amount of red, green and blue that a computer displays

Considerations for Color

When designing your webpage:

-Colors should not interfere with reading

-Colors should reflect your audience

-If designing with everybody in mind, use a neutral colored background (white)

Navigation Design

Websites should have some of navigation in order to provide information quickly

Navigation Bars – Navigation bars are added

Breadcrumb Navigation – Sidebar uses hierarchical trail

Graphics Navigation – Images may be used as hyperlinks

Dynamic Navigation – Composed of complex site elements

Site Map – Website is outlined with hyperlinks to major pages

Site Search – Search features are added to help navigate

Layout DesignThere are several different layouts which can be used in the design process

Wireframe – shows major structure but omits details

Ice – pages have a fixed width, with a fixed side bar

Jello – Fixed width, but elements are centered

Liquid – Content takes up 100% of window, no margins

Page Optimization Web pages need to be optimized so that they load at a reasonable speed. People will go to other webpages if they are known to load faster and or they are more convenient and easy to use

Optimizations-Image Slicing: (images can be broken up into smaller pieces which load quicker)-”Above the Fold”: Important stuff needs to be placed at the top, so that it is seen first-White Space: white space can be used to improve readability and make graphics stand out