Designers checklist advices About

01/20Put your thoughts on paper first

This seems very obvious but I've found too often that designers jump straight into Photoshop CS6 before giving any thought to the problem they are trying to solve. Design is about solving problems and those problems can't be resolved through gradients or shadows but through a good layout and a clear hierarchy. Think about the content, the layout and the functionality before starting to drop shadows.

02/20Start sketching a top level framework

When I'm asked to create a look and feel for a project, the first thing I do is come-up with a top level framework that solves all the design problems. The framework is the UI that surrounds the content and helps to perform actions and navigate through it. It includes the navigation and components like sidebars and bottom bars.

If you approach your design from this perspective you will have a clear understanding of what your layout needs will be when designing sections beyond the homepage.

03/20Add a grid to your PSD

It's as simple as it sounds. Before starting to design anything in Photoshop you need a proper grid to start with. There are no valid excuses for starting without a grid, and yes if you don't, I can assure in one way or another, the design won't look as good.

A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, to be consistent in terms of spacing as well as many other design issues.

04/20Choose your typography

Exploring different typefaces and colours is part of the discovery phase of a project. I would recommend not using more than two different typefaces in a website but it really depends on its nature you could use more or less. Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. Don't be afraid of using big fonts and overall be playful and consistent when using typography.

05/20Select your colour theme

Throughout the process of choosing a set of typefaces to use you should start exploring what colours you will use in the UI, backgrounds, and text. In terms of colours I recommend using a limited set of colours and tones for the general user interface.

It's important to apply those consistently across the UI depending on the element's functionality. Think about the layout of sites like Facebook, Twitter, Quora, and Vimeo. Besides the UI there shouldn't be any colour restriction for illustrations or graphic details as long as they don't interfere with the functionality of the components.

06/20Divide the layout

Each section in your site needs to tell a story. It needs a reason and a final outcome for the user. The layout needs to help the content highlighting what are the most important pieces in that story. In reality there shouldn't be too many call outs on a page so everything should drive to that final "What can I do here".

Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. At the end you'll be surprise how hard is to keep it simple.

07/20Rethink the established

As designers we shape the way users browse internet, it's up to us to decide how many steps a simple action will take and how efficient our site will be. Design patterns and conventions are there because they work but sometimes they are there because no one spent enough time evaluating them or rethinking them. It's important to rethink the established interactive patterns on any component and to see how we can improve them.

08/20Challenge yourself

I encourage every designer out there to challenge themselves on every project. Innovation doesn't always come as a requirement for the project so it's up to us to come up with something interaction or design related. Examples of different challenges could include using a new grid system, creating a new component, or even minor challenges like avoiding blend modes or using a specific colour.

09/20Pay attention to the details

This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that "love" could come in different ways.

It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential and also natural if you really enjoy what you do.

10/20Treat every component as if it could be presented to a design contest

I have to admit that this piece of advice is not mine. I heard it in the past at Fantasy Interactive and I was shocked by how clear and true this statement was. Each component needs to be designed as it could stand alone as the best component ever. Sometimes designers leave some parts of a site last on their to-do list and show little respect to them at the end.

11/20Sharpen your work

Besides any aesthetic consideration there are some common things that have to be avoided in order to create a clean and correct piece of work. Some things you should be on the lookout for when trying to sharpen your work should include gradients banding, blurry edges, font rendering options (some fonts depending on their size are best viewed on a specific render mode), and strokes that merge badly with the background.

These are just few basic examples of issues to look for but in reality the list is endless. Always look at your design as a whole to see if everything works well and then analyse each component individually more carefully.

12/20Tidy up your PSDs

This is (along with the use of a grid) one of the most important pieces of advice when designing with Photoshop. Despite the size of the project and the number of designers working on it, you need to keep your files clean. This will make it easier to export different sections, to speed-up the design process and to work with shared files with other designers.

13/20Design the best case scenario but prepare for the worst

As designers our job is to solve problems through different constraints. With web design, the constraints range from conceptual and technical issues to content related issues.

We need to build a site that can work not only in the ideal scenario, but also in the worst-case scenario. For instance a user could be using a really small screen and check the site when there is barely any content on it so it looks broken.

However for the purpose of presenting our work I always strongly recommend building the best case scenario for it. Therefore we are going to display the ideal amount of text and we are going to show the site inside the ideal browser size that should be the most common scenario for most users using it.

14/20Obsess over the design until you hate it

If you are passionate about design I'm sure this is something you are already doing. Whenever I finish a comp I feel proud of, I tend to make that comp a part of my life. I take screenshots of it, check it out it different devices, make wallpapers of it and even print it and hang it on the wall.

Throughout this process I get to a point where I finally end up hating it; I start seeing everything that's wrong with it and eventually I change it. Disliking your previous work is sign of maturity, and it means that you are finally learning from your own mistakes.

15/20Avoid spending too much time on a concept before sharing it with the client

When proposing an interactive concept or a design 'look and feel', you need to ensure that you and the client are both on the same page as soon as possible. Once that happens and the initial concept is approved you can relax a little bit and start production.

But if after presenting the first concept and the client doesn't fall in love with it, you should gather enough feedback to bring a second more appropriate concept to the table.

16/20Be your developer's best friend

Developers are creative people and they love their jobs as much as you do. But they are not always included in a project from the very beginning and often times only get involved when the concept is decided and their creative role has been overridden. This process is wrong; some of the best ideas come from the development team, so make sure you team up with them from the very beginning of the project. Sharing your concepts and excitement with them will lead to better ideas and a better execution in the end.

17/20Presentations:Explain it to me like I’m a four-year-old

It's just as important to produce great work as it is to present it. Your best design can be ignored or thrown away if you don't present it properly. Always keep in mind that what is totally clear to you might not be that clear to somebody seeing your design for the first time.

18/20Love each of your ideas but don't get too attached to them

There is a thin line between knowing when to advocate for your ideas and learning to realise when your team or client doesn't see them as 'the one'. As a designer you need to believe firmly in what you do, but you should also be open to quickly turning over that idea and coming up with something else. Don't forget that there is more than one unique solution.

19/20Track down your design during the development process

If you work inside an agency you might have realised how easy it is to find yourself struggling with the design of a new project when the previous one you just finished is being developed. Contrary to general belief, your work on a project doesn't end when the PSD and styles- sheet are delivered.

If you really care about your designs and interaction ideas being well executed, check in on your old best friends the developers from time to time and help them as much as they need to ensure that everything little pixel is perfect.

20/20Show your work in progress

As part of a community of designers, we all love to see not just the final results but also the work in progress. Sometimes the best part of a project is left out for several reasons and gets lost in your Archive folder. Once the project is done and you get the approval from the client/producer promote it and if possible create a case study with the work in progress and designs that didn't make it to the final release. You will be helping by contributing to the community's knowledge and you will get valuable feedback in return.

01/10Understand 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.

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 literally surprise you.

02/10Communicate 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.

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/10Think 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.

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. 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/10Keep 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.

05/10Work 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.

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/10Question 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?

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/10Check 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.

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/10Organise 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.

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/10Make 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.

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/10Be 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.

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.