How the web is evolving: Web Design Trends 2015
Posted on July 16, 2015
Every year Web Design adopts new trends and styles and goes in and out of phases. In previous years we got used to pretty much the same thing; a website layout consisting of a main navigation menu at the top/down the side, a content area, a header and a footer. While this convention stills plays a massive part in the way a website is shaped up, Web Designers and UI Designers have been experimenting with new layouts and conventions, and the results have been huge for the web. A big factor that comes into play with how this type of change came about is the shift of the web from desktop to now tablets, smart phones and even watches! So it is natural that this shift in Web Design trends would be so big. It isn’t a lot to grasp if you’re a designer either. The fundamentals of these designs mainly being a play around with CSS and HTML5, and unless you’ve been living under a rock, with frameworks such as Bootstrap. Of course when using CMS technologies like WordPress or Drupal a lot of themes come packaged with these new designs straight out of the box.
Let’s take a look at a few Web Design Trends 2015 so far:
We’ve all spotted it at some point and thought “wow! That’s pretty cool”. Especially when we see it on the same computer that we used to play minesweeper with back in the day. Parallax Scrolling is when you are scrolling down the page on a website and the background moves slower than the page creating a 3d effect. It is created using HTML5 and CSS3, so a play with code that Designers and Developers have creatively come up with. It looks snazzy but can sometimes be a bit much and really depends on the type of site.
Check out Rimmel London’s brilliant example of Parallax Scrolling.
(As outlined in Creative Bloq)
Using Grids isn’t exactly a new approach to Web Design but with the emergence of responsive design they have become very useful. The page is divided into several blocks – symmetrical or asymmetrical. The blocks may be all the same size, if the elements are of equal importance, or different sizes, based upon the order of importance of the content that is displayed. The blocks are designed to be flexible, so as to change size to fit full PC screens or reduced to fit screens of mobile devices. Think Pinterest! Websites that look like Pinterest are using these grids in a modernised way.
Check out The Bad Company Rowing Club’s site for grid examples.
(As outlined in Web Designer Depot)
One of the main things you set out to achieve when you start to code a website framework is to divide the page into container elements; boxes, borders, shapes and containers of all types used to split the content of a page apart such as header and footer. This stuff is referred to in the Web Design world as Chrome, and no Chrome is exactly what it says on the tin; No Chrome, none of this. So pretty much just a poster style website that is interactive.
(As outlined in Web Designer Depot)
From what you can probably guess in the title Ghost Buttons are those which are transparent and come alive on hover to show colour or texture. Mostly useful with the No Chrome and Parallax designs mentioned before they give a modern and minimal aspect to the design and work well with these type of pages. If a background image is being used for the whole page it looks so much better with these instead of just a texture or bold piece of text plonked on top! If you’re working with a CMS such as WordPress you can find these type of buttons built in with shortcode for a corresponding theme.
See some examples of Ghost Buttons
Pageless Design/Dynamic Storytelling
Every website aims to tell a story. When we had Flash based websites as the new thing on the web we saw a lot of animated pages and menu’s. Now Parallax scrolling, No Chrome and One-Page scrolling has become the new focal point of Pageless Design. By making this trend more and more common-place we are eliminating the old conventions of the top-menu, the chrome and the content areas we spoke about before and replacing the content with an interactive UX. Truly I think this is the future of Website Design! Using Pageless Design tells our website’s story in a more captivating way by being interactive, media rich and invoking emotion in ways that other designs simply can’t.
Check out Marcin Dziewulski’s portfolio site as an example
So there you have it! Some trends for 2015. When people ask me about the future of Web Design I will usually refer to the fact that we have responsive design and the emergence and reliance on apps. It’s too easy now to have an app than to search a domain. But while we have it, I think the future Web Design for the browser will be hugely shaped on these trends (and many more) over the next few years. Things like Pageless Design and No Chrome specifically. As Designers, we will adapt and it will be exciting! As consumers this only means better looking and cooler websites.
Written by: Ross Maguire
If you want to snazz up your website to match these new trends or you’re looking to get started with something cool then give us a shout!