Learning Discussion
MODULE
All modules
Designing the Website

Claudio Guglieri walks you through the process of designing a website layout from start to finish.

"When approaching the topic of designing a website layout, I thought about common mistakes I have seen in my years designing, especially with interns and new designers fresh from web design training.

Within this short list of steps to the perfect website layout, I aim to cover what I believe 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."

Claudio Guglieri walks you through the process of designing a...
Delete Drag
01. Put your thoughts on paper first
This seems very obvious but I've found too often that designers jump straight into Photoshop 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.
01. Put your thoughts on paper first
Delete Drag
An example of a 978 Grid with a 10px baseline
Delete Drag
Very initial sketches of an illustration series about cities around the world
Delete Drag
02. Start 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.
02. Start sketching a top level framework
Delete Drag
Sketching a basic wires will help you to resolve UX problems and to structure the layout
Delete Drag
03. Add 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.
03. Add a grid to your PSD
Delete Drag
04. Choose 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.
04. Choose your typography
Delete Drag
A general rule of thumb is to use no more than two different typefaces in a website layout
Delete Drag
05. Select 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.
05. Select your colour theme
Delete Drag
Use a limited set of colours and tones to guard against visual overload
Delete Drag
06. Divide 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.
06. Divide the layout
Delete Drag
The simpler the structure of the site, the easier it is for users to navigate
Delete Drag
07. Rethink the established
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. 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.
07. Rethink the established
Delete Drag
Do we really need a search button any more? In most of the cases the answer is no
Delete Drag
08. Challenge 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.
08. Challenge yourself
Delete Drag
09. Pay 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.
09. Pay attention to the details
Delete Drag
Game work in progress: detail view
Delete Drag
10. Treat 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.
10. Treat every component as if it could be presented to a design contest
Delete Drag
Pay attention to every component, and the whole will be more than the sum of its parts
Delete Drag
11. Sharpen 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.
11. Sharpen your work
Delete Drag
To avoid blurry pixels, try to set the right contrast between strokes and background or background colours
Delete Drag
12. Tidy 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.
12. Tidy up your PSDs
Delete Drag
13. Design 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.
13. Design the best case scenario but prepare for the worst
Delete Drag
14. 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. 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.
14. Obsess over the design until you hate it
Delete Drag
15. Avoid 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.
15. Avoid spending too much time on a concept before sharing it with the client
Delete Drag
Bear in mind how your layout will work on different devices and screen sizes
Delete Drag