© www.mokshastudio.com<br />
01 JUNE 2011<br />© www.mokshastudio.com<br />ONE   COMPONENTS OF <br />WEB DESIGN<br />
The <br />3 Components <br />of Web Design<br />© www.mokshastudio.com<br />
© www.mokshastudio.com<br />First of all,<br />one question …<br />
© www.mokshastudio.com<br />What is DESIGN ?<br />
© www.mokshastudio.com<br />What is DESIGN ?<br />Design is the planning that lays the basis for the making of every objec...
© www.mokshastudio.com<br />What is DESIGN ?<br />design is communication. <br />@mattwiebe<br />
© www.mokshastudio.com<br />What is DESIGN ?<br />Design is an aesthetically pleasing solution to a visual or functional p...
© www.mokshastudio.com<br />What is DESIGN ?<br />Design is solving a problem.<br />@simonbanyard<br />
© www.mokshastudio.com<br />What is DESIGN ?<br />Design is solving a problem as awesomely as possible.<br />@bryanconnor<...
© www.mokshastudio.com<br />What is DESIGN ?<br />Design = simple effective presentation of content (data or information)....
© www.mokshastudio.com<br />What is DESIGN ?<br />it's the chance to bring to life dreams and ideas.<br />@sonoroman<br />
© www.mokshastudio.com<br />What is DESIGN ?<br />Right and wrong do not exist in graphic design. There is only effective ...
© www.mokshastudio.com<br />What is DESIGN ?<br />If you wanna innovate, you gotta design.<br />Marty Neumeier, The Brand ...
© www.mokshastudio.com<br />What is DESIGN ?<br />Design is the process of finding the most elegant answer to the question...
© www.mokshastudio.com<br />What is DESIGN ?<br />Design is not just what it looks like and feels like. Design is how it w...
© www.mokshastudio.com<br />Back to our <br />Topic…<br />
The 3 Components of Web Design<br />1. INFORMATION Design<br />Organizing the information on a website in the best possibl...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
The 3 Components of Web Design<br />INFORMATION <br />Design<br />2. AESTHETIC <br />    Design<br />3. INTERFACE <br />  ...
© www.mokshastudio.com<br />Thank you !<br />
© www.mokshastudio.com<br />MOKSHA DESIGN STUDIO<br />
Upcoming SlideShare
Loading in...5
×

Components of Web Design { Creative Session @ Moksha}

2,015

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,015
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×