1. WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University

2. THE GOAL OF WEB DESIGN IS USABILITY!

3. Usability Usability is the measure of the quality of a user's experience when interacting with a product or system. Things to consider with your website: Ease of learning Efficiency of use Memorability Error Frequency Subjective satisfaction Source: usability.gov

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

5. 1. PAGE LAYOUT & STRUCTURE

6. Page Layout & Structure Source: http://pixelactic.com/

7. 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 screens. Should not scroll horizontally. Not too long. Example: 800px wide.

8. Page Layout & Structure What is on your page? Header Navigation system Main content Footer You can use HTML5 tags to structure these elements:

9. Page Layout & Structure

10. 2. FONTS & TYPOGRAPHY

11. Fonts & Typography We use fonts and typography on the Web to... Make the content easy to read? Make the webpages 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;}

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

13. 3. COLORS

14. TOO MANY COLORS = NO COLOR Repeat after me, please!

15. 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; 3 rd &4 th digits stand for GREEN; 5 th &6 th 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.

16. Colors Tints: adding white Shades: adding black Tones: adding gray Source: http://www.tigercolor.com

17. 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

18. 4. IMAGES & GRAPHICS

19. 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