Components of Web Design { Creative Session @ Moksha}

© www.mokshastudio.com


01 JUNE 2011

ONE COMPONENTS OF WEB DESIGN


The 3 Components of Web Design


First of all,one question …


What is DESIGN ?


What is DESIGN ?

Design is the planning that lays the basis for the making of every object or system.

Wikipedia


What is DESIGN ?

design is communication.

@mattwiebe


What is DESIGN ?

Design is an aesthetically pleasing solution to a visual or functional problem.

@mylesgrimm


What is DESIGN ?

Design is solving a problem.

@simonbanyard


What is DESIGN ?

Design is solving a problem as awesomely as possible.

@bryanconnor


What is DESIGN ?

Design = simple effective presentation of content (data or information).

@kevinholesh


What is DESIGN ?

it's the chance to bring to life dreams and ideas.

@sonoroman


What is DESIGN ?

Right and wrong do not exist in graphic design. There is only effective and non-effective communication.

unknown


What is DESIGN ?

If you wanna innovate, you gotta design.

Marty Neumeier, The Brand Gap


What is DESIGN ?

Design is the process of finding the most elegant answer to the question of 'how do I?'

Paul Scrivens, Drawar.com


What is DESIGN ?

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs, Apple


Back to our Topic…



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.




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.




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.




2. AESTHETIC Design

3. INTERFACE Design

An example of information design process…




2. AESTHETIC Design

3. INTERFACE Design

RawContents




2. AESTHETIC Design

3. INTERFACE Design

ContentStrategy

RawContents




2. AESTHETIC Design

3. INTERFACE Design

WireframesDesign

ContentStrategy

RawContents




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.




2. AESTHETIC Design

3. INTERFACE Design

It is the overallVisual appearanceOf a website.




2. AESTHETIC Design

3. INTERFACE Design

LayoutStyleColorFont

Patterns

TexturesImagesIllustrationsDimensionThemeetc …




2. AESTHETIC Design

3. INTERFACE Design

Example




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.




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.




2. AESTHETIC Design

3. INTERFACE Design

'Staying out of the way' means not distracting your users. Rather, good UIs let your users complete goals.




2. AESTHETIC Design

3. INTERFACE Design

Navigation MenuFormsIconsLinks

EffectsAnimationButtonsCall to Actionetc…




2. AESTHETIC Design

3. INTERFACE Design

Some simple examples…




2. AESTHETIC Design

3. INTERFACE Design

Δ

Which icon is “contact us” ?

回 ╪₪

Which icon is “contact us” ?




2. AESTHETIC Design

3. INTERFACE Design

Which is a link ?

Home Home

Which is a link ?

Home Home




2. AESTHETIC Design

3. INTERFACE Design

So, a good Interface Design is requiredfor effective and efficient communication between the user and the website.




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.


Thank you !


MOKSHA DESIGN STUDIO