20 steps to the perfect website layout

Each component needs to be designed as it could stand alone as the best component ever. Select your colour theme
Use a limited set of colours and tones to guard against visual overloadThroughout 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. Don’t be afraid of using big fonts and overall be playful and consistent when using typography. 06. 02. Sometimes designers leave some parts of a site last on their to-do list and show little respect to them at the end. It’s important to rethink the established interactive patterns on any component and to see how we can improve them. 05. Start sketching a top level framework
Sketching a basic wires will help you to resolve UX problems and to structure the layoutWhen 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. 03. 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. 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. 10. 07. The layout needs to help the content highlighting what are the most important pieces in that story. 01. Follow them and you’ll soon be on your way to creating professional website layouts. 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. It needs a reason and a final outcome for the user. At the end you’ll be surprise how hard is to keep it simple. 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. The framework is the UI that surrounds the content and helps to perform actions and navigate through it. 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. Divide the layout
The simpler the structure of the site, the easier it is for users to navigateEach section in your site needs to tell a story. 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. I heard it in the past at Fantasy Interactive and I was shocked by how clear and true this statement was. Add a grid to your PSD
An example of a 978 Grid with a 10px baselineIt’s as simple as it sounds. Pay attention to the details
Game work in progress: detail viewThis statement has been overused lately but it’s not always visible in the final product. But overall this touch is essential and also natural if you really enjoy what you do. Challenge yourself
I encourage every designer out there to challenge themselves on every project. It’s important to apply those consistently across the UI depending on the element’s functionality. Think about the content, the layout and the functionality before starting to drop shadows. Next page: 10 more steps to the perfect website layout Depending on the concept behind the project, that “love” could come in different ways. Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. 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. 08. Put your thoughts on paper first
Very initial sketches of an illustration series about cities around the worldThis 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. Rethink the established
Do we really need a search button any more?

Updated: 11.12.2014 — 06:31