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.
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.
This designer-friendly app is a quick way of getting HTML prototypes up and running, utilising shared components as necessary.
A new and already highly regarded tool for rapid website prototyping and also static site generation.
One for the coders, this CSS reset ensures that web browsers all render elements consistently and in line with modern standards.
A popular vector-oriented OS X app, with an unlimited canvas, @2x export, and CSS-oriented styles.