Posted On:
Web Design Feeling Flat? Try These 3 Ways to Add Depth
Web design in Surrey, just like web design all over the world, is subject to certain trends and changes – the team at Thunderbolt Digital know very well that it’s not a static thing and that one size fits all definitely does not apply here. You may have noticed in the past few years how popular flat design has become, especially after being championed by Google – but you may also have noticed that web designers (and even Google themselves) are moving away from entirely flat designs and are starting to look for ways to add more depth to web pages and apps.
But how can this be done? Well, web design is often thought of as 2D, but once designers start implementing the Z axis in their designs, more 3D designs can be created with layers that float above and below one another that will appear either closer to or further away from the viewer. Not only will this provide interest but also create a visual hierarchy, thus improving UX – depth can be used throughout a design or as a contrast to flat elements to draw attention to specific areas such as navigation, or Calls To Action. Want some examples? How about…
Overlapping elements
Overlapping elements is a great use of the Z axis to create depth that is simple to implement yet highly effective! The effect is achieved by placing images, text, and other content in a way that makes it clear that one is in front of (or on top of) the other – cut out pictures may stick out of borders and titles may be partially obscured by other content, or may stand in front of blocks of colour.
Parallax scrolling
When considering web design in Surrey, have you thought about including parallax scrolling? It’s something we’re very fond of here at Thunderbolt Digital (you may have noticed we use it on our site!) and for good reason. Parallax scrolling makes use of the Z axis by having foreground and background elements scroll at different speeds, giving the feeling of depth and adding a certain “wow factor” to a page. Of course, this doesn’t mean it should be used everywhere, but it can be used to great effect on splash screens and the homepage.
Animations
It’s possible to give your web design hidden depth that can only be found once interacted with by way of animations such as fading, sliding and zooming – the latter of these effects is used especially well by Apple’s iOS 7 which makes the whole experience feel more interactive as a whole.
Some prefer to use everyday objects as inspiration, and will incorporate depth to their sites by adding things like folding paper, turning pages and even flipping cards to give a real sense of operating within a 3D space.