With the emergence of HTML5, CSS3 and increasingly faster mobile internet speeds, we’ve seen a shift from static, conservative web design to a more animated and creative approach. The following are some design trends prevalent in modern websites.
2015 seemed like it was the year of the slider. Full page sliders, advertisement sliders, blog sliders – they’re rampant everywhere. Don’t get me wrong, a good slider has the potential to really reach the intended target audience, but “too much of a good thing” has the possibility of rearing it’s ugly head. Designers tend to create too many slides, introducing the potential of the user overlooking valuable information on subsequent slides.
Full Page Headers and Sections
To really attract attention to important information, designers use full page headers and sections. These sections are generally comprised of only necessary information, usually including a call to action to entice the user to click.
Pinterest really put the card-style lists on the map. This trend allows users to easily read and discern between different products, categories, thoughts; you name it. The symmetric design also allows for easy responsiveness for mobile and tablet users.
In web design, a parallax effect is where background images move slower than foreground images when scrolling. This generally appears as a fixed background image accompanied by scrolling content, giving the optical effect of the content moving over top of the background (or the background moving underneath the content, however you decide to look at it). Parallax scrolling can add a creative element to emphasize important content. Although, one downfall of parallax effects is that they tend to perform poorly on mobile devices, causing designers to stick to scrolling images when not viewed on a desktop (I’m looking at you, iOS).
Æthereal Solutions contains two types of parallax effects: scrolling in the “Request a Quote” ribbon, and mouse-over (or by tapping on mobile) in the header section.
Although sometimes hard to spot, CSS3 Animations are everywhere; from the smallest element transition to full page effects. CSS3 animations are a light and simple way to create stunning effects. One of the main benefits of using CSS3 animations are that they are run by the browser, saving your device’s resources – although not as important on desktop, these savings can make a huge difference on mobile.