SlideShare a Scribd company logo
Web 2.0
Style Guide
   Multimedia Design 1
Instructional Goals
•   Understand features of the current
    wave of excellent web site designs,
    do’s and don’t

•   Apply some basic principles of them
    to make “a good design” solution for
    the web
“the essence of Web2.0 design isn’t surface graphical effects but the
discipline of simplicity”
1. Simplicity
2. Central layout
3. Fewer columns
4. Separate top section
5. Solid areas of screen real-estate
6. Simple nav
7. Bold logos
8. Bigger text
9. Bold text introductions
10. Strong colours
11. Rich surfaces
12. Gradients
13. Reflections
14. Cute icons
15. Star flashes
1. Simplicity
“Use as few features as are necessary to
achieve what you need to achieve”
2.0 design means focused, clean and simple,
but that doesn’t necessarily mean minimalist
sample of simplicity principles in web page
Why Simplicity is Good?
• Web sites have goals and all web pages have
  purposes.
• Users’ attention is a finite resource.
• It’s the designer’s job to help users to find
  what they want (or to notice what the site
  wants them to notice)
• Stuff on the screen attracts the eye.
  The more stuff there is, the more different
  things there are to notice, and the less likely a
  user is to notice the important stuff.
• So we need to enable certain communication,
  and we also need to minimise noise.
  That means we need to find a solution that’s
  does its stuff with as little as possible. That’s
  economy, or simplicity.
How to Make Your Design
Simple?
There are two important aspects to achieving
success with simplicity:
 1. Remove unnecessary components, without
    sacrificing effectiveness.
 2. Try out alternative solutions that achieve the
    same result more simply.

“Whenever you’re designing, take it as a
discipline consciously to remove all
unnecessary visual elements”

Use visual detail – whether lines, words, shapes,
colour – to communicate the relevant
information, not just to decorate!
Here’s an example of a design that suffers from
Example 1                                           not enough simplicity.


Yaxay’s interface uses a lot of pixels, but
the vast majority of them are decorative.

There’s a lot of “busyness”, i.e. a lot of edges,
tonal changes, colour variations, shapes,
lines… a lot of stuff to look at.
But, in this detail, the only useful features
are:
 a. The site logo, and
 b. the label on the nav button (which reads
    “art gallery”)

All the rest of the “busyness”: the shapes in
the background, the diagonal lines in the
interface panel, the grid, the gradients… all
this is noise, it’s not enabling
communication.
from that case, Simplicity Means:




Use as many pixels as you need, in whatever way you need,
to facilitate the communication that needs to happen.
Web Designer isn’t communicating hard data, but soft
information, so use them (your pixel) consciously and
with care.

Hard data
means facts, like news, stock prices, train times, or how
much money is in your bank account…

Soft information
covers the qualitative aspects of communication, like
the first impression about the quality of a company, the
sense of how approachable a service provider is, and
whether you feel a product will be right for you. It can
be just as important!
Example 2
            Alex Dukal’s site is rich, interesting
            and appealing. It uses a range of
            visual techniques to draw your
            attention, make you interested and
            to give you a warm feeling about
            the quality of Alex’s work.

            But it’s also simple, because it uses its
            pixels/ink/busyness with care and
            sensitivity. It’s not gratuitous, it’s
            economical and rich.
2. Central Layout

Basically, the vast majority of sites these days are positioned centrally within
the browser window. Relatively few are full-screen (liquid) or left-aligned /
fixed-size, compared to a few years ago.
Why Central Layout is Good?
This “2.0″ style is simple, bold and honest. Sites
that sit straight front & center feel more simple,
bold and honest.
Also, because we’re being more economical
with our pixels (and content).
We’re using less to say more, so we can be a bit
more free and easy with the amount of space
used, and pad out our content with lots of lovely
white space.
When & How to Use a Central
Layout?
Position your site centrally unless there’s a really
good reason not to.
You may be wanting to get more creative with
the space, or get as much information on-screen
as possible (for example with a web app).
3. Fewer Columns

A few years ago, 3-column sites were the norm, and 4-column sites
weren’t uncommon. Today, 2 is more common, and 3 is the
mainstream maximum.
Why Using Fewer Column is
Good?
Less is more. Fewer columns feels simpler, bolder,
and more honest. We’re communicating less
information more clearly.

There’s also a by-product of the domination of
centered layouts. Because we’re not filling the
whole screen so much, and not trying to get as
much on-screen at any one time, we simply don’t
need as many columns of information.
Example 1
37Signals, they use 2 columns. This a great
case study in simplicity. It lets the message
speak, and adds nothing that could get in
the way.
This kind of layout works really, really well.
This typical Apple layout shows that someone has
honestly asked, “How many boxes/columns/lines
do we really need?”. Then they’ve boldly edited out
unnecessary elements, and the result is undeniably
the cleanest, most effective communication.
How to Choose Your Column?
It’ s better/recommended using no more than 3
columns, simply because you should use no
more of anything than you need to.

But, there are always exceptions, so here are a
few examples of more than 3 columns used
effectively.
But, there are always exceptions, so here are a
few examples of more than 3 columns used
effectively.
                                        Derek Powazek’s blog site uses 3
                                        columns for the main section of his
                                        blog, but 4 lower down.
                                        The lower section is a kind of pick &
                                        mix, where the abundance of columns
                                        emphasises the “Take what you like”
                                        feel.



                                        Amazon (UK) has two side columns, and
                                        products arranged centrally in 3
                                        additional columns.
                                        It works because the purpose of each
                                        column is clear from its design. The left
                                        col is definitely navigation; the right
                                        column is “other stuff”. The products in
                                        the middle are clearly tiled and separated
                                        by white space, so they don’t overwhelm.
Popurls.com contains loads of pick-
                                          n-mix information, collating the hot
                                          links from other sites like digg and
                                          del.icio.us, but it still keeps to 3
                                          columns for the main blocks of text.
                                          The lower section is a kind of pick &
                                          mix, where the abundance of
                                          columns emphasises the “Take
                                          what you like” feel.


Further down, it shows thumbnails of popular images on the photo-sharing
site Flickr (and there are Youtube vids later). These are tiled in several
columns, which is fine, because it’s a sit-back, scan and pick your
experience moment…
4. Separate Top Sections

This means making the top of the screen (the main branding &
nav area) distinct from the rest (the main content).

Of course, there’s nothing new about this approach. It’s a good
idea, and has been used for ever. But it’s being used more
than ever now, and the distinction is often stronger.
Why Distinct Top Section are
Good?
The top section says “Here’s the top of the page”.
Sounds obvious, but it feels good to know clearly
where the page starts.
It also starts the site/page experience with a
strong, bold statement. This is very “2.0″-spirited.
We like strong, simple, bold attitude.
When & How to Use Distinct
Top Section?
On any site, both the main branding and main
navigation should be obvious, bold and clear.
So it’s a good idea to create a clear space at the
top of a web site design that positions the logo
and nav boldly.
Always put your logo right up the top of the
screen. It’s always recommended putting your
main navigation right after it.
It’s definitely a good thing to mark the top of the
page with a section that marks out the high-level
screen features as separate from the main site
content.
The top section should be visually distinct from
the rest of the page content. The strongest way
to differentiate is to use a bold, solid block of
different colour or tone, but there are
alternatives.
Example 1
Here are 2 examples where the top section is
separated with a solid line, rather than being
solid colour itself.
Example 2
And here, the top section contents simply
sit boldly outside the main column area.
5. Solid Areas of Screen Real-Estate
Leading on from the clearly differentiated top area, you’ll
notice that lots of sites define the various areas of real-estate
boldly and clearly.
Real estate comes in various forms, including:
  • Navigation
  • Background / canvas
  • Main content area
  • Other stuff
  • Callouts / cross-links
It’s possible to design a web page so that these areas are
immediately distinct from their neighbours.
Example 1
The strongest way to do this is using colour
But white space can be just as effective.
The risk with strong colour is that it draws the eye, so it can take
attention away from other relevant screen elements.
Placing clean content on white space creates an easier experience,
helping the viewer to feel more relaxed and free to browse.
6. Simple Navigation

Permanent navigation – your global site nav that appears on
every page as part of the page template – needs to be clearly
identifiable as navigation, and should be easy to interpret,
target and select.
 • 2.0 design makes global navigation large, bold, clean and
   obvious.
 • Inline hyperlinks (links within text) are typically clearly
   differentiated from normal text.
Why Simple Navigation is
Better?
Users need to be able to identify navigation,
which tells them various important information:
 • Where they are (in the scheme of things)
 • Where else they can go from here
 • And what options they have for doing stuff

Following the principle of simplicity, and general
reduction of noise, the best ways to clarify
navigation are:
 • Positioning permanent navigation links apart
   from content
 • Differentiating navigation using colour, tone
   and shape
 • Making navigation items large and bold
 • Using clear text to make the purpose of each
   link unambiguous
How to Keep Your Navigation
Simple?

Simply remember the key: navigation should be
clearly distinguishable from non-navigation.

Inline hyperlinks should also stand out
sufficiently from the text around them.
Check out these snippets. In each case, you’re in do doubt what’s
a link. (Personally, I prefer using blue text (non-underlined)
which turns to underlined red on hover…)
7. Bold Logos

A clear, bold, strong brand – incorporating attitude, tone of voice,
and first impression – is helped by a bold logo.
Here are some (100% scale).
Notice that logos are tending to
be quite large, in line with the
general 2.0 principles.
Why Using Bold Logos are
Good?
Strong, bold logos say “This is who we are.” in a
way that we can believe.
When & How?
Your logo should:
 • work visually in its main context, and any
   other uses in which it may be used (like flyers
   or t-shirts?)
 • be recognisable and distinctive
 • represent your brand‘s personality and
   qualities on first viewing
8. Bigger Text & Bold Text Introductions

Lots of “2.0″ web sites have big text, compared to older-style
sites.

When you’ve made more room, you can choose to make more
important elements bigger than less important elements

Making things bigger makes them more noticeable than lesser
elements. This effect has been used throughout the history of
print design, on headings, title pages and headlines.
Example
When & How to Use Big Text &
Bold Text Intro?
Big text makes most pages more usable for
more people, so it’s a good thing.
In order to use big text, you have to make room
by simplifying, removing unnecessary
elements.
You also need to have a reason to make
some text bigger than other text. And the
text must be meaningful and useful.
There’s no point adding some big text just
because it’s oh-so 2.0!
Only use bold text intro/bigger text if you’ve got
something bold to say.
If you need to have a lot of information on a page,
and it’s all relatively equal in importance, then
maybe you can keep it all small.
9. Strong Colors
Bright, strong colours draw the eye. Use them to divide the
page into clear sections, and to highlight important elements.

When you have a simple, stripped-out design, you can use a bit of
intense colour to help differentiate areas of real-estate and to
draw attention to items you want the visitor to notice.
Example

          The Treo Mobile site uses 3 areas of
          strong colour to mark out and
          advertise 3 main areas of the site.
          The background colour makes it clear
          that this isn’t main content, and large,
          bold title text helps you see quickly
          what’s in each one, so you can decide
          whether it interests you.




          Colorschemer sections the page with
          bands of intense, bright, cheerful
          colour, set against a more neutral
          background.
10. Rich Surfaces
Most 2.0-style sites use subtle 3D effects, sparingly, to enhance
the qualitative feel of the design.

Realistic surface effects (like drop-shadows, gradients and reflections)
help make a visual interface feel more real, solid and “finished”.
Example
When & How to Use Rich
Surfaces?
The golden rule here is to use with care, and not
to overdo it.
Like any of these techniques, a rich surface
may add value to your design when used
sensitively and appropriately.
If your navigation/icon/logo/layout sucks
fundamentally, you can’t polish your way
out. Get the fundamentals right first.
It can also be important to maintain a
consistent light-source. Although this can
get more complex with the illusion of back-
lit diffusion in buttons etc., you still know
whether an overall design feels consistent.
3D effects can also make elements seem to
stand out from the page, but only if the rest
of the page is relatively flat.
11. Cute Icons
Icons play an important role in Web 2.0 design. Today we use
fewer, better icons that carry more meaning.
Icons can be useful when they’re easily recognisable and carry a
clear meaning. In lots of other cases, a simple word is more effective.
Simpler, more spacious designs demand less attention and allow for
a richer icons.
Example

   Simple and Clean




   Cute and Quirky
   Do not necessarily have to feature tiny hills!




   Richly Detailed
11. Star Flashes
These are the star-shaped labels that you see stuck on web pages,
alerting you to something important.
They work by evoking price stickers in low-cost stores. For this
reason, they suit the start-up ethic of many 2.0 sites, but for the
same reason may cheapen other sites.
They can really work well, but of course should only be used to
draw attention to something important.
I’d recommend only using one on a page (at most!).
Example
Reference:
http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/

More Related Content

What's hot

Web development
Web developmentWeb development
Web development
RaziyaChoudhary
 
Website Layout and Structure
Website Layout and StructureWebsite Layout and Structure
Website Layout and Structure
Michael Zinniger
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
Michael MacDonald
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
Dice Game Case Study 11 30 6
Dice Game Case Study 11 30 6Dice Game Case Study 11 30 6
Dice Game Case Study 11 30 6
Rajesh Kumar
 
Top web development tools
Top web development toolsTop web development tools
Top web development tools
BusinessDevelopment35
 
Introduction to Design Pattern
Introduction to Design  PatternIntroduction to Design  Pattern
Introduction to Design Pattern
Sanae BEKKAR
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
Amit Baghel
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Kannika Kong
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 
Web Engineering
Web EngineeringWeb Engineering
Web Engineering
Muhammad Muzammal
 
Python Basics
Python BasicsPython Basics
Python Basics
tusharpanda88
 
Python - gui programming (tkinter)
Python - gui programming (tkinter)Python - gui programming (tkinter)
Python - gui programming (tkinter)
Learnbay Datascience
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
JayjZens
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
Lemi Orhan Ergin
 
Mobile Programming
Mobile Programming Mobile Programming
Mobile Programming
Mobile Programming LLC
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
ParasJain222
 
Introduction To Django
Introduction To DjangoIntroduction To Django
Introduction To Django
Jay Graves
 
Software Requirements in Software Engineering SE5
Software Requirements in Software Engineering SE5Software Requirements in Software Engineering SE5
Software Requirements in Software Engineering SE5koolkampus
 
Web service architecture
Web service architectureWeb service architecture
Web service architecture
Muhammad Shahroz Anwar
 

What's hot (20)

Web development
Web developmentWeb development
Web development
 
Website Layout and Structure
Website Layout and StructureWebsite Layout and Structure
Website Layout and Structure
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
 
Dice Game Case Study 11 30 6
Dice Game Case Study 11 30 6Dice Game Case Study 11 30 6
Dice Game Case Study 11 30 6
 
Top web development tools
Top web development toolsTop web development tools
Top web development tools
 
Introduction to Design Pattern
Introduction to Design  PatternIntroduction to Design  Pattern
Introduction to Design Pattern
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Web Engineering
Web EngineeringWeb Engineering
Web Engineering
 
Python Basics
Python BasicsPython Basics
Python Basics
 
Python - gui programming (tkinter)
Python - gui programming (tkinter)Python - gui programming (tkinter)
Python - gui programming (tkinter)
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Mobile Programming
Mobile Programming Mobile Programming
Mobile Programming
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 
Introduction To Django
Introduction To DjangoIntroduction To Django
Introduction To Django
 
Software Requirements in Software Engineering SE5
Software Requirements in Software Engineering SE5Software Requirements in Software Engineering SE5
Software Requirements in Software Engineering SE5
 
Web service architecture
Web service architectureWeb service architecture
Web service architecture
 

Similar to Web 2.0 style guide

Web 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperWeb 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros Developer
Nyros Technologies
 
Atlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Tech Talk - Web 2.0 Design GuidelinesAtlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Technical Consulting
 
47 amazing blog designs
47 amazing blog designs47 amazing blog designs
47 amazing blog designs
João Patrício
 
47 amazing blog_designs_offer
47 amazing blog_designs_offer47 amazing blog_designs_offer
47 amazing blog_designs_offerAttila Gárdos
 
Parts Of A Website.pptx
Parts Of A Website.pptxParts Of A Website.pptx
Parts Of A Website.pptx
AllysaMaeCaleon
 
47 amazing blog designs
47 amazing blog designs47 amazing blog designs
47 amazing blog designs
Syed Umair Javed
 
47 Amazing Blog Designs
47 Amazing Blog Designs 47 Amazing Blog Designs
47 Amazing Blog Designs
C.Y Wong
 
Web Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in GurugramWeb Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in Gurugram
shailenra
 
Unit vi. lesson 1 & 2. offline application
Unit vi. lesson 1 & 2. offline applicationUnit vi. lesson 1 & 2. offline application
Unit vi. lesson 1 & 2. offline application
apolsoft2016
 
Eis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupEis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupMediaPost
 
Usability & UI (2010)
Usability & UI (2010)Usability & UI (2010)
Usability & UI (2010)
Mirco Pasqualini
 
No code stewardship - No Code Conf 2019 Demo Theater
No code stewardship - No Code Conf 2019 Demo TheaterNo code stewardship - No Code Conf 2019 Demo Theater
No code stewardship - No Code Conf 2019 Demo Theater
Webflow
 
Grids Are Good (Right?)
Grids Are Good (Right?)Grids Are Good (Right?)
Grids Are Good (Right?)elliando dias
 
Usabilityslideshow
UsabilityslideshowUsabilityslideshow
Usabilityslideshow
Carmell06769
 
Advexcellp
AdvexcellpAdvexcellp
Amsterdam Pm Web Process
Amsterdam Pm Web ProcessAmsterdam Pm Web Process
Amsterdam Pm Web Processamsterdampm
 
Improvement Engineering Examples
Improvement Engineering ExamplesImprovement Engineering Examples
Improvement Engineering Examples
Marrick13
 

Similar to Web 2.0 style guide (20)

Web 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperWeb 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros Developer
 
Atlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Tech Talk - Web 2.0 Design GuidelinesAtlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Tech Talk - Web 2.0 Design Guidelines
 
47 amazing blog designs
47 amazing blog designs47 amazing blog designs
47 amazing blog designs
 
47 amazing blog designs
47 amazing blog designs47 amazing blog designs
47 amazing blog designs
 
47 amazing blog_designs_offer
47 amazing blog_designs_offer47 amazing blog_designs_offer
47 amazing blog_designs_offer
 
Parts Of A Website.pptx
Parts Of A Website.pptxParts Of A Website.pptx
Parts Of A Website.pptx
 
47 amazing blog designs
47 amazing blog designs47 amazing blog designs
47 amazing blog designs
 
47 Amazing Blog Designs
47 Amazing Blog Designs 47 Amazing Blog Designs
47 Amazing Blog Designs
 
47 amazing blog_designs
47 amazing blog_designs47 amazing blog_designs
47 amazing blog_designs
 
Web Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in GurugramWeb Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in Gurugram
 
Unit vi. lesson 1 & 2. offline application
Unit vi. lesson 1 & 2. offline applicationUnit vi. lesson 1 & 2. offline application
Unit vi. lesson 1 & 2. offline application
 
Eis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupEis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroup
 
Usability & UI (2010)
Usability & UI (2010)Usability & UI (2010)
Usability & UI (2010)
 
No code stewardship - No Code Conf 2019 Demo Theater
No code stewardship - No Code Conf 2019 Demo TheaterNo code stewardship - No Code Conf 2019 Demo Theater
No code stewardship - No Code Conf 2019 Demo Theater
 
Grids Are Good (Right?)
Grids Are Good (Right?)Grids Are Good (Right?)
Grids Are Good (Right?)
 
Usabilityslideshow
UsabilityslideshowUsabilityslideshow
Usabilityslideshow
 
Microsoft word
Microsoft wordMicrosoft word
Microsoft word
 
Advexcellp
AdvexcellpAdvexcellp
Advexcellp
 
Amsterdam Pm Web Process
Amsterdam Pm Web ProcessAmsterdam Pm Web Process
Amsterdam Pm Web Process
 
Improvement Engineering Examples
Improvement Engineering ExamplesImprovement Engineering Examples
Improvement Engineering Examples
 

More from ananda gunadharma

Grid system introduction
Grid system introductionGrid system introduction
Grid system introduction
ananda gunadharma
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web design
ananda gunadharma
 
Wireframe
WireframeWireframe
Print design vs web design
Print design vs web designPrint design vs web design
Print design vs web design
ananda gunadharma
 
Effective visual communication for GUI
Effective visual communication for GUIEffective visual communication for GUI
Effective visual communication for GUI
ananda gunadharma
 
Rich Media Banner Ads
Rich Media Banner AdsRich Media Banner Ads
Rich Media Banner Ads
ananda gunadharma
 
Penyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklatPenyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklat
ananda gunadharma
 
Effective web navigation
Effective web navigationEffective web navigation
Effective web navigation
ananda gunadharma
 
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
ananda gunadharma
 

More from ananda gunadharma (9)

Grid system introduction
Grid system introductionGrid system introduction
Grid system introduction
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web design
 
Wireframe
WireframeWireframe
Wireframe
 
Print design vs web design
Print design vs web designPrint design vs web design
Print design vs web design
 
Effective visual communication for GUI
Effective visual communication for GUIEffective visual communication for GUI
Effective visual communication for GUI
 
Rich Media Banner Ads
Rich Media Banner AdsRich Media Banner Ads
Rich Media Banner Ads
 
Penyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklatPenyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklat
 
Effective web navigation
Effective web navigationEffective web navigation
Effective web navigation
 
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
 

Recently uploaded

PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
farhanaslam79
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 

Recently uploaded (20)

PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 

Web 2.0 style guide

  • 1. Web 2.0 Style Guide Multimedia Design 1
  • 2. Instructional Goals • Understand features of the current wave of excellent web site designs, do’s and don’t • Apply some basic principles of them to make “a good design” solution for the web
  • 3. “the essence of Web2.0 design isn’t surface graphical effects but the discipline of simplicity”
  • 4. 1. Simplicity 2. Central layout 3. Fewer columns 4. Separate top section 5. Solid areas of screen real-estate 6. Simple nav 7. Bold logos 8. Bigger text 9. Bold text introductions 10. Strong colours 11. Rich surfaces 12. Gradients 13. Reflections 14. Cute icons 15. Star flashes
  • 5. 1. Simplicity “Use as few features as are necessary to achieve what you need to achieve” 2.0 design means focused, clean and simple, but that doesn’t necessarily mean minimalist
  • 6. sample of simplicity principles in web page
  • 7. Why Simplicity is Good? • Web sites have goals and all web pages have purposes. • Users’ attention is a finite resource. • It’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice) • Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff. • So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.
  • 8. How to Make Your Design Simple? There are two important aspects to achieving success with simplicity: 1. Remove unnecessary components, without sacrificing effectiveness. 2. Try out alternative solutions that achieve the same result more simply. “Whenever you’re designing, take it as a discipline consciously to remove all unnecessary visual elements” Use visual detail – whether lines, words, shapes, colour – to communicate the relevant information, not just to decorate!
  • 9. Here’s an example of a design that suffers from Example 1 not enough simplicity. Yaxay’s interface uses a lot of pixels, but the vast majority of them are decorative. There’s a lot of “busyness”, i.e. a lot of edges, tonal changes, colour variations, shapes, lines… a lot of stuff to look at. But, in this detail, the only useful features are: a. The site logo, and b. the label on the nav button (which reads “art gallery”) All the rest of the “busyness”: the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients… all this is noise, it’s not enabling communication.
  • 10. from that case, Simplicity Means: Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.
  • 11. Web Designer isn’t communicating hard data, but soft information, so use them (your pixel) consciously and with care. Hard data means facts, like news, stock prices, train times, or how much money is in your bank account… Soft information covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you. It can be just as important!
  • 12. Example 2 Alex Dukal’s site is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex’s work. But it’s also simple, because it uses its pixels/ink/busyness with care and sensitivity. It’s not gratuitous, it’s economical and rich.
  • 13. 2. Central Layout Basically, the vast majority of sites these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.
  • 14. Why Central Layout is Good? This “2.0″ style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest. Also, because we’re being more economical with our pixels (and content). We’re using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.
  • 15. When & How to Use a Central Layout? Position your site centrally unless there’s a really good reason not to. You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).
  • 16. 3. Fewer Columns A few years ago, 3-column sites were the norm, and 4-column sites weren’t uncommon. Today, 2 is more common, and 3 is the mainstream maximum.
  • 17. Why Using Fewer Column is Good? Less is more. Fewer columns feels simpler, bolder, and more honest. We’re communicating less information more clearly. There’s also a by-product of the domination of centered layouts. Because we’re not filling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don’t need as many columns of information.
  • 18. Example 1 37Signals, they use 2 columns. This a great case study in simplicity. It lets the message speak, and adds nothing that could get in the way.
  • 19. This kind of layout works really, really well. This typical Apple layout shows that someone has honestly asked, “How many boxes/columns/lines do we really need?”. Then they’ve boldly edited out unnecessary elements, and the result is undeniably the cleanest, most effective communication.
  • 20. How to Choose Your Column? It’ s better/recommended using no more than 3 columns, simply because you should use no more of anything than you need to. But, there are always exceptions, so here are a few examples of more than 3 columns used effectively.
  • 21. But, there are always exceptions, so here are a few examples of more than 3 columns used effectively. Derek Powazek’s blog site uses 3 columns for the main section of his blog, but 4 lower down. The lower section is a kind of pick & mix, where the abundance of columns emphasises the “Take what you like” feel. Amazon (UK) has two side columns, and products arranged centrally in 3 additional columns. It works because the purpose of each column is clear from its design. The left col is definitely navigation; the right column is “other stuff”. The products in the middle are clearly tiled and separated by white space, so they don’t overwhelm.
  • 22. Popurls.com contains loads of pick- n-mix information, collating the hot links from other sites like digg and del.icio.us, but it still keeps to 3 columns for the main blocks of text. The lower section is a kind of pick & mix, where the abundance of columns emphasises the “Take what you like” feel. Further down, it shows thumbnails of popular images on the photo-sharing site Flickr (and there are Youtube vids later). These are tiled in several columns, which is fine, because it’s a sit-back, scan and pick your experience moment…
  • 23. 4. Separate Top Sections This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content). Of course, there’s nothing new about this approach. It’s a good idea, and has been used for ever. But it’s being used more than ever now, and the distinction is often stronger.
  • 24.
  • 25. Why Distinct Top Section are Good? The top section says “Here’s the top of the page”. Sounds obvious, but it feels good to know clearly where the page starts. It also starts the site/page experience with a strong, bold statement. This is very “2.0″-spirited. We like strong, simple, bold attitude.
  • 26. When & How to Use Distinct Top Section? On any site, both the main branding and main navigation should be obvious, bold and clear. So it’s a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly. Always put your logo right up the top of the screen. It’s always recommended putting your main navigation right after it. It’s definitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content. The top section should be visually distinct from the rest of the page content. The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.
  • 27. Example 1 Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.
  • 28. Example 2 And here, the top section contents simply sit boldly outside the main column area.
  • 29. 5. Solid Areas of Screen Real-Estate Leading on from the clearly differentiated top area, you’ll notice that lots of sites define the various areas of real-estate boldly and clearly. Real estate comes in various forms, including: • Navigation • Background / canvas • Main content area • Other stuff • Callouts / cross-links It’s possible to design a web page so that these areas are immediately distinct from their neighbours.
  • 30. Example 1 The strongest way to do this is using colour
  • 31. But white space can be just as effective. The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements. Placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.
  • 32. 6. Simple Navigation Permanent navigation – your global site nav that appears on every page as part of the page template – needs to be clearly identifiable as navigation, and should be easy to interpret, target and select. • 2.0 design makes global navigation large, bold, clean and obvious. • Inline hyperlinks (links within text) are typically clearly differentiated from normal text.
  • 33.
  • 34. Why Simple Navigation is Better? Users need to be able to identify navigation, which tells them various important information: • Where they are (in the scheme of things) • Where else they can go from here • And what options they have for doing stuff Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are: • Positioning permanent navigation links apart from content • Differentiating navigation using colour, tone and shape • Making navigation items large and bold • Using clear text to make the purpose of each link unambiguous
  • 35. How to Keep Your Navigation Simple? Simply remember the key: navigation should be clearly distinguishable from non-navigation. Inline hyperlinks should also stand out sufficiently from the text around them.
  • 36. Check out these snippets. In each case, you’re in do doubt what’s a link. (Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover…)
  • 37. 7. Bold Logos A clear, bold, strong brand – incorporating attitude, tone of voice, and first impression – is helped by a bold logo.
  • 38. Here are some (100% scale). Notice that logos are tending to be quite large, in line with the general 2.0 principles.
  • 39. Why Using Bold Logos are Good? Strong, bold logos say “This is who we are.” in a way that we can believe.
  • 40. When & How? Your logo should: • work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?) • be recognisable and distinctive • represent your brand‘s personality and qualities on first viewing
  • 41. 8. Bigger Text & Bold Text Introductions Lots of “2.0″ web sites have big text, compared to older-style sites. When you’ve made more room, you can choose to make more important elements bigger than less important elements Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.
  • 43. When & How to Use Big Text & Bold Text Intro? Big text makes most pages more usable for more people, so it’s a good thing. In order to use big text, you have to make room by simplifying, removing unnecessary elements. You also need to have a reason to make some text bigger than other text. And the text must be meaningful and useful. There’s no point adding some big text just because it’s oh-so 2.0! Only use bold text intro/bigger text if you’ve got something bold to say. If you need to have a lot of information on a page, and it’s all relatively equal in importance, then maybe you can keep it all small.
  • 44. 9. Strong Colors Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements. When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice.
  • 45. Example The Treo Mobile site uses 3 areas of strong colour to mark out and advertise 3 main areas of the site. The background colour makes it clear that this isn’t main content, and large, bold title text helps you see quickly what’s in each one, so you can decide whether it interests you. Colorschemer sections the page with bands of intense, bright, cheerful colour, set against a more neutral background.
  • 46. 10. Rich Surfaces Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design. Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and “finished”.
  • 48. When & How to Use Rich Surfaces? The golden rule here is to use with care, and not to overdo it. Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately. If your navigation/icon/logo/layout sucks fundamentally, you can’t polish your way out. Get the fundamentals right first. It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back- lit diffusion in buttons etc., you still know whether an overall design feels consistent. 3D effects can also make elements seem to stand out from the page, but only if the rest of the page is relatively flat.
  • 49. 11. Cute Icons Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning. Icons can be useful when they’re easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective. Simpler, more spacious designs demand less attention and allow for a richer icons.
  • 50. Example Simple and Clean Cute and Quirky Do not necessarily have to feature tiny hills! Richly Detailed
  • 51. 11. Star Flashes These are the star-shaped labels that you see stuck on web pages, alerting you to something important. They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites. They can really work well, but of course should only be used to draw attention to something important. I’d recommend only using one on a page (at most!).