Web Site Design Principles
Assignment: (Do before Class):
Dreamweaver MX, pp. 80-90, 154-162;
Web Page Design, pp. 44-46;
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
1. Criteria for Design Portfolio and Basic Websites
2. Students' Portfolio webpages
- Jackie Steinberg Home page
3. Students' Webgenre project
Lewis' webgenre model pages
- VI Reggae
- The Adobe Resort
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
- 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:
- Here is a webpage using the "basic.css"
- Always select link to style sheet, this allows
you to use the same style sheet for an
- 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
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
8. Using Fireworks for Image Editing
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
- 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
Design Template Page
Editor View of Modelgridlayout file
11. Basic Questions to ask about the Websites you
your Website Design work with your "targeted audience"?
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.
should a designer's professional ethics be?
12. Answering the Question: But What do I put
- 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
- 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,
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
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
The final step is revision, revision, and more revision.
14. Basic Web Design Principles
Lewis' Basic Web Design Principles
Lewis Basic Elements of a Website
for Digital Design
- Top 15 Newbie
Williams- Good Design Features
Williams- Bad Design Features
- Top Ten
Mistakes in Web Design
Sucker (current bad design examples)
Web Style Guide
Web Design Site
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
- 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
- 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
- Your Design should be based on simplicity
- Design your site for easy user interaction.
16. Web Design Portfolio examples
- New Media
Kirsanov Web Portfolio
Web Design Portfolio