The process to create a layout

layout photo

Layout is one of the most important aspects of the web and applications. We need to consider
a number of different things from the target audience to the brand and the content. Get it wrong and your users will get confused and leave to find the information elsewhere. Here we take you though every aspect of the process, from the initial inception of the project through to building and structuring the code, and touch on which display properties you should use.


The design phase of a project usually begins with a scoping document of some description. This document will contain a specification of what you’re designing.

The starting point for designing layouts really depends on the complexity of the project:

Brochure websites — for example — will usually use a fairly simple design phase and usually include the following processes: content gathering -> site map creation -> wireframing -> high-fidelity concept design.

Whereas a more complex web app design phase might include a few extra processes: gathering content -> sitemapcreation-> wireframing -> low-fidelity prototype -> high-fidelity concept design -> high- fidelity prototype.

There’s no right or wrong way to do this and different designers use different processes. It’s up to you — as the designer — to find the right process for the project at hand. This may also be dictated by the project’s budget, when this is the case you need to decide which of these processes are the most important for the project you’re working on.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Facebook HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol type start> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <iframe src style scrolling allowtransparency allow width height frameborder>

Pinterest HTML

  • Allowed HTML tags: <a href='*' hreflang data-pin-do data-pin-board-width data-pin-scale-height data-pin-scale-width> <script async defer src='//'>

Reddit Domain HTML

  • Allowed HTML tags: <script async src data-subreddit data-domain data-url data-width data-height data-post-finder data-theme data-show-submit data-sort data-timeframe data-subreddit-mode charset>

Reddit HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite data-card-created class=""> <code> <ul type> <ol type start> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <script async src charset>