Web design evolution in the past 8 years

Over the past few years, we have seen a significant web design evolution. 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 colors, fonts, backgrounds, textures, etc. and the list can go on and on. So here’s a sort of summary of web design evolution of trends since 2007, year by year.

 

Web design evolution of the main trends

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 much 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, especially 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. Web design evolution of this trend was seen in mostly all blogs that were using vintage wallpapers and fonts, etc.

4 – Watercolor designs

The Watercolor 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 was the year of a huge web design evolution & changes in typography; It was the year of huge typography. It’s an extremely efficient way to capture 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 typically 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 colors. 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 always looks better through Infographics Driven Designs

This trend brought an infographic style to websites. It’s quite amazing because it makes everything looks 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

The 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 to adapt 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 bring 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 its 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. Web sites 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 web pages 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 don’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 colors are used a lot. That means that designers, instead of using many different colors, use colors of the same “family” in order to keep the 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, the entire web design evolution. 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. I hope you found my point of view regarding web design evolution useful.