Web page design l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

Web Page Design PowerPoint PPT Presentation


  • 131 Views
  • Uploaded on
  • Presentation posted in: General

Web Page Design. ECE 3940 Megan O’Byrne 10 September 09. Designing Your Page . Step 1: Design for a Computer Medium A computer screen is not a printed page Readability changes depending on color, layout, and format Different browsers, screens and displays can change how a page looks

Download Presentation

Web Page Design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Web page design l.jpg

Web Page Design

ECE 3940

Megan O’Byrne

10 September 09


Designing your page l.jpg

Designing Your Page

Step 1: Design for a Computer Medium

  • A computer screen is not a printed page

  • Readability changes depending on color, layout, and format

  • Different browsers, screens and displays can change how a page looks

    From Principles of Web DesignBy Joel Sklar


How we read text l.jpg

How We Read Text

Following normal reading habits, the users eye moves from left to right


How we view screens l.jpg

How We View Screens

Looking at a screen, the users eye scans in a more clockwise pattern


How will your users read view l.jpg

How Will Your Users Read/View?

  • If a page uses a lot of text, the user will read in a more traditional, left to right manner.

  • If a page has more graphical elements, the user is more likely to take in the whole page.


Accepted relative areas of importance l.jpg

Accepted Relative Areas of Importance


Questions to ask yourself l.jpg

Questions to Ask Yourself

  • What is the purpose of my website?

  • Who is my main audience?

  • My secondary audience?

  • What information do I want to present?


Designing your site l.jpg

Designing Your Site

Step 2: Plan your sites hierarchy

  • How are your pages linked together?

  • How many links exactly?

  • Where does the user go next?


A structure that is more wide than deep l.jpg

A Structure That is More Wide Than Deep


A structure that is more deep than wide l.jpg

A Structure That is More Deep Than Wide


Designing your content l.jpg

Designing Your Content

Step 3: The “do’s” of good web design

  • Name files consistently and logically

  • Keep a consistent look and feel

  • Use colors that are high in contrast

  • Design for low bandwidth


Designing your content12 l.jpg

Designing Your Content

More do’s

  • Use active white space

  • Design for interaction

  • Use hypertext linking effectively

  • Design for accessibility


Designing your content13 l.jpg

Designing Your Content

Step 4: Things to avoid, aka, the “don’ts”

  • Don’t overuse media

  • Don’t make users scroll too much

  • Don’t flood pages with content

  • Don’t choose colors or images that make the page hard to read


Designing your content14 l.jpg

Designing Your Content

  • Don’t forget to title everything: images and pages

  • Don’t assume that your users know where to go

  • DON’T USE FRAMES!


Getting started l.jpg

Getting Started

  • Select a design tool/program

  • Determine page layout

  • Re-read assignment sheet and rubrics

  • Consider how best to represent “you”


Examples l.jpg

Examples

  • The worst: www.webpagesthatsuck.com

  • Similar to this assignment: http://iml.jou.ufl.edu/Homepages/


  • Login