Web Page Design

Design Process Layout and Navigation Web Copywriting Delivering the Finished Product

Start the Site Development Process

Preliminary ideas before site development Ideas hand-sketched or via computer Need site layout to show number of

pages, how pages are inter-connected Having page layouts before starting

Dreamweaver speed up production dramatically

Web Design Process

Define audience and needs Develop personal mission statement Determine categories (navigation) within site Establish colors and design style Create navigation system Storyboard and flow chart Create folders and sub folders Create graphics for site

Web Design Process cont.

Write content Create template page Create links to all navigation items on template Save template page as necessary navigation items Enter content into all pages Insert images and graphics Proofread all pages View in multiple browsers and operating systems

Good Web Design

Good useful content on every page Well organized and easily accessible

content Well written easily read content Consistent and attractive appearance Keep it current Don’t make hardware assumptions

Useable Design Standards

Content is king Make it obvious Keep it short and simple Make it easy to get around Be predictable Provide other routs

Useable Design Standards cont.

Make it legible Learn to love space Tone it down Don’t get too fancy Be available

Organizing Site Content

Sequential or Linear

Hierarchical

Non-linear

Composite

What to include on websites

Home page Cover page Site map Help and FAQ page

Storyboarding

Organization and Page Designs

What is the natural division of the info? What is the natural information flow?

So let’s do a sketch of your page’s structure

Designing the Navigation System Whole aim is to allow users to get the content

they want

A good clear navigation: is clear leads to obvious content is consistent with other controls is predictable in its style and location on page

Nav. System- Location Indicators Page banner Crumb trail ( Home>Video>PSA ) Color coding site in nav bar Graphic coding can be used

Nav. System- Controls

Main navigation Subsidiary navigation Secondary navigation

Effective Visual Design

Using color, layout, graphics, navigational elements, interactivity, and interface metaphors to make the site’s content accessible, useable, and relevant.

Three hurdles 1st second: Useful and well crafted Next 10 seconds: Easy to use Next minute: Interesting content that is accessed

easily

Defining the overall look and feel

Consistency Comfort and security Navigation elements (predictable, intuitive and easy to

find) Different layouts for different types?

Simplicity Effective and elaborate not the same thing Page loading times Effective and aesthetically pleasing

Page Design- Showing Relationships Info available when and

where it is needed

Reflect the goals of the site

Makes the sites functionality available to the user

Guide the user through the site

How do we as humans organize concepts?

Gestalt Principles- Visual Grouping Similarity Proximity Continuity

Designing Content Elements

Navigational ItemsPlacementStyle

Graphics ImpactReinforcement

Designing Content Elements

Using Photographs Effectively

Tell story or relevant to text Attention grabbing Clear, sharp, look good Well cropped and quick to download Do you have permission to use it?

Designing Content Elements

Typography – Visual Design of Text

Communicate thru font Mood and tone Coherence of style

Professional…Fun…Elegant

Designing Content Elements

Text Design

Emphasize headings Text to background contrast Use Sans-Serif fonts, not Serif. Larger Type Size Shorter Lines NO ALL CAPS Avoid excessive italics Use plenty of blank space around text

Elements of a Web Page

Header Navigation bar Content Page title Footer Meta tags Page properties

What can be included on a Home Page Attractive title element Site menu Indication of new content Date last updated ? Copyright and author content Bookmark reminder Hit counter Avoid too many graphics

Planning your Layout

Sketch out the page Think about your

layers/tables Consistent design Design and

Functionality

Writing for the Web

Why is it different?

More difficult to read from screen Read in small chunks Impatient users Non-linear Clear, concise, relevant, scannable, consistent

and error free writing

Writing for the Web cont.

Behaviors of web users

Impatient Searching for nugget of info Don’t read, but scan first If not immediately obvious, may leave for

millions of other options

Writing for the Web cont.

Web friendly writing

Use brief style (less adjectives/adverbs) Keep to point, additional info thru hyperlink Short paragraphs (no more 8-12 lines) Short sentences Other ways to present info (list, diagram) Edit, Edit, Edit

Writing for the Web cont.

Creating scannable pages

Use frequent and meaningful sub-headings Highlight words in bold/italics (NO UNDERLINE) Content lists at top with link to article Use summary on same page with link Consistent style

Structuring Visual Content

Keep text focused and concise Start content chunks with summaries and clear

main points Use strong verbs and active voice Use lists and hyperlinks Use meaningful headings, sub headings,

summaries, and link terms Highlight key content information

Writing Exercise

For your website- find text information about the organization and bring it to class ( it must be text that exists outside the web)

In class, You will create text that would be web-friendly and scan able and place the text into a simple web page, save it, and e-mail it to me.

We will view it in class and talk about it.

Making the Most of Online

Add links to further information Use scrolling appropriately (above the

fold) Informational graphics & images Use multimedia appropriately

Credibility and Ethics

Clear creator and site goals Avoid manipulation, excessive hype, or bias Stay focused on users rather than company Sound friendly, direct, and relatively informal Include links to other sites Honesty, fairness and concern for others

Delivering the Project

Alpha testing Beta testing Archiving files Onto the web- bandwidth, ISP, and file

transfer to web server

Bandwidths and Multimedia

Bits per second (bps) Bottleneck

Compress data as tight as possible Require user to download onto local hard disk Design and compact as possible Design low and high bandwidth alternatives Implement streaming

Media on the Web

Plug-ins Text as pdf Vector images thru flash Sound as smaller MIDI, embedded thru

programs Video is a trade off between bandwidth

and quality

Critiquing a Web Site

Usability problems

Not state clear purpose Elements take longer than 10 seconds to load Site specific software Poor navigation, too little navigation, too much

navigation, or no navigation at all Poor readability

Critiquing a Web Site cont.

Usability problems cont.

Discomfort due to bad, ugly design or inconsistent design

Irrelevant content Complexity or excessive originality of design Not be accessed by browsers for people with

disabilities

Critiquing a Web Site cont.

Content Tests

Relevant content to the user Understandable as written Any content of no great interest Any missing content Accurate and consistent content

Critiquing a Web Site cont.

Media Tests

Download time Media Quality Rules of professional media standards

Technical Critique

Website Design: Does the home page include the required elements?

Attractive Title Element (Graphic or Flash) Navigation Bar Author and Last Updated Information

Does the website have good navigation control? Clear Structure Link Names lead to Obvious Content Controls Consistent from Page to Page (Style and Location)

Does the page include location indicators? Page Banner Included Banner Name the consistent with Navigation Text

Does each page include web-friendly text? Brief and To The Point Short Sentences and Paragraphs Consistent Style from Page to Page Correct Spelling and Grammar

Video Project: Short Film Is the project’s camera technique correct?

Correct Shot Composition (Balance and Placement) Good Variety of Shots (CU, MS, WS) Correct Balance of Color/Light Interesting Subject Matter

Is the project’s editing technique correct? Thoughtful use of Transitions No Jump Cuts or Black Flashes Clear Video and Audio Signal Good Balance of Voice/Music/SFX Clean and Natural Open/Close No Distortions or Audio Pops

Promotional Poster/Flyer Graphic: Is the basics of good design followed?

Use of design elements (line, shape, value, color, texture, space) Use of design principles (balance, proximity, alignment, unity, emphasis, rhythm)

Is the image clear? Correct Balance of Color (Pics to Background to Text) Meaningful Font Choice (Fits Idea) Clear Message in Graphic

Is the image production technique correct? Proper Picture Quality Clear Mix of Multiple Layers

Flash Animation: Is the animation’s image clear?

Correct Balance of Color (Object to Background) Clear Message in Animation

Is the animation production technique correct? Smooth Movement of Object Clear Mix of Multiple Layers