9 golden rules to go about creating a perfect website layout design

These golden rules not only cover design aspects such as landing page design but also the general workflow issues that will get the project nicely executed. The common mistakes observed especially with new designers and what they should pay attention to get the perfect website layout is the highlights of the topic. Follow them !

1.Put your thoughts as initial sketches on paper first

Rather than jumping straight into photoshop, think about the content, the layout and the functionality before starting with dropshadows. 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

Sketching a basic wireframe

Come up with a top level framework which is the UI that surrounds the content and helps to perform actions and navigate through it. It includes the navigation and components like headers, sidebars and bottom bars.

Before starting to design anything in Photoshop you need a proper grid to start with. 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, alignments as well as many other design issues.

2.Divide the layout for easier navigation

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

At the end you'll be surprised how hard is to keep it simple.

3.Choose your typography and color theme

A general thumb rule : use no more than two different typefaces in a website layout

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 .

Use a limited set of colours and tones to guard against visual overload. Start exploring what colours you will use in the UI, backgrounds, and text. It's important to apply those consistently across the UI depending on the element's functionality

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.

4.Shape the way users browse the internet

Do we really need a search button ?

Do we need a top navigation or left navigation?

It's important to rethink the established interactive patterns on any component and to see how we can improve them. it's up to us to decide how many steps a simple action will take and how efficient our site will be. Whether it is better to avoid using a specific colour.

5.Treat every component in detail

Pay attention to every component, and the whole will be more than the sum of its parts

Each component needs to be designed as it could stand alone as the best component ever. 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

6.Sharpen your work

To avoid blurry pixels, try to set the right contrast between strokes and background .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.

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. Bear in mind how your layout will work on different devices and screen sizes

7.Share the concept with your 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.

If your client does not like it gather enough feedback to present a second more appropriate concept .

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 so present it as you are explaining to a child.

As a designer 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.

8.Track down your design during the development process

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.

9.Show your work in progress

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

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.

To Know More:- Website design Mumbai

About Digikraf

Digikraf a Website Designing and Development Company in Mumbai (Thane), provides best website designing and development services in Thane, Mumbai.

Contact Us:-
91-22-32095052 / 91-22-25327553 /
info@digikraf.com