14 Layout Design Trends

webflow.com webflow.com3 years ago in #Web Design Love576

There was a time, not too long ago, when web design was a reflection of print. Columns and rows followed rigid lines, with content and images anchored to fixed spaces. But as tools like HTML, CSS, and JavaScript evolved, so did the possibilities of layout design. Here are 20 techniques and practices designers are using to create unique page layouts and push web design in new directions. 1. Add depth with a parallax effect Using parallax is a way to give a layout design depth. Layering graphics, images, and text while tying their movement to scroll position makes a layout more dynamic and interesting. The defining characteristic of this effect is animating foreground and background elements at different speeds. Epicurrence (above), a creative non-conference with a focus on outdoor activities, beautifully combines well-crafted illustrations with parallax motion. Notice how the background gets bigger or smaller depending on which direction you scroll? Parallax makes you feel like you’re entering a physical space, instead of just staring at a flat screen. Unlike so many web trends that come and go, parallax effects seem to have staying power, possibly because of its range, from subtle to dramatic. There are still many creative possibilities left open for designers to explore in using them. 2. Use overlapping elements These days, websites don’t need to be flat expanses of self-contained boxes anymore. In the design process, designers are stacking the z-axis with design elements, signifying a move away from “clean,” self-contained minimalism with layers of text, image, color, and pattern. WebINTENSIVE, a software company, takes a three-tiered approach on their projects page, placing a card over an image, on top of a block of color, which pushes the content to the forefront: Layering type over images is another way to make a design feel less constricted. In this example from Bauhem, a branding and design agency, they use a delayed fade-in effect on both the header and body text, layering them over monochromatic background images. This keeps the website design from feeling overly boxy or card-based. Floating titles over hero images is another way designers play with overlapping elements. It’s a familiar design practice, but a few sites have taken unique approaches that really stand out.‍ Amsterdam Worldwide takes this basic concept and gives it their own spin. They shrink their hero image and float one portion of their title text over it for a creative layout design: 3. Break up content with offset headers, subheaders, and columns Not every layout design needs complex animations and other embellishments to be engaging. Simply offsetting elements and columns can keep a layout from the boring confines of symmetry. Like any non-traditional layout methods, some thought needs to be put into the placement of the content and visuals. You can have these be offset, but there still needs to be a logic that ties related elements together.‍ Alvogen, a pharmaceutical company, uses this staggered design approach for a more interesting layout: 4. Lay out content with horizontal cards A horizontal layout is a simple way to keep a design from becoming overcrowded. It also works great for the smaller, mobile screens where the layout translates into a vertical scroll for related content.‍ Hypergiant, a company offering advanced software solutions for companies, uses horizontal cards for some of their most important content: This website about Waangari Maatha, the first African woman to win the Nobel Peace Prize, features quotes next to landscape photos: 5. Split screens Split screens let you break up big blocks of content in a layout and maximize screen space. Dedicating each side of the screen to…

Like to keep reading?

This article first appeared on webflow.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply