Dan Rubin

The main topics Dan covered were:

• Proportional Design
• Borders, Lines & Layer Modes
• Texture Tricks
• Other Interesting Stuff

Proportion
Creating patterns for margins and padding aids a sense of cohesion with your design – even if it’s just multiples of 5px, 10px etc. Being consistent will look better.
With typography, use relative text sizes to create balance. Use letter-spacing property (aka Tracking) to balance things.

Borders, Lines & Layer Modes
Grids – take the guesswork out of things. But they can be a bit boring – so use certain elements to break the repetition [see below]

Texture Tricks
Reality is rarely smooth – so using slight touches of texture to break up large blocks of colour can make designs seem more natural and less “flat”. Subtle lines & gradients on elements can have a similar effect, and make things feel more tactile. Depth can be inferred with a bit of subtle bevelling of buttons etc.

Almost any image can be used to make a gradient fill for a banner, for instance. Getting a natural, interesting gradient could take ages in photoshop, but sampling a single line of an image, then stretching it vertically to produce a gradient is a really quick and easy way to start. Then use layer cloning/blending to make it more interesting. It’s a trick I’ll definitely be putting to good use in due course.

Other Interesting Stuff
Finally, Dan wrapped it up with a demonstration of a redesign of the Fox News website (which he did purely for his own amusement!). Currently, it’s a mess with uneven margins, padding, borders, heading styles etc. The revamp made it all much more cohesive and easier on the eye. Nice work, Dan!

Oh dear, now I think I might have to revisit this site’s design and put some of Dan’s tips into practice

Dan’s presentation: slides (pdf) | audio (mp3)

Tom Cartwright/Claire Roberts

Tom and Claire took us through the processes involved in rewriting the BBC Home Page.

Old page was boring, tables based. New has been redone with web standards. Still looked the same, not a good plan. 9 months later, redesigned totally.

There are certain technological/infrastructure constraints which had to be worked around:

• Apache with Mod includes.
• No loops, no xml processing.
• Look like a page not an app.
• Optimisation the key.

more requests = bad

• Images – CSS sprites – 60 image requests (old page) -> 3 only now with sprites – GIFs because of cross-browser support.
• Default page is 300Kb with 30 requests

Drag and drop isn’t the core point. 5% of users have no JS. So they don’t get identical features).

The other 95%. Keyboard browsers, screen readers. Function of links can change.

.blur() is not friends with JAWS. Sends users back to top of page. Taking care for some users, builds a better experience for all (web standards).

Upcoming Stuff

• bbc.co.uk/glow – bit iffy with browser support with other JS libraries – so they wrote their own. Will go open source, hopefully.
• New platform coming up – PHP running Zend framework (instead of nasty CGI and PERL nonsense).
• Identity – implicit and explicit personalisation on bbc-wide site.
• About 60% of users have customised the page some way or another.
• Scrum development, 2 sofrware engineers, 3 client-side devs took 3 months.
• Now joined OpenID federation – it will come.
• Fixed width still – wide variety of sites, easier to try and achieve a consistent look across all sites by using the fixed width.

Tom/Claire’s presentation: audio (mp3)

For Example: Edenbee

James Box (Clear Left)

James’ presentation was about the design processes involved with developing Edenbee.

Clear Left are a User Xperience Design Conustlancy. Edenbee Tracks green stuff and shows you your carbon footprint over time. Each user has a Goals page. eg fit enery-saving lightbulbs. Built by a small team – up to 4 people. 2 clients, New Bamboo did rails backend. Clearleft doesn’t do “deliverables” – they don’t get shown to the clients.

Process

• Start with a “discovery phase” – get round a table to discuss. Paper-based to begin with. White boards. Carbon calculators. Make it social. Wanted it to be the place for your green profile – c.f. flickr, del.icio.us etc.
• amee.cc calculates the actual carbon emissions from meter readings, flights etc.
• Don’t let features overwhelm the main point of the site. Design features when the community needs them – not up front.
• No API at present, want one to be able to feed back into other areas of the web.
• Hive is the main group – aggregated content.

James’ presentation: slides (pdf) | audio (mp3)

Jeff Veen

Jeff’s opening keynote for @media was very thought provoking, as usual.

He spoke about data visualisation and how diagrams can often show us things more quickly and more intuitively than a table of data is able to.

User Participation + Mass of data = designing for data
Data + metadata = information

Make the data useable, you can make sense of it. Add some styles -> makes it more accessible. Example was a rainfall chart. Boring table gives no indication, you have to parse the figures and work it out. But make an icon in each cell instead – colour darker and a bigger raindrop for indicating more rainfall – suddenly the visualisation makes things easily understood. Beware, “prettification” can go too far, and destroy the underlying data.

Jeff also showed us some notable examples:

John Snow
A Cholera outbreak in 1854 in London killed 500 people in one neighbourhood. He figured out with empirical evidence what was happening by plotting the death locations on a map. The local water pump was infecting people  – pump handle removed -> people stopped dying. He effectively mashed up pump location vs Cholera deaths and proved Cholera was a water-born disease. Lead to the development of  Victorian sewers. Found new way of gaining meaning from data.

Charles Joseph Minard
Map and chart for Napoleon’s troops marching to Moscow [see above]. This showed graphically how the number of Napoleon’s troops dimished with time, and location, as they marched to Moscow. And it also showed vividly that thousands of them died whilst trying to cross a particular river – obviously a dangerous spot – by plotting time/deaths/geographical location, it tells you much more about the data than pure figures would convey. Minard said of his map:

The aim of my carte figurative is … to convey promptly to the eye the relation not given quickly by numbers requiring mental calcuation. Charles Joseph Minard

Harry Beck
Tube map designer – Veen showed us before and after views. The old version was very confusing. Leaving out all the dross made things a lot simpler and more intuitive.

Google Analytics
Simplified things. Don’t plot too many things at once. Inspired by Indiana Jones plane journey – dot per datum on the chart. Don’t junk up things too much – remove “chart junk” and things get more comprehesible.

When to talk to people
Lots at the beginning, tails off in a log graph – compared with cost of changing your mind – the opposite. As launch approaches, expense climbs dramatically.

• Look at history
• Look at data visualisations
• Look at users

To help give instpiration for your designs. Books – Edward Tufte:  “The Visual Display of Quantitative Information”

Jeff’s presentation: slides (pdf) | audio (mp3)

I was idly fiddling with the Sitemeter Stats for my blogs today, and was intrigued by the variation in browser share between them – largely reflecting their readerships, and how “geeky”/computer literate the visitors may be. They’re all hosted on Blogger and have referrals from a variety of sources.

First up, this blog shows the largest number of different browers – even getting a few percent of views with Konqueror and Opera 9. I see 2% of folks are still straggling along with Netscape 5 too! The majority are on Firefox 2 – just edging IE7 by 6%. I guess this wide spread of browsers reflects the “geekery” of the content and people using niche browsers are likely to read webhead stuff!

[Browser Share pie chart for this blog readership]

The second chart is my Rugby Mad blog – the first one I started back in Feb 2006. Although the subject is just limited to rugby, I’m guessing that the readers represent a more “average” web user – the blog was linked from the BBC’s Six Nations blog last year, and I got massive numbers of hits from that. They are certainly a less geeky crowd than above. This is reflected by the stats – nearly half of them are using IE7 – with IE6 the next largest chunk at 28% <sigh />. Firefox has plummeted 20% compared to the geeky blog. And it looks like around 8% read from a Mac (although I suppose some could be using Safari on a PC now). But no Netscape in sight!

[Browser Share pie chart for my RugbyMad blog readership]

My Photographic blog is most similar to the web design one – although there aren’t any die-hard Konqueror or Opera fans amongst the readership! The Netscape stragglers are back in about the same numbers

[Browser Share pie chart for my Photographic blog readership]

Last of all is my newest blog, My Year In Pictures. It’s been running less than a month, whereas the rest have been going for a year or more. I guess potential users of older browsers may have upgraded before this one went live (I think the stats are derived from the last 12 months if the blog has been going that long). The most surprising is Firefox 2 with a whopping 42% share, a good 8% ahead of IE7. There’s still around 18% of users clinging to IE6. Safari and Netscape figure in the few percent.

[Browser Share pie chart for my Year In Pictures blog readership]

So, what does all this tell me? It just shows that with the proliferation of new browsers, while Firefox is doing well in the geeksphere, IE7 is gaining ground – but IE6 is still alive and kicking (us) amongst the “average” web user. And yes, there are still some poor folks using Netscape – people, if it’s within your power, upgrade to a nice shiny new browser!

When I build sites for clients, I’ll always design it for Firefox. Then test/fix for IE7 (some niggles but not major problems) and pesky IE6 (usually requires more tweaks). I’ll also have a look at them in Safari (PC) and Opera 9.02 – there may be slight presentational differences, but no show-stoppers.

For a laugh, I’ll also take a peek in IE5.5 (and 5.02 if I’m feeling masochistic), but I’m not going to waste any time fixing bugs for them. Let’s face it – none of the above readers have registered as using them – and I’m guessing on average, these stats are pretty applicable for most web users these days, no matter what content they are browsing – so why should I flog myself unneccessarily?

• Be Appropriate & Adaptable
  Typefaces tell stories, and the web is still playing catchup with this power. Comic Sans is appropriate for the menu at a greasy spoon cafe; you wouldn’t want an invitation to a Black Tie event done in it though. Similarly, the BBC’s use of Gill Sans evokes order and authority. The BBC logo has a twist – by reversing the type and blocking out the shapes of Gill Sans.
  Don’t let type and design get in the way of words.
  Be adaptable to requirements, and appropriate for the story.
• Use Rhythm
  Richard Rutter’s Compose To A Vertical Rhythm explains about using the line height and leading of your blocks of text to best advantage. The basic theory goes: 12px font height with 18px between lines, give a line height of 1.5. You can use incremental leading to make 4 lines of text in the main body of a page line up with 5 lines of text in a sidebar.
  [Text in the sidebar bears no relation to the main body copy. It looks messy.]
  The maths gets a bit hairy: 18px x 4 lines = 72px for the main body. 72px ÷ 5 lines = 14.4px for the sidebar
  If you’re using 10px height for your sidebar text, 14.4 ÷ 10px = 1.44 line height. You may find the sidebar top-margin property needs a bit of tweaking to get it to line up properly.
  [This looks much better now everything is aligned vertically]
• Optical Grey
  If you squint at a block of text, you’ll see the page has different tonal ranges depending on font, leading, letter spacing etc.
  Verdana has a more open shape, so is paler at smaller sizes.
  Combining serif and sans-serif fonts can be effective, giving different “colours”. Minimize dark grey and balance the line height.
• Use The Right Tools For The Job
  Hyphens “-” are NOT em dashes!! “—”. Use an em — or en – where appropriate.
• Use a Grid System
  Use grids as a tool to help you organise information. How to decide how big the grid unit should be? You can subdivide the units too – you might have a 3em high by 4.5em wide block, which divides nicely into 2×3 squares each of 1.5em width and height.
  Choose gutter sizes carefully, it can depend on the relationship between whitespace and font size.
  Using Alternate Row colours in tables must be done with care – don’t use colours which are too strong.
  Set type to your grid, and align everything! The smallest error can really stick out.

In Summary
Typography is all about the details. Tiny increments can make a huge difference. The full slides are available at Mark’s website.

[Dan and his interface-juggling octopus]

Colour
Colour evokes an emotional response in the viewer, and we need to be careful when choosing a palette. At Wellstyled.com, there’s a handy widget for generating complimentary colour schemes. Try it out.

Dan had mocked up a site especially to demonstrate some of his points – go have a giggle over at ToupéePal!

One good way of choosing a palette is by taking shades from a photo – either sample direstly, or pixellate it and use some of the blocks. Dan often starts with colour as the inspiration for a site and works from there. He will re-use certain strategic colours throughout a site, eg Links, headings etc. The colour used for links will always carry weight in the design.

Typography
Great typography is actually invisible – we don’t notice it. But do it badly and it sticks out like a sore thumb. He recommended the article, Web Design is 95% Typography to read.

There are a limited number of fonts we can realistically guarantee a user having on their system, but within these constraints, we can still get creative. Try using the text-transform uppercase or lowercase styles, change the letterspacing, text-align, leading etc to vary the typographical colour of a block of text. Good reading: “The Elements of Typographical Style” by Robert Bringhurst, if you can find it. Read more on applying it to the web here.

Favicons
Could be regarded as the most important design element on your site! They are the thing that represents it in the shortcut icon, browser address bar etc.

[Subtraction.com uses each site's favicon as shorthand branding for the link]

So when creating a favicon, it has to be something memorable. They must:

• Scale well down to 16×16 pixels
• If the whole logo doesn’t work, choose a fragment to focus on
• Use something unique about the site that still ties in with the branding

Icon files can be made with Iconographer or a plugin for Photoshop. As well as the standard 16×16 icon, 32×32 and 64×64 pixel icons can be inserted into the same .ico file. There’s an interesting collection of Favicons at Delta Tango Bravo’s blog.

Add Detail But Not Complexity
Understand the limitations of the browser, and suggest the box [model] but with minimal suggestions. Perhaps use just one rounded corner on an element. Re-use graphic elements where you can.

Microformats
If you site contains any sort of contact information, events lists, reviews or relationships, then you should be marking them up with Microformats. Using what works today can encourage others to do the same:

[The Microformats can be used by people, applications and as hooks for CSS]

Brian Suda did some parsing of Cork’d for Microformats, and used this information to add wine reviews (from Cork’d) to his Scrugy site, where you can learn all about wine. Corkd’s Microformats had produced an accidental API. If you were to mash this up with a list of your XFN friends, you could use it as a filter for just returning reviews from your trusted sources.

[the protagonists on the podium]

In The Design Corner – Mr Simon Collison
The Design Manifesto went thus:

• Visual design is not complex engineering
• Design interfaces visually, don’t be afraid to take risks
• Reserve the right to veto decisions of technologists
• Think, build & design organically
• Don’t pander to personal prefereneces
• Deliver a rich, considered visual experience for all
• Be expressive with web typography
• Layout decisions are the preserve of the designer
• Visual design makes the first impression – respect it!
• Build everything in Flash (not really)

[Evil Drew - New Implementation, New Danger!]

In The Implementation Corner – Mr Drew McLellan
It all started with nxoc01.cern.ch, the very first web server. Drew said we were all implementers, and as such, we needed to know our enemies:

• Fixed width layouts
• Flash for non-media presentation
• (Flash breaks the basic nature of the web when used for anything other than a player for graphics or audio, and each Flash player instance impacts on performance of the browser)
• Text replacement, since text on a web page is a solved problem
• Styled form elements
• Potent GETs
• Controlled heights
• Controlled text size
• Colour schemes and low contrast
• The user agent
• The FOLD – THERE IS NO FOLD since we never know where it’s going to be from one browser/user to the next!!

[Drew gets all fervant and placard-wavey saying There Is No Fold]

Conclusion
Of course, we all know that life’s not so black and white, and at different times, we may have to sit in different camps. So it was a nice way of stimulating some light-hearted debate, but there’s definitely no “right” answer on this one!

Colour
Colour means different things to different people and evokes emotional responses. Use colour for emphasis and to help deliver the message. Faith Inkubators uses purple sparingly for emphasis and it works nicely. A Film uses pink and a particular headline motif to great effect.

Sometimes unexpected colours can be equally effective, The Times’ acid green isn’t obvious for a serious newspaper, but it works. Some other sites may take a colour from a photo or logo and use this to add emphasis.

Hierarchy
Visual hierarchy should reflect the underlying semantics of headingd hierarchy. It will give users a sense of what’s important and what’s not in the page. Use a focal point to grab attention and drive home the message. Providing variety can also lead the viewer through a page.

[The visual hierarchy should reflect the underlying document's semantics]

Whitespace
Whitespace is often something designers are afraid of – but used effectively, the “nothing” can be just as important as the “something” it surrounds. Also, optimum line length is 66 characters (anything between 45-75 is OK) for easy reading. The longer the line length, the more leading is required for better legibility.

Organisation – Grids
Grids can be liberating rather than restrictive. But giving users a solid framework can mean they will find it easier to get around your site – less time investment is required to “learn” the grid. He showed us maps of Philadelphia and London and asked us which we would be happier in negotiating as a tourist:

[Philadelphia's regular street plan contrasts with London's maze of tiny streets]

Even when using a grid, there are many ways of breaking the rigid order and still getting interesting designs. These three screenshots are from Australian agency Trout:

[Trout's home page, a regular grid, but even this is broken up with the bright colour emphasis]

[Detail page when you click through from the home page. More of the grid is broken up into bigger chunks]

[The About Trout page, dominated by the main text panel]

Having said all that, make sure that alignment happens and doesn’t fall down – subliminal effects can be powerful and if something doesn’t quite line up, it will still look “wrong” without the user being able to put their finger on why.

Planning
It’s easy to jump into the finished product right from the start. Step back and plan! Keep a sketchbook to jot down ideas – they may all come together at a much later date, but you have them to hand.

[Jason's sketch book showing early doodles for the A List Apart design]

Design should be an iterative process. Grey box comping can help you decide the best weight for various layouts. Jason doesn’t show these grey box comps to clients, but just uses them for his own purposes. He would then expect a PSD comp to show to clients, and perhaps 1-2 iterations round the loop before they are happy. The whole process can take a couple of months.

Strive For Clarity
Storytelling gives people hooks and things to remember, they will come back!

Fonts
Use fonts in such a way to give some extra interest to the page. sIFR can be a useful method of delivering certain fonts if they are mandatory branding requirements.

Handover
The all-important step that is often overlooked. A style guide is best kept short, under 10 pages, and provide a dummy template for each type of page, so that other people can look after the site going forward.

Customer Interference!
We all know what he means. But if you find your client is trying to steamroller you, set up a meeting and let them know you are the expert. Try to convince them of you design, as long as it conveys their message and isn’t just kudos for your portfolio.

As well as the product demos, there were also other seminars covering design topics. One by a guy from Avenue A/Razorfish was entitled Web Design With Emotion

This was quite thought provoking, saying users are starting to expect more and more from things like eCommerce applications, and there are more ways of presenting results that just boring old lists of stuff. Two examples he gave were:

Amaznode
Great way of querying Amazon – I ran a search for rugby books on the UK site, and got the following interconnectedness results back:

[Amaznode search results show a web of connectedness for the items]

It’s fun watching the network to build up. You can pick up an item and drag it about (the blue knot). Double-clicking the centre book will bring up the item detail panel, which lets you Add to Cart or Go to Amazon. I liked the way it presents related stuff – could be good if you’re looking for recommendations based on what you have already. Not sure how reliable they are though!

Etsy’s Shop By Colour
Etsy is a site where folks who hand make craft items can sell to individuals. There’s the usual way of browsing boring old categories, but the Shop By Colour feature is fun – especially if you are trying to co-ordinate stuff for an outfit or room.

[Etsy shop by colour display]

Swirl your mouse round to stir up the colour trail, and click one you like the look of. The database will bring back a cluster of stuff that matches. It’s great fun – go and have a play!

So, just two bits of food for thought which show search results don’t have to be boring. Users are getting smarter and prefer interaction to passivity, so whilst this kind of interface would have been unheard of even a couple of years ago, things are changing fast.

Lots of my mates are members, and when we’ve got together for socials, we share the pictures via Flickr afterwards. Many tag the images by subject, or use something like Upcoming’s machine tags: upcoming:event=138806, which refer to the relevent event tag, and can be used by Upcoming’s API to display photos from that event (held on Flickr), in the event page on Upcoming. “Old hat”, some of you may say.

The other thing that regularly happens is that folks tag pictures with people’s names or nicknames. Thus, you can see all the photos of me on Flickr (which have been appropriately tagged), whether they be in my photostream or someone else’s. But here’s where we get the problems.

Some people have particular tags by which they would like to be known, as well as their normal names. Ben (74 results currently) is a case in point, who also goes by the nickname of Kapowaz (56 results, some of them the same). Mark Norman Francis (390 pics) (aka Norm! – 2,324, not all of them him) thinks he’s King Of The Britons (122). Adding all these tags by hand every time gets very tedious.

Now Flickr is very good at letting you organise your pictures, by set, date of upload, geographical position, etc. Their drag and drop interface is easy enough to get your head round with a bit of practice.

So I was thinking, why not let each Flickr user asign their own tags to describe themselves. Then give the Organiser Panel the facility to set which Flickr users appear in the photo, and that user’s tags then get applied automatically. As long as you know that a person in one of your pictures is a Flickr member, you ought to be able to drag their icon onto a picture to set up the tagging, even if they are not in your friends, family or contact lists (these could easily load by default in the appropriate new “choose Flickr member” panel):

[mockup of the "choose member in photo" facility, via the Organiser panel]

Or when you come cross an individual picture in your Flickrstream, you can currently add it to a group via one of the fuction buttons at the top. Similarly, you could have:

[mockup of the "add member in photo" facility, in the Flickrstream view]

I’m sure that would save some donkey work on everyone’s part, and would be quite interesting to follow the reference tag trails around Flickr until you get dizzy.

Comments anyone?