Web DesignM. Jacie YangAssistant ProfessorSchool of Journalism & Mass CommTexas State University- San Marcos

The Goal of Web Design is Usability!

Usability• Usability is the measure of the quality of a user's experience

when interacting with a product or system.• You want your website to be:

• Ease of learning• Efficiency of use• Memorability• Error Frequency• Subjective satisfaction

Source: usability.gov

Four Elements for Web Design• Page Layout & Structure• Fonts & Typography• Color• Images & Graphics

1. Page Layout & Structure

Page Layout & Structure

Source: http://pixelactic.com/

Page Layout & Structure• Homepage dimension:

• Your main content should show in the browser when people load the page.

• That means:• Should be smaller than (most) users’ computer screen.• Should not scroll horizontally.• Not too long.• Example: 800px wide.

Page Layout & Structure• What is on your page?

• Header• Navigation system• Main content• Footer

• You can use HTML5 tags to structure these elements: • <header></header>• <nav></nav>• <section></section>• <footer></footer>

Page Layout & Structure

2. Fonts & Typography

Fonts & Typography• We use fonts and typography on the Web to...

• Make the content easy to read?• Make the Web pages look pretty?

• We can tell the Web browser what specific font to use and what font family to use.

• Example of CSSbody {font-family: Arial, Helvetica, sans-serif;}

Fonts & Typography

• Font size• Measured in pixel or em

• Font family• Serif

• i.e. Times New Roman

• Sans-Serif• i.e. Ariel

3. Colors

Too Many Colors = No ColorRepeat after me, please!

Web Colors• RGB

• R=Red• G=Green• B=Blue

• We use a six-digit color code to specify RGB color.• White: #FFFFFF• Black: #000000• The first two digits stand for RED; 3rd&4th digits stand for GREEN;

5th&6th digits stand for BLUE. • Each digit ranges from 0-F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E,

F).• Thus, there are 256 possibilities for RED (16x16); 256 possible

colors for GREEN; 256 possible colors for BLUE.

Colors

• Tints: adding white• Shades: adding black• Tones: adding gray

Source: http://www.tigercolor.com

Colors• Places that can help you pick colors that go well together:

• http://kuler.adobe.com/• http://www.colorblender.com/

• Check color contrast:• You want to check if there is enough contrast between two colors,

especially when you have a color for your text and then a background color.

• http://snook.ca/technical/colour_contrast/colour.html

4. Images & Graphics

Images & Graphics• File size should be small

• Usually no bigger than 100 kb.• If it is a graphic with limited color or a small logo, file size is usually

around 20 kb.

• Use appropriate file format• For photos (true colors), use jpeg or jpg.• For graphics, use gif or png.

• Optimize your images in Photoshop BEFORE putting it into Dreamweaver!!