The process of mapping out a website layout should occur in the early stages of creating a website. Sometimes after you’ve established your website strategy but before you jump into a graphics program to create the interface.
A website layout is visualized through a wireframe, which is a basic skeletal map showing how the content will fit together. It is important to distinguish wireframing from web design, which is the whole process of creating front end graphics and other visuals for the web page. The website layout design is a big part of web design, and it starts with wireframing. Ideally, the visual design should follow the wireframe layout so that graphic elements are positioned strategically, rather than on fleeting aesthetics preferences.
Here are the steps to creating a website layout:
- Identify all content areas. Wireframes typically represent content with simple squares and rectangles, whether an image or a block of text. It is important to know ahead of time how much content you have. At each piece’s approximate size (or word count) so you can fit elements together with accuracy.
- Create a series of wireframes and prototypes. A layout can be as simple as a pen-and-paper drawing, but there are also many programs (such as Whimsical) dedicated to streamlining the process. Because wireframes aren’t meant to be detailed works of art, you can churn out several at a time. Even if you fall in love with your first idea. Don’t stop, you should design more wireframes to stretch your imagination and give yourself options. With no fancy graphics to distract you, you’re free to focus on the user’s experience and explore which arrangement will be the most intuitive to them. Be sure to account for all screen sizes—it is recommended that you start with the layout for mobile devices and build upward from there.
3. Test, gather feedback, and iterate. Once you have some options, make sure you gather feedback from your colleagues. Apps like Invision and Figma allow you to create interactive prototypes so you can easily test buttons and navigation without building an actual web page. Having trial users screen-record themselves as they navigate the prototype can reveal UX stumbling blocks. Once you have some notes, go back to step two and iterate until it’s perfect.
Although these are the literal steps to creating a website layout, it can be hard to know what makes a layout effective or not when you are just starting out. In the next section, we’ll go over the specific techniques you can use to guide your design decisions.
The common types of website layouts
Website layouts are rarely created from scratch; in fact, it’s often advised that they aren’t. Most modern websites are based on common layout schemes, used over and over with small variations all across the internet.
Although some degree of originality is important in any design, websites are meant to be immediately understood and used. So when users become accustomed to certain types of layout designs over the years, it makes sense for designers to stick to them. Remember that at the end of the day, a layout must be practical, and the less time users have to spend learning a new layout, the more time they dedicate to actually using the site. With that aside, here are some of the most common website layouts:
Single column layout
A single column layout is one in which content is arranged sequentially in one column, often in a centered alignment.
Many web page layouts start here, given that mobile-first design is a long-recommended approach and mobile websites are often arranged in a single column due to size constraints. This layout is most useful for landing pages or feed-based content, such as social media and blog sites, as it reduces the amount of page elements and encourages scrolling.
Two column layout
The two-column layout, sometimes in a split-screen arrangement, displays content side-by-side. The elements (different audiences on clothing websites, a before/after style of service, or dual options for pricing, for example). It is also useful for counterbalancing graphics with copy while subtly supporting Z pattern reading.
Multicolumn layout
A multicolumn layout is often called the newspaper or magazine layout. It accommodates heavy site content within the same page.
a common to use a grid to maintain order and hierarchy, giving wider column space to more important elements such as body content while less important elements such as a navigation menu, sidebar or banner ad receive less proportionate space. It is useful for company home pages, image- or video-heavy sites, online publications, user dashboards, and shopping websites. That is, websites with a lot of content and categories to direct users to.
Asymmetrical layout
An asymmetrical layout is where elements are arranged in unequal scale and proximity—in simpler terms, not symmetrically. But although it is the antithesis to a grid-based system, asymmetry does not mean chaos
Balance is essential in any design, and an asymmetrical layout simply achieves this in unexpected ways, such as pairing a large-scale visual on one side with many smaller elements on the other. It is useful for heightened emphasis by exaggerating some elements (either through literal size, coloring, or placement) over others. It can also support customized reading patterns (as opposed to the common ones mentioned earlier).
Brands who can afford to be unconventional in their design approach will find this layout style ideal—which is to say websites that deal in the arts, have adventurous audiences, or want to highlight an innovative or disruptive product.
Website layout all laid out
A great website layout design not only makes your website visually appealing, it makes it intuitive. It is the first step towards a winning first impression with users. That will encourage them to stick around and see all of the content your site has to offer.
While these fundamentals of website layout design can give you a place to start. You should aspire to go above and beyond to deliver exceptional experiences for your site visitors. And the best way to get a cutting edge website design is to make sure you’re working with a designer.
The goals of a website layout
Simple as it might sound, the only goal of a website layout is to support the goals of the website, whether that be conversion, brand awareness, entertainment or another goal. But a website’s goals are expressed through content, and a layout design describes how to deliver that content effectively. With that said, here are some common functions a website layout can serve:
- Information display: A good website layout organizes information so it fits together in an obvious sequence. Is easy to scan, gives weight to the most important elements, find and use.
- User engagement: A good website layout makes the page visually engaging. Guides the user’s eyes towards points of interest, and encourages them to continue navigating through the site.
- Branding: A good website layout plays a role in branding too, using spacing, alignment, and scale in ways that are consistent with the company’s brand.
These high-level goals are what drive a website layout design. When we put it all the process and the understanding you have you can have an effective website product.
