Over the past few years, we have seen a huge difference in web design trends. As the years go by, we notice that what is “in style” keeps on evolving towards offering a better experience to users. We notice differences in colours, fonts, backgrounds, textures, etc. and the list can go on and on. So here’s a sort of summary of the evolution of trends since 2007.
2007
1 – Lustrous Interface
In 2006 glossy elements could be found everywhere on web pages; volumetric glossy buttons and shininess on navigation bars and logos.
2 – Textured Design
Designers got inspired with live materials around them and made a “material revolution change”. They started using designs of wood or rocks and many more, giving web pages a sort of grungy look and the trend went and we can say it evolved into what is known as: the Skeuomorphism trend.
3 – Swirl, Flourishes & Ornaments
In order to destroy design stereotypes, designers started using swirls, ink splatters, flourishes and ornaments, which at the time, helped creating unique web pages.
4 – Vector Illustrations
During the Vector Illustration trend, designers were mostly using images of persons. Don’t you remember those toon mascots? They are actually still used, specially in promotional videos shared on social media.
2008
1 – Like a Rainbow
In 2008, designers started using those sorts of multi-colours backgrounds under various forms, as glowing rainbows for example.
2 – Keep it Grungy
Looking back at the rainbow background trend, you can see a huge difference with the grunge style. This style actually got trendy not only in web design but also in interior design. The strongest feature is the rawness of the materials, this sort of solid “dirtiness” in the look.
3 – Back to Retro Vintage
As in all the rest of the fashion & design industry, vintage and retro looks came back. This web design trends was seen in mostly all blogs that were using vintage wallpapers and fonts, etc.
4 – Water-colours
The Water-colour trend started in 2008 and is still used by many. It’s often used to give elegance and an artistic touch to the design.
2009
1 – Just Oversize it
2009 represents the year of huge typography. It’s an extremely efficient way to capt the attention of users and designers understood it and actually still use it today.
2 – The Magazine Style
This style makes you feel like you’re looking at a newspaper page or a magazine. It’s an easy way to gather information in a structured way due to the typical narrowed columns and squared blocks.
3 – The One Page Layout
Instead of having multiple pages linking to each other, designers started switching to a “less heavy” one page layout that we all know today. That was actually a great step for User Experience as it gave more “control” of the journey of the visitor and it’s great for mobile usage.
4 – Texturize that Background
As backgrounds play a big role in a web page, in 2009, designers decided to add some texture to it to make it more unique and get more harmony.
2010
1 – Simply Minimalist
Back to basics. The designs contain a lot of whitespaces, clear typography, less text, no need to use flashy colours. It’s a more relaxed and clean feel.
2 – Typography Based Designs
Designs based on bold headings or text that is well spaced makes the content more engaging and clear, it helps communicate what really needs to be communicated.
3 – Navigation Bar is Your Friend
This is even more important since we have those one page layout designs mentioned earlier. Instead of having to scroll back up to reach the menu, designers have made it easier for users to browse the content they want to see by making the header static. This means that even when scrolling down, the menu or navigation bar stays visible.
4 – It’s always looks better through Infographics Driven Designs
This trend brought an infographic style to websites. It’s quite amazing because it makes everything look simple and interactive; in many cases, designers use moving images instead of text and that captures the attention of users.
2011
1 – Boards & Grids
Boards & Grids are excellent when it comes to organizing the content of a page to offer a clear style in horizontal and vertical lines.
2 – Full-Screen Photo Backgrounds
It looks like this trend followed the trend above; oversize everything. Using a full-screen photo, illustration, animation or even videos as a background is always impressive and now that it doesn’t slow down the loading of the page, developers and designers love it. In a way, it portrays well the website’s message and builds a sort of connection with users.
3 – Diagonal Designs
Diagonal design basically adopts the same concept as boards & grids, but let’s say that it’s a delicate alteration of the old trend. Instead of having squares or rectangles that are straight, designers use diamonds, hexagons, octagons, etc.
4 – Ribbons & Stitches
They have become popular and are used a lot because it’s another way of putting emphasis on certain features as the menu or promo boxes.
2012
1 – Responsive Web Design
As mobile devices are more and more used and are apparently here to stay, responsive design is extremely important as it increases the potential and the experience of navigating a website on different devices. It helps adapting to different devices.
2 – Vertical Narratives
Vertical narratives are usually single web pages on which you scroll down to explore the rest of the content. Usually designers add a lot of animations and various transitions to make it seem as if you were going through a sort of story.
3 – Skeuomorphism
As mentioned earlier, we could say that textured design is the grandfather of skeuomorphism. In fact, again, designers got inspired by live objects surrounding them, as for example wooden materials. The objective is to make the user feel comfortable and trying to create this sort of intuitive attitude while browsing, using audios and objects.
4 – Circular Design Elements
Circles brings a positive emotional, friendly and smooth look to the web and they are easy to fit in any block of layouts.
2013
1 – Flat Design
As it’s name states it, the design is flat. Many people say that since Apple launched it for iOS, designers started to use it and one of the main advantages is that it looks great on all screen size.
2 – Video Backgrounds
In order to avoid being static, and following the trend of full screen picture backgrounds, designers started using short videos as backgrounds. Websites become much more interactive and fun for visitors.
3 – Metro Style
Since Windows Phone 7, the Metro style boomed. It’s used by many designers because it enhances the content of webpages.
4 – Mixed Typography
Basically it’s about mixing different types of font styles and sizes giving webpages a lot of life and character and obviously the secret here is being able to choose the ones that would go well together.
2014
1 – Code Free Designs
Another trend in 2014 is the fact that many people can now create websites without having to be a developer or a professional by using different tools.
2 – Clarity and Simplicity
The simpler the better. Following the minimalist trend, web designers prefer to keep it clear and simple. It’s considered much more appealing and easier to understand as you only keep the important content.
3 – Non-standard navigation
I’m sure most of you have already landed on one of those pages that doesn’t have the “usual flow” of other websites. Well that all started because some designers started playing with the concept and ended up having creative designs that stand out due to an uncommon navigation.
2015
1 – Material Design
Designers create graphics that look more realistic as they play with the reflection & shadows, making it more simplified, neat digital aesthetic.
2 – Monochromatic Colours
In 2015, monochromatic colours are used a lot. That means that designers, instead of using many different colours, use colours of the same “family” in order to keep focus on the content and not to be too aggressive for the visitor.
3 – Micro-interactions
This trend is more or less directed to strategy. Changing a setting, rating a song, liking a post, etc. all of those actions are what we call micro-interactions. They can enhance the experience of visitors and therefore increase customer loyalty.
4 – Large Hero Areas
For now, it’s here to stay. As we mentioned earlier, the full screen image on the home page with minimal text started to be commonly used in … and it seems like more and more web pages are adopting it as it increases engagement, makes it more visual and interactive for viewers. That said, the choice of pictures or videos is quite important because it represents mainly the whole message that wants to be sent.
