Page Design

Web DesignProfessor Frank

Page Design

• Effective web design creates visual logic and seeks an optimal balance between visual sensation and graphic information

• Promotes order, efficiency and enjoyment of your website

Document Design

• Documents produced for web have more complex purpose and functionality than documents produced for print sources

Adaptive Design

• Design beyond a single web page – anticipate designs for other formats (print, mobile, etc)

• Source document and media style sheets

Defining Styles

• External style sheets – most effective• Create a different external style sheet for each

context and then reference the style sheet using the “media” attribute of the <link> tag

Adaptive Design

Document Order

• The sequence in which elements, such as site identity, navigation, primary content, related content, and provenance information, appear in the document source code

• Screen readers read web pages at the beginning of page and read through content in sequence

Document Order

Front-loading

• Put most important elements at beginning of page

• Search engines give greater weight to top of document

Selective Display

• Include elements that are relevant to different contexts and code the document to allow elements to display or not, as appropriate

Text Alternatives

• Provide text equivalents for all relevant nontextual elements– Descriptive captions– Links to text-only versions of page– Provide captions/text transcripts to audio/video

Understand the Medium

Visual Design

• Create a clear visual hierarchy of contrast• Define functional regions of the page• Group page elements that are related

Functional Design

Consistency

• Establish a layout grid and style for handling your text and graphics, and then apply it consistently

• Repetition is not boring!

Graphic Themes

Contrast

• Use tools of page layout, typography, and illustration to lead the reader’s eye through the page

• Readers first see pages as large masses of shape and color, then they begin to pick out specific information, first from graphics then from text

• Graphic balance and organization of the page is crucial

Color & Contrast in Typography

Contrast Variability

• Test your design on a variety of screens, devices and conditions

• Don’t go overboard with contrast

White Space

• Use white space to avoid crowding the edges of the browser windows with important content

• Consider floating the page in the center of the browser window

White Space

Style

• Don’t set out to develop a “style” for your site; let style develop naturally from balance of content and layout

• The best style is one that readers never notice, but where everything feels logical

Simplicity

• Consider vision-impaired users and people with cognitive disabilities, such as memory or learning disabilities

• Stick with a simple language and navigation applied consistently throughout your site

Gestalt Design Principles

• Proximity• Similarity• Continuity• Closure• Figure-ground relationships• Uniform connectedness• 1 + 1 = 3 effects

Gestalt Principles

Gestalt Principles

Gestalt Principles

Gestalt Principles

Page Frameworks

• Fixed-width page vs flexible-width page• To scroll down or to not scroll down?

Fixed Page Widths

• Good for complex page layouts with many functional subregions of the page

• Page layout will be stable whatever the size of the user’s screen or browser window

• You can fix the position of elements on the page and control such typographic features as line length and spacing

Fixed-width Hybrid

Flexible Page Widths

• Accommodates different users and a variety of display devices

• Easily adapted to increase text size, display color and contrast, and other viewing or reading parameters

Flexible Page Widths

Page Width and Line Length

• Ideal line length - about twelve words per line• Reading slows as line lengthens• Users can control length – enlarging text size,

narrowing browser window

Page Length

• Ideal length is balance of 4 factors:– Relation between page and screen size– Content of your documents– Whether the reader is expected to browse the

content online or to print or download the documents for later reading

– Bandwidth available to your audience

Page Length Disadvantages

• Disorientation that results from scrolling on computer screens

• Long web pages require the user to remember too much information that scrolls off the screen

• Sense of context is lost when the navigational buttons or major links are not visible

Long Documents & Printing/Saving

• Divide the document into chunks of no more than 1-2 printed pages’ worth of information

• Provide a link to a separate file that contains the full-length text combined as one page

• Position “jump to top buttons” at regular intervals down the page

Shorter Web Page Advantages

• Home pages and menu or navigation pages elsewhere in your site

• Documents to be browsed and read online• Pages with very large graphics

Longer Web Page Advantages

• Easier to maintain (content is in one piece, not in linked chunks spread across many pages)

• More like the structure of their paper counterparts (not chopped up)

• Easier for users to download and print

Page Headers

• Best measure of the efficiency of a page design is the number of options available for readers within the top six inches of the page

• “Signature” graphic and page layout allows the user to grasp immediately the purpose of the document and its relation to other pages

Page Headers

Page Footers

Vertical Stratification

• “Above the fold” (ie above the scroll) captures average user’s attention

• Web page layouts should be judged not by viewing the whole page as a unit but by dividing the page into visual and functional zones and judging the suitability of each screen of information

Design Grids

Design Grids

• Web templates create a regular, repeating structure of design patterns that consistently organize identity, navigation, content, and technical functionality

Templates

• Global identity of the enterprise• Global enterprise navigation features that tie smaller

sites and programs to the larger institution• Well-designed, carefully validated xhtml and css code• Consistent semantic nomenclature for all xhtml and css

containers and page elements• A consistent, enterprise-wide typography program• Accessibility standards that meet requirements• Compatibility with a basic web content management

tool

Templates

Typography in Template Design

• Most users will never explicitly notice why a wide range of related sites produces a cohesive web experience