Lecture Summary 3
Prepared by: Anthony Larrain
Project 1
- Details posted tonight
- Due around the end of week 7. Details posted.
- Worth 20% of your grade.
- A 5 - 7 page website centered around you, a hobby or an activity you are involved with
- Must follow design guidelines.
- You must do your own project. The midterm project is NOT a group effort.
- Start thinking about your topic.
- Once you have the topic start thinking about content.
- Spend allot of time surfing the web and look at similar sites. Save the links, write down ideas. Allot of time 5,10,15 hrs. Don't worry about other sites layout, fancy graphics, you are looking for ideas pertaining to content.
- Talk to friends, classmates, teachers etc.. about content.
- You can develop from scratch or use my template.
- We will spend todays lab working with the project template.
- Put some time into this and enjoy.
Website
- A set of interconnected web pages, usually including a homepage, generally located on the same server, and prepared and maintained as a collection of information by a person, group, or organization
- The web pages of a web site should obey the 4 basic design principles
- Each web page should look like it belongs to the same web site.
- The template we will look at today will take a nice and simple structured approach.
- Each web page associated with the "template" site will be broken down into 4 simple divisions
- A header, this is were the site logo and introduction will go. Domain name often appears here.
- Navigation Link. Links that take you to other pages of your web site. They must be easily located and precise.
- The content area. This will contain the content of that page. Use HTML and CSS to structure and present your content. Use headings, paragraphs, lists, tables etc.
- The Footer area. Copyright info and contact information.
Project Templates
I suggest using the template. This way you can focus on the structure and presentation of the content.
Here is the project template without any styles
Don't forget to change the data in the template to reflect your site. Also, you should play with the styles and come up with your own colors, fonts etc..
I will go through the HTML code in class. In lab you will add the styles.
Here is an example of content being added to the homepage
4 Basic Design Principles - C.R.A.P
Taken from The Non-Designers Web Book by Williams & Tollett
- Contrast
- Avoid items on a page that are merely similar.
- If the items are not the same, make them very different.
- Contrast is often what draws a reader to the page in the first place.
- Rule: Do not use more than two different fonts per page. Make the fonts very different to make their difference obvious.
- Fonts can contrast in family, size, weight, and, color.
- Repetion
- Repeat visual elements of the design throughout the web site.
- Different pages in the site should look stylistically the same.
- Alignment
- Do not place items on a page arbitrarily.
- Every element on a page should be placed in relation to the other elements on that page.
- Center page elements rarely. Left alignment usually works better.
- Stay away from justified text. Note: Your teacher violates this one
- Proximity
- Items related in meaning should be grouped together.
- Proximity keeps a page organized and reduces clutter.