Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Basic Web Site Design Principles

   

Assignment: (Do before Class):
Dreamweaver MX, pp. 80-90, 154-162;
Web Page Design, pp. 44-46;
Organizing Information, Site Structure

Due on Monday:  

 1. In addition, come to class with a  Web Genre webpage that contains  links to a number of web genre sites that you want to use as models for helping you create your next web site.  For example, if you want to create a Golf website go look at some of the best Professional Golf websites.  What design strategies do these websites have in common?  What are the major design elements they share that make them a part of the Professional Golf website genre?  How can you tell right away that itis a Golf website? Link this site to your Design Portfolio website so that other students can look at what you are doing. For example see my Model Website for Web Genre
website


1. Criteria for Design Portfolio and Basic Websites

2. Students' Portfolio webpages

  1. Jackie Steinberg Home page

3. Students' Webgenre project

  1. Professor Lewis' webgenre model pages
  2. VI Reggae
  3. The Adobe Resort

4. Using non-default fonts in Dreamweaver

  1. Download "The Font Thing" onto your computer.
  2. Download and install WinRar on your computer
  3. See fontfile.com and Free fonts on the Web
  4. Running "The Font Thing" manage fonts on
    your PC.
  5. Using Flash Text and Flash Buttons in
    Dreamweaver to add non-default fonts
    into your pages.
  6. See cfonts example.
  7. Make sure you have the latest version of
    macromedia Flash player on your computer.

5. Creating Cascading Style Sheets (CSS)

  1. Example of Style Sheet: basic.css
  2. Here is another example of a style sheet:
    test.css
  3. Here is a webpage using the "basic.css"
    stylesheet.


  4. Always select link to style sheet, this allows
    you to use the same style sheet for an
    entire website
  5. You must put "stylesheet" files on the web
    in order for them to work. Such a file is always -- name.css
  6. You can always go back and edit and change
    stylesheets, which can change the look of
    your entire website.

 

6... Relative vs. Absolute links

  • goals.htm is a relative path link

  • http://www.colorado.edu/AmStudies/lewis/Design/goals.htm
    is an absolute path link

  • Always use relative path links to link to webpages
    within a website. And use absolute path links to link
    to webpages located on other websites.

7. Relative Sizes of Webpages for this class

  • 800 x 600 pixels (770 invisible table)

  • 1024 x 768 pixels (990 invisible table)

  • Variable width table that open page to
    the size of the browser (Note: this is a lot
    harder to control)

  • If you use 1024 by 768 pixels, make sure
    you put text instructions on your pages
    that indicate that they are best viewed
    at monitor settings of 1024 by 768 pixels.

  • Try to make your webpages no longer than
    two to three full screens. Websurfers don't
    like to scroll. Use links instead of asking
    the user to scroll more than one pageful
    down.

8. Using Fireworks for Image Editing

  1. imageex.png

9. Example of Basic Advertisement to illustrate
use of color and layout: Christy's Sports

9. Sklar "Understanding Web Design Principles"

  1. Design for the medium

  2. Design for the whole site

  3. Use Active White space

  4. Design for the user, make it easy to use

  5. Understand how people view Webpages,
    understand viewing patterns

  6. Chunk your material and link with
    hypertext

  7. Limit the amount of information per webpage

  8. Design for the screen, landscape view not
    portrait view (horizontal not vertical design)

10.  Creating Website Design Template Pages

  1. Digital Design Template Page
  2. Modelgridlayout
  3. Web Editor View of Modelgridlayout file

11.  Basic Questions to ask about the Websites you Design.

        1.  Does your Website Design work with your "targeted audience"?

         2. How does the Design of your Website portray
your  Image and Style?

          3. What does your Website say about who you are 
               and the Work you do?

          4.  Can, or should, your design lie about who you are?  Companies often pay advertisers to create ad copy
that misrepresent or even lies about their reputation. 
What should a designer's professional ethics be?

12.  Answering the Question:  But What do I put on  my 
      Web Page?

  1. What is the purpose or goal of your site?

  2. Who is your target audience?

  3. What does your target audience expect to get
    at your Web Site?

  4. Do you have content for your Web Site, or do you have to create it?

  5. Who will be responsible for updating your Web Site's content?

  6. Does your Web Site's Home Page answer the "Who, What, Where, When, and Why" Questions?

  7. How can you design your Web Site for the user?

  8. How will you test your Web Site to see if it works
    with your target audience?

  9. How can I  make my Web Site look professional, even
    stylish, while at the same time making it easy to navigate and use?

  10. What interests, passions, and hobbies do you want to share with a larger audience?

13.  Lessons in learning Web Design

  1. The first step is learning to use the tools

  2. The next step is understanding the limits of your tools.

  3. The next step is learning to lay out a web page.

  4. The next step is to learn basic design.

  5. The next step is learning how to trouble-shoot your web pages.

  6. The final step is revision, revision, and more revision.

14. Basic Web Design Principles

  1. Chris Lewis' Basic Web Design Principles
  2. Chris Lewis Basic Elements of a Website
    for Digital Design
  3. Top 15 Newbie mistakes
  4. Robin Williams- Good Design Features
  5. Robin Williams- Bad Design Features
  6. Top Ten Mistakes in Web Design
  7. Daily Sucker (current bad design examples)
  8. Yale Web Style Guide
  9. Webmonkey Web Design Site

15.  Basic Web Site Design Principles

  1. Make users feel comfortable at your site by
    letting them know where they are and where
    they can go.

  2. Make your design portable across different
    Internet Browsers and computer platforms.

  3. Design for a variety of web connection speeds.
    Try to design for low bandwidth.

  4. Design so that the user has easy access to
    information.

  5. Design for the whole site, not just individual pages.

  6. Create smooth transitions from one page to
    another page on your web site.

  7. Use a grid to  provide visual structure.  Use
    an invisible table and layers to create a layout grid.

  8. Use active white space to make your content
    stand out on the page.

  9. Design for the user and user interaction.

  10. Don't make users navigate through too many
    layers of your web site to get where they want
    to go.

  11. Use the power of hypertext linking to aid
    users in finding the information they need.

  12. Design for the screen.  Remember, a computer
    screen is "landscape oriented" rather than
    "portrait-oriented."

  13. Your Design should be based on simplicity
    and consistency.

  14. Design your site for easy user interaction.

16. Web Design Portfolio examples

  1. New Media Design Portfolio
  2. Circle.com Design Portfolio
  3. Dmitry Kirsanov Web Portfolio
  4. ThinkMango Web Design Portfolio

Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
15675      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 7 February, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/princi.htm

Digital Design Course homepage