DesignFeature

Improve your designs with this 10-point checklist

Improve your designs with this 10-point checklist

A creative director working with some of the world's biggest brands, Fi's Anton Repponen presents his personal checklist for better designs.

This design checklist is a guide that I created for myself over time - it allows me to find the balance between the two extremes I face daily as a designer.

At times I can get carried away and only focus on all the little details without seeing the project from a bird's-eye view, while at other times I only think of the project from a holistic perspective, without really focusing on the important details.

Following these 10 steps allows me to stay on track with multiple projects simultaneously, and allows for a healthier design process overall.

01. Understand the project

Before starting design work, understand what the project is really about, what function it has and what the end user should get out of it. Don't let design overrule functionality.

10-point checklist
For the Civil War 150 site for The History Channel, it was important to understand what information the user should get from the experience, in order to make it visually interesting, easy to digest and not overwhelm the viewer with random facts

Often, designers 'jump' on a project not understanding and not seeing the goal. Sure, they may eventually reach that goal, but only via a much longer route: one that will involve a lot of changes. Understanding – almost imagining the final piece in your head – will let you go through a healthier process. The resulting design might surprise you.

02. Communicate your idea right

You cannot underestimate the power of presentation, both internally and in front of the client. As a designer, communicating ideas clearly and concisely eliminates a lot of questions and feedback sessions, saving time for actual work. The client will immediately feel that you have everything under control, and will trust your opinion much more.

Present your work step by step. First, show the individual components. Explain the thinking behind each one and how it works. Then show the framework of a site and the main user interactions. Make a story out of it: almost build the entire project in front of the client piece by piece. Finally, show the entire page with all components coming together.

10-point checklist
Sketches for the HTC Sense site. Fi recorded a video of the screen to explain the main idea behind the story to the client

At Fi, designers rarely send JPEGs of designs to the client. Instead, we record very short videos.

At the end of the day, or before the delivery, the designer opens up their work files in Photoshop and records a 10-minute screencast talking about how everything works, turning layers on and off to show different interactions, and demonstrates how certain drop-downs will work and how the navigation will expand – all the way down to mimicking some of the transitions, creating multiple frames of components moving left and right, complete with motion blur.

03. Think about the framework

Whether you design for web, mobile or TV, think about the framework and the main user interaction first when you kick off a project. Consider how the user interacts with a device, how much space you have to design for, how the user will go from one view to another, and how the navigation will be used.

10-point checklist
Always consider how users will interact with a site: the Broadway.com iPad app's homepage framework and navigation

Even if you design for the web, take cues from apps: maybe your site can consist only of five templates instead of 20, and the rest of the information will appear dynamically using fly-outs, interactive drawers and so on.

10-point checklist
The framework and main interactions for Google Ramayana. Consider the framework of a project before individual elements

All those things are part of the design (or UX) framework. Try to innovate there first, then start designing each individual component piece by piece, knowing what the final outcome will be.

04. Keep finding work exciting

No matter how excited you are at the start of the project, it's easy to lose your enthusiasm along the way, especially the work lasts a few months and there are constant revisions.

On projects like this, it’s important to identify areas no one is really paying attention to and innovate there, balancing this with regular work on parts of the site that require lots of attention.

If you’re bored working on the homepage, go ahead and come up with the most innovative Terms and Conditions ever designed. This may seem a silly example, but innovation is equally important as good design. Believe it or not, those innovative ideas often make their way up to 'important' sections of the site later, even if the client doesn't notice them at first.

10-point checklist
The HTC product page marquee. Nice little innovations like this often make their way throughout an entire site

Let's look at a real example. We'd been trying to nail down HTC homepage for quite a while. We were following all the product requirements, but it always ended up very simple. It needed that one little thing that would make it special.

At the same time, we’d been working on an interactive wizard to help people select the right HTC phone. The problem was that wizard had lots of components and was making the entire page really heavy. It distracted from the actual products.

As a solution, we created a folded paper marquee the user could drag open and find the wizard inside. That functionality – dragging/peeling the paper – was executed so smoothly that it was quickly implemented elsewhere on the site, including the homepage.

05. Work on individual pixels

Getting your idea right is only 50% of the work: the rest is pure execution. So many projects have great ideas but fail to make an impact because those ideas are implemented poorly.

10-point checklist
The Broadway.com app. Refine your designs to the final pixel: users notice attention to detail, albeit subsconsciously

Since the bar has been set so high by leading brands, most users can easily distinguish between a poorly executed design and a well-executed one. They might not spot the actual pixels that are off, but they will catch the overall look and feel.

So aim for with pixel-perfect design. Work on the smallest details, even if you think they will never be noticed. It's these little details that will help your design stand out.

06. Question yourself

Being confident in your work is important. However, it only matters if the end result is an outstanding design. During the work process, question yourself, rethink, and question again. Are you on the right track? Is this innovative enough? Is the execution strong?

Advertisement

Think of it as if you were the user, or if you were your own client: would you find what you have produced new or inspiring? Questioning yourself will help you go through the design process more quickly, and will yield better results in the end.

07. Check with other departments

Designers often end up working in silos. This is limiting. Everyone around can have a valuable creative input into a project: developers, producers, and even clients. There are so many things you might not know about, and one idea can prompt another. Maybe some of the latest tech solutions can inspire you to come up with something new and interesting.

10-point checklist
The UX design for the BBC's 'Life Is' project was a collective effort - and all the better for it

While working on UX for the BBC’s 'Life Is' project, our entire team came up with ideas, with designers trying out different approaches on the go, multiple developer tests and client input. It enabled us to create a very interesting look and feel with fluid UI elements that avoid standard, safe solutions. It looks like nature designed the experience.

08. Organise your work

Working at an agency can be a collaborative process where multiple designers work on the same project. This makes it very important to keep your work organised, from having an intuitive folder structure and naming files consistently, all the way down to the way you label layers in a PSD file.

When passing your PSD to another designer, that person should not have to spend any precious time understanding what is where. Layers should be named logically, and organised from top to bottom, with the top Layer Group being the one that contains the navigation elements (if navigation is at the top of the screen), and the bottom Layer Group being the one that has all the footer items. Unused layers should be removed. This will also look more professional when a designer delivers source PSD files to the client.

10-point checklist
Designing on a grid helps you create templates faster and more precisely, and facilitates dynamic layouts

On top of that, use the grid. Be very precise with it and stay consistent. Having a grid will enable you to create templates faster and more accurately, as well as showing designers the limits of components. When you drag all the elements into the final layout, everything comes together as a puzzle. Using a grid will enable you to design more dynamic layouts in which individual components can be replaced with one other.

09. Make everything consistent

The very last step in the design process is creating a style guide based on the completed project. Essentially, a style guide is set of PSDs illustrating every little interaction: every state of every button and link, all the icons and fonts, and so on. It should contain possible case of every single component, so developers can export graphics from the file as sprites.

10-point checklist
A sample style guide: the PSD for the Google '20 Things' project

This will also enable you to see whether your project and its elements are consistent enough. Are the buttons the same height as input fields? And are you using too many assets, or could you get away with half the number?

Don't be afraid to go into detail. Some of the style guides created for larger projects at Fi are over 100 pages in length.

10. Be proud of your work

I know so many designers who aren't happy with their work at the end of a project. “It might have been so much cooler,” they say. "If only I'd known that this would be the final result”.

And to be honest, I'm one of them.

But it's important to be proud of your work, and make a statement with it. This is how we came up with the case studies we do at Fi for the key projects we complete.

10-point checklist
Fi's first ever case study: Google Collge Hoops (http://www.f-i.com/html5/basketball/)

A couple of years ago we completed a nice HTML5 basketball game for Google. We struggled with it, not knowing how to showcase it properly. Small images in our portfolio wouldn't be enough, but video wasn't an option either: we wanted to keep it interactive.

Instead, we came up with a special promo page where we embedded the HTML5 piece, wrote up the story behind the project and highlighted design elements that were hard for users to see. In later case studies, staff started to show designs that were rejected by the client, just to show how the final piece evolved. Then we started to show the UX process that led up to the design. At some point we even began to highlight the original pitch we did for the client, to draw a full circle around the process.

Nowadays, Fi case studies are projects in their own right. They're statements that showcase the thinking and energy we put into the work we do, all the way from idea to launch.

10-point checklist
The Google 'Re: Brief' project (http://www.f-i.com/google/rebrief/)

Hopefully, this list will help you in the same way that it has helped me. Though this approach may not suit every designer, I am sure at least a few of these points will prove relevant. If you are starting out, keep them in mind and focus on improving over time, so that one day you can create your own checklist: one that suits your own personal process.

Thank you. And stay amazing designers.

Words: Anton Repponen

Creative director of F_i New York, Anton Repponen is an interactive designer with architecture background. This article was originally published by net magazine.

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection