23 steps to the perfect website layout

[Rss Bot 1]

When designing a website layout there are some common mistakes that often pop up, especially with interns and new designers. In this list of steps to the perfect website layout, we cover what every new website builder working within a digital agency should know and do before starting a new project, and what they should pay attention to during the process to avoid making these mistakes.

These principles cover not only design aspects but also general workflow tips that will get the job done nicely. Follow them and you'll soon be on your way to creating professional website layouts.

01. Define what success means

Talk to your clients to find out what the goals are

Before starting the work you need to know what is it you are designing for. Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what’s the goal? Is it to make make as many ad impressions as possible or is it to provide the best reading experience? How are those goals going to be measured? 

Good redesigns are not necessarily the most flashy ones but the ones that improve performance over time. Talking to your clients before starting your design is key to define all of this. You need to learn what their concerns and goals beyond the written SOW (statement of work) are.

02. Put your thoughts on paper first

Very early sketches of an illustration series about cities around the world (click the top-right icon to enlarge the image)

This seems very obvious but I've found too often that designers jump straight into their work 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 rather through a good layout and a clear hierarchy. 

Think about the content, the layout and the functionality before starting to drop shadows. Make sure those thoughts are in line with your client’s goals and feel free to share them. No client ever has complained to me about over-communicating ideas.

03. Start sketching a top-level framework

Sketching a basic wireframe will help you structure the layout (click the top-right icon to enlarge the image)

When I'm asked to create a look and feel for a project, the first thing I do is to come up with a top-level framework that solves all the design problems. The framework is the UI that surrounds the content and helps the user 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.

04. Add a grid

An example of a 978 grid with a 10px baseline

It's as simple as it sounds. Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid – and if you don't, I can assure you, 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, so you're consistent in terms of spacing as well as many other design issues.

To find out how to do this, take a look at this guide to creating a grid that adapts to all screen sizes.

05. Choose your typography

A general rule of thumb is to use no more than two different typefaces in a website layout

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. Overall, choose a font that is easy to read for big chunks of text, and be more playful with titles and calls to action. Don't be afraid of using big fonts and be creative and consistent when using typography.

06. Select your colour theme

Tools like Color Hunt are designed to help you pick a palette

During the process of choosing a set of typefaces, you should start exploring what colours you will use in the UI, backgrounds and text. 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.

If you get stuck, take a look at our list of free apps for picking a colour scheme.

07. Divide the layout

Simple layouts tend to be easier to navigate

The simpler the structure of the site, the easier it is for users to navigate. Each section in your site needs to tell a story; it needs a reason and a final outcome for the user. The layout should help the content to highlight what are the most important pieces in that story. 

In reality there shouldn't be too many calls to action on a page – 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. In the end you'll be surprised how hard is to keep it simple.

08. Rethink the established

Search buttons are becoming obsolete

Do we really need a search button any more? In most cases the answer is no. As designers we shape the way users browse the internet, it's up to us to decide how many steps a simple action will take and how efficient our site will be. 

Some conventions are there because they work, but some are there because no one spent enough time evaluating them. It's important to rethink the established interactive patterns of all components to see how we can improve them.

09. Think in motion

Motion is essential when designing interactive experiences

Motion is essential when designing interactive experiences. No design can be judged on its own or as a static comp any more; every component is defined by its relationship with the system, and that relationship needs motion to be conveyed properly. Motion can illustrate dynamic effects on content or interactive states within your layout. For that second purpose I recommend taking your designs a bit further into prototyping.

10. Prototype, prototype, prototype

Prototyping is the best way to test interactions

Prototyping is the best way to test interactions and technology. There are lots of prototyping tools that make it easy nowadays, and you don’t need to be a coding guru to create effective prototypes. This is yet another way you can get your client excited and on board with concepts and ideas that would otherwise need a lot of explanation.

11. Challenge yourself

I encourage every designer out there to challenge themselves on every project. Innovation isn't always a requirement for the project, so it's up to us to come up with something fresh. 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.

12. Pay attention to the details

Work in progress: detail view

This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that 'attention to detail' can mean different things. 

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 it will come naturally if you really enjoy what you do.

Next page: 11 more steps to the perfect website layout

13. Refine every component

Treat each component as if it were for a design contest

Treat every component as if it could be presented to a design contest. If you pay attention to every component, the whole will be more than the sum of its parts. I have to admit that this piece of advice is not mine. I heard it in the past at a previous agency 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 certain parts of a site until last on their to-do list, and end up not showing them much respect.

14. Sharpen your work

Set the right contrast between strokes and background

To avoid blurry pixels, try to set the right contrast between strokes and background or background colours. Besides any aesthetic considerations, 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  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 a 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.

15. Tidy up your design files

This (along with the use of a grid) is one of the most important pieces of advice, no matter what design tool you are using. Regardless of 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 collaboratively with other designers.

16. Design the best case; prepare for the worst

Bear in mind how your layout will work on different devices and screen sizes

Bear in mind how your layout will work across different devices and screen sizes. As designers our job is to solve problems through different constraints. With web design, the constraints range from conceptual and technical problems 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.

17. Obsess 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.

As a result of this process, I get to a point where I finally end up hating my design. 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.

18. Share designs with clients early on

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. Avoid spending too much time on a concept before sharing it with the client.

Once the initial concept is approved you can relax a little bit and start production. But after presenting the first concept, if the client doesn't fall in love with it, you should gather enough feedback to bring a second more appropriate concept to the table.

19. Be 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 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.

20. Present things as clearly as possible 

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. When it comes to presentations, you want to explain your work like you're showing it to a four-year-old. 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.

21. Don't get too attached to your ideas

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

22. Follow your design into development 

If you work inside an agency you'll probably know how easy it is to find yourself struggling with the design of a new project when the previous one is being developed. Contrary to general belief, your work on a project doesn't end when the PSD and style 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 every little pixel is perfect.

23. Show your work in progress

Share your style sheets and work in progress components with the community

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.

Like this? Read these...

• 50 brilliant design portfolios to inspire you
• Best designed 404 error pages
• 20 websites that use minimalism beautifully

View the full article