Chapter 4 Web Design Basics By Quest Jelinek

Chapter 4: Web Design Basics ? By Quest Jelinek

Target Audience When designing, you should analyze your target audience. Design you webpage around your 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 Design Repetition – 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 Accessibility Certain 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 Considerations Using 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

Colors 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 Design There 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