Beyond mockups: how leading web designers work in 2013

Edenspiekermann used agile methodologies when working with Ableton’s web team on its site relaunch. As an integrated team of designers and developers, working directly in code, aspects of the site were rapidly iterated on, based on user feedback

case study 1: Future Insights

Created by: Mike Kus

Mike recalls that the design for the Future Insights conference website was ambitious, considering that it’s responsive: “The scaling of the content blocks meant there were restrictions on how we could do things.”

He first composed the content of the home page in Photoshop, after researching the style. Working with developer Neil Kinnish, Mike then devised how the page would respond to viewport changes. “We decided that for devices smaller than an iPad tablet, the content would be significantly reconfigured,” he explains.

This was down to his belief that “responsive design isn’t simply ‘stacking content into one column’, which in this case would have made the home page content too long to be useful”. Instead, the content was reworked to fit into a space not much larger than an iPhone screen. Other pages were simpler, but followed a similar design philosophy.

case study 2: Holiday Place

Created by: Clearleft 

Holiday Place’s very basic website didn’t offer a high-end user experience to match the bespoke tailored luxury holidays the company offered. The main brief for Clearleft was to “Get us to where we should be” by working on UX, visuals and front-end development.

The client lacked even a brand, and Clearleft’s creative director James Bates says the company used mood boards and style tiles, narrowing everything down to the right feel. Themes were then iterated on, while pages were designed. “We jumped between design visuals, small screen and large screen, and sometimes worked from sketches,” he explains. “Once you’ve enough design language in place, you don’t need mock-up visuals – you just need to sketch something on paper and a developer can pull components out.”

Crucially, designers and developers collaborated. James recalls there was no “let’s do the design and hand that over”. A small team would work on features and components, build, test and iterate. There would then be rounds of integration and further iteration with Holiday Place’s back-end developers. 

Senior visual designer Jon Aizlewood adds that front-end developer Mark Perkins also provided a responsive design ‘budget’, in the form of limited page weight. Mark believes “there’s no point building a beautiful, scalable, touch-friendly site if it uses up half your monthly bandwidth allowance just to load the home page”.

Jon reveals this solved another problem, in the client’s assets being poor: “We decided to blur images to offer an ambient stylistic approach that gave a sense of the destination, but without showing the poor images. This resulted in lower page weights, due to relatively small responsive image file sizes. So we got to keep our stylistic approach without negatively impacting performance.” 

The modern web designer’s toolkit 

While core tools such as Photoshop (and the rest of Adobe’s Creative Suite) come at a substantial cost, there are many easily affordable tools that can really help you design elegantly and efficiently, but sorting the must-haves from the please-don’ts can be tricky. We asked our interviewees to recommend their favourites: tools they use regularly to create sites for their clients.

CSS Hat, $29.99 (around £18)

A Mac/Windows add-on for Photoshop that takes a Photoshop layer and exports equivalent CSS. Ideal for teams in transition to a browser-oriented workflow.

Keynote, £13.99

Apple’s presentation tool is increasingly used by web designers for prototyping web interactions and animations. 

Gridset, £12 per month

Online tool for creating complex grids that can be shared, zoomed and exported. It’s also RWD-aware.

Espresso, $75 (around £49)

Web editor with a super-charged X-ray view that enables you to rework local CSS and watch how this would affect a live site.

Hammer, £16.99

This designer-friendly app is a quick way of getting HTML prototypes up and running, utilising shared components as necessary.

Mixture, £TBC

A new and already highly regarded tool for rapid website prototyping and also static site generation. 

Normalize.css, free

One for the coders, this CSS reset ensures that web browsers all render elements consistently and in line with modern standards.

Sketch, (£34.99)

A popular vector-oriented OS X app, with an unlimited canvas, @2x export, and CSS-oriented styles.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...