The appearance of websites changes every year. Of course, good design lasts longer and certain design trends are also very short-lived. A great user experience, accessibility and mobile first are the main focus.
That's why it's important to be up to date, but you don't have to react to each of these trends immediately. It's just important to keep an eye on new trends.
In this blog post, I'll try to tell you about the most important web design trends and what makes a modern website.
Web Design Trend - Fonts / Typography
Modern web design is also characterized by the choice of font. Current trends include visual eye-catchers such as eye-catching and large fonts. Underpinned by neon-inspired color transitions and scrolling effects. Overlaying text and images is also a design trend.
In addition, typography also plays an important factor. Large letters or fonts are intentional and help to give identity.
Exactly this identity is the most important thing when creating a brand. Also, a combination with font and image can be seen on many websites. Or with fonts whose filling is an image or a gradient.
Also here you can experiment with colors to give the website its own look. Also create with multiple fonts fully fits. Color gradients in general are trendy anyway. Whether in combination with typography or even as backgrounds.
Or fonts that are included as parallax effects and thus used in an animated way when scrolling.
Even fonts with serifs are on the rise again. Serifs are the small horizontal strokes at the bottom of the font. As you know from the newspaper.
Web design trend - neo-brutalism
Neo-Brutalism comes from the architecture of the 50s to 70s and is characterized by a bare and simple design. Often we work with raw concrete.
And the buildings look like bunkers. With small embrasure-like windows. Brutal, as the name neo-brutalism also says. For some time now, this trend has also been emerging in web design.
The emphasis here is on text. It embodies the content in a brutally almost unfinished way. Typography is definitely in the foreground here.
From design trend rather a minimalist design. However, very crowded, almost overcrowded. Here is a great resource that lists various neo brutalism websites.
Web design trend - colors
We crave color and I think that's also related to the pandemic. Users want to get out and enjoy life.
Of course, this cannot be applied equally to all projects. Because black and white with complementary colors is also in vogue. Gray tones with bright borders, as I use them on my website, for example.
This is a process that is important during website design and must be defined at the beginning.
Additionally, gradients are also a design trend. I work conditionally with color gradients on my page. For example, on my entry page at the top. Which gives a light impression.
A web page can be quite gaudy. Or you can work more experimentally with textures in the background or very clear background colors.
Also, usability (accessibility) has become strong in recent years and websites have to follow the trend. For people with disabilities or a visual impairment.
I recently found an interesting site where you can get color maps that are also differentiable for people with low vision.
Here's an interesting article in Welcome Tech on the subject.
Here's one that is helpful when it comes to visualizing data. This one was published in Nightingdale.
And here is another great tool Viz Plaette built by Susie Lu and Elijah Meeks. It is also great that you can work directly with a CSS.
Adobe has also revised its own color palette. I recommend this article.
I think a modern website should address this and I will certainly incorporate this into my projects in the future and make sure that the colors also meet the accessibility requirements.
Web design trend - animations
Animations as well as Lottie animations are in trend.
Lottie Animations are vector-based and offer much more refined design options than an animated GIF. They are also not comparable to conventional animation methods in terms of the amount of data (data to be transmitted).
As a web designer, I work a lot with microinteractions and use Lottie files for that. This greatly enhances the user experience and is a joy to use. I try to see them as design elements and use them accordingly.
Another advantage of Lottie files is that they can be controlled (addressed). For example, an animation reacts when you move the mouse over it or by scrolling the page.
These are used as scroll effects, so to speak, or incorporated into a parallax scrolling.
A Lottie file animation is a GIF on stereodies and definitely super cool. I create these in Adobe After Effects and export with the Bodymovin plug-in.
Here is a link to Lottiefiles. A cool Lottie database. More technical info about Lottie Files can be found here > AirBnb
Attached is a cool Lottie file animation from Spotify. This is controlled by scrolling or swiping.
Here is a great site from weareimpero.com. The site is also full of animations and built in brutalism style. The video integrations are also cool and trendy in my opinion.
Web design trend - interactions
Also, micro interactions are common on modern websites. These can be small animations in buttons that are triggered on roll over. In the future, these effects will trigger a vibration on the smartphone.
I personally work a lot with microanimations on my websites.
Look at my quote request tool, they are packed with such little animations. They surprise the visitor and it's fun to click through.
Of course, these can also act with the movement of the mouse or the scrolling on the web page. These are then called scroll effects.
Also cool are micro interactions for example in a hamburger menu. Where this opens easily and becomes a cross to close. So navigating the website already becomes an experience.
And if the navigation is placed on top of the hero image, that's cool. Hero image is the top image on the web page.
The key to this trend is to present something mysterious - such as the little black cube that follows your cursor around LEQB 's site.
On the website by audio artist Chiara Luzzana - the visitor is asked to use a specific form of interaction to learn how the site works. This makes for novel experiences that make visitors to the site feel more like investigators, actively playing around with the site to uncover its secrets.
Web design trend - 3-D effect - three-dimensionality
Achieving a 3-D effect is also in vogue, this can be by overlaying individual elements with a semi-transparency. Or with curves that simulate a 3-D effect.
Or working with parallax effects is also cool.
Parallax effects give a sense of depth. The foreground moves faster than the background. Of course, you can also add more layers to enhance the effect even more.
You can work with it wonderfully when parallax scrolling on the page. So scrolling becomes a pleasure or scrolling becomes interaction with the web page.
I additionally also work with 3-D effects in a Lottie animation like my bot at the top left of the web page. This is also controlled by the movement of the mouse. I think this is also part of a design trend.
Here you can also see a great 3-D effect by Jeremy Woons that runs as an animated GIF .
Super abstract are the 3-D drawings by Adam Ho.
You also have to provide for haptic experiences, which have unfortunately been lost in the era of flat designs. One positive effect of new morphism: a stronger bond between user and design.
Whether it's with buttons or navigations in general. Here is an interesting article about neumorphism that is worth reading.
Here's another article from Webflow that predicts that new-morphism is already out again. You see, every now and then new trends are very short-lived.
Web Design Trend - Dark Mode
Dark mode is also an issue. Most graphics programs come with a dark interface design.
Web browsers can also be put into dark mode, as well as the Microsoft Office line or even the entire Windows. It is also becoming increasingly easy to switch to dark mode on phones and pads.
Too much white is not necessary at all.
There is also an increasing trend that websites can be set to a dark mode according to the preferences of the viewer. This is linked to a language selection on the website.
Only this reverses the colors and the website can be switched to a dark mode. Of course, this requires a lot of effort, but the trends are going in this direction and distinguishes a modern website.
If I had enough time, I would add this to my website as well. But it's coming, I just don't know yet when I'll do this design update.
Here I have for you also a great article by Hesam Andalib regarding Dark Mode.
Web design trend - minimalism
Minimalism is also a theme, Reduce to the max. Very clear and concise layouts, working mainly with typography and images.
Colors are not really necessary and the pages look very restrained. That's where the pictures really come into their own, and once again it's enormously important to use great visuals.
Images give the website style. Never skimp on good visuals. Minimalism also goes retro. Just without the retro typography. Are fonts like Bauhaus, Frutiger or Helvetica retro? That's the big question here; I think they are simply timeless.
Here is a great site regarding minimalism > https://dribbble.com/LukaMarr
Luka makes really great layouts and they impress with their simplicity. Very modern web design!
Landing pages
Or in the vernacular also called home are enormously important, whether the user develops a desire to continue surfing on the website or just closes the page again. I don't know how long I honed my landing page before I was finally satisfied.
For a lawyer client of mine, I suggested using his portrait as a landing page. After all, who wants a lawyer they don't like. You can see Stefan Ioli 's website hereI think this is a good example of a successful landing page. Of course I took the picture as well. But the response is great and he is happy with the page.
Again, landing pages can also be created for campaigns. This is then a subpage that was created specifically for this campaign and is otherwise not actually accessible.
Content Management System
Content Management System or CMS is also an area that is becoming more and more user-friendly. What used to have to be laboriously clicked together now mostly runs in the frontend.
Or you have an easy to use backend for blogs, portfolios or other articles. It is also easy to insert text and images together in a rich text element.
It's almost like Word, but designed for web design content management. My websites are equipped with one. And one that is easy and intuitive to use. This is what modern web design is characterized by nowadays.
Loading times
Speed is Key. Here, too, it is enormously important that the website loads quickly. Google also includes these loading times in the ranking. And if you just can't load fast, then cool designed loading bars are an alternative.
I always keep an eye on the load times of my websites.
This is definitely annoying and scares away the customer. It's more likely to hurt a company than to put the company or product in a good light. That's why loading times should be as short as possible.
This also includes the endless scrolling or "long scrolling", you know this from news sites, there the content is always loaded, the further you scroll. A good solution to distribute loading times.
Mobile devices
Overall, the trend is moving in the same direction as in recent years. Mobile devices such as smartphones and pads are becoming increasingly important.
The number of visitors comes partly with more than 50% from mobile devices. That is why it is enormously important to take this reality into account as a web designer. This is where fast loading times and responsive web design come into play.
Speed is Key, so to speak. A cool tool from Google is Page Speed Insights.
If you really want to analyze your page speed in detail, Lighthouse from Google is the right tool. Here you can analyze your page super accurate. You can do this directly in the chrome browser.
Even clearer and easier to use than the Google analyses is the one from EXPERTE DE. Janis has programmed an application that analyzes the whole website with one click. This is highly recommended to get an overview of the complete website. Here you can get to the tool.
But easy-to-consume content must also be considered. Clear design elements help and facilitate operation on mobile devices. Long loading times are annoying anyway. Reading time should also be taken into account for content pages.
Modular systems
That is such a thing with the construction kit website. There are Wix and Squarespace or what they are all called. It is very easy to create a homepage, anyone can do it by now.
But for a truly professional and effective Internet presence should be hired for the creation of a professional web designer. And it is very important to note that this is also good in design and marketing, because programming has nothing to do with web design.
You will notice this at the latest when your website works but does not stand out or is not found. Good web design and design in general must be learned.
WordPress is not an option for me, as it has become a nightmare with all the security updates.
Therefore my personal opinion. Hands off WordPress. I am superhappy with Webflow and I am a Webflow web designer with heart and soul.
In addition, WordPress works a lot with plugins, which worsens the loading times of the website.
It is also important to work with a clearly structured CSS system. This is a content style sheet. There you define the colors, fonts, backgrounds, gradients and so on.
I work in Webflow according to Finsweet's Client First System. It's super organized and the most important thing about it is that someone else understands it, not just the person who programmed the page. A CSS naming system that is understandable. I wrote more about why I design and implement my websites with Webflow in my Methodology blog.
SEO - Modern web design
In addition, knowledge in the field of SEO (Search Engine Optimization) is necessary.
I know this quite well and use various tools to improve visibility in native search. Without having SEO in mind, even the most beautiful website will not generate new visitors/customers.
I think this is underestimated by many. The most favorable advertising is when you are found in the search engine. Keywords play an important role here. This starts with the analysis and must then be followed up consistently. Webflow is already built from the ground up very SEO friendly. If you then follow the Google rules, the result will be good.
A blog definitely helps to boost the SEO and to place yourself better at Google . And a blog that can be easily updated by the user. This is also part of modern web design.
If you want to learn more about my Webflow SEO strategy, in this methodology article I go into more depth on SEO and explain how I see this matter.
Personalized user experience
A presentation that is focused on the target audience is one of the basic principles in web design.
In the field of e-commerce, it is becoming increasingly important that content is targeted at potential customers.
The goal here is to show a personalized website to the user. This can be analyzed with analysis tools the longer the finer and the e-commerce website can be adapted to this.
Below I have added another video on the subject.
Personal opinion: I look forward to this coming more on websites and being able to display a personalized version to each user.
On the other hand, it is of course also frightening. But Google now knows so much about each person and their behavior that this should of course also be used in a positive way.
The "funny" thing is that when I talk to friends about this topic, no one worries about sharing their user data with the world. No, I'm considered rather unworldly when I bring up the word privacy.
So let's unabashedly take advantage of this and build websites that display differently to each visitor. Suck user data from Google, buy it from social media platforms and go full throttle.
Addendum: You should also definitely check out the awwards.com website.
To my web design offer
