1. Chapter 3 What is Web Design? Get Trained for a Better Future Introduction to Design Mostafa Badr

2.  What is Web Design?  Wikipedia: “Web Design is a skill of creating presentations of content (usually hypertext or hypermedia that is delivered to an end-user through the World Wide Web, by way of a Web browser or either Web- enabled software like Internet television clients, microblogging clients and RSS feeders.” Definition of Web Design Mostafa Badr

3.  Web Design is difficult to define because it covers so much ground:  Clients  Types of contents  Functionalities Definition of Web Design Mostafa Badr

4. Web Design Basics What is a good Web site from a design standpoint? Mostafa Badr

5. Defining Graphic Design  Not about Software (just tools)  Visual Communication/ Functional Art  Problem Solving  “Information Architects”  “…The designer conceives, plans, and executes designs that communicate a specific message to a specific audience within given limitations…” Mostafa Badr

6. Some Basics 1.Logos- simplified forms 2.Contrast- attention 3.Visual Hierarchy- comprehension 4.Layout- organization 5.Integrating Type and Image 6.Visual Themes Mostafa Badr

7. The Design Process  Defining the Problem  Research (Audience, Constraints, Goals)  Build your Visual Vocabulary- search for samples  Build on the work of others- combine in a new original way  Thumbnails  Roughs  Comprehensives  Presentation  Ready for Press Mostafa Badr

8. It Starts With Creativity  Good design is created with a basic understanding of: - Design processes - Theories and concepts of design  Designer/client relationship governs the entire design process Mostafa Badr

9. Fundamentals of Design  Design elements  Line, Shape, Value, Color, Texture, Space  Design principles  Balance, Proximity, Alignment, Unity, Emphasis, Rhythm Mostafa Badr

10.  Think of something anyone can do? Answer: Make an ugly Web page.  To avoid making an ugly Web page, we need to learn the basic design principles.  Four basic concepts: alignment, proximity, rhythm/repetition, and contrast + one additional: spelling  Results: From dorky to professional looking pages Introduction Mostafa Badr

11.  In order to use the principles properly we first need to understand:  How users interact with Web sites.  How they think  What are the basic patterns of users’ behavior How do users think? Mostafa Badr

12.  Users don’t read, they scan.  Web users are impatient and insist on instant gratification.  Users don’t make optimal choices.  Users follow their intuition.  Users want to have control. How do users think? Mostafa Badr

13.  Alignment: Items on the page are lined up with each other  Two types of alignment:  Horizontal alignment  Vertical alignment.  CHOOSE ONE. Choose one alignment and use it on the entire page. Don’t mix alignment.  Get the text away from the left edge. This means indent your text so the text doesn’t appear in long, dorky, difficult-to-read lines.  Type sits on an invisible line called the “baseline”. Alignment Mostafa Badr

14. Example 1 Mostafa Badr

18.  Proximity: Relationships that items develop when they are close together, in close proximity.  Be conscious of the space between elements.  Group together  Space them apart  Difference between a paragraph and a break: and Proximity Mostafa Badr

19.  Three tools of proximity:  Grouping  Containment  Whitespace Proximity Mostafa Badr

20. Example 1 Mostafa Badr

21. Example 2 Mostafa Badr

22. Example 3 Mostafa Badr

23. Example 4 Mostafa Badr

25.  Rhythm: Associate elements by repeating a common stylistic feature or arrangement  Repetition: Throughout a project you repeat certain elements that tie all the disparate parts together.  Repetition elements that unify the entire site:  Navigation buttons  Colors  Style  Illustrations  Format  Layout  Typography Rythms & Repetition Mostafa Badr

27. Example 2 Mostafa Badr

28.  Contrast: What draws your eyes onto the page.  Contrasting elements guide your eyes into the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need Contrast Mostafa Badr

29.  Contrast elements:  Style  Colors  Graphic signposts  Spatial arrangement  Exception: If you want people to sit and read through an entire piece, avoid contrast so the page can be bland and uninterrupted. Contrast Mostafa Badr

32. Example 2 Mostafa Badr

33.  Easy way to assess the overall contrast of your page  Technique: Close your eyelids so your eyes are about three quarters closed, so that normal text becomes blurred and unreadable. Squint Test Mostafa Badr

34. Example 3 Mostafa Badr

35.  Create a focal point: Something must be the dominating force, and the other elements follow a hierarchy from that point down. The focus is created through contrast. Contrast Mostafa Badr

38.  Bad spelling and bad grammar can destroy the professional effect of your web site  Use spell checker Spell it Right! Mostafa Badr

39.  Applying any one of these principles will radically improve the design of your web pages, you will generally find yourself applying more than one principle, and probably all four.  Summary of the principles:  Spelling  Contrast  Repetition  Alignment  Proximity Combine the principles Mostafa Badr

40. 1.Place your name and logo on every page and make the logo a link to the home page 2.Provide search if the site has more than 100 pages 3.Write straightforward and simple headlines and page titles 4.Structure the page Top Ten Good Deeds in Web Design (Nielsen, 1999) Mostafa Badr

41. 5.Use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic 6.Use high quality photos 7.Use relevance-enhanced image reduction when preparing small photos and images Top Ten Good Deeds in Web Design (Nielsen, 1999) (cont) Mostafa Badr

42. 8.Use link titles to provide users with a preview of each link 9.Ensure that all important pages are accessible for users 10.Do the same as most big websites else: if most big websites do something in a certain way, then follow along since user will expect things to work the same on your website Top Ten Good Deeds in Web Design (Nielsen, 1999) (cont) Mostafa Badr

43.  Pictures are not crawlable.  Flash in the front page is frustrating (if user has no bandwidth connection)  Provide options Some words about pictures (or Flash) Mostafa Badr

44. 1.Believing people care about you and your website. 2.can't figure out what your website is about in less than four seconds 3.Contrast 4.My website is everything Biggest Mistakes in Web Design Mostafa Badr

45. 5. Have you ever seen another website? 6. Navigational failure 7. Site lacks Content 8. Forgetting the purpose of text 9. Too much material on one page 10. Misusing Flash …cont Mostafa Badr

46. Information overload (crowded) Mostafa Badr

47. Bad text (hard to read) Mostafa Badr

48. 100% Flash + Bad Navigation Mostafa Badr

49. Bad typography Mostafa Badr

50. Graphical Menu Mostafa Badr

51. Graphical Menu Mostafa Badr

52. Flashy – my eyes hurt Mostafa Badr

53.  Why?  Small screen  Not so powerful browser  Limited data network Design for Mobile Devices Mostafa Badr

54.  Most of popular CMS provide Mobile plug-ins  Blogger.com  Joomla  Wordpress Design for Mobile Devices Mostafa Badr