The year is approaching, and that could only mean one thing. It is time to look forward to what website design might look like in the coming year. Like every year, I scanned and searched the Internet far and wide for new upcoming trends that we could see more of in 2019.
All from layout to colors, typography to white space and everything between them— no design element was left out of the possible web design trends in 2019.
Grid fractures and asymmetric layouts I added this trend to last year’s guide on design predictions, but it also appears to be around in 2019.
1. Broken grid and asymmetrical layouts
The design concept of the grid is an imaginary plane with horizontal and vertical lines that helps to lay elements on the page or screen. With most websites, the grid is easy to point out – you can, for example, look to the left side of the website and see the logo, title and content, mostly line up together.
If you have a broken grid, you have items on this plane that make the grid feel less rigid or broken. The website of Times Talks shows a broken grid layout throughout most of its website, in particular in the hero area (shown above) and in various sections of its website.
This type of design, which favors unexpected limits and experiments with asymmetry, has been around for some time. It was used as a technique to help the crowd stand out, attract attention or experiment with design. In 2019, however, I see it becoming more a statement and more common on the internet.
Studio Reveled experiments with an esthetic design of an asymmetric and broken grid website with its homepage design (the circles can be moved around the screen to make this broken grid concept easier).
In 2019, I expect to see more use of broken grids and asymmetrical layouts as we begin to pull away from the rigid grid shape that we have gained in recent years. When I experiment with the grid and be okay with web design asymmetry, I expect this trend to become more prevalent in the next year.
2. Fluid/organic design and elements
Elements and fluid / organic design Little by little we pull away from the straight lines with a flat design and start experimenting with more fluid shapes and lines. These types of shapes are often referred to as fluid or organic shapes in which your typical circle, square, rectangle or any straight – sided shape is not.
Small part of the homepage of Wandering Aimfully, with organic forms and lines seen behind the circle pictures and as a subtle background behind the heading below. By dismantling the very straight and near-clinical lines we are accustomed to seeing online and replacing them with elements derived from nature and life (such as pond and lake shapes, torn pieces of paper), these organic shapes and lines can make designs more accessible and more in line with human nature. The website of Mawla uses organic forms and lines on its homepage, especially here in its hero area on its site.
In 2019, the typical forms used in web design for so long (circles and squares, I look at you) will be joined or replaced by more organic forms and lines, bringing a whole new element of design and intrigue to the design and launch of websites in 2019. Aesthetic design of nostalgia / throwback / retro.
3. What’s old is something new again.
As we move beyond flat design, where experimentation seems to have no limits, the time to bring back old design elements with a hint of nostalgia seems ripe. The website design of Statamic features a retro color scheme that recalls the bright colors and images of the eighties. Nostalgia and retro design experiments can create a nice juxtaposition between then and now.
What makes this even more interesting is that we can expect to see more retro design styles that reflect the times before websites were easily accessible to the masses. The Great Jones website features the typography and color scheme of the 1970s, an esthetic design that was common before ARPANET in 1983.
I expect that more websites will adopt different design styles, both in the design of the websites themselves and in their content. Some of these throwback elements will probably include color schemes that recall past design trends and typography that remind us of a different time. Enhanced / higher image treatments Images have always offered unique design possibilities, particularly on the web.
4. More enhanced/elevated image treatments
Putting images in circles, making them black and white and adding a drop of shadow behind them are all techniques used by designers to enhance and/or attract attention to images on websites (and just about any other design). The KOBU website features images that cut out the subjects instead of a standard image, allowing the design to flow between their team members ‘ ” cut – outs.” You can draw attention to an image or even draw attention away from an image by taking the image treatment a step further.
Where most websites have a very large hero-style image that spans the entire width of their website, takes up a lot of height and doesn’t change the image much at all, changing the way images are presented is a design trend that I think will start to take more traction in 2019.
5. Monochromatic and absence of color
The website of Drip shows images that have been cut out and added drawings and shapes to further enhance the image, which also places greater emphasis on the design of the site. Instead of performing one type of image treatment, expect websites to see layer image treatments push the image to the extent that it can either draw more attention to them or deprive them of their attention.
Stacking design treatments such as monochromatic image creation, cutting out the subject or adding a pattern to make a brand new image is likely to be more prominent in web design in 2019. Monochromatic and colorless it’s all cool to have millions of colors at your fingertips, but what if you only have one color or no color at all? If well done, this type of design restriction can help to improve the design and make it more memorable.
The website of Digital Bro adheres to a very monochromatic color scheme using a hue of yellow and very rarely differs from that of a yellow variant (black and white are considered neutral). Limiting yourself to one color can help strengthen your branding while adding design flexibility constraints. With most websites with two-five colors, you can stand out and be more memorable to a website viewer by using only one color.
Climate’s website adheres to a gray-scale color scheme that is absent from any other color and even makes its videos all gray-scale on the site. Pushing it one step further and eliminating color together is definitely an option if you want to simplify your color palette (black, white and gray, in art and design, are not considered colors as neutral). I expect that in 2019 more websites will use less color or no color.
6. Overlapping elements in design
If you closely correspond to broken grid layouts and asymmetry, items overlap with each other can bring visual interest to specific content types on a page. This can bring an unforeseen element as we have become accustomed to elements on a web page that have their own space and separate from the elements around them (usually not touching each other). The website of Mad Studio features overlapping elements as the main esthetic design throughout the site, enhanced by subtle animations that make the website feel 3D.
The trend of overlapping elements on a page can help to improve the overall esthetic of the site if carefully considered. This can also be quite difficult to execute in the first mobile world in which we live, as overlapping elements can cause users to be confused and frustrated when elements overlap in the wrong way.
The website of hers presents elements that overlap in parts of its website, including its main hero area on the homepage. The use of overlapping elements in which they share similar space is a trend that I see increasingly common as we move into 2019 and experiment more with a three – dimensional website.
7. Reimagined areas for hero / header
As mentioned above, most heroes (formerly known as “above the fold “) have a large image that covers most of the viewpoint, often with some text to focus the viewer’s attention. And there has not been much experimentation in the last few years with this area of a website (probably the most important area).
A unique approach to a hero area used by Zoo Creative (the hero area is treated as a billboard and smart animation). While some websites have begun to push the limits of what is possible with their heroes / headers on their websites, as we move away from the typical full – width image-with-text-overly type heroes, I expect to see more and more experiments by web designers in this area.
The website of Andreas Nymark features a heavy white hero area with a simple heading at the bottom of the hero area (including another trend mentioned later in this article). In 2019, I expect different types of experiments to be conducted in this all-important area of a website, including minimizing the area, changing the present content (and using something different from a full – width image) and dealing with this area with greater importance in attracting the attention of the viewer first hand. Extensive and experimental navigations It seems that every year there is a trend in website navigation.
Likely because it’s one of the page’s hardest elements for designing. So important for the way we use the web, but a pain to keep it functional yet attractive.
8. The website of Digital shows rather large navigation
Making it the center of its website rather than a small part of its site.
For 2019, typography experiments and the promotion of new website designs in the coming year are likely to be a trend. Since experimenting with type is much easier in print, you can expect the same type to be treated in print to move to the web as we learn new typography code.