Design

Eric Meyer gift wraps the most awkwardly shaped of boxes using nothing but CSS, HTML and a little curl of ribbon. No matter how well you plan and how much paper you have at your disposal, sometimes you just need to slant the gift to the side.

Rob Weychert reaches for the top notes to sing us a song of typographic scale. A little attention to scale and to the mathematics will help you to hit a high note with your designs this Christmas and beyond.

Stuart Robson rolls up his sleeves and begins to piece together the jigsaw puzzle that is design tokens and component based design. Starting with the corners, and working around the edges, Stu helps us to piece together a full picture of a modern design system.

Mel Choyce explores how the new WordPress editor (also know as Gutenberg) can be used to create more carefully art directed posts. Like gifts carefully arranged beneath the Christmas tree, it’s the contents that matters but the presentation that sells.

Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.

Molly Wilson and Eileen Wagner battle the age old Christmas issues of right and wrong, good and evil, and how the messages we send through iconography design can impact the decisions users make around important issues of security. Are you icons wise men, or are they actually King Herod?

Mandy Michael turns the corner on our variable font adventure and stumbles into a grotto of wonder and amazement. Not forgetting the need for a proper performance budget, Mandy shows how variable fonts can free your creativity from bygone technical constraints.

Ruth John lets the bells ring out for Christmas with a look at a selection of inspiring sites with creative and effective use of audio. The days of jangly MIDI tunes to distract and annoy are thankfully long behind us, with browser APIs offering new and exciting ways to generate sound. Ahead is a beautiful sonic landscape. Ding dong!

Val Head delves deep into her Christmas sack to find two very important deliverables. With animation forming such a crucial part of interaction and brand design in modern interfaces, you may not want to leave its implementation to chance.

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.

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!

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.

Meagan Fisher casts a thoughtful glance back over her work this year and considers what it means to design a product rather than a marketing experience. Pour yourself a cup of eggnog, grab a mince pie or two and gather around the fireside. Are you sitting comfortably? Good, then we shall begin.

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.

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.

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.

Donovan Hutchinson stamps his snow-caked boots, unwinds his scarf and eases [See what we did there? Did you?] us into December with some tips and resources on integrating animation into our website style guides. A warm animated welcome to 24 ways 2015!

Geri Coady bends low the Christmas tree branches with bright and contrasting baubles. This isn’t some gaudy seasonal distraction, though. It’s responsible accessibility advice you can work with throughout the year.

Jina Anne lets the Christmas spirit of generosity and goodwill flow freely into open source projects in need of good design. It’s work free of charge, perhaps, but not for nothing.

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?

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.

Nicole Sullivan understands how the accumulated weight of small typographic decisions can mount up into a tangle of CSS declarations. With a new tool at your disposal you can take stock and clear up the mess like it’s Boxing Day.

Aarron Walter adds a powerful hit to your Christmas cocktail in the form of advice on putting together user surveys to gather important data you can use to inform design decisions. If you build it, they will come.

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.

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!

Anna Powell-Smith stirs the silver sixpence of design into the Christmas pudding of web development with some shortcuts and advice to help improve the skills of programmers intimidated by visual design.

Laura Kalbag beckons us in from the cold wastelands of transitional, device-rooted layouts to warm our toes at the hearth of a more systematic way of working.

Dan Donald conjures up the ghost of Christmas the Web Yet To Come through the possibilities offered by the contextual data available to us from web-enabled devices.

Tim Kadlec broadens the scope of responsive web design to include bandwidth and hardware capabilities. Images too big? Another JS library? It’s time to work off the seasonal weight gain from your responsive website.

Geri Coady extends goodwill to all with some insights about colour and how it impacts everyone using our sites and apps. Full of practical tips and tools, this gift keeps on giving.

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.

Robert Mills gathers us round the fireplace to listen to his story of the invisible elements of design. Such intangible effects deserve our attention, or the Ghost of Christmas Yet to Come will pay us an unwelcome visit…

Owen Gregory raises his baton and conducts an extended exploration of some simple musical principles and their relevance to modern web design practice. TL;DR? It don’t mean a thing if it ain’t got that Yuletide swing.

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.

Mike Kus encourages designers to look past accepted patterns of website functionality to create meaningful experiences for users. Ditch the cookie cutter and start communicating your site’s real message.

Jeffrey Zeldman steps back and takes a long hard look at the issue of cross-platform web font rendering quality. It can feel like Christmas morning with the array of font options available – but are we opening Pandora’s box?

Mark Boulton uncovers some ugly truths about font embedding on the web, but being the nice chap that he is, doesn’t leave without teaching us all how we can overcome them through careful typeface selection.

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.

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.

Mark Boulton borrows some techniques from photographic composition to give an insight into how art direction can be conducted on the web. Learn how we can begin to bridge the gap between template-driven pages and content that really communicates.

Veerle Pieters gets up close and personal with geometric patterns and presents us with a handy Photoshop technique for slicing and dicing seamless tiles. Keep your repeating geometric patterns deep and crisp and even with these simple steps.

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.

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.

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.

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.

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!

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?

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.

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.

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.

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.

Richard Rutter scrutinises the typographical proportions and spacing that gives a written page its rhythm. Help your page sing like the herald angels, and still have time for a mince pie and brandy.

Veerle Pieters saves us from the code (the incessant code!) with a dazzling design technique using Illustrator’s Mesh feature. Coders take note! You can make something really pretty by just following a few basic steps. Will wonders never cease?

Andrew Clarke dusts off the CSS z-index property to take control of the depth of his positioned elements. Why not try it out for yourself and see how it all stacks up. Santa’s not the only thing in your stack this Christmas. Erm … ok, I’m outta puns.

Patrick Griffiths experiments with a straightforward method of adding rounded corners to a CSS-based box. Everyone loves rounded corners, so if this doesn’t put a partridge in your pear tree, then nothing will.

Richard Rutter offers an insight into that oft-misunderstood unit of measure; the em. Do you know your ems from your elbow? Dazzle your dinner guests with scintillating silver talk of CSS.