Download Design Principles - Web Design & Publishing

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
• Measured in pixel or em
• Font family
• 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
• 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!!