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 eﬀects but thediscipline of simplicity”
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
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
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)• Stuﬀ on the screen attracts the eye. The more stuﬀ there is, the more diﬀerent things there are to notice, and the less likely a user is to notice the important stuﬀ.• 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 stuﬀ with as little as possible. That’s economy, or simplicity.
How to Make Your DesignSimple?There are two important aspects to achievingsuccess with simplicity: 1. Remove unnecessary components, without sacrificing eﬀectiveness. 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!
Here’s an example of a design that suﬀers 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 stuﬀ 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.
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 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!
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 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.
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.
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).
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.
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.
Example 137Signals, they use 2 columns. This a greatcase study in simplicity. It lets the messagespeak, and adds nothing that could get inthe way.
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 eﬀective communication.
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 usedeﬀectively.
But, there are always exceptions, so here are afew examples of more than 3 columns usedeﬀectively. 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 stuﬀ”. 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-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…
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.
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.
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 diﬀerentiate is to use a bold, solid block ofdiﬀerent colour or tone, but there arealternatives.
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 diﬀerentiated 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 stuﬀ • Callouts / cross-linksIt’s possible to design a web page so that these areas areimmediately distinct from their neighbours.
Example 1The strongest way to do this is using colour
But white space can be just as eﬀective.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.
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 diﬀerentiated from normal text.
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 stuﬀFollowing the principle of simplicity, and generalreduction of noise, the best ways to clarifynavigation are: • Positioning permanent navigation links apart from content • Diﬀerentiating 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 NavigationSimple?Simply remember the key: navigation should beclearly distinguishable from non-navigation.Inline hyperlinks should also stand outsuﬃciently from the text around them.
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…)
7. Bold LogosA 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 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 flyers or t-shirts?) • be recognisable and distinctive • represent your brand‘s personality and qualities on first viewing
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 eﬀect has been used throughout the history ofprint design, on headings, title pages and headlines.
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.
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 diﬀerentiate areas of real-estate and todraw 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 SurfacesMost 2.0-style sites use subtle 3D eﬀects, sparingly, to enhancethe qualitative feel of the design.Realistic surface eﬀects (like drop-shadows, gradients and reflections)help make a visual interface feel more real, solid and “finished”.
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 diﬀusion in buttons etc., you still knowwhether an overall design feels consistent.3D eﬀects can also make elements seem tostand out from the page, but only if the restof the page is relatively flat.
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 eﬀective.Simpler, more spacious designs demand less attention and allow fora richer icons.
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 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!).