Page Design Web Design Professor 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 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 = 3 effects

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

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