Basic Website Design Principles

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

Jackie Steinberg Home page

3. Students' Webgenre project

4. Using non-default fonts in Dreamweaver

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

5. Creating Cascading Style Sheets (CSS)

Example of Style Sheet: basic.css
Here is another example of a style sheet:
test.css
Here is a webpage using the "basic.css"
stylesheet.
Always select link to style sheet, this allows
you to use the same style sheet for an
entire website
You must put "stylesheet" files on the web
in order for them to work. Such a file is always -- name.css
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

imageex.png

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

9. Sklar "Understanding Web Design Principles"

Design for the medium
Design for the whole site
Use Active White space
Design for the user, make it easy to use
Understand how people view Webpages,
understand viewing patterns
Chunk your material and link with
hypertext
Limit the amount of information per webpage
Design for the screen, landscape view not
portrait view (horizontal not vertical design)

10. Creating Website Design Template Pages

Digital Design Template Page
Modelgridlayout
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?

What is the purpose or goal of your site?
Who is your target audience?
What does your target audience expect to get
at your Web Site?
Do you have content for your Web Site, or do you have to create it?
Who will be responsible for updating your Web Site's content?
Does your Web Site's Home Page answer the "Who, What, Where, When, and Why" Questions?
How can you design your Web Site for the user?
How will you test your Web Site to see if it works
with your target audience?
How can I make my Web Site look professional, even
stylish, while at the same time making it easy to navigate and use?
What interests, passions, and hobbies do you want to share with a larger audience?

13. Lessons in learning Web Design

The first step is learning to use the tools
The next step is understanding the limits of your tools.
The next step is learning to lay out a web page.
The next step is to learn basic design.
The next step is learning how to trouble-shoot your web pages.
The final step is revision, revision, and more revision.

14. Basic Web Design Principles

15. Basic Web Site Design Principles

Make users feel comfortable at your site by
letting them know where they are and where
they can go.
Make your design portable across different
Internet Browsers and computer platforms.
Design for a variety of web connection speeds.
Try to design for low bandwidth.
Design so that the user has easy access to
information.
Design for the whole site, not just individual pages.
Create smooth transitions from one page to
another page on your web site.
Use a grid to provide visual structure. Use
an invisible table and layers to create a layout grid.
Use active white space to make your content
stand out on the page.
Design for the user and user interaction.
Don't make users navigate through too many
layers of your web site to get where they want
to go.
Use the power of hypertext linking to aid
users in finding the information they need.
Design for the screen. Remember, a computer
screen is "landscape oriented" rather than
"portrait-oriented."
Your Design should be based on simplicity
and consistency.
Design your site for easy user interaction.

16. Web Design Portfolio examples