Layouts Planning

Layout planning is working out which layouts to use for each section.

Websites should use the least amount of layout styles to keep the design simple and consistent.

Unlike creating simple flyers or brochures, it cannot be creatively “designed”, it must be slowly visualized into existence.

Here you can see ideas from layout.starfi.sh, a website, from a competitive analysis and content from the client mixed with section ideas. This is probably ready to prototype, alternatively, a designer could also give better ideas on how to break down the content. Regardless, this is ready to show to the client.

What is Layout Planning for?

1) To ensure a consistent look and feel.

2) That all the pages have been planned out fully and that the text, pictures, and section layouts will work together.

3) It helps us fill in gaps in areas such as forms fields, page to page navigation.

4) It ensures that the developer has accurate and complete instructions on what to build and that the customer knows what they will be getting before it’s built.

How detailed do layouts need to be

It depends on the type of website you are making. Simple websites have less need for finer details.

Starfish defines three levels of layout planning.

Rough, quite rough and smooth planning. 

You should have an idea to which level you will need to work to before you begin.

Avoid layout planning too early
Planning layouts too early fixes the mind onto a set design, which can make it difficult to change ideas.
Revise, make mistakes, come back and improve
Layouts don’t get made in isolation. As you get a better understanding of the content and purpose of the website, your layout ideas can be adapted.
Avoid adding functionality (unless it's in the Scope of Work)

Try to avoid adding extra functionality, even if the client asks for it. Avoid accordions, sliding banners, filters, and other typical functionality.

Why we don't wireframe

Wireframing create structures that are hard to fit the content in. Content (picture and text) should come first.