Week 2 Web Design: Basics

To do this week

1. Web Design Theories: read about ePortfolios

http://web.cortland.edu/shis/314Fall2005/week3_eportfoliothoery.htm

This assignment asks you to read and think about the eportfolio concept. I would like you to think about this course as having a balance between thinking and actions, between learning about the portfolio concept--its history and change over time, various kinds and uses of portfolios, etc., and learning to make electronic portfolios (specifically web pages).

2. Web Design Guidelines and Aesthetic Considerations

Everything should be made as simple as possible but not simpler. -- Einstein Simplicity, Consistency & Color Schemes - Aesthetic Considerations of Web design
Structure & Navigation - Technical Considerations of Web Design

3.Technical Skills to Achieve, and Some of the Aesthetic Considerations

3.1. Navigation in web design

A good website designer always tries to create a website navigation scheme that (a) is consistent throughout the entire web site and (b) allows the site's visitors to find what they are searching for quickly and easily. Examples:

• SUNY Cortland Website: http://www.cortland.edu
• Dr. Susan Stratton's Design: http://web.cortland.edu/strattons/Dr.Rambach's Design: http://web.cortland.edu/rombachk
• Dr. Shufang Shi's Design: http://web.cortland.edu/shis EDU314 Fall05 Course Website Design (Horizontal Navigation Scheme)
• EDU314 Course Website Design (Vertical Navitation Scheme)

3.2. Learning to do a "simple" navigation scheme: Horizontal Navigation bar

In the coming few weeks, we will first practice creating horizontal nagivation through the following two projects.

1) Create your home page using horizontal navigation;
2) Create a school website using horizontal navigation (we'll learn vertical navigation scheme later when we do webquest projects).

And

3) Start to practice creating vertical navigation through WebQuest Project.

3.3 Tables in web design

Tables are ubiquetious in web design. Table are used mainly for two purposes

1) For data display

Tables in EDU314 Fall 06 Syllabus

2 ) For Page layout

Kara Guidik's ePortfoiloAllisa Brady's ePortfolio

Kristen Nuss's ePortfoilo

3.4 Learning to use tables

How to use table to design your web: an online audio-visual tutorial

3.5 More technical Skills

Link to e-mail address

Here is the syntax for a link to your email address: mailto:[email protected] (or any other email address)

Note that there are no spaces in this. This is a very common mistake, so I'll say it again: there are no spaces in the email adress.

Animated pictures and Clipart: AnimationLibrary, Which claims to be "The World's Largest Animation Collection." Gifanimations , which claims to be the "Internet's most original and largest collection of free animated GIFs" You can also share your own website that you are downloading fun stuff from!

Recommend other skills you want to learn and we'll do it together now!

4. Designing Your Website

4.1 Do the minimum required

Designing your own webfolio mainly includes the required components described in Basic Requirements in the Syllabus. It is recommended that you design the homepage using paper and pencil first and then make it in Nvu.

4.2 Do as much as you can

If you want to design a website that you can add things easily later and keep updating after this class, you can use a navigation scheme, applying either Horizontal Navigation or Vertical Navigation. You need to be good at table skills for this. You are encouraged to go as far as you can!!!

Homework

Prepare for the next class

Is this your mood today?