Receive More Updates

SMS: Send FOLLOW REALITYTECHSZ To 40404 For Free - Email: REALITYTECHSZONE@GMAIL.COM

prexblog


Friday, 26 October 2018

steps to the perfect website layout by MD


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 defining all of this. You need to learn what their concerns and goals beyond the written SOW (statement of work) are.  
The options are limitless. Understanding what’s in place from a design perspective is key if you're to move fast and recognise where the opportunities to innovate are, as opposed to needing to challenge what has been established and coming off as someone unable to understand the requirements. 

03. 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 both get 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.

Design workflow

04. Tackle layout first

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.

05. Start sketching a top-level framework




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

When I'm asked to create a look and feel for a website layout, 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.

06. Add a grid



grids on different screens

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.

07. Choose your typography



Website layouts: typography

A 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. Generally, I would recommend not using more than two different typefaces in a website, although it really depends on its nature. 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.

08. Select your colour theme



Website layouts: colours

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 interface, backgrounds and text. I recommend a limited set of colours and tones for the general UI. 
It's important to apply those consistently across the website layout, depending on each 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 ofthe best colour tools for web designers.

09. Simplify the layout



Website layouts: B-reel homepage

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

10. Refine every component



Microsoft Music design

Claudio Guglieri worked on the UI design at Microsoft Music

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 at a previous agency and I was shocked by how clear and true this statement was. 
Each component needs to be designed as if 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

Subscribe for free