1. Web Design

2. WEB DESIGN
Program Courses

3. Program Courses
OF WEB DESIGN
GRPH 210 Fundamentals of Graphic Design
GRPH 310 Advanced Graphic Design
WEBD 234 Web Design & Implementation
EMKT 415 Search Engine Optimization

4. WEB DESIGN
Nature & Purpose

5. Nature & Purpose
OF WEB DESIGN

6. Nature & Purpose
OF WEB DESIGN
PURPOSE • effective communication of
ideas on the web
• organize information for
ease of use
• improve aesthetics

7. Nature & Purpose
OF WEB DESIGN
CREATE • logo, graphics
• web documents
DEVELOP • strategy for effective
presentation of information

8. WEB DESIGN
Key Outcomes

9. Key Outcomes
OF WEB DESIGN
APPLY • layout
DESIGN
PRINCIPLES • typography
• color
• usability

10. Key Outcomes
OF WEB DESIGN
ORGANIZE • effective presentation
INFORMATION
• use of clear hierarchy
• optimize for search engines

11. Key Outcomes
OF WEB DESIGN
ADHERE TO • validate markup
WEB STANDARDS
• use best practices
• make content accessible

12. Key Outcomes
OF WEB DESIGN
USE & IMPLEMENT • HTML
PROGRAMMING
LANGUAGE • CSS
• JavaScript

13. Key Outcomes
OF WEB DESIGN
DESIGN & • design brief
DEVELOP
• logo, ads, collateral
• functional website
• link-building campaign

14. WEB DESIGN
Cognitive Map

15. Cognitive Map
OF WEB DESIGN

16. WEB DESIGN
Key Theories

17. Key Theories
OF WEB DESIGN
THEORY #1 The Gestalt Principles
THEORY #2 Color Psychology
THEORY #3 Web Usability

18. WEB DESIGN THEORY
Gestalt Principles

19. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
“ Human perception is governed by
relationships; how things are
similar or dissimilar, how they
contrast or blend with one
another, and how arrangements of
things suggest hierarchies and are
affected by context.
— Rutledge, 2008

20. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
SIMILARITY items of similar size, shape,
color are perceived as a group

21. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
SIMILARITY consistent visual cues:

22. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
CONTINUANCE elements moving in same
direction are more related

23. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
PROXIMITY items in close proximity are
grouped together

24. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
PROXIMITY navigational proximity:

25. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
CLOSURE brain achieves closure by
filling in missing information

26. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
FIGURE-GROUND elements are perceived as:
• figures (focus)
• or ground (background)

27. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
FIGURE-GROUND spot the dog’s face:

28. The Gestalt Principles
KEY THEORIES OF WEB DESIGN
FIGURE-GROUND spot the parrot:

29. WEB DESIGN THEORY
Color Psychology

30. Color Psychology
KEY THEORIES OF WEB DESIGN
“ Color informs, bringing instant
comprehension, calling attention,
delivering information, creating
an identity and explaining the
characteristics of a product (or
service).
Above all, colors evoke emotions.”
— Eiseman, 2006

31. Color Psychology
KEY THEORIES OF WEB DESIGN
BRIGHT PINK playful, festive, stimulating
BRICK RED earthy, warm
DEEP REDS rich, mature, robust

32. Color Psychology
KEY THEORIES OF WEB DESIGN
TURQUOISE compassionate, water
CHARTREUSE artsy, bold, trendy
DARK GREEN natural, trustworthy, stately

33. Color Psychology
KEY THEORIES OF WEB DESIGN
GOLDEN YELLOW nourishing, buttery, comfort
TANGERINE juicy, fruitful, energizing
VIBRANT ORANGE fun, whimsical, gregarious

34. Color Psychology
KEY THEORIES OF WEB DESIGN
DEEP BLUE credible, authoritative, classic
BLUE PURPLES contemplative, mysterious
SKY BLUE calming, faithful, true

35. WEB DESIGN THEORY
Web Usability

36. Web Usability
KEY THEORIES OF WEB DESIGN
“ … high usability means a system
is: easy to learn and remember;
efficient, visually pleasing and
fun to use; and quick to recover
from errors.
— Dictionary of Computing, n.d.

37. Web Usability
KEY THEORIES OF WEB DESIGN
WEB DESIGN
CONVENTIONS top left corner: logo
LAYOUT

38. Web Usability
KEY THEORIES OF WEB DESIGN
WEB DESIGN
CONVENTIONS • use meaningful labels
LINKS
• provide clickability cues
• differentiate visited links

39. Web Usability
KEY THEORIES OF WEB DESIGN
WEB DESIGN
CONVENTIONS • consistent placement
PAGE STRUCTURE
• proper alignment

40. Web Usability
KEY THEORIES OF WEB DESIGN
WEB DESIGN
CONVENTIONS • make information available
ACCESSIBILITY to users with disabilities,
(users of assistive
technologies)

41. WEB DESIGN
Academic Authorities

42. Academic Authorities
OF WEB DESIGN
COLOR SPECIALIST Leatrice Eiseman
AUTHOR Robin Landa
GOOGLE ASSOCIATE Matt Cutts

43. WEB DESIGN
Practitioners

44. Practitioners
OF WEB DESIGN
GRAPHIC DESIGNER Jason Santa Maria
ILLUSTRATOR Nick La
USABILITY EXPERT Jakob Nielsen

45. WEB DESIGN
Key Texts

46. Key Texts
OF WEB DESIGN
Color: Messages and Meanings,
COLOR
A Pantone Color Resource
USABILITY UseIt.com
ACCESSIBILITY ADA Standards for
Accessible Design

47. WEB DESIGN
Mags & Associations

48. Magazines & Associations
OF WEB DESIGN
American Institute
AIGA
of Graphic Arts
AWARDS Webby Awards
MAGAZINE Smashing Magazine

49. REFERENCES
Dictionary of Computing. (n.d.). Usability. Retrieved from http://foldoc.org/usability
Eiseman, L. (2006). Color: Messages and meanings. Gloucester, MA: Hand Books Press.
KISSmetrics. (2010). How do colors affect purchases? Retrieved from
http://blog.kissmetrics.com/color-psychology/
Liquori, E. (2011, September 19). The close relationship between Gestalt principles and design.
Retrieved from http://www.instantshift.com/2011/09/19/the-close-relationship-between-gestalt-
principles-and-design/
McClurg-Genevese, J. D. (2005, June 13). The principles of design. Retrieved from
http://www.digital-web.com/articles/principles_of_design/
Rutledge, A. (2008, December 9). Gestalt principles of perception. Retrieved from
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
Spokane Falls. (n.d.). The Gestalt Principles. Retrieved from
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
U.S. Dept. of Health and Human Services. (2006). The Research-Based Web Design & Usability
Guidelines. Retrieved from http://www.usability.gov/guidelines/index.html

50. The End
Thank you.