Web Design M. Jacie Yang Assistant Professor School of Journalism & Mass Comm Texas 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 CSS body {font-family: Arial, Helvetica, sans-serif;}

Fonts & Typography Font size Font family Measured in pixel or em Serif i.e. Times New Roman Sans-Serif i.e. Ariel

3. Colors

Too Many Colors = No Color Repeat after me, please!

Web Colors RGB We use a six-digit color code to specify RGB color. 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!!