Parallax, mega-menus, asymmetry and other web design trends
Over the last few years the development and improvement of front-end frameworks and graphic design software, paired with an explosion of new sources of information and inspiration for web developers and designers, has brought the area to a peak where the limit is our own creativity. Web developers are forced to keep up with the new trends that come up every year in order to capture and retain the attention of new users.
To showcase the trends included in this post, I’ve created a web design concept for a Scandinavian furniture store.
TL;DR: combine perspective and CSS3 transform functions to achieve a Parallax effect, use translation and absolute positioning for overlay mega menus, play with asymmetry and different font styles to build a unique and memorable design, and use media queries to adapt your layout across different screen sizes.
Parallax
One of the most seen trends in the last years has been the Parallax effect: a scrolling technique where background and foreground elements seem to move at different speeds, creating an interesting illusion of depth in the design.
Even though there are multiple JavaScript libraries that implement this technique for us, some HTML and CSS3 is generally enough to achieve this effect.
In the code snippet above, we created a container div where the Parallax effect will take place. Inside, we placed a div to contain a background image which, for the technique to be effective, should normally appear to be moving slowly as we scroll. Over the background image, we placed a title container and an image. These elements will move faster over the background.
We gave the Parallax container div a width and height that will fill our browser’s viewport entirely and set the overflow-y property to auto. The key to achieve this effect lies in the perspective property. It adds a third dimension to our design, allowing us to place elements along the z-axis, closer or further away from the observer, creating the Parallax illusion. By defining a 3D space with a z-axis of 2px, we can now place the background the furthest away into the screen and the rest of the elements closer to us. The CSS3 function translateZ(-2px) places the background 2px further from the observer and into the screen.
Since the element is further away from the viewer, to maintain its original size we have to apply a scale transformation with a factor of (perspective-translation)/perspective.
We placed the header’s title 1px into the screen, and an image on the 0 value of the z-axis. When scrolled, the image seems to move up faster than the title, overlapping the slow moving background.
Mega-menu overlay
Overlay menus, i.e. menus that take up the entire screen and cover the underlying content completely, are a fairly common concept in mobile web design, where the screen space is limited.
This style can also be used in designs intended for bigger screens, creating a new interacting experience for the user and decluttering the information displayed. To add a menu overlay over the Parallax container, we can create a wrapper to contain both components.
To make the menu overlay appear from the side of the screen and cover it completely, we must set its width and height to 100vw and 100vh respectively (100% of viewport’s width and height), and use absolute positioning to 100% to the right. Setting the overflow property of the wrapper as hidden, the mega menu will not be visible from the main page. The overlay effect will take place when the user clicks on the hamburger menu icon on the main page, which should trigger a function that translates the menu div 100% to the left, overlaying the main page.
Combining the CSS3 function translateX() with the transition property of the menu-container class we achieve a smooth sliding animation from right to left.
Typography and asymmetrical design
While maintaining a symmetrical balance on the design is important if we want to display a serious aesthetic with explicit order and structure, playing with different fonts and introducing asymmetry can help us achieve a more unique and memorable style.
For instance, we can use different fonts for the title and the body of a section, combining a more serious serif font as Lora, with a more modern and minimalistic sans-serif font as Montserrat.
We can also introduce some asymmetry into our design and play with the layout of the content of each section. In this case, rotating or over sizing the title to occupy the same space as the body gives the design more personality and captures the attention of the user.
The layout of the sections displayed in the image above was built using a flex display. By setting the direction of the elements in a row, and justifying the content with a value of ‘space-between’, we can then play with the width of each element to introduce asymmetry.
Responsive design
With a rising trend of mobile usage for web surfing, online shopping and social media, even surpassing desktop users, designing with a mobile perspective in mind seems imperative. This is where responsive web design comes in, a technique that allows us to adapt our web applications across devices of different sizes and continue to offer a good user experience, while maximizing our content’s reachability.
We can adapt the design across different screen sizes using CSS3 media queries.
If we opened our example page on a mobile device, some content would not be accurately displayed. For instance, the image we placed on top of the background, with the width and height defined in terms of the viewport’s size, would look too narrow on a mobile screen. We can target medium to small sized screens with a media query that sets the width of the image to fit the screen entirely.
If we don’t adapt the layout of the sections to smaller screens, fitting its content on a flex row would make each element look narrow and tight. We can easily make our design look smooth on mobile screens too with a media query that sets the direction of the flex display as a column, instead of a row.
What’s next
Following trends blindly is not always the right approach to web design, but being mindful of the different design concepts in use today to attract users can help us build fresh layouts that stand out and get viral. For inspiration, look into online resources like Dribbble, Behance or Pinterest.
