If you are looking for 'inspiration'

Check these sites out:
CSS Remix: http://www.cssremix.com
Logos: http://www.logopond.com
30 Great Websites: http://tutorialblog.org/30-great-website-designs-part1/

Resources from 1.29.09

Terms for class tonight 1.29.09

in word format: glossary.doc

HTML:
Contains all the code in an html file.
HEAD:
All tags with the …. are not displayed on the page.
It is used for other elements to build the webpage.
BODY:
Your html code here is displayed. All of your content resides with the ... .

HTML TAGS:
div: Container of code that you can style.

a: anchor –Tag you would use for a link.
p: paragraph – Tag for new paragraphs.

span: Tag for editing text inside a paragraph (or out) without modifying the text outside of it.
br: break – Tag used to ‘break’ a line.

: non-breaking space.
img: image tag, used for placing images:
H1, H2, H3: head tages. makes good header text.

HTML ATTRIBUTES:
src: used to give a source of a tag.
href: used to give the source of an anchor tag
id: the id of a tag, used to reference in CSS and JavaScript
class: the class of a tag, used to reference in CSS and JavaScript

CSS:
font-size: size of a font – font-size: 12px;
font-family: family of a font – font-family: Georgia ;
text-align: where to float your text – text-align: center ;
width: width of a given element – width: 800px; *
height: height of a given element – height: 600px; *
margin: the spacing around a given element – margin: 10px;
background: background of an element – background: #FFF;
border: sets a border on a given element – border: 1px solid #000;
padding: space between the edge of an element and its contents – padding: 10px; *

* padding increases the elements size. For example, if an element has

#element {
Width: 200px;
Height: 200px;
Padding: 10px;
}
The element is actually 220px height and 220px of width.

Resources from last class

Project Folder Structure:



Project Creation Process:

Web 2.0 Web Links

Style Guide:
http://www.webdesignfromscratch.com/web-2.0-design-style-guide.php

Examples:
http://www.go2web20.net/

Print 2 Web

Marina & Scott's Translation:



Georgia and Brandon's Translation:



Michele and Jen's Translation:

Website Links from 1.22.09

Common web fonts:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

a. People look at the top left of the website first. That is why many sites show a logo or branding at the top left. It identifies who the site is associated with, instantly.
i. www.aiga.com
ii. http://www.alistapart.com/
iii. http://www.deviantart.com/
iv. http://www.facebook.com

b. The second most prominently placed branding space is top center. This is a great place for large logos, or for centered websites.

i. http://www.google.com/
ii. http://www.yahoo.com/
iii. http://jbradforddillon.com/
c. Less is more. Give your site breathing room. Do not think that the more things going on, the better the site. It just gets overwhelming.

To many font/typeface use even if they are limited, try to limit yourself to 2. One for headings and one for copy. Usually that’s all you really need.

i. http://www.enter.net
2. http://www.havenworks.com/

Good resource for color choices/pallets:
1. http://www.colourlovers.com/
2. http://kuler.adobe.com/

Group Work Asset

You can use this for your layout.

Print != Web

Bkg: #840027
Frg: #a8ccee

Poster Text:
- Hours Sleeping a week \ 43.7
- How many text messages do you send a week \ 33.57
- Hours spend off campus \ 29.59
- Hours spent alone \ 21.05
- Hours spent socializing \ 20.8
- How many times do you check your e-mail \ 20.75
- Hours spent working on the computer \ 15.75
- Hours spent eating \ 13.90
- Hours spent doing school work \ 10.84
- Hours spent exercising \ 10.84
- Hours spent entertaining yourself on the computer \ 9.61
- Hours spent watching TV \ 9.15
- Hours spent in the library \ 7.20
- Number of energy products consumed \ 6.85
- Hours a week playing video games \ 6.83