1. Web Design M. Jacie Yang Assistant Professor
School of Journalism & Mass Comm
Texas State University- San Marcos

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.
You want your website to be:
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:

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 screen.
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:
<header></header>
<nav></nav>
<section></section>
<footer></footer>

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 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;}

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

13. 3. Colors

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

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

16. Colors Tints: adding white Shades: adding black Tones: adding gray
Source:

17. Colors Places that can help you pick colors that go well together:
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.

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 putting it into Dreamweaver!!