Design

Coloured crayons for felt-tip fairies. [Ed: What has got into you? Sort this out.] Alright, alright. Sheesh! There’s much more to web design than mere surface. Markup minutiae and clever CSS techniques; art direction and photography; inspiration and theoretical application; layout and typography; systems of design and modularization; even music gets a look in.

  1. Designing Imaginative Style Guides

    Andy Clarke

    Andy Clarke unpacks his tinsel and untangles the Christmas illuminations to add some brilliance to the subject of style guides. Whether you choose a boxed pre-decorated tree, or lovingly choose each adornment to your Norwegian spruce, just remember to switch the lights on.

  2. Make a Comic

    Rebecca Cottrell

    Rebecca Cottrell sharpens her trusty HB pencil and sketches out the steps to making a comic, before inking and colouring the whole deal with a few Photoshop tips for anyone unwilling to part with a screen over the festive season. Put that eggnog down and get drawing!

  3. Beyond the Style Guide

    Paul Lloyd

    Paul Robert Lloyd runs his finger along the seam between interface patterns and design systems, exploring how a visual design language can underpin and inform a web style guide, with judicious use of CSS preprocessing. Like a good Christmas jumper, sometimes you need to get creative with the rules.

  4. Designing with Contrast

    Mark Mitchell

    Mark Mitchell casts coarse salt upon the pale icy sheen of recent web design aesthetics to sound a warning that we may be on thin ice. The tension between low contrast tastes and high contrast needs is a story as old as the <font> tag, and yet it bears frequent retelling. For snow has fallen snow on snow.

  5. Animation in Responsive Design

    Val Head

    Val Head squeezes more animation into responsive design’s Christmas stocking with some strategies for getting the most out of animation at any screen size. Set your robin a-rockin’, no matter what size the dance floor.

  6. Get Expressive with Your Typography

    Richard Rutter

    Richard Rutter adapts an extract from his forthcoming book on web typography and encourages us to be brave with type choices. By allowing type to express a website’s intentions from even before the moment a visitor starts to read, we can help set the tone and our users’ expectations.

  7. Putting Design on the Map

    Shane Hudson

    Shane Hudson weighs up online map design and finds it (or, rather, us) wanting. Instead of accepting Google Maps as the easy choice, get creative and customise your maps. For his delivery route, do you think Santa relies on defaults?

  8. Run Ragged

    Mark Boulton

    Mark Boulton completes our calendar with some typographic techniques to improve the reading experience. Typography, like Christmas and advent calendars, relies on the accumulation of small gains for its best effects.

  9. Why Bother with Accessibility?

    Laura Kalbag

    Laura Kalbag stamps the snow off the boots of web accessibility, making positive cases for its foundational place in our work. Accessibility is like the washing up after dinner on Christmas Day: you could leave it to someone else, but it won’t be done right.

  10. Science!

    Jon Tan

    Jon Tan opens the final door on the web advent calendar to reveal the glittering star of research evidence shining its light on design decisions. Merry Christmas!

  11. Raising the Bar on Mobile

    Scott Jehl

    Scott Jehl unties the ribbon on his cross-browser method of clearing away the address bar from small mobile screens to make more room for your design. So clear a space under the tree and on your phone for more Christmas pixels.

  12. Golden Spirals

    Drew Neil

    Drew Neil spins himself like a Christmas top to bring us HTML and CSS spirals, with a golden proportioned twist. Throw in some RGBA transparency and you’ll soon be throwing shapes at the office party.

  13. Type-Inspired Interfaces

    Dan Mall

    Dan Mall shows us one technique to combat blank-page syndrome by demonstrating how design inspiration can be taken from the typefaces we use. So put down your pencils, reach for your composing stick and let the type do the talking.

  14. A Festive Type Folly

    Jon Tan

    Jon Tan upholds the good British tradition of building follies and talks us through the process of creating one such on the web using only HTML and CSS. Follies themselves are just for enjoyment. However, there’s always interesting things to be learned when we venture out and have some fun.

  15. Increase Your Font Stacks With Font Matrix

    Richard Rutter

    Richard Rutter delivers us an early Christmas present in the form of Font Matrix, a table detailing available fonts across Windows and Mac operating system versions and with different versions of common software packages installed. Need to know how widely your font of choice is available? Just look it up. This, my friends, is the future right here.

  16. Get In Shape

    Dave Shea

    Dave Shea considers the impact of shape and balance on design, and how it can affect user perception. Like that oddly shaped gift under the tree that never quite makes sense until it’s unwrapped, sometimes you can never be sure until you give it a shake. So let’s get shaking, people.

  17. Underpants Over My Trousers

    Andy Clarke

    Andrew Clarke looks to the world of comic books and graphic novels for inspiration in web design. Personally, I look for design inspiration is Christmas wrapping paper, which, as it turns out, is a less successful technique. On the whole I’d recommend Clarke’s approach above mine. Lesson learned.

  18. CSS for Accessibility

    Ann McMeekin

    Ann McMeekin decks the halls with some practical CSS techniques that can help in making your site design as accessible to as many different users as possible. ‘Tis the season of good will to all men (and women), after all. Fa-la-la.

  19. Back To The Future of Print

    Natalie Downe

    Natalie Downe sets the presses rolling with an in-depth look at the state of print stylesheets in 2007. Often neglected by developers but much loved by the user, the simple print stylesheet can really add that finishing touch to even the best site designs. So get this down you. Ding dong!

  20. Typesetting Tables

    Mark Boulton

    Mark Boulton revisits the HTML data table for a quick look at how legibility and communication of complex data can be helped through careful typesetting. Everyone likes a neat table at Christmas, especially Aunty. You wouldn’t want to upset Aunty now, would you?

  21. Gravity-Defying Page Corners

    Dan Cederholm

    Dan Cederholm is a skillful designer who’s attention to pixels could ne’er be finer. He brings technique for good boys and girls of how to create nice graphical curls. So on the night before Christmas all through your house, get your page curling by stirring your mouse.

  22. Cheating Color

    Jason Santa Maria

    Jason Santa Maria continues our mini series looking at colour as he trips the light fantastic with your corporate brand guidelines. When is a colour not a colour? Read on and find out why old Saint Nic’s collars don’t match his cuffs.

  23. Photographic Palettes

    Dave Shea

    Dave Shea casts a critical eye over the process of choosing a colour palette – in particular, techniques for picking tones from a photograph. As Santa found one foggy Christmas eve, choice of colour can be absolutely critical to success.

  24. Styling hCards with CSS

    John Allsopp

    John Allsop applies a little bit of style to exhibit how life can be breathed into any instance of the hCard microformat. Like the wrapping on a good gift, add a little sparkle to your pages with this handy step-by-step tutorial.