1 / 15

Designing Your Page

Learn how to design your web pages for optimal readability on computer screens, taking into account color, layout, and format. Discover how different browsers and displays can impact the look of your page. Based on principles from "Principles of Web Design" by Joel Sklar.

mvillanueva
Download Presentation

Designing Your Page

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 Design By Joel Sklar.

  2. How We Read Text Following normal reading habits, the user’s eye moves from left to right.

  3. How We View Screens Looking at a screen, the user’s eye scans in a more clockwise pattern.

  4. How Will Your User’s 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.

  5. Accepted Relative Areas of Importance 2 5 1 3 4

  6. Questions to Ask Yourself • What is the Purpose of my Website? • What is my Main Audience? My secondary Audience? • What Information do I want to present?

  7. Designing Your Site Step 2: Plan your site’s Hierarchy • How are your pages linked together? • How many links exactly? • Where does the User go next?

  8. A Structure That is More Wide Than Deep Main Work Class Me Play Family Sample

  9. A Structure That is More Deep Than Wide Main Work Me Class Play Sample Family

  10. How Would You Structure It? ?

  11. Designing Your Content Step 3: The “Do’s” of Good Web Design • Use all lower-case and no spaces when naming files. • Keep a Consistent Look and Feel. • Use Colors that are High in Contrast. • Design for Low Bandwidth. • Use a Grid Structure.

  12. Designing Your Content More Do’s • Use Active White Space. • Design for Interaction. • Use Hypertext Linking Effectively. • Design for Accessibility. • Keep Your Site Updated on a Regular Basis

  13. Designing Your Content Step 4: Things to Avoid. aka – The “Don’ts” • Don’t Overuse Media • Don’t Make Your Users Scroll Too Much. • Don’t Flood Your Pages with Content. • Don’t Choose Colors or Images that Make the Page Hard to Read.

  14. 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!

  15. The Worst of the Worst For a good luck at what not to do, visit www.webpagesthatsuck.com

More Related