Symmetrical web designs are safe, comfortable and aesthetically appealing. Many designers have applied this concept for a long time precisely because of its unchallenging nature to the eye. However, they often create a bland, predictable look when used on a website hence, the modern trend by designers to lean on asymmetrical layouts. The designs are believed to balance and make things more interesting while allowing the designer to stick to a grid. It captures the attention of the user and is thought-provoking. Symmetry is derived from a Greek word and has to do with balance and proportions.
Asymmetry, on the other hand, means a lack of balance or unevenness. Web designers apply this concept when developing web pages by using two or more elements of different sides of a page to create the same visual weight. For example, the designer can use a block of text on one side and an image on the other and style them to balance each other. Designers rely on their dexterity and the grid to create the perfect balance between asymmetrical and symmetrical layouts.
The grid has been the premise for modern graphic designs and remains relevant in the 21st century. It ensures the design is balanced by separating the page into two equal sections. It is easy to point out on a website, for example when the title, logo, content are arranged in order. However, web designers are breaking from this predictable look by integrating asymmetry to create a broken grid. As such, some words are pushed away from others, making the grid appear broken.
While only a few web designers have experimented with this technique, the trend is likely to make a statement in 2020. The only trick is finding out how to break the grid while maintaining a coherent design of the web page. This guide offers a few pointers.
Ditch the Grid
This approach is a bit risky as it needs a lot of skill to bring out an appealing and coherent design. You want to keep things minimal to avoid overwhelming the page. This type of layout also works best when you include all the images. An excellent example of web designs that have ditched the grid is the Sojournal magazine page. The designer pairs each image with a subheading and a title on different sections of the page to create a pattern. The design results in a clean and spacious layout and the irregular positioning of the pictures draw attention to each of them.
If you are going to ditch the gride, you need to be very thoughtful when it comes to elements such as social media tools. You want to make your website different, but you don’t want to confuse the user. Remember to integrate everything at the backend too. A social media report tool is a great way for you to discover if your layout is working in terms of the number of impressions with regards to your social media tools. If something clearly is not working, you can make changes.
Using Irregular Patterns
It makes a great way of breaking the grid without creating an eyesore. For a more coherent design, you need to repeat the irregular patterns on several areas on the page. The human eye is naturally attracted to patterns, and the brain tends to recognise them fast because they are instinctively predictable. An excellent example of the use of irregular patterns to break the grid is Tom Dixon’s layout, which uses different sizes of elements that have varying vertical and horizontal spaces between them.
Identify the Part that will Carry Visual Weight
Asymmetry is based on the premise that some parts are so weighty that you will be drawn to them first. As such, you want to determine that part of the image, text or page that will carry visual weight. Some designers will use whitespaces while others use images. Remember to create a balance using a contrasting feature, e.g., a light-coloured element to grab the user’s attention. You want to combine this feature with the other techniques so that the weighted item does not overwhelm the rest of the design. At this point, you are still experimenting hence the need to keep backing up your work and be patient.
Applying the Masonry Layout
It is the most common technique for creating a broken grid. Most Reddit reviewers will refer to Pinterest as the perfect example of using a masonry layout. A designer can achieve this look by dividing the page into ordinary columns along a horizontal plane but the content is placed in a block of different heights. These columns can be of double or triple the width but it should be separable by a single column width.
Alternatively, the designer can arrange content blocks that have different widths in ordinary height rows instead of columns. The vertical plane is separated into two equal height rows where the height of an individual content block becomes the multiple of that row’s height to create a masonry layout that fits into the grid. Ensure the vertical spacing between the blocks is the same and is equal to the horizontal spacing between the columns. If you are including text in the blocks, ensure the height of the block is consistent with the baseline grid to create visual coherence.
Add Focus Using Color
An essential factor in creating a coherent design is colour and most asymmetrical patterns have high contrasting colour combinations. As such, you can use a toned picture that has a toned white background or bright shades against black typography. If you are hesitant as to the shades you want to use, use the colour wheel to choose the right combination. Consider out-of-the-norm colours to create a feeling of asymmetry. You can also use odd hues to highlight or emphasise particular elements on the asymmetrical outline.
Web designers looking to break away from the usual, predictable designs should try creating broken grids. It not only enhances creativity but also allows you to explore new ideas.
