Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Components of Web Design { Creative Session @ Moksha}

2,484 views

Published on

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

Published in: Design
  • Be the first to comment

Components of Web Design { Creative Session @ Moksha}

  1. 1. © www.mokshastudio.com<br />
  2. 2. 01 JUNE 2011<br />© www.mokshastudio.com<br />ONE COMPONENTS OF <br />WEB DESIGN<br />
  3. 3. The <br />3 Components <br />of Web Design<br />© www.mokshastudio.com<br />
  4. 4. © www.mokshastudio.com<br />First of all,<br />one question …<br />
  5. 5. © www.mokshastudio.com<br />What is DESIGN ?<br />
  6. 6. © www.mokshastudio.com<br />What is DESIGN ?<br />Design is the planning that lays the basis for the making of every object or system.<br />Wikipedia<br />
  7. 7. © www.mokshastudio.com<br />What is DESIGN ?<br />design is communication. <br />@mattwiebe<br />
  8. 8. © www.mokshastudio.com<br />What is DESIGN ?<br />Design is an aesthetically pleasing solution to a visual or functional problem.<br />@mylesgrimm<br />
  9. 9. © www.mokshastudio.com<br />What is DESIGN ?<br />Design is solving a problem.<br />@simonbanyard<br />
  10. 10. © www.mokshastudio.com<br />What is DESIGN ?<br />Design is solving a problem as awesomely as possible.<br />@bryanconnor<br />
  11. 11. © www.mokshastudio.com<br />What is DESIGN ?<br />Design = simple effective presentation of content (data or information).<br />@kevinholesh<br />
  12. 12. © www.mokshastudio.com<br />What is DESIGN ?<br />it's the chance to bring to life dreams and ideas.<br />@sonoroman<br />
  13. 13. © www.mokshastudio.com<br />What is DESIGN ?<br />Right and wrong do not exist in graphic design. There is only effective and non-effective communication. <br />unknown<br />
  14. 14. © www.mokshastudio.com<br />What is DESIGN ?<br />If you wanna innovate, you gotta design.<br />Marty Neumeier, The Brand Gap<br />
  15. 15. © www.mokshastudio.com<br />What is DESIGN ?<br />Design is the process of finding the most elegant answer to the question of 'how do I?'<br />Paul Scrivens, Drawar.com<br />
  16. 16. © www.mokshastudio.com<br />What is DESIGN ?<br />Design is not just what it looks like and feels like. Design is how it works.<br />Steve Jobs, Apple<br />
  17. 17. © www.mokshastudio.com<br />Back to our <br />Topic…<br />
  18. 18. The 3 Components of Web Design<br />1. INFORMATION Design<br />Organizing the information on a website in the best possible way,<br />so that users can efficiently effectively find information.<br />2. AESTHETIC Design<br />Aesthetic design is all about getting the look right. <br />It is about the overall visual look and feel of the site.<br />3. INTERFACE Design<br />Interface design is the arrangement and makeup of <br />how a user can interact with a site. <br />© www.mokshastudio.com<br />
  19. 19. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Information design meansdesigning the structure of a website, i.e the way information is grouped, the navigation methods and terminology used within the system.<br />
  20. 20. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />An effective information design <br />enables people to <br />navigate easily through a website <br />And get the information they require, <br />& perform the actions.<br />
  21. 21. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />An example <br />of information design process…<br />
  22. 22. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Raw<br />Contents<br />
  23. 23. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Raw<br />Contents<br />Content<br />Strategy<br />
  24. 24. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Raw<br />Contents<br />Content<br />Strategy<br />Wireframes<br />Design<br />
  25. 25. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Out of the three components of web design, aesthetic design is surely the one that people most identify as being design.<br />
  26. 26. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />It is the overall<br />Visual appearance<br />Of a website.<br />
  27. 27. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Layout<br />Textures<br />Style<br />Images<br />Color<br />Illustrations<br />Font<br />Dimension<br />Patterns<br />Theme<br />etc …<br />
  28. 28. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Example<br />
  29. 29. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Interface design is about Interaction. It is about making the experience of using a website easy, effective and intuitive.<br />
  30. 30. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />It's no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.<br />
  31. 31. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />'Staying out of the way'means not distracting your users. Rather, good UIs let your users complete goals.<br />
  32. 32. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Navigation Menu<br />Effects<br />Forms<br />Animation<br />Icons<br />Buttons<br />Links<br />Call to Action<br />etc…<br />
  33. 33. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Some simple examples…<br />
  34. 34. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Which icon is “contact us” ?<br />Δ<br />₪<br />回<br />╪ <br />Which icon is “contact us” ?<br />
  35. 35. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />Which is a link ?<br />Which is a link ?<br />Home<br />Home<br />Home<br />Home<br />
  36. 36. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />So, a good Interface Design is required<br />for effective and efficient communication between the user and the website.<br />
  37. 37. The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br /> Design<br />3. INTERFACE <br /> Design<br />© www.mokshastudio.com<br />So, these are the <br />3 Non-Technical Components <br />Of Web Design.<br />A good designer should have a firm grasp <br />Of all three.<br />
  38. 38. © www.mokshastudio.com<br />Thank you !<br />
  39. 39. © www.mokshastudio.com<br />MOKSHA DESIGN STUDIO<br />

×