Getting started with design

Last week we spoke about content. Now that’s underway, we can start thinking about the aesthetic direction we want our project to take.

It’s difficult to design when content is ambiguous or non-existent – how can you choose the right box if you don’t know what’s going inside it? There’s a lot to consider.

“Design without content is decoration… A design that understands and supports content is always going to be better.”

How will your existing brand translate to the web? How will it cope with the added layer of complexity that comes with user interaction? Will it manage to convey the same tone?

This is where style tiles come in. But first…


Old School

If you’ve worked on a web project in the past decade, chances are you will have seen at least one Photoshop comp or mockup. Sorry, but that approach just doesn’t cut it anymore. Here’s why:

It’s misleading…
Pixel-perfect comps set unrealistic expectations. There is no guarantee that what you see in Photoshop is what you’ll get in the browser.

It’s inflexible…
Static mockups are not representative of the modern web. It is not confined to a static page 960 pixels wide. The web can be on your phone, your tablet or even your fridge.

Time is money…
If one static comp isn’t enough, why don’t we just make one for each screen size? Let’s see. Desktop screens, laptops screens, iPhones, iPads, iPad Minis, Blackberries, any one of the many Android devices that will come out this year… Do you see where we’re going with this? It’s just not a sustainable solution.

It’s not collaborative…
Photoshop is not really a collaborative tool. It’s too easy to plug your headphones in and “get in the zone”. What if you design ten pixel-perfect pages only for your developer to turn around and tell you it’s not possible? Or worse, your client turns round and says they hate it. Was that a productive use of time?

It’s a lot of guesswork…
This is the biggy. With fixed-width designs, we’d use our experience to tackle a lot of constraints and assumptions. Now that we’re designing for the responsive web, the number of constraints has increased tenfold. It would be inefficient and expensive to continue this practice with so many “what if’s”. Design is about making things that work, not just things that look nice – a flat comp is an untestable design.

Being able to paint a picture of a nice house doesn’t mean you can build one that won’t fall down when the big bad wolf comes a'knocking.


New School

So how do we approach the design process in the modern responsive web? How can we deliver the client’s brand message and value across devices, but not break a project budget before it even starts?

“A website’s design should begin where it’s going to live: in the browser.”

What we need to do is integrate the design process in-browser as early as possible. Enter Style Tiles.

What is a Style Tile?

A style tile is a design deliverable which helps to establish the basic visual foundations of a digital design. Samantha Warren (a designer at Twitter) coined the term:

“Style Tiles are for when a mood board is too vague and a comp is too literal. [They] establish a direct connection with actual interface elements without defining layout. They work well for clients who have established brands and need them to translate smoothly to the web.”

What are the benefits of this approach?

Reduced complexity…
It takes layout out of the equation, focusing on common elements such as button style rather than how pages are put together. Responsive layouts are often complex and best worked out in the browser (with the correct content).

Speed of design…
Pixel pushing can be time consuming. Style tiles are quicker to produce and quicker to iterate than several full comps.

Collaboration…
It allows stakeholders to get a feel for the design early on, without committing to a particular layout.

Content first…
The discovery phase should have provided you with enough to get started.

Device agnostic…
It does not confine the design to a specific device – mobile, desktop or otherwise!

Manages expectations…
A Style Tile is less likely to promise something that cannot be delivered. The focus is on the overall look and feel, and how that aligns to business goals. Aim for consistency and scalability from the start!

But Style Tiles aren’t the only solution. There are other methods that share many of the same benefits – like Dan Mall’s “Element Collages”.

“A full comp often requires ideas to be fully realised. An element collage allows me to document a thought at any state of realisation and move on to the next.”

Our own design deliverables tend to fall somewhere between a Style Tile and an Element Collage. Language-wise “Style Tile” feels more relevant to us, and more meaningful to the client.

Whatever you want to call it, all these methods stem from the idea that we are designing brand identity systems – not “pages”. The best way to handle complexity is to break it down into manageable chunks. Print designers have been doing this for decades – breaking down how brands apply to everything from business cards to billboards.

The key is to start small and abstract, collaborate early – and work up from there.

Our Style Tile

Our Style Tile has a strong focus on settling on colour and typography. We also have an overarching UX concept to consider, but more about that later. As a new company, we’re still working on establishing some aspects of our brand, so we have angled our Style Tile with that in mind.

What’s next?

Now we have our Style Tile, we have a feel for how our new website will look and an idea of how we will communicate our content. We also have our content hierarchy and wireframes, giving us our webpage structure and an idea of how it reacts across devices.

Both these elements encompass the visual and functional blueprints of our new website. We’ve been working on content in the background and when that’s complete, it’ll be time to approach the front-end build! More about that next time…


More from the Live Development series

Stage 1: Start at the beginning with Discovery
Stage 2: Content hierarchy and wireframes
Stage 3: Content collation
Stage 4: Getting started with design
Stage 5: The front-end build
Stage 6: The back-end build