Components of Web Design { Creative Session @ Moksha}
-
Upload
mokshastudio -
Category
Design
-
view
1.927 -
download
0
description
Transcript of Components of Web Design { Creative Session @ Moksha}
![Page 1: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/1.jpg)
© www.mokshastudio.com
![Page 2: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/2.jpg)
© www.mokshastudio.com
01 JUNE 2011
ONE COMPONENTS OF WEB DESIGN
![Page 3: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/3.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
![Page 4: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/4.jpg)
© www.mokshastudio.com
First of all,one question …
![Page 5: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/5.jpg)
© www.mokshastudio.com
What is DESIGN ?
![Page 6: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/6.jpg)
© www.mokshastudio.com
What is DESIGN ?
Design is the planning that lays the basis for the making of every object or system.
Wikipedia
![Page 7: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/7.jpg)
© www.mokshastudio.com
What is DESIGN ?
design is communication.
@mattwiebe
![Page 8: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/8.jpg)
© www.mokshastudio.com
What is DESIGN ?
Design is an aesthetically pleasing solution to a visual or functional problem.
@mylesgrimm
![Page 9: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/9.jpg)
© www.mokshastudio.com
What is DESIGN ?
Design is solving a problem.
@simonbanyard
![Page 10: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/10.jpg)
© www.mokshastudio.com
What is DESIGN ?
Design is solving a problem as awesomely as possible.
@bryanconnor
![Page 11: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/11.jpg)
© www.mokshastudio.com
What is DESIGN ?
Design = simple effective presentation of content (data or information).
@kevinholesh
![Page 12: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/12.jpg)
© www.mokshastudio.com
What is DESIGN ?
it's the chance to bring to life dreams and ideas.
@sonoroman
![Page 13: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/13.jpg)
© www.mokshastudio.com
What is DESIGN ?
Right and wrong do not exist in graphic design. There is only effective and non-effective communication.
unknown
![Page 14: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/14.jpg)
© www.mokshastudio.com
What is DESIGN ?
If you wanna innovate, you gotta design.
Marty Neumeier, The Brand Gap
![Page 15: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/15.jpg)
© 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
![Page 16: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/16.jpg)
© 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
![Page 17: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/17.jpg)
© www.mokshastudio.com
Back to our Topic…
![Page 18: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/18.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Organizing the information on a website in the best possible way,so that users can efficiently effectively find information.
Aesthetic design is all about getting the look right. It is about the overall visual look and feel of the site.
Interface design is the arrangement and makeup of how a user can interact with a site.
![Page 19: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/19.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Information design meansdesigning the structure of a website, i.e the way information is grouped, the navigation methods and terminology used within the system.
![Page 20: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/20.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
An effective information design enables people to navigate easily through a website And get the information they require, & perform the actions.
![Page 21: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/21.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
An example of information design process…
![Page 22: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/22.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
RawContents
![Page 23: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/23.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
ContentStrategy
RawContents
![Page 24: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/24.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
WireframesDesign
ContentStrategy
RawContents
![Page 25: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/25.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Out of the three components of web design, aesthetic design is surely the one that people most identify as being design.
![Page 26: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/26.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
It is the overallVisual appearanceOf a website.
![Page 27: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/27.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
LayoutStyleColorFont
Patterns
TexturesImagesIllustrationsDimensionThemeetc …
![Page 28: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/28.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Example
![Page 29: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/29.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Interface design is about Interaction. It is about making the experience of using a website easy, effective and intuitive.
![Page 30: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/30.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
It's no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.
![Page 31: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/31.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
'Staying out of the way' means not distracting your users. Rather, good UIs let your users complete goals.
![Page 32: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/32.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Navigation MenuFormsIconsLinks
EffectsAnimationButtonsCall to Actionetc…
![Page 33: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/33.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Some simple examples…
![Page 34: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/34.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Δ
Which icon is “contact us” ?
回 ╪₪
Which icon is “contact us” ?
![Page 35: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/35.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
Which is a link ?
Home Home
Which is a link ?
Home Home
![Page 36: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/36.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
So, a good Interface Design is requiredfor effective and efficient communication between the user and the website.
![Page 37: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/37.jpg)
© www.mokshastudio.com
The 3 Components of Web Design
1. INFORMATION Design
2. AESTHETIC Design
3. INTERFACE Design
So, these are the 3 Non-Technical Components Of Web Design.
A good designer should have a firm grasp Of all three.
![Page 38: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/38.jpg)
© www.mokshastudio.com
Thank you !
![Page 39: Components of Web Design { Creative Session @ Moksha}](https://reader036.fdocuments.us/reader036/viewer/2022062405/555a8308d8b42a98568b4ef4/html5/thumbnails/39.jpg)
© www.mokshastudio.com
MOKSHA DESIGN STUDIO