Web 2.0Style Guide   Multimedia Design 1
Instructional Goals•   Understand features of the current    wave of excellent web site designs,    do’s and don’t•   Appl...
“the essence of Web2.0 design isn’t surface graphical effects but thediscipline of simplicity”
1. Simplicity2. Central layout3. Fewer columns4. Separate top section5. Solid areas of screen real-estate6. Simple nav7. B...
1. Simplicity“Use as few features as are necessary toachieve what you need to achieve”2.0 design means focused, clean and ...
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.• I...
How to Make Your DesignSimple?There are two important aspects to achievingsuccess with simplicity: 1. Remove unnecessary c...
Here’s an example of a design that suffers fromExample 1                                           not enough simplicity.Ya...
from that case, Simplicity Means:Use as many pixels as you need, in whatever way you need,to facilitate the communication ...
Web Designer isn’t communicating hard data, but softinformation, so use them (your pixel) consciously andwith care.Hard da...
Example 2            Alex Dukal’s site is rich, interesting            and appealing. It uses a range of            visual...
2. Central LayoutBasically, the vast majority of sites these days are positioned centrally withinthe browser window. Relat...
Why Central Layout is Good?This “2.0″ style is simple, bold and honest. Sitesthat sit straight front & center feel more si...
When & How to Use a CentralLayout?Position your site centrally unless there’s a reallygood reason not to.You may be wantin...
3. Fewer ColumnsA few years ago, 3-column sites were the norm, and 4-column sitesweren’t uncommon. Today, 2 is more common...
Why Using Fewer Column isGood?Less is more. Fewer columns feels simpler, bolder,and more honest. We’re communicating lessi...
Example 137Signals, they use 2 columns. This a greatcase study in simplicity. It lets the messagespeak, and adds nothing t...
This kind of layout works really, really well.This typical Apple layout shows that someone hashonestly asked, “How many bo...
How to Choose Your Column?It’ s better/recommended using no more than 3columns, simply because you should use nomore of an...
But, there are always exceptions, so here are afew examples of more than 3 columns usedeffectively.                        ...
Popurls.com contains loads of pick-                                          n-mix information, collating the hot         ...
4. Separate Top SectionsThis means making the top of the screen (the main branding &nav area) distinct from the rest (the ...
Why Distinct Top Section areGood?The top section says “Here’s the top of the page”.Sounds obvious, but it feels good to kn...
When & How to Use DistinctTop Section?On any site, both the main branding and mainnavigation should be obvious, bold and c...
Example 1Here are 2 examples where the top section isseparated with a solid line, rather than beingsolid colour itself.
Example 2And here, the top section contents simplysit boldly outside the main column area.
5. Solid Areas of Screen Real-EstateLeading on from the clearly differentiated top area, you’llnotice that lots of sites de...
Example 1The 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 takeattention away...
6. Simple NavigationPermanent navigation – your global site nav that appears onevery page as part of the page template – n...
Why Simple Navigation isBetter?Users need to be able to identify navigation,which tells them various important information...
How to Keep Your NavigationSimple?Simply remember the key: navigation should beclearly distinguishable from non-navigation...
Check out these snippets. In each case, you’re in do doubt what’sa link. (Personally, I prefer using blue text (non-underl...
7. Bold LogosA clear, bold, strong brand – incorporating attitude, tone of voice,and first impression – is helped by a bol...
Here are some (100% scale).Notice that logos are tending tobe quite large, in line with thegeneral 2.0 principles.
Why Using Bold Logos areGood?Strong, bold logos say “This is who we are.” in away 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 flyer...
8. Bigger Text & Bold Text IntroductionsLots of “2.0″ web sites have big text, compared to older-stylesites.When you’ve ma...
Example
When & How to Use Big Text &Bold Text Intro?Big text makes most pages more usable formore people, so it’s a good thing.In ...
9. Strong ColorsBright, strong colours draw the eye. Use them to divide thepage into clear sections, and to highlight impo...
Example          The Treo Mobile site uses 3 areas of          strong colour to mark out and          advertise 3 main are...
10. Rich SurfacesMost 2.0-style sites use subtle 3D effects, sparingly, to enhancethe qualitative feel of the design.Realis...
Example
When & How to Use RichSurfaces?The golden rule here is to use with care, and notto overdo it.Like any of these techniques,...
11. Cute IconsIcons play an important role in Web 2.0 design. Today we usefewer, better icons that carry more meaning.Icon...
Example   Simple and Clean   Cute and Quirky   Do not necessarily have to feature tiny hills!   Richly Detailed
11. Star FlashesThese are the star-shaped labels that you see stuck on web pages,alerting you to something important.They ...
Example
Reference:http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/
Web 2.0 style guide
Web 2.0 style guide
Upcoming SlideShare
Loading in...5
×

Web 2.0 style guide

5,466
-1

Published on

Basic principles of designing web, do's and don't. Compile from any resources, credit to: webdesignfromscratch.com

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,466
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web 2.0 style guide

  1. 1. Web 2.0Style Guide Multimedia Design 1
  2. 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. 3. “the essence of Web2.0 design isn’t surface graphical effects but thediscipline of simplicity”
  4. 4. 1. Simplicity2. Central layout3. Fewer columns4. Separate top section5. Solid areas of screen real-estate6. Simple nav7. Bold logos8. Bigger text9. Bold text introductions10. Strong colours11. Rich surfaces12. Gradients13. Reflections14. Cute icons15. Star flashes
  5. 5. 1. Simplicity“Use as few features as are necessary toachieve what you need to achieve”2.0 design means focused, clean and simple,but that doesn’t necessarily mean minimalist
  6. 6. sample of simplicity principles in web page
  7. 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. 8. How to Make Your DesignSimple?There are two important aspects to achievingsuccess 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 adiscipline consciously to remove allunnecessary visual elements”Use visual detail – whether lines, words, shapes,colour – to communicate the relevantinformation, not just to decorate!
  9. 9. Here’s an example of a design that suffers fromExample 1 not enough simplicity.Yaxay’s interface uses a lot of pixels, butthe 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 featuresare: a. The site logo, and b. the label on the nav button (which reads “art gallery”)All the rest of the “busyness”: the shapes inthe background, the diagonal lines in theinterface panel, the grid, the gradients… allthis is noise, it’s not enablingcommunication.
  10. 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. 11. Web Designer isn’t communicating hard data, but softinformation, so use them (your pixel) consciously andwith care.Hard datameans facts, like news, stock prices, train times, or howmuch money is in your bank account…Soft informationcovers the qualitative aspects of communication, likethe first impression about the quality of a company, thesense of how approachable a service provider is, andwhether you feel a product will be right for you. It canbe just as important!
  12. 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. 13. 2. Central LayoutBasically, the vast majority of sites these days are positioned centrally withinthe browser window. Relatively few are full-screen (liquid) or left-aligned /fixed-size, compared to a few years ago.
  14. 14. Why Central Layout is Good?This “2.0″ style is simple, bold and honest. Sitesthat sit straight front & center feel more simple,bold and honest.Also, because we’re being more economicalwith our pixels (and content).We’re using less to say more, so we can be a bitmore free and easy with the amount of spaceused, and pad out our content with lots of lovelywhite space.
  15. 15. When & How to Use a CentralLayout?Position your site centrally unless there’s a reallygood reason not to.You may be wanting to get more creative withthe space, or get as much information on-screenas possible (for example with a web app).
  16. 16. 3. Fewer ColumnsA few years ago, 3-column sites were the norm, and 4-column sitesweren’t uncommon. Today, 2 is more common, and 3 is themainstream maximum.
  17. 17. Why Using Fewer Column isGood?Less is more. Fewer columns feels simpler, bolder,and more honest. We’re communicating lessinformation more clearly.There’s also a by-product of the domination ofcentered layouts. Because we’re not filling thewhole screen so much, and not trying to get asmuch on-screen at any one time, we simply don’tneed as many columns of information.
  18. 18. Example 137Signals, they use 2 columns. This a greatcase study in simplicity. It lets the messagespeak, and adds nothing that could get inthe way.
  19. 19. This kind of layout works really, really well.This typical Apple layout shows that someone hashonestly asked, “How many boxes/columns/linesdo we really need?”. Then they’ve boldly edited outunnecessary elements, and the result is undeniablythe cleanest, most effective communication.
  20. 20. How to Choose Your Column?It’ s better/recommended using no more than 3columns, simply because you should use nomore of anything than you need to.But, there are always exceptions, so here are afew examples of more than 3 columns usedeffectively.
  21. 21. But, there are always exceptions, so here are afew examples of more than 3 columns usedeffectively. 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. 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-sharingsite Flickr (and there are Youtube vids later). These are tiled in severalcolumns, which is fine, because it’s a sit-back, scan and pick yourexperience moment…
  23. 23. 4. Separate Top SectionsThis 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 goodidea, and has been used for ever. But it’s being used morethan ever now, and the distinction is often stronger.
  24. 24. Why Distinct Top Section areGood?The top section says “Here’s the top of the page”.Sounds obvious, but it feels good to know clearlywhere the page starts.It also starts the site/page experience with astrong, bold statement. This is very “2.0″-spirited.We like strong, simple, bold attitude.
  25. 25. When & How to Use DistinctTop Section?On any site, both the main branding and mainnavigation should be obvious, bold and clear.So it’s a good idea to create a clear space at thetop of a web site design that positions the logoand nav boldly.Always put your logo right up the top of thescreen. It’s always recommended putting yourmain navigation right after it.It’s definitely a good thing to mark the top of thepage with a section that marks out the high-levelscreen features as separate from the main sitecontent.The top section should be visually distinct fromthe rest of the page content. The strongest wayto differentiate is to use a bold, solid block ofdifferent colour or tone, but there arealternatives.
  26. 26. Example 1Here are 2 examples where the top section isseparated with a solid line, rather than beingsolid colour itself.
  27. 27. Example 2And here, the top section contents simplysit boldly outside the main column area.
  28. 28. 5. Solid Areas of Screen Real-EstateLeading on from the clearly differentiated top area, you’llnotice that lots of sites define the various areas of real-estateboldly and clearly.Real estate comes in various forms, including: • Navigation • Background / canvas • Main content area • Other stuff • Callouts / cross-linksIt’s possible to design a web page so that these areas areimmediately distinct from their neighbours.
  29. 29. Example 1The strongest way to do this is using colour
  30. 30. But white space can be just as effective.The risk with strong colour is that it draws the eye, so it can takeattention 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.
  31. 31. 6. Simple NavigationPermanent navigation – your global site nav that appears onevery page as part of the page template – needs to be clearlyidentifiable 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.
  32. 32. Why Simple Navigation isBetter?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 stuffFollowing the principle of simplicity, and generalreduction of noise, the best ways to clarifynavigation 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
  33. 33. How to Keep Your NavigationSimple?Simply remember the key: navigation should beclearly distinguishable from non-navigation.Inline hyperlinks should also stand outsufficiently from the text around them.
  34. 34. Check out these snippets. In each case, you’re in do doubt what’sa link. (Personally, I prefer using blue text (non-underlined)which turns to underlined red on hover…)
  35. 35. 7. Bold LogosA clear, bold, strong brand – incorporating attitude, tone of voice,and first impression – is helped by a bold logo.
  36. 36. Here are some (100% scale).Notice that logos are tending tobe quite large, in line with thegeneral 2.0 principles.
  37. 37. Why Using Bold Logos areGood?Strong, bold logos say “This is who we are.” in away that we can believe.
  38. 38. 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
  39. 39. 8. Bigger Text & Bold Text IntroductionsLots of “2.0″ web sites have big text, compared to older-stylesites.When you’ve made more room, you can choose to make moreimportant elements bigger than less important elementsMaking things bigger makes them more noticeable than lesserelements. This effect has been used throughout the history ofprint design, on headings, title pages and headlines.
  40. 40. Example
  41. 41. When & How to Use Big Text &Bold Text Intro?Big text makes most pages more usable formore people, so it’s a good thing.In order to use big text, you have to make roomby simplifying, removing unnecessaryelements.You also need to have a reason to makesome text bigger than other text. And thetext must be meaningful and useful.There’s no point adding some big text justbecause it’s oh-so 2.0!Only use bold text intro/bigger text if you’ve gotsomething bold to say.If you need to have a lot of information on a page,and it’s all relatively equal in importance, thenmaybe you can keep it all small.
  42. 42. 9. Strong ColorsBright, strong colours draw the eye. Use them to divide thepage into clear sections, and to highlight important elements.When you have a simple, stripped-out design, you can use a bit ofintense colour to help differentiate areas of real-estate and todraw attention to items you want the visitor to notice.
  43. 43. 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.
  44. 44. 10. Rich SurfacesMost 2.0-style sites use subtle 3D effects, sparingly, to enhancethe 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”.
  45. 45. Example
  46. 46. When & How to Use RichSurfaces?The golden rule here is to use with care, and notto overdo it.Like any of these techniques, a rich surfacemay add value to your design when usedsensitively and appropriately.If your navigation/icon/logo/layout sucksfundamentally, you can’t polish your wayout. Get the fundamentals right first.It can also be important to maintain aconsistent light-source. Although this canget more complex with the illusion of back-lit diffusion in buttons etc., you still knowwhether an overall design feels consistent.3D effects can also make elements seem tostand out from the page, but only if the restof the page is relatively flat.
  47. 47. 11. Cute IconsIcons play an important role in Web 2.0 design. Today we usefewer, better icons that carry more meaning.Icons can be useful when they’re easily recognisable and carry aclear meaning. In lots of other cases, a simple word is more effective.Simpler, more spacious designs demand less attention and allow fora richer icons.
  48. 48. Example Simple and Clean Cute and Quirky Do not necessarily have to feature tiny hills! Richly Detailed
  49. 49. 11. Star FlashesThese 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 thisreason, they suit the start-up ethic of many 2.0 sites, but for thesame reason may cheapen other sites.They can really work well, but of course should only be used todraw attention to something important.I’d recommend only using one on a page (at most!).
  50. 50. Example
  51. 51. Reference:http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/
  1. A particular slide catching your eye?

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

×