A LoFi wireframe is a line or computer drawing that shows the placement and sizing of elements on the page. Adjusting a LoFi wireframe layout at the beginning of the design process is vastly simpler than modifying a complex page layout later in the process.

Stage 1 : The LoFi Wireframe

LoFi Wireframe

LoFi wireframe for this site’s content pages

The first stage of the dthree visual design process is to create a LoFi wireframe; basically a layout grid that indicates where the various elements are going to appear on the page.

Creating a LoFi wireframe is the best way to start the visual design stage of a web project, as it allows stakeholders to focus exclusively on the suggested layout - without the distractions of colour, type, or other design elements.

By concentrating solely on what is required, what goes where on the page, and the percentage of space that each element requires, the LoFi wireframe allows the basic layout of the pages to be quickly and painlessly agreed.

Important visual design considerations

Car designers no longer need to think about interface design - the steering wheel always comes out of the dashboard and the brake and accelerator pedals are always in the same order. Fortunately for users, web design has now reached a similar level of maturity.

Read more about some of the decisions that will need to be made…

Layout Variations

Most sites will need more than one page template. Simple sites can often get away with using the same layout across the site, but the majority of projects will require the flexibility offered by a variety of layouts to accommodate the different types of content.

Read more about the page layouts you’re likely to need…