Happy New Year, fabulous new website design trends!
This month’s design trends are a collection of the somewhat unexpected – from NFT website design to large text to illustrations; you won’t see a single photo or video here. Here’s what’s trending in design this month.
This website design trend has more to do with the greater trends in digital marketplaces and commerce but has value in the design space as well. NFT websites are popping up everywhere.
Marketplaces for non-fungible tokens use modern design effects to draw users in and help them make purchases and view available images. If you haven’t delved into the world of NFTs, they are data units – often in the form of gifs – stored on a blockchain digital ledger. You can buy, sell, and trade these digital nuggets on various marketplaces.
The designs of NFTs could be explained as a trend of their own. Here, we’re focusing on the look and feel of the websites surrounding them. While some designs are relatively primitive, the best marketplaces have a full e-commerce feel with easy-to-use interfaces and a modern design.
Each of these three NFT marketplaces does it a little differently.
Styllar puts a focus on NFT avatars with a minimal aesthetic that gives plenty of room to individual NFTs. Sit on the website too long, though, and hundreds of options begin to cover the screen. Each visual element has a small text element to match that explains each image. It feels like a modern e-commerce experience that instills trust with users because of clean visual patterns. The site itself is just a gateway to a more traditional marketplace, but the calls to action are large, clear, and easy to follow.
OpenSea treats the NFT marketplace more like an art gallery with card-style buttons to look at different elements and images. Everything about the website design is tailored for the mobile user and quick browsing with large areas to click in the card format and easy-to-read headers that help you find your way through the NFT space, whether you want to buy, create, or sell. The site also does one more thing that’s not as common with e-commerce – it explains how to get started in this new digital territory with plenty of resources.
Rarible has an almost social media feel with lots of small blocks showing different NFTs. Digestible content in a grid-based design helps you navigate from images to rankings to what’s trending in NFTs. This site design is set up for high interaction and engagement, also featuring card-style elements and the ability to favorite items before bidding.
The key commonality with NFT website designs is that they are made for mobile users. These sites look good on desktops, but they are highly focused on a mobile, instant gratification user.
Text-Based Hero Headers
A trend in website design from 2021 is bleeding into 2022 with a lot of popularity: Hero headers that are mostly text. These designs have background texture and color, but for the most part, they don’t have a lot of other visuals.
These designs often rely on powerful language or messaging to help get user engagement. A secondary theme is the use of bright colors to help add focus and attention to the typography.
Font choices seem to be fairly neutral, with a lot of thicker sans serifs for the main headline and something a little lighter for secondary text options.
WeTransfer uses a smaller text block with multiple lines to create weight. The off-center placement draws the eye and is interesting even with the neutral background. Stacking elements create a nice focal area that encourages reading.
Halborn Blockchain Security goes with a less traditional font option and flips the color to the text to enhance the visual display. This design also uses an off-center, asymmetrical approach to create focus on the text element. The dark counterweight on the screen is an excellent guide to draw you back to the main hero headline.
FWD goes with giant oversized text elements to create a strong visual focus with this design. Other than the faint animation of the arrows next to “Here’s what they said,” everything is still and static. The color and blocky depth of the background help draw the eye through the text and to clickable elements so that you know what to do next.
Another trending design element is the use of intricate illustrations on homepages. These highly detailed images can tell a visual story, help add meaning to messaging, or serve as a remarkable visual element when you don’t have a photo or video.
The great thing about this trend is that the only limitation is your imagination.
Once you find someone to create the illustration (if you can’t do it yourself), the world is open to interpretation.
We are seeing three major themes within this trend, as showcased in the examples.
Multi-layer illustrations with hints of animation, such as the one from Highvibe Network. This illustration used lots of colors, layers, unexpected elements within outlines, and a little animation to pull it all together. The effect is rather stunning and provides a lot of interest for the user.
Realistic, painting-style illustrations, such as the one from Healthline, bring the content to life without real people or images. This technique is especially nice for industries where you may want to anonymize people in images. (Perfect for a healthcare website design because you don’t know if the illustrations are of real people or not.)
Detailed geo shapes and lines, such as the design from Radio Meuh Circus Festival. With great color and lines that draw the eye, this design can keep you looking and finding new depth for a long time. Color also helps draw you into the striking imagery.
What’s nice about all these design trends is that they have flexible elements that you can use and replicate across industries and projects. The common factor is that they lack traditional dominant imagery, which works exceptionally well.
These trends are likely a result of the worldwide pandemic as well. With less social contact, creating without conducting photo or video shoots is an ideal situation. Good luck trying some of these trending design elements on your own.Source