No pictures, animations, and usual interactive elements…That’s how websites in the 90s looked like. Back then, nobody talked about design as such. Animations, micro-interactions, buttons, videos are web realities of 2018.
Web design is still actively developing, so it’s too soon to talk about its standards. Yet we can already say that today the virtual world has become really appealing and comfortable. To a great extent, this is thanks to the tendencies promoted by top design studios from 2000 to 2018. In this overview, we would like to focus on the latest trends to let you know which changes to expect in the nearest future.
2000-2002: Visual breakthrough, the development of directories and navigation elements
This was a kind of great era when smart web design was born, yet there was still a long way to UX/UI. About 56% of users of that time browsed on huge monitors with 800×600 screen resolution. Cartoonish visuals were typical for most websites. Developers already used PHP3, HTML4, and CSS2. Also, website pages started to become more dynamic and contain less text.
Distinctive trends: small text, non-scrolling, gradients, dark backgrounds, acid fonts, and highlighted/underlined links in menus. The designs included minimum images. The appearance of a search box on the main page and thought-out menus on most websites was a real breakthrough.
Since late 2001, Internet speed has been continuously growing. This has allowed developers and web designers to shift from purely textual content and readability as the only characteristic of website usability.
The next period was the time to experiment with the simplest flash animations and video content.
2003-2005: Flash, splash, and 17 million colors
From the beginning of 2003 to 2004, many popular social networks appeared, including Facebook, LinkedIn, and MySpace. Pages with integrated flash animations were at their peak. Web designers focused on website readability and convenient navigation, whereas visual elements, style, color and font combinations got little attention.
In 2004-2005, many users bought monitors with high resolution (1024х768). For the first time, they got access to computers with 17 million colors. This marked the beginning of visual or picture design. The appearance of Youtube in 2005 nudges designers to use videos as a mean of content presentation.
2006-2008: The start of skeuomorphism and mobile design
We cannot state that the period of skeuomorphism started right in 2006. This will disregard a smooth transition from flash design to a “caramel” style with glare, characteristic glossy shine, and round shapes.
Let’s be honest, today you won’t find typical websites of the 90s, but you still can sometimes come across caramel pages on par with semi-flats. The slow stagnation of another always accompanied the rise of one tendency.
However, in 2006, the first signs of skeuomorphism and naturalism in web design started to appear. The main tendencies: stock pictures, long scrolling pages, realistic shadows. We can certainly say that from this moment, realistic elements began to displace cartoonish awkward pictures.
The release of the first iPhone in 2007 marked two important events at once: the emergence of adaptive web design (due to the necessity of full-fledged layouts for mobile and tablet devices) and the formation of the caramel style of web design (Do you remember Job’s icons which looked so sweet and glamorous that you wanted to touch or even lick them?). Realism goes hand in hand with gloss.
2009-2010: Web 2.0. and HTML5
Some companies already had primitive glossy websites back in 2003. But the tendency was called by the popular designer Jay Elliot as web 2.0. reached its peak in 2009-2010. The popularity of such design solutions was due in no small part to the release of the first iPhone.
Among the main characteristics of the web design of that period: contrasting colors, virtual stickers, glossy icons and illustrations, rounded corners and buttons, diagonal patterns, gradients. Developers could create such complex in terms of layout websites thanks to the appearance of HTML5. This programming language is equally understandable to both people and search engines. Actually, the rise of the advanced programming language gave new life to many old multimedia trends.
2011-2012: Skeuomorphism rules, flat design appears
The years of formation and active development, and voila– in 2011, skeuomorphism started to rule almost everywhere. In other words, hail to realism in all of its aspects, including:
- Calm color palette;
- Use of natural textures (wood, leather, grass, and cloth);
- 3-D, embossed typography, ribbons, curls, and antique stamps.
Realism in web design made designers draw every icon and object to the tiniest detail to make them as similar to real objects as possible. Textures, light, shadows, and colors added unique depth turning the web into a new reality. Apple’s backgrounds are one of the brightest examples of skeuomorphism of that time.
It is worth noting that it took designers a lot of time to shift from realism since they considered it a role model for web design. Don’t even try to count all the arguments on whether to follow or not to follow fashion trends, stick to realism or discover minimalism…they are countless! Yet progress is unstoppable. The first distinct characteristics of flat design became noticeable back in 2011 when Microsoft and Twitter attracted a lot of attention using card-based design. Simplicity, focus on solid colors, readable text, the minimum amount of lines and objects, and a lot of space couldn’t be left unnoticed.
Minimalism was appealing to both designers and users who were now less distracted from the idea and content of websites. The look of the web changed in the same way as its textual component. In the 90s, websites were content-focused and unappealing to users. From the beginning of 2000 to 2010, the emphasis was put on glossy elements that greatly distracted from the text. However, after skeuomorphism peaked, designers realized that usability is not one thing but a well-thought-out composition.
Flat design polished the understanding of what should be highlighted in a good layout. This is the style in which typography is accentuated with simple visual elements. Websites don’t hurt your eye or distract users from target actions and look simple.
2013-2014: Flat against skeuomorphism, the appearance of Google Material Design
So flat design became a leading trend. But it had to tie for first place in design tops and the hearts of users with skeuomorphism. Even today, this naturalistic style can be noticed in the layouts of famous trendsetting designers. If Yves Saint Laurent had designed websites, he would have said: “Trends fade, skeuomorphism is eternal.” And this wasn’t far from the truth!
It’s necessary to distinguish between realism and minimalism in design clearly. Realistic isn’t always minimalist. For example, realism can look like fancy arches, classic columns, light and artificial colors when talking about interior design. It allows no emptiness, no air. Free space must be filled to the maximum. In contrast, simple and minimalist design has these features:
- a minimum amount of text and graphics;
- no shadows or depth, the transition to two-dimensionality;
- readability, large fonts;
- parallax effects, GIFs, simple java-animations;
- bright colors, large photos, and background videos.
Meanwhile, visual programming languages were also forging ahead even during the heated confrontation between flat and skeuomorphism.
In 2014, Google rolled out style guides that got the name “Material Design.” Google developers wanted to get back to realistic design but created something more similar to flat. So what was the result? Textural realism, detailed minimalism. Displays turned into sheets of paper – an absolutely real object from this world. However, they were complemented with easy-to-read and unusual typography, bright icons, illustrations, shades, and animations.
It was Google Material Design that gave rise to semi-flat, a currently popular style which combines the characteristics of flat and naturalistic design.
2015-2018: The appearance of semi-flat, UX/UI, the time of animation and interactive elements, large typography, and multidimensional shadows
The formation of a mobile-first approach marks this period. Flat design is slowly but surely transitioning to semi-flat, which to a certain extent stops the fight between realists and minimalists. In this case, the popular design is airy, has minimum elements, bright typography and at the same time preserves realism with animations, dynamic pictures, and multidimensional shadows.
Main characteristics:
- Elements accord with an existing or created design system (patterns, typography, colors, icons, graphics, sounds, content);
- Polygonal and geometric shapes, thick contrasting lines used to attract extra attention;
- no boundaries, multilayeredness, and interactivity (or haptics);
- highly detailed images, animation, and full motion.
Today everything boils down not only to a stylish look but to the maximum convenience of use. UX/UI has become a generic name, and now it is inseparable from web design. An effective and appealing design is created based on user experience. A high-quality modern website should make users involved with a certain interface to the greatest extent possible.
2019+ or to be continued
Almost a 20-year ups and downs history of design not only allows us to evaluate the past and analyze the current tendencies but also to predict the future development of visual programming languages. Here are some possible trends:
- Broken grid layouts for creative and original solutions;
- Illustrations on the main stage (say goodbye with nice photos and greet users with GIFs);
- More streamlined forms and buttons;
- Contrasting and vibrating colors;
- More multi-dimensional interactions and animations;
- Original and often automatic transitions between pages. Maybe parallax will lose its top position, but it will definitely remain in demand. Fashion is cyclical;
- Minimalism, focus on right font combinations, a lot of free space on a website;
- Nice, large, readable serif fonts. Their time has come! Animated typeface pairings will also be extremely popular;
- Floating menus (not static or fixed);
- Properly integrated videos. In other words, users shouldn’t immediately get how the video appeared there;
- More massive and filled with content and visual elements forms;
- UX-content that in titles, blocks, forms, and buttons supports the created user scenario.
The future belongs to minimalism, originality, and well-thought-out design. And it has already begun, so in the coming years, we won’t observe a great change of styles. But the semi-flat design will be in high gear, which is already obvious.
