Good Layout of a Website

So Many Choices for Layout Designs

Here are some questions that are running through the head of every designer as we sit down to plan and sketch the layout of a website.

• Will the layout be fixed or responsive?
• How many columns will you have in the website?
• Will the navigation be horizontal or vertical?

This is where drawing at least 2-3 wireframes of different layouts comes in to play. You will never find the best layout until you actually start sketching out the website to get an idea for how it will look and feel.

Ultimately your layout choice must be determined by referring to your website requirements, the content, and your user’s needs.

It’s All about Your Users.

Get inside your user’s heads and think about what would be the easiest, most logical, intuitive way to organize your website’s content.
Now I know some of you may be up in arms thinking that we’ve just thrown all creativity out the window. But really, just think about it; Apple’s devices have some of the best design and creativity on the market, and yet they are so easy to use your grandma could figure it out!

Remember, good design is invisible – it doesn’t get in your way.

Navigation – Vertical vs. Horizontal

One of the first things that everyone notices about your website is how well your navigation is designed. That means your first big layout decision is going to be designing how users will navigate through your website.
You need to start thinking about the different sections and pages you have in your website. How can you make it super intuitive for people to find the different parts of your website?

• Will a drop-down work well?
• Do you have a lot of content per page? Is so, will fixed navigation work well?
• How many top-level pages or sections do you have?

Deciding between using vertical and horizontal navigation can be simplified by sketching out a quick wireframe of both navigation styles.  This will give you a better idea of which is easier to use, and flows better with your overall design.

Number of Columns in the Design

Another big layout decision you will need to make is how many columns to break your content into.
This decision is greatly simplified after you have gathered your content and given it importance rankings.  You want the most important content to be placed in the middle of the page, with the items of lesser importance placed to the sides and farther down the page.

 Don’t get stuck with thinking that you must have a certain number of columns for your design to work properly. If you are designing a responsive website, it will almost certainly have to be re-arranged for smaller devices.

Fixed vs. Responsive Layout

With the rise of mobile and tablet devices being used for web browsing, you need to take a hard look at fixed layouts and whether or not they still have a place in modern web layouts.

On a smartphone, a fixed website layout designed for a desktop will be totally unreadable and useable unless you zoom in to see everything. Most users will simply go elsewhere to meet their needs.

Responsive layouts are a much better choice, because your website will work properly on many different sized devices. Your main job as a designer is simply to decide where different column and sizing breakpoints will occur and adjust your content according.

 Just because a website design is several years old, doesn’t mean it has to be ugly and unusable. However, because of how rapidly technology is changing, it is very likely that your website will need to be refreshed and updated at least every 3-4 years.

A Waste of Time you Say?

By now you are probably feeling overwhelmed with how much planning and thought goes into the layout of a website.

However, without effective planning your website will never reach a level of excellence and standout from the competition.

Here are three reasons that planning is vital to a success of a web project:

1. Planning saves time in the long run
2. Planning breaks down the huge task of designing a website into manageable steps.
3. Planning breaks “Designers Block” by forcing you to create something.

Are you trying to just slap together a website, or actually build something that is professional, aesthetically pleasing, and is easy to navigate – not to mention converting your users to action!

*****