Today’s objectives

1. Today’s objectives • Defining web design • Introduction to design precepts • Markup

2. Define Web Design • Good web design is much more than creating pretty pages. • Basic concepts of color theory, typography, layout , and usability are all part of a good design. (Hogan, 2009)

3. Define Web Design Everyone has some sense of what Web design is... but what is it really. • Graphic design, • Programming, • Information architecture(creation and organization of content), • Usability? • All part of any discussion - but their importance in design and development varies from person to person and from site to site.

4. Define Web Design • Web design is influenced by: • library science, • graphic design, • programming, • networking, • user interface design, • usability, • human computer interaction • and a host of other fields. • A multidisciplinary field.

5. Define Web Design Web design encompass a number of disciplines: • Visual (graphic) design • User interface and experience design • Web document and style sheet production • Scripting and programming • Content strategy • Multimedia

6. Define Web Design • A definition: …multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but not limited to, technical development, information structure, visual design, and networked delivery. Powerll, T.

7. Define Web Design • At it’s core, design is all about visual communication. • To be an effective designer, you have to be able to clearly communicate your ideas to users or else lose their attention. (Jones, 2011)

8. Components of Web Design

9. Define Web Design Components of Web design: • Content - information (text, images, etc.) and how it is organized and structured. • Visuals - screen layout and graphic used in a site. • Technology - HTML, CSS, interactive elements, programming techniques, languages. • Delivery - speed and reliability of a site’s delivery over the Internet. • Purpose - reason the site. Should drive all decisions involving site. Powell, T. , Web Design

10. Define Web Design • Amount each component of Web design influences a site may vary according to the type of site being built.

11. Define Web Design Web sites are primarily a client-server network modelwith three common elements: • Server-side - server hardware and software as well as other elements (e.g., Java based applications and databases). • Client-side - browser and supported technologies (e.g., HTML, CSS, and JavaScript). • Network -Connectivity elements utilized to deliver Web site to a user (e.g., various networks on the public Internet or private connections within an intranet.) Powell, T. , Web Design

12. Types of Web Sites

13. Types of Web Sites Abstract Groupings • First, consider if a site is • information focused (w3Schools | Duquesne), document-centered • task (Kuler |TypeTester) focused, application-centered. • Hybrid sites do a little of both (Amazon) Powell, T. , Web Design

14. Types of Web Sites Broad categories of sites – based on type information: • Informational - provide information about a particular subject, very common type of sites. • Transactional - used to conduct some transaction (E-commerce). • Community - provide information and interaction between likeminded individuals. • Entertainment - games or forms of entertaining interaction. • Other artistic, experimental sites, personal sites, blogs. Powell, T. , Web Design

15. Types of Web Sites Categories of sites - based on type of organization: • Commercial - site built for commercial gain. • Government - a government organization • Educational - educational institution, to support learning or research. • Charitable – nonprofit or the charitable organization. • Personal – individual or some person, outlet of personal expression. Powell, T. , Web Design

16. Types of Web Sites Site Genres • PERSONAL E-COMMERCE • BLOGS • WEB APPS THAT WORK • STIMULATING ARTS & ENTERTAINMENT • EDUCATIONAL FORUMS • GRASSROOTS INFORMATION SITES • NONPROFITS AS NETWORKS OF HELP • GOVERNMENT Design of Sites, Douglas K. van Duyne, James A. Landay and Jason I. Hong

17. Some principles behind web design

18. Web Design • Do people read web sites? • People are fickle. • Given large block of information, chances are they won’t read it.

19. We think people read like this...

20. But they probably see this…

21. Web Design …people will see our designs in terms of relationships…

22. What do you see?

23. What do you see?

24. You likely see a large red box and a small blue box, not just two boxes.

25. People try to differentiatebetween objects, size, color or other differences – to help them distinguish between objects and give them unique meanings. You likely see a large red box and a small blue box, not just two boxes.

26. Greater complexity, greater need to “distinguish” objects in terms of relationships.

27. Greater complexity, greater need to “distinguish” objects in terms of relationships. • What objects are related? How are they related? • Shape • Color • Size • Position

28. Greater complexity, greater need to “distinguish” objects in terms of relationships.

29. Proximity why are some close to each other – must be related.

30. Alignment.

31. Web Design • …understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

32. Web Design • It’s not enough to dish out information, as web designers, our job is to break down that raw information into meaningful visually relevant information. (Jones, 2011)

33. Common principles to show Relationships • Size • Color • Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different. • Alignment - creates order between elements. • Repetition - assigns relative meaning. If all important words are Blue, a blue word is important. • Proximity - separates elements from each other and creates sub-hierarchies.

34. Size and hierarchy – bigger is important and gets attention Apple | Craft Beer | Design Week Leaders

35. Color and hierarchy – creating relationships with color and size Leaders Thinkers

36. Contrast and hierarchy – emphasizes how big and how little the objects are.

37. Contrast and hierarchy Contrast shows relative important. Contrast Contrast Subtraction

38. Contrast and hierarchy Contrast Contrast

39. Contrast and hierarchy Changing from a light background to dark background can separate the core content of a page from the footer. Contrast Contrast

40. Contrast and hierarchy Contrast Contrast

41. Alignment – No alignment Subtraction

42. Alignment.

43. Alignment – square emphasis

44. Alignment – Row emphasis

45. Alignment – Row emphasis.

46. Repetition

47. Repetition Working with structure and Hierarchy in Web Design | Part 1 Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Hierarchy in Web Design Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

48. Repetition- repeated patterns provide people useful information about the text. Working with structure and Hierarchy in Web Design | Part 1 Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Hierarchy in Web Design Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

49. Proximity

50. Proximity