A presentation we prepared for our first In-house Creative Session. Components of web design. The discussion was interesting. We came up with a common goal ; let's design the web with strategy, aesthetics and interaction ! ------------------- Stock Photos by : Moksha Design Studio Quotes : Various Designers Texts courtesy : Compiled from Various Design Blogs

1. © www.mokshastudio.com

2. 01 JUNE 2011 © www.mokshastudio.com ONE COMPONENTS OF WEB DESIGN

3. The 3 Components of Web Design © www.mokshastudio.com

4. © www.mokshastudio.com First of all, one question …

5. © www.mokshastudio.com What is DESIGN ?

6. © www.mokshastudio.com What is DESIGN ? Design is the planning that lays the basis for the making of every object or system. Wikipedia

7. © www.mokshastudio.com What is DESIGN ? design is communication. @mattwiebe

8. © www.mokshastudio.com What is DESIGN ? Design is an aesthetically pleasing solution to a visual or functional problem. @mylesgrimm

9. © www.mokshastudio.com What is DESIGN ? Design is solving a problem. @simonbanyard

10. © www.mokshastudio.com What is DESIGN ? Design is solving a problem as awesomely as possible. @bryanconnor

11. © www.mokshastudio.com What is DESIGN ? Design = simple effective presentation of content (data or information). @kevinholesh

12. © www.mokshastudio.com What is DESIGN ? it's the chance to bring to life dreams and ideas. @sonoroman

13. © www.mokshastudio.com What is DESIGN ? Right and wrong do not exist in graphic design. There is only effective and non-effective communication. unknown

14. © www.mokshastudio.com What is DESIGN ? If you wanna innovate, you gotta design. Marty Neumeier, The Brand Gap

15. © www.mokshastudio.com What is DESIGN ? Design is the process of finding the most elegant answer to the question of 'how do I?' Paul Scrivens, Drawar.com

16. © www.mokshastudio.com What is DESIGN ? Design is not just what it looks like and feels like. Design is how it works. Steve Jobs, Apple

17. © www.mokshastudio.com Back to our Topic…

18. The 3 Components of Web Design 1. INFORMATION Design Organizing the information on a website in the best possible way, so that users can efficiently effectively find information. 2. AESTHETIC Design Aesthetic design is all about getting the look right. It is about the overall visual look and feel of the site. 3. INTERFACE Design Interface design is the arrangement and makeup of how a user can interact with a site. © www.mokshastudio.com

19. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Information design meansdesigning the structure of a website, i.e the way information is grouped, the navigation methods and terminology used within the system.

20. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com An effective information design enables people to navigate easily through a website And get the information they require, & perform the actions.

21. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com An example of information design process…

22. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Raw Contents

23. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Raw Contents Content Strategy

24. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Raw Contents Content Strategy Wireframes Design

25. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Out of the three components of web design, aesthetic design is surely the one that people most identify as being design.

26. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com It is the overall Visual appearance Of a website.

27. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Layout Textures Style Images Color Illustrations Font Dimension Patterns Theme etc …

28. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Example

29. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Interface design is about Interaction. It is about making the experience of using a website easy, effective and intuitive.

30. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com It's no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.

31. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com 'Staying out of the way'means not distracting your users. Rather, good UIs let your users complete goals.

32. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Navigation Menu Effects Forms Animation Icons Buttons Links Call to Action etc…

33. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Some simple examples…

34. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Which icon is “contact us” ? Δ ₪ 回 ╪ Which icon is “contact us” ?

35. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com Which is a link ? Which is a link ? Home Home Home Home

36. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com So, a good Interface Design is required for effective and efficient communication between the user and the website.

37. The 3 Components of Web Design INFORMATION Design 2. AESTHETIC Design 3. INTERFACE Design © www.mokshastudio.com So, these are the 3 Non-Technical Components Of Web Design. A good designer should have a firm grasp Of all three.

38. © www.mokshastudio.com Thank you !

39. © www.mokshastudio.com MOKSHA DESIGN STUDIO