Whether you’re looking to revamp your website design or you’re starting a brand new site from scratch, you’re probably aware of how tricky it can be to get the design just right. Good web design is so much more than just aesthetics. A website needs to be engaging, useful and pretty, and that’s a combination that’s not easy to achieve. It helps to be aware of certain mistakes that many make when designing a website, and to make sure to avoid them.

That’s why this time around we decided to give you a handy list of the most common WordPress web design mistakes you should avoid in 2024. We based it on insights related to usability, UX and current web design trends. Things change so fast in web design, so it can be hard to keep track of what’s hot and what’s not. Still, there are some things that can be considered evergreen, and which you should never ignore. Let’s dive right into the biggest don’ts of today’s web design.

Messy Navigation

Website navigation is a lot like air quality. When it’s good, you don’t even think about it. When it’s bad, you can’t stop noticing it, and it’s incredibly annoying and off-putting.

Navigation is supposed to gently guide the visitor wherever he or she wishes to go on your website. It’s not something a visitor should have to look for, to try to figure out or to put any effort into. Whether we’re talking about menus, links, headers, footers or buttons, they are supposed to be located just where the visitors expect them to be. A bit of experimentation is always welcome, though, as long as it respects common sense and the best UX practices. And as long as it’s not too crazy, of course.

As we saw in our article that explores interesting menu designs, website navigation can and should be exciting and practical, beautiful and useful. It can be innovative, as long as it does not confuse the user.

Clean, intuitive, straightforward navigation will help you convert more and will reduce your bounce rate. And, thanks to elegant design solutions such as fullscreen menus that open through a hamburger icon tucked away in the header, side menus, interactive links and similar, your navigation can meet both the aesthetic and the functional criteria.

Remember: navigation must not be too complicated and/or hard to find.

Lack of Hierarchy

A sense of hierarchy is something inherent to all humans, psychologically speaking. We tend to organize things according to their relevance, size, importance, impact and relevance. We don’t approach everything at once. Instead, we follow a hierarchy and organize the information in our mind accordingly.

Good web design should always mind this fact. To create a smooth user experience, you need to organize the content of your website into coherent units that function just as well individually as they do as a part of the whole. Use headlines and subheadings to create the hierarchy and don’t forget the white space between the units. This way, the information will be presented in a coherent and hierarchical way that will allow your visitors to consume the information gradually and compartmentalize it according to relevance.

Don’t forget that the H-tag hierarchy is also vital for your SEO. The headings tell search engines what your page is about and how it’s structured. When crawled properly, with proper information, the page will have a better chance of ranking on SERPs.

Remember: your design should reflect the hierarchy of your content.

Unclear Message

Every website has a purpose. A portfolio website serves to display your works. A blog is for sharing your thoughts or insights. A directory website serves to provide information. A business website serves to promote your brand and help you grow clients (and sales). And the purpose of the website needs to be conveyed clearly.

The message is conveyed through design just as much as it’s conveyed through copy. The two need to complement each other and the design should serve to highlight the message and serve it visually to the visitor in a way that leaves no doubt as to what the website is for and what the visitor is expected to do.

Unfortunately, driven by the dubious “more is more” trend, many designers feel like they need to fill the page with visual content – boxes, marquees, image sections, sliders and carousels. Oversaturated pages do not communicate anything except perhaps chaos.

One of the best design means to make sure the visual aspects of your website supports and communicates the message clearly is the white or negative space. It makes your pages breathable, sets different pieces of content apart hierarchically and otherwise, and highlights your message and your purpose.

Remember: let your design speak about your end goal.

Not Optimizing for Mobile

Statistics show that in late 2022 well over half of global web traffic came from mobile devices. In mobile-first markets, that share is even larger. What this means is that more people are likely to come to your website on their phone than their computer. And this, in turn, means your website needs to be mobile-ready and responsive.

Responsive design is design that adjusts to various screen sizes. It means designing your pages in several variants so that the appropriate one is displayed according to the device it’s viewed on. Today, responsive design is a must, so if by any chance you forgot to take care of it when designing your website, make sure to do so right away.

Even if your design was optimized for mobile, you should check anyway. You can view the mobile version of your pages from your desktop and then tweak whatever needs to be tweaked.

Pay particular attention to your mobile menu. Your website’s mobile version may include a menu that is not appropriate for smaller screens and if your WordPress theme does not come with a mobile menu, you may have to create one.

Remember: if your website is not responsive, you might as well shut it down.

Useless Flashy Features

Even if creating a design that dazzles and stuns the visitor is in line with your (or your client’s) branding, that doesn’t mean it should be laden with tons of popups, banners, marquees, sliders and whatnot. The same goes for functional features that you don’t really need. For example, it’s okay to have a client carousel if it fits well in your design and does not contribute to clutter. Similarly, full-width sliders can be a great addition but they can also annoy the visitor by occupying the viewport and instilling constant movement.

Techniques like scrolljacking (in which the scroll doesn’t behave the way the visitor expects and instead moves too fast or too slow, or sideways) or immersive 3D experiences rarely work as intended. More often than not, they irritate the visitors instead of impressing them.

The bottom line is – never include elements in your design just for the sake of having them there, forgetting about the good UX practices.

Remember: good web design means applying good measure.

Poor Accessibility

Accessible design is another contemporary imperative that you should never overlook. A lot of designers fail to understand the meaning of accessible design. It is not about catering to the differently abled, who may be a minority. It’s about creating a user experience that benefits all users and contains vital elements that everyone can access and consume.

There’s a lot to be said when it comes to improving your website accessibility but perhaps the simplest way to understand it is to remember that many of your visitors will be using assistive technology. This technology “reads” your website which means your design elements should include accessible labels that make this process possible. If your links or buttons, for example, are associated with visual components that complete the information, some visitors may not be able to use them as the accessibility tech may not pick up on that association. This particular case can be solved by providing more written information in the link or button.

Remember: design for everyone, regardless of the ability.

Too Many Fonts

Choosing the right fonts for your website is never an easy job, considering the sheer number of fonts in various free and paid packs. However, what’s perhaps even harder is stopping after picking three or four types of fonts to use. The font libraries offer such a great choice of typography that we often feel tempted to use dozens of them for the content, elements like header and footer, sidebars, various widgets, forms and links. Before you go and treat your font library like it’s a tub of icecream on a depressing night, remember that having too many fonts is never a good idea.

Consistent typography is important for ensuring consistency and cognitive fluency. It also helps users maintain focus. Finally, when the typography is coherent, it helps convey your message more clearly.

If you’re not sure how many fonts is too many, bear in mind that no website needs more than two to four different fonts. Also, make sure to pick the fonts that match well with each other and also with your content.

Remember: then it comes to fonts, less is more.

Not Enough Visuals

“A picture’s worth a thousand words” may be a cliche but it’s nevertheless true. According to HubSpot, visual content makes up to 93% of human communication. Whatever can be told with an image, should be told with an image. This doesn’t just mean pretty pictures. In fact, as we’ll see soon, too many pictures that don’t serve a clear purpose can be damaging for the UX and can impede clear communication.

Infographics, on the other hand, are a whole different pair of sleeves. A good infographic can substitute entire blocks of text, which a lot of people won’t even read. These days, anyone can add an engaging infographic element to their WordPress website, thanks to various addons for Elementor and blocks for Gutenberg.

Infographics shouldn’t be the only visual element in your design. Blocks of textual content can and should be broken up by appropriate imagery, photographs that illustrate and explain the content, as well as videos, animations and sliders. All these visual elements bring your design to life, add layers of meaning and when done right, delight the users with their aesthetic qualities.

Remember: let the visuals tell your story.

Too Many Visuals

We saw that your pages need visual content. More precisely, a good amount of visual content. Too many pictures, illustrations, carousels and infographics can be just as bad as pages with just plain text. But, how to know how many visuals are too many?

There’s a simple and true rule that says – if your visuals do not support or enhance your message, you don’t need them. Slapping images on your website just for the sake of having them there can be disastrous from several angles.

First, they can oversaturate your pages, make them stuffy and cluttered. Your visitors need breathing space, and a dense collage of pictures and illustrations does not provide that.

And second, too many visuals obscure the message. While a good piece of visual content can be the message itself, too many visuals, especially if mismatched, will make it hard for your visitors to understand your narrative.

Finally, you should try not to use photos that are obviously free stock material, or too many stock photos. It just gives off a bad impression.

Remember: once again, less is more.

Poor Contrast

The question of contrast is, above all, an accessibility issue. However, poor contrast can affect UX regardless of the visitors’ abilities. Insufficient color contrast makes it difficult for people with visual impairments to consume the content of a page, as it is hard for them to distinguish between the background and the elements in the foreground, such as text, buttons and links. Obviously, an accessible website design needs to assure the contrast is appropriate for people with such impairments. But, as we said, poor contrast can affect everyone. No one likes to strain their eyes when reading. In addition to the typeface that is too small and with inadequate line spacing, poor color contrast affects the readability of the text and will definitely upset your visitors.

It’s understandable for brands to want to use their brand palette consistently throughout all channels, including the web. However, if your brand colors do not assure sufficient contrast, you need to tweak them so your content is easy to consume.

Remember: provide contrast that guarantees high readability.

Wrapping It Up

Design is something that greatly determines the success of your website. These days, we’re witnessing all sorts of design innovations, aiming to dazzle and impress the visitors with aesthetics and modern solutions, pushing the boundaries of web design as such. While this is a great thing by all accounts, it can also be risky, since designers sometimes forget the basic best practices and sacrifice good UX for innovation.

Hopefully, 2023 will bring yet new exciting things in the field of web design, with the rise of VR, AI, immersive storytelling experiences and who knows what else. But we have to think about practical things, too, which is why it’s a good idea to keep these common website design mistakes in mind and avoid them.

Pinpointing, let alone predicting the design trends has become notoriously hard in this day and age when things move, shift and transform at warp speed. What’s in today might be totally out as soon as next month, and color trends can be particularly tricky as they tend to move with seasons and to follow current events which are, by their nature, unpredictable. Still, some things tend to stick more than others and to mark the defining trends.

We already wrote extensively about the top web design trends for the year, focusing perhaps more on the UX side of things, on animation and interactivity, on website architecture as a whole. This time around we want to welcome the warmer weather with an exploration of some of the color trends that we noticed not just in web design but also in fashion, furniture and home decor, and perhaps give our readers a few chromatic hints for the rest of the year.

Our very own Marijana Obradovic, the author of the stunning Solene and Konsept themes, is a keen observer and researcher of the design comings and goings, and she came up with these color trends for 2022:

It’s All About the Neutrals

Cream, warm beige, cold beige, cream gray, gray cream, macchiato, pampas, marble, powder, ivory, nude, taupe, hazel…You name it – you’ll find it in 2022, in the streets, in the shop windows, in furniture and home decor and, yes, in web design, too. The spectrum between the lightest cream and the deep, brownish hues, with tints of red, pink, blue and even green, is marking this year’s trends and we can see it paired with other neutrals or with more saturated, louder colors.

Julia Derevianko for Gotoinc proposes an eCommerce layout for a jewelry store that uses an off-white, creamy background to create an elegant backdrop for the featured photographs and jewelry pieces. Julia combines several complementary hues, from Carrara to Pampas, in a color scheme that provides breathability but at the same time adds depth and even some degree of quiet intensity.

Alexandra Holodnaya made excellent use of a soft, warm beige with a hint of pink in her project for a magic and esotery shop and online learning platform Golden Venum. She skillfully alternates backgrounds in this gorgeous layout between light tones and black ones, creating an exciting tension of elements held together by the lovely old gold typography.

We spot a similar chromatic inspiration in the Modern Font Bundle by New Tropical Design, where the warm cream tone is paired with burgundy (which we’re going to touch upon later on in this article), as well as a deep, atmospheric orange and a dark mossy green.

While the colors from the beige and cream part of the spectrum work wonderfully when paired with more intense, vivid colors, it’s also worth mentioning they can look amazing in beige-on-beige sets or combinations of beige with colors just a hue away. A terrific example of this combination, which is definitely a 2022 trend we’re seeing a lot, is the creative visualization project that Notoo Studio did for 41zero42, specifically for their Superclassica series of floor and wall tiles.

Another color that looks and works amazingly well when paired with, well, basically itself, is the warm gray. Alina Gaan explored this concept in her jewelry website project Juff, proposing a look that basically sports no contrast at all, and yet manages to work just fine for a website layout.

But enough with the neutrals, let’s move on to louder trends for this year.

For the Love of Green

Green is another definitive trend for this year and it comes in all possible variants – from earthy and muddy deep greens to vibrant grass tones and, of course, neons.

Marlow, the minimalist branding mockup scene creator by Moyo Studio, is heavily based on grays in various tones, mostly on the colder side of the range. The project includes several adjacent colors that complement the grays and give them depth and character, most notably the wonderful, elegant dark olive green, as well as browns with a significant portion of green component to them.

Semi Permanent Hotel by Highsnobriety was a short-term takeover of the Paramount House Hotel in Sydney, featuring a range of artists, musicians, designers and other creators. The website for the project is based on the monochromatic layout with colorful, intense imagery and interface details in a lovely shade of bright green with a touch of cyan. The green is used for the favicon, the pagination bullets, select typography as well as for selected (or hovered) areas of the 3D model representing the hotel. This quite moderate addition of color breaks up the monochromatic interface without hampering its character, and the choice of green adds vitality and energy to the mood.

Ogeh Ezeonu opted for a green on green combination for her website, using a very, very dark forest green as the background color (in some parts of the page it comes in form of gradient, too) and a lighter, brighter leaf green for select interface details, such as the boxed sections with links and button outlines. This way, she created a gorgeously balanced atmosphere that packs a lot of character without being too loud or bold.

The Dutch brand development and design studio Maibru did a similar thing with incorporating a refreshing green shade to its website in form of various interface details – for instance, the menu items (indicating the current location, as well as color change on hover), language and mode switcher, cursor and navigation, and so on. The same green color is used for both the light and the dark mode, and it looks great in both instances, bringing vibrance and joy to a muted layout.

A brand we already wrote about in our piece on innovative footer design, the furniture manufacturer Sol’ace opted for an interesting brownish green (or greenish brown?) as the background for some of the page sections, combined with a lovely warm gray. A fitting choice for a brand with a strong focus on natural materials and sustainable manufacturing practices.

But muted, pastel and earthy greens are not the only ones marking this year’s color trends – in fact, we’re seeing a lot (and really, a lot) of super-vibrant greens, electric greens and neons.

For instance, the Chinese Reesaw Studio incorporated a lot of bold, vibrant colors in their branding project for GLZ Super Park, with the neon lime green as the main color featured in the logos, packaging, even the accompanying materials such as masks, duct tapes and so on.

The designer and art director Stas Bondar chose an interesting and vibrant shade of green (with a lot of yellow to it) for his online portfolio, available in two modes: “casual” (black background with green details) and “fancy,” in which the said color is used for the background and combined with black interface elements. It’s interesting that the same color assumes different characters depending on the mode – in the “casual” mode, the dark background makes it appear more yellow, while in the light “fancy” mode it is definitely more green.

Finally, let’s not forget one of the loveliest green shades – the mint green. The digital production studio 9P featured this color in various interface details (the oversized cursor, the buttons, the logo and menu items, to name a few) on their website, coupled with the black background for a striking and modern contrast, and they also used it for one end of the gradient for the hero text.

Orange Crush

As a color that communicates joy, optimism, warmth and fun, it’s no wonder that orange is going to be a massive trend in 2022, a year when the world finally seems to take a break (hopefully permanent!) from the pandemic. From couture to streetwear, web design and even product design, various hues of this fantastic color can be seen everywhere.

Tiare Payano incorporated a neon carrot orange into the palette for the brand identity project for Silkaen, a natural skincare brand. Payano paired it with different shades of red, burnt sienna, deep pink and other warm colors, creating a balanced, feminine and elegant palette.

Design for the Gesture issue of the Sociotype Journal also features a lot of orange, albeit in a more toned-down variant. This particular brick orange works great on paper, as it complements the paper texture and gives the overall design a warm, deep character.

Moving on to louder, bolder tones, the design for the Bravo Musique music and artist label features a stunning, somewhat vintage range of oranges, from the classic safety orange to hibiscus and royal orange.

The visual identity for the Still Young interior design company by Low Key Design pairs an intense orange, almost a cinnabar, with a grayscale palette in an exciting, elaborate design concept based around the “law of three.” The entire visual system revolves around the numbers 3, 6 and 9, and the orange serves as the third chromatic element in the palette (in addition to the white and black that basically constitute the grayscale), sustaining the concept but also bringing a welcome contrast and dynamics to the design.

The website and redesign concept for the restaurant Máirtain by Daria Shakula features an elegant, mostly monochromatic palette skilfully broken up by a vivid pumpkin orange used for a few select interface details, the footer and the fullscreen menu. Paired with the orange in some of the featured imagery, this particular use of color reinforces the brand identity and gives it a strong, well-built character, freshens up the concept and brings vitality without appearing vulgar or loud.

Finally, here’s a layout that celebrates the power of orange in all its glory: the web design for the packaging-free grocery store in Los Angeles, re_grocery, uses an orangish red, or a reddish orange, for basically all interface elements, from title and paragraph typography to buttons, from navigation elements to the footer, which is entirely orange. It was a risky choice but one definitely worth making, as the result is a flattering, modern and engaging design that we can only assume does wonders for the company’s business bottom line.

When Orange Meets Green

If this combination reminds you of a clown suit, think again. Depending on the particular hues used in the palette, the orange and green combo can actually be quite sophisticated and convey a sense of opulent elegance. Let’s take a look.

The UI Kit for Figma by Alexsander Barhon proposes modules for building web pages, with imagery that features small yet striking details in a lovely muted orange, combined with deep moss green, olive and mud, creating a wonderful sense of warmth and depth.

Tiare Payano did a similar thing combining deep oranges and greens on a dark background for Nancy, a family-owned cafe in the Dominican Republic. The palette is based around deep, warm, earthy hues such as orange, terracotta and brick, combined with a dark green that seems to have a touch of warmth to itself, too – or perhaps it’s the oranges and pinks that bring that quality in the otherwise cold color.

The green and orange combination works well in brighter tones with a bit of a pastel character, too, as evident from the Vestre Inspiration Book 2022. In this project, we get to feast our eyes on wonderful pairings, such as true orange and grass green, but also yellow and purple. These combinations are based on the principle of complementary colors, and as such they aim to create an intense and dynamic effect, but thanks to the careful selection of particular tones and textures, they also appear quite soothing and pleasant.

Green smoke, apricot orange and a range of light pinks and warm grays dominate the palette of the Absolution Cosmetics website, where the orange and green work as particular accents and can even be considered chromatic leitmotifs of the layout, even though they appear very sporadically on the pages. The dynamics between these two add much needed intensity to the light, airy layouts.

The brand identity project for Lande Architects includes a wonderful palette of muted greens, warm earthy tones and siennas, combined with a vibrant yellow with plenty of orange hints to it. The stationery and the calling cards are printed on a heavily textured paper with relief typography, which, combined with the colors, gives the project a distinct organic character.

Finally, while not exactly focused on the interplay between green and orange in particular, the website of the oil and salsa manufacturer Frantoio Cavalli does play around with the two, by juxtaposing the delicate greens of oils with warm orange, yellow and red hues from salsas, both in featured imagery and in product packaging.

Burgundy, the King

Timeless and sophisticated, burgundy appears to finally be making a comeback – and long overdue, if we dare say. This elegant color, traditionally associated with wealth, opulence and royalty, is actually an extremely versatile pairing color for palettes and combinations that require contrast, depth and warmth.

Being a dark, intense color, in web design burgundy is best if used for details or select sections, like Sloane Street did on their homepage. This choice of color adds a touch of class to the design, pairs wonderfully with the rest of the palette and the page’s white space, and even communicates with the imagery on the page.

La Maison Plisson, on the other hand, opted for a very subtle use of burgundy, applying it to the button outlines, underlines, some of the typography and the wine glass icon, completing the brand narrative that revolves around exquisite gastronomy, the finest ingredients and the best wines. It may be an obvious choice, but it is done with such good measure and taste it actually works perfectly.

Burgundy can also be a fitting choice for various technology and industry niches, as well as for finance, which are often plagued by quite pedestrian blues, grays and plain reds. The brand strategy and visual identity for Refactor Capital by the Play Studio features a striking rusty red which, in combination with a deep grayish blue and plain white, creates a firm, stable palette that communicates professionalism and expertise.

The gorgeous branding project that supports female entrepreneurship, Wo’men Entrepreneurs by Ben&Jo bases the palette around a dark green, with color accents in yellow, teal and pink. This combination is supported by a lovely warm burgundy in a slightly lighter variant, used as the backdrop in the project imagery, giving it depth and warmth.

Something similar was done in the visual identity project for Périples, where a stunning deep teal was used as the main background color, combined with a range of muted warm tones, including burgundy, which adds contrast and warmth, as well as a hint of vintage character.

Wrapping It Up

Soothing cream, beige and gray, exciting orange and optimistic green, topped by the royal burgundy – it’s clear that this year’s color trends do not follow a strict, cohesive narrative but rather aim to expand the reach of chromatic potential through contextualisation. We hope that the wonderful examples featured in this article will inspire you and give you some fresh ideas for your future projects. If you have a color you feel might mark the current year, don’t hesitate to share it with us in the comments section.

Designers generally don’t like writing. After all, creative problem-solving through design uses visual, not verbal tools, right? But, sadly for many, case studies are supposed to contain text, too. This is where a lot of designers and art directors stumble, ending up either with poorly crafted case studies, or no case studies in their portfolio at all. And that’s a huge mistake. Online case studies (because these days, if it’s not online, it’s not there at all) are immensely important as they provide a compact, informative display of not just your skills and expertise, but your professionalism too. A good case study shows that you understand the concept of focus, that you can distinguish between different layers of relevance and also sheds some light on your creative process. As such, case studies are an indispensable hiring tool.

That being said, let’s see how the visually-oriented folks can craft a case study that ticks all the right boxes.

Quick Tips for Designing Perfect Online Case Studies

If you’re in doubt as to where to start with your case studies, here are a few things to keep in mind:

Sure, things like these are sometimes easier said than done. That’s why we prepared a curated selection of the best, most inspiring online case studies we handpicked around the web, hoping to give you some cues and ideas for your own cases. Here’s what we’ll talk about:

Juicebrothers by Lama Lama

If you read our piece on creative page transitions, you probably remember Lama Lama, a creative digital agency from Amsterdam, and their Juicebrothers project. The case study for the project (the organic, cold-pressed juice brand from Netherlands) is presented in a combination of playfulness and youth typical of Lama Lama, and a high level of professionalism, also typical of the agency. The main visual motif is the beautiful deep green color that communicates health and vitality, featured extensively in layouts for the Juicebrothers website. Small white typography conveys just the right amount of information about the project and allows the imagery to take center stage. The case study page opens with a sort of split screen between bits of text on the left and a vertical image gallery to the right, and then proceeds with larger image and video sections displaying selected bits of visual content for the brand. All the while, we also get to play with the cursor effect – an oversized, pixelized snake trail that follows the mouse movements.

Art of Swissdent by Creative Nights

Creative Nights is a UX design consultancy and creative studio headquartered in Prague, with an impressive roster of international projects. One of these projects is the website for the renowned dental products brand, Swissdent. Art of Swissdent is designed as a crossover between an eCommerce website and an online presentation of the brand. The case study, available at the agency’s website in their Works section, follows the style and the look of the agency’s branding and design, and the selected imagery from the project is given in beautiful frame sections with round edges. The entire page is perfectly balanced in terms of atmosphere, colors and dynamics, and makes the displayed work appear as an integral part of the agency’s own aesthetics, even if that may not necessarily be the case. The page ends with three fun, oversized buttons that the visitors can use to share their impressions with the agency.

Max Shkret by Zhenya Rynzhuk

Zhenya Rynzhuk is an architect-turned-art director with a solid industry experience and quite a few awards under her belt. Her website, which has received accolades for overall design as well as for mobile excellence, features some innovative design solutions, plenty of interactivity and just the right amount of brutalist details to keep things exciting in a minimalist environment. The Work section features several case studies for the projects Zhenya is most proud of, including art direction and interface design for Max Shkret, an award-winning digital artist creating 3D digital models. After an airy, minimalist and monochromatic section introducing the project, the page proceeds with a scroll-animated gallery of select project imagery. The images of Shkret’s digital models of animals (for which he hopes to raise enough money to turn into actual physical objects) are presented in successive full-width sections, each with a background that matches the object chromatically), resulting in an interesting, exciting stroll through Shrek’s imaginary world. This layout also adds a welcome touch of color to Zhenya’s generally monochromatic ambient.

Mercado by Loer Architecten

Loer Architecten is a Dutch architecture studio with a beautiful, airy, dynamic website based on full-screen imagery, interactivity and interesting navigational solutions. The Projects section includes an interactive links list from which we get to navigate to the projects that interest us. We picked the Mercado project, which has the goal of transforming an abandoned backalley in the center of Groeningen into a thriving commercial and urban hub. Just as it would be expected from an architecture studio, the case study is clean and precise, opening with the most essential information, such as status and location. It is the page layout, however, that gives it a welcome kick and saves it from being plain and dull. The project name is displayed in vertical letters to avoid occupying precious space on the page. Thin straight and curved interface lines give it dynamicity, and so do animations in individual pieces of visual content, as well as animated scrolling effects. There isn’t a single full-width or full-screen image in this case study which, combined with ample use of negative space, gives it a very clean, breathable character.

Self Scenter by Ultranoir

Commissioned by Comme des Garcons to create an interactive digital experience helping customers discover their fragrances, the French digital agency Ultranoir came up with Self Scenter, a Web GL-based reinvention of the brand’s Fragrance Finder so that it dynamically creates user-specific shapes. The case study shares some of the immersiveness of the project, especially in the hero section with a video and a large title. The case study, however, assumes a cleaner, more informative and practical character later on the page, sharing some of the visual pieces that best convey the atmosphere of the project – videos and select imagery. And the project is truly stunning, too – a beautiful dark interface with a somewhat mysterious character is graced by superbly designed elements with utmost attention to detail and aesthetic coherence. These dark visuals are contrasted by a light background, complete with the cursor shaped like a dot that changes from black to white and vice versa, depending on the surface it hovers upon.

Fontshare by Wemakefab

Wemakefab is an old acquaintance from our exploration of the power of interactive links in web design, and today we want to take a look at the case study for the project they developed for the online font aggregator Fontshare. As we get to learn from the case study, the project involved complete visual rebranding, interface design and even the logo redesign. And we have to say, this is a proper case study here, the one that ticks all the boxes as to how a case study should be done and what it should include. Each element of the project is listed and illustrated in a logical, sequential manner, on a clean, high-contrast black and white page. It starts with the project blurb, and then moves to font cards, internal pages, mobile view, the palette and select details. All visuals are given in a manner that follows the principles of usability and clean design – they are large (occasionally oversized), clean, carefully arranged, with occasional thin lines, both vertical and horizontal, that sequence off the sections. Several elements give off a spirit of playfulness and humor – like the section that switches from white ot black when hovered upon, oversized typography and the blinking cursor. The case study is stylistically coherent and tight and very well matched to the nature and the purpose of the project.

More & More Nespresso by Playful

Playful is a collaborative collective of digital creators specialized in art direction and moving picture campaigns. More & More Nespresso is, by their own admission, one of the most challenging and rewarding projects the agency has worked on. The case study for the project is just as complex and rich as the project itself. It opens with an impressive hero slider introducing some of the textures that played a central role in the project, in a deep, sultry purple. Carefully curated images and videos from the project are skillfully arranged along the page, contrasted with large empty spaces with light backgrounds and text, offering a welcome pause from the visual feast. The color play is particularly striking – the project itself features a delicate interplay between rich, deep burgundys, greens and blues on one hand, and fine, elegant pastels on the other. The same interplay is repeated in the case study, and the elegant, sophisticated character of the project is underlined by the use of the lovely Antiga typeface throughout the page. The page features a director’s cut video, which is the centerpiece of the project, but doesn’t take over the case study, as it is after all exactly that – a case study in which the agency explains the creative process and pinpoints main visual cues and motifs.

Bian 2016 by Baillat Studio

You may remember the Baillat Studio from our piece on inspiring menu design, in which we praised the studio’s modern, interactive fullscreen menu. Today we’re going to check out the Project section of the website, specifically the case study for the 2016 edition of BIAN (the International Digital Art Biennale). The visual identity for the festival was based on black and red, a color combination that creates a lovely contrast with the page’s light gray background and black interface typography. A short text about the target and the main identity elements (Swiss style-based aesthetics, right-angle frames, repetition, lines and precision) follows the opening hero section with a full-width visual from the project. After this introductory section, we get to explore the visuals from the project, presented in the form of photography, video and images of project material in real life, in its designated ambience. The agency, therefore, decided to let the images speak for themselves, without excessive explanations and textual narratives. And it was a good call, too – the page is compact and informative, just what a case study should be.

Prada Employees Online Store by Niccolò Miranda

Here’s a designer we love to feature in our articles – we’ve written about Niccolò Miranda in our pieces on poster-inspired web design and on great examples of footer design, to name a few. This time around, let’s take a look at how this talented Italian designer and developer with a penchant for illustration decided to present his featured works on his website, using the case study for Prada Employees Online Store as an example. The first thing we notice is that the project pages are completely in line with the overall style of Miranda’s portfolio. By that we mean the paper-like texture, the torn paper effect, the columns and sections resembling newspaper layouts, and, of course, illustrations. The page opens with a hero section that holds a lovely illustration from the project he did for Prada (an online store that sells the brand’s previous collections). We then move on to a section explaining what it was that Miranda was commissioned to do, and sections explaining how he did it. What’s interesting (in addition to the distinct and idiosyncratic style) is that the imagery from the project is presented not in the main page content, but instead in a sidebar that opens to the right when we click on the appropriate icon. The page also features a big oval button that leads to the project’s live site, and that’s about it. It is basically more of a project blurb page than a case study per se, but considering its unique style and Miranda’s amazing talent, we figured it deserved a mention here as well.

Ortovivo by K95

K95 is a design, branding and communications agency from Catania, Sicily. They work with mostly Italian clients but have a few international names on their roster as well. Their website features a neat list of projects in the form of an interactive link carousel, each link leading to the appropriate case study. Today we’re going to check out the one for Ortovivo, a Sicilian organic food production company. Each project is neatly divided into sections that include description, target, branding and packaging, linked in the header (from which we can also turn off the case study and return to the homepage). The layout is airy and clean, with plenty of empty space around each piece of visual content, and a large circular animated button inviting us to scroll to explore the project. Sections with empty space are combined with full-width interactive ones, moving and expanding as we scroll. It is a dynamic, modern and skillfully designed page that unites good UX, usability and efficiency with modern design practices that speak volumes of the agency’s expertise and taste.

Obys Agency Typography Principles

Obys Agency is a creative design agency from Ukraine with a focus on UX/UI design, animation, graphic design and development. Their website is a modern, streamlined and fluid display of their works, principles, accolades and much more. As an agency that flaunts a serious approach to everything they do, Obys wanted to share some of their ethos and the artistic and design principles they follow in their work, and that’s why they created a standalone website on Typography Principles, while the main website has a page that serves as a case study for it. The site includes three sections explaining how the agency uses fonts, how it combines them and what rules it follows when it comes to typography. The page follows the white on black aesthetic line of the rest of the website, with sections that roll up or down revealing underlying content. Navigation is particularly interesting here, as we get to explore the visual content through scrolling, clicking on oversized interactive buttons, and play videos. Numbered sections and diagonal arrows hint to physical navigation signals (like traffic or airport ones), and the part of the study that deals with animation is presented in a separate unit. The website itself is rather impressive and the case study does an excellent job at conveying its complexity and elegance, both design-wise and in terms of UX.

Komuso Design by Tubik

Tubik Studio is a full-stack digital service agency with a focus on UX and UI design. Their website offers a rather no-frills (but nevertheless striking) display of services and works the studio is most proud of, with a gallery of images leading to specific projects. The page for Komuso Design project, for instance, offers an informative and hands-on overview of the project. It opens with an intro hero image, followed by brief project info presented in a simple, readable form, with comfortable black Gilroy typography on a white background. The visual content is presented in the form of videos on a lovely marble-like background, combined with screenshots from the project arranged on a beautifully combined palette of pastels. A particularly well-designed section is the boxed split slider gallery that offers a dynamic and convenient way of displaying several instances of content without cluttering the page or making it too long. The study ends with the visual system: a color scheme with HEX codes, some representative samples of typography and the mobile layout. The entire page bears an airy, pleasant character, perfectly aligned with the client’s brand and product (a wellness tool designed to help people relax through breathing).

The 92 Group by Humana Studio

Humana Studio is a Portuguese agency that helps build brands with a social and environmental impact. They were commissioned by the 92 Group, a design studio that challenges traditions in media and entertainment through irreverence, unconventionality and youth. Obviously, this was an excellent fit as the Humana Studio has a distinctly disruptive approach. The case study for the 92 Group brand identity and communication strategy partly follows the same disruptive principles – especially in terms of visual communication – but also some more conventional ones, specifically when it comes to UX. The visual content is saturated, loud and bold, with strong, deep colors on a black background, but the way it is arranged on the page guarantees proper navigation, readability and ease of consumption. The sections are topped with a subtle zoom-in effect and a yellow round cursor that shrinks and expands and the text is short and to the point. The study is brief but concentrated, informative and practical, coherent in character and atmosphere.

DreamHaus by WØRKS Studio

WØRKS Studio is a New York-based consultancy specializing in creative direction, strategy and design. Their main website is an exciting showcase of both the agency ethos and their projects, and is marked by a distinct cinematic approach, with a lot of information and content being handed in form of immersive fullscreen videos and animated sequences. The DreamHaus project is presented as an animated study of the pillar design elements used for the project – with the main focus on typography and the palette. The fullscreen hero section opens with a large animated logo of the project, proceeds with a palette of beautiful pastels, with names and hex codes, and ends with a sequence that showcases the typography used for the project, and the main layout style, as well as textures. The visitor can scroll to learn more about the project and its goal, as well as the main guidelines that the agency followed in the creative direction of this project. The images related to the project, or the products of the direction, if you will, are presented with animation effects that feature a brief flash of yellow, which is the agency’s signature color, thus providing a continuity between the project and its creator and, of course, reinforcing the agency’s own branding.

Topline by Parsons Branding

Our most frequent readers might remember Parsons Branding from our piece on inspiring creative agencies and designers, in which we praised the agency’s beautiful UI design and interesting navigation solutions. Today, we want to check out one of their case studies, specifically the one for Topline, the South African tool manufacturer. The case studies all feature unique page navigation – the left portion of the screen contains a numbered section with jump links to specific parts of the case study: Overview, Identity, Packaging and so on, and of course we can simply scroll down and explore the entire study in its intended order. The background is in the agency’s signature green and gray, with a very subtle paper-like texture, giving the entire interface a lifelike quality. The left side, the one with the table of contents, remains static as we scroll, assuring easy navigation and orientation on the page, which is, in itself, quite rich in content, both visual and textual. Certain sections are given in horizontal scroll sliders, so we get an impression that the page expands in all directions. This is an extremely well thought-out case study, brimful of information for those interested in exploring the project in great detail, but at the same time simple and informative for those looking to just skim the content.

Weekend by Hello Today

The Japanese Hello Today did a quite complete agency work for the home appliance manufacturer Weekend, from strategic planning and branding to graphic design, web design, photo and art direction and even copywriting. The Weekend case study on the agency website is a modern, elegantly dark showcase of everything the agency did, from the first steps to the completion of the project. Discrete white typography on a black background introduces basic project information and brand philosophy, both in English and in Japanese, before we scroll down to visuals. These are presented in a typically Japanese, dignified manner, gently floating on the black background, creating a beautiful contrast and a strange sense of calm. Thin, subtle interface lines provide some framework for the visual content and communicate rather successfully with the overall aesthetics of the website – minimalist and stripped-down.

Posted by Fuge

Fuge is a Moscow-based design agency delivering UI, branding and digital solutions. The agency website is minimalist, in a very reduced palette, with small typography and on-lover grid patterns, resulting in a modern, serious look. This character is repeated throughout the website, including the individual case pages. Our favorite one is the case study for Posted, a design magazine for which the agency did branding, as well as UX and UI services and animations. The case page starts rather minimalistically, with a large image on a light background and just a few bits of text. As we scroll, more and more pieces of content appear on screen, in an interactive and rather fluid way. The case study is divided into sections – logo and elements, desktop and mobile versions of the magazine website. Each image can be expanded in a popup, with smooth and modern transitions, giving the page a dynamic and modern look. This atmosphere is reinforced by a modern, minimalist palette reduced to grayscale, black and red, which is the Posted brand palette. The images (or rather previews) are alternately arranged on the page, creating a lovely balance, and the entire composition appears to be held in place by the grid lines that appear as we hover over certain areas.

Decathlon App by Fuego Camina Conmigo

Decathlon has long planned a redesign and a relaunch of its app for the Spanish market but the Covid-19 pandemic put a halt to those plans for a while. As soon as the pandemic loosened, the sports goods company reached out to the Barcelona-based, Twin Peaks-named agency Fuego Camina Conmigo (Fire Walk with Me) for a range of services from digital strategy, art direction and concept, to copy, audiovisual content and social ads. The Decathlon App case study is available at the agency website, and it’s one of the most successful, detailed and complete studies we’ve seen in a while. it ticks all the boxes in terms of what a case study should contain – the context, the target, the implementation, and so on, but it does so in a way that is by no means dry or technical. The agency achieved this by skillfully alternating light and readable text sections with fullscreen sections with the visual material from the app, which can be viewed either as images or clicked to play a video. All the while, the agency maintains its own visual identity, present in typography, layout styles and elements such as the round cursor, buttons and icons.

Unstuck by Violet Office

Here’s a project that is as noble as it is well-carried out. Unstuck by Violet Office is an effort started by the CEO of Chobani and several other stakeholders with the goal of helping refugees find full-time jobs in partner companies and their supply chains. Chobani was the first to join the project, of course, and it was soon followed by other major brands like Ben & Jerry and Dole. Violet Office did the branding, web design and development, as well as social media. The branding part is perhaps the most impressive – the agency created a logo and wordmark that can easily fit any brand partner’s logo, and the first part of the case study focuses on that particular effort, complete with rich visuals proving the efficiency of the design. It then proceeds with an analysis of the Unstuck visual system (colors, patterns, typography), and ends with examples of brand activations, complete with the launch video. The high-contrast visuals are displayed full-width, either in galleries or individually, which creates an immersive effect on the visitor, who ends up being completely drawn into the narrative of this commendable project.

Wrapping It Up

As we saw from the examples we visited today, while a good case study may not necessarily have to strictly adhere to a formulaic structure, it’s still a good idea to give it some structure and to conceptualize it in a way that communicates clearly and directly with the viewer. And since the viewers are also potential clients, it’s needless to stress how important this is.

We’ve seen some “proper” case studies with neatly divided sections and a tight structure repeated throughout each study. We’ve also seen some more “relaxed” ones, and some that perhaps don’t really qualify as case studies in the strictest terms but that due to their quality and supreme design elements deserve a mention.

Hopefully we managed to inspire you by showing a variety of styles and methodologies you can follow in creating your own case studies. Feel free to share with us your own favorites or, even better, your own work!

In web design, it is vital to understand the niche and the audience we’re communicating with visually. Without this understanding, a web design can be as advanced as it gets and still miss the mark. While beauty and skincare websites, for instance, usually require carefully elaborated aesthetics and a bit of storytelling, and portfolio websites call for state-of-the-art solutions that lend the most flattering light to displayed works, industry websites are a bit, well, simpler.

In short, an industry website needs to be simple, striking and precise. It needs to convey the most important information about the business it represents: the services, the history, the projects. And it needs to do so in a way that communicates expertise and professionalism. Excellent UX, ease of navigation and a no-frills design are key here, as no one really wants to spend time playing with drag interactions on a website of an oil company.

Of course, this is not to say that industry websites should have a basic, dull or outdated design. On the contrary, with careful planning of sections, a simple yet striking color scheme and proper visuals, a well thought-out design can and will do wonders in helping the company reach its bottom line. Throughout the years, we have created a rich range of industry-related themes that, albeit often with variegated aesthetics, all have one purpose: to boost traffic and growth by offering first-grade design, supreme usability and a wide gamut of industry and business-related functionalities. Let’s take a look at some of the most successful industry websites created using Qode Interactive themes:

Columbia Containers

One of the largest Canadian transloading service companies, Columbia Containers, opted for our Stål theme for its official website, and they did a lovely job at customizing the theme’s options to fit their own needs. The website opens with a beautiful, sharp hero image of the company’s facilities and resources, followed by a clean, airy set of icons with text, listing out the company’s main services. For the rest of the homepage, the theme offers a balanced sequence between large images and areas of white space with text, keeping the things interesting but simultaneously (and most importantly) practical and informative. The company also made good use of the theme’s hidden side area feature, where it placed a short “About Us” text and some useful links, keeping it from cluttering the main page content.

Fetch Worldwide

Fetch Worldwide is a company specializing in customs brokerage, air, rail, sea and land freight, as well as warehousing. It basically offers everything a person or a business could need in terms of purchasing and importing goods from abroad. It’s a full-scale, comprehensive service that also features a personal shopper service, helping people find the products they need. Their modern, informative website was made using our GlobeFarer theme, which allowed the company to sort and display their many services in a clean, practical way, providing a great ease of navigation. The full-width hero slider that comes with the theme adds dynamicity to the page, which is particularly suitable for the freight and transportation niche Fetch is operating in. The warm yellow dot that serves as the cursor is skillfully matched with the company logo, and the same color is repeated in various interface details – lines, buttons, icons, even with the imagery. Fetch did a very good job at using the functionalities that come with Globefarer and matching them to their own brand.

Carboflotta

Carboflotta is an Italian shipowning and cargo operations company with a long tradition. Focusing on the gas sector, the company owns several LPG tankers, but its fleet features oil tankers, bulk carriers, supply vessels and more. The company website, created using our best-selling Bridge theme, offers a neat, professional overview of the company services, its fleet, vision and mission, and a short history represented through a neat timeline section. The homepage opens with a striking full width image slider showcasing the power and the reliability of Carboflotta’s vessels. It is followed by neat, informative sections and a tall, airy footer closes the homepage. The main color is a lovely blue that represents the sea and the sky and communicates optimism and vitality.

GBH International

GHB International is a Dubai-based multinational conglomerate working in a range of fields, from construction and contracting, through general trade, to metal industry and IT. The conglomerate chose our multifaceted Stål theme to showcase its range of services, opening with a hero slider section that carries a distinctly modern, professional vibe. They opted for blue as the main website color, featured in the header, icons, buttons and other interface elements, communicating professionalism, optimism and energy. This color is matched with the imagery the conglomerate chose to represent their operations, which all bear a bluish hue. The homepage closes with a Google Map, a feature that comes with the theme, that helps visitors place the company within a geographic context – something many business websites fail or forget to do.

Fertighallen

Fertighallen is a German company that produces prefab halls for all sorts of manufacturing industries. Its product range goes from lightweight aluminum halls to exhibition and sales tents, as well as accessories, doors and windows. It is also a great example of what can be done with just a bit of customization if you have the right template, in this case, again, the Stål theme. By simply changing the main color (the yellow used for select interface details) and adding their own imagery, Fertighallen created a completely unique showcase, powered by the theme’s practical features, such as icons with text, image sections, and others. They also made sure to use the side area feature, which opens when a header button is clicked, taking the visitor to the company’s associate company, Emsland.

Passer Group

Passer Group is a Norwegian company working with cables and cable handling systems for the renewable energy industry. Their website, built using our Stål theme, is straightforward, serious and clean, with a strong accent on clean and sustainable solutions and professionalism. It opens with a wonderful full-width hero video section, featuring footage of a flight over the vast sea with windmills in it. It communicates a strong dedication to clean industries, and the rest of the sections, with maps, icons and illustrations, tell a clear and trust-inspiring story about the company and its mission. It is a simple, well-executed website that does an excellent job at employing the features coming from the theme it uses.

Rzonca

Rzonca is a Polish company providing services in the fields of photovoltaic energy, heating, sanitation, ventilation and water treatment. Our Stål theme served as an excellent backbone for the company website. Since red is Rzonca’s brand color, too, they didn’t have to change the red interface elements that came with the theme (like Fertighallen and GBH did), and they also made great use of the theme’s hero slider section, filling it with their own excellent imagery. To illustrate and promote its many services, Rzonca used our set of icons with text from the theme, as well as the image gallery section with dynamic hover effects. The homepage closes with a clean clients list, also with hover effects featuring the brand’s red color, and an elegant contact form.

Phoenix Mecano Kecskemét

Another excellent website created with our Stål theme, the website of the Hungarian branch of the Swiss company Phoenix Mecano offers a simple, direct and professional overview of the company’s services, history and organization through neat sections of a well-structured layout. Red on white is the main color combination of this website, with red interface elements (buttons, icons, menu openers…) matching the company logo. While many other websites built using this theme opted for a video hero section, Phoenix Mecano went with a simple, yet effective boxed section with images linked to lead to respective inner pages (Production, Sales, Career and About Us). Images have a hover animation that makes them move a bit to the right when the cursor is placed upon them, which adds a modern and dynamic touch to the otherwise rather conservative layout.

Vesam Group

Another wonderful showcase of how individual and striking results can be achieved by customizing a good WordPress theme, the Portuguese manufacturer of steel structures Vesam Group took our Stål theme and made it completely their own. Opting for blue (a fitting choice for the steel industry) as the main color, the brand matched the interface details with striking blue imagery, including the hero image, as well as illustrations in lighter azure tones. The result is a perfectly balanced, professional showcase of the company and its services, a web presentation that speaks of authority and trustworthiness.

Ambrox

Here’s an example that demonstrates the sheer versatility of our Stål theme – the Czech company Ambrox, working with products and services in the field of pumps, mixers and filtration. For its homepage, Ambrox chose the Interactive Showcase demo, a dynamic and modern layout that displays the content in vertical columns that prompt a background change when hovered upon. Each column features a short description of what can be found on the link (as the columns are, in fact, linked to appropriate inner pages) and an icon. In addition to providing a much welcome dynamicity and interactivity to the page, this layout also serves for neat, clean organization of the content – instead of traditional dropdown menu or icons, the content is basically tucked away in an engaging and visually impressive environment.

Armor

Another excellent example of a brand that recognizes the power of interactivity in web design, the American company Armor, which manufactures a range of products for the civil engineering industry, opted for the Split Slider demo from our Stål theme. This particular demo offers a unique way of displaying the most important content. It starts off as a regular split section homepage, but when the visitor scrolls, the left and right sections move vertically in opposite directions, creating an interesting and dynamic effect. Armor opted to keep the textual content in the left sections while the right ones are reserved for striking photography. The split slider occupies the entirety of the page, while a fullscreen menu can be accessed via a hamburger icon in the upper left corner.

Pardue Masonry

Pardue Masonry is a family-operated company based in Tampa, Florida, offering a range of turnkey services involving concrete, block and brick masonry, as well as concrete pumping. For their website, Pardue opted for our Wilmer theme, created specifically with construction businesses in mind. With a bit of customization of the theme, the company created a professional, light and easily navigable website that speaks of professionalism and trustworthiness. A lovely lime green color serves as the main motif of the pages, matched with select details in the imagery. The header menu guarantees for seamless navigation while the interesting hover effect with fine lines on menu items adds a modern touch. The same linear pattern, resembling construction paper lines, is repeated as background in certain sections, courtesy of the theme, which ties the entire layout together.

Stampa Steel

As a company that markets itself as the most trusted structural steel erector in Ontario, Stampa Steel made sure to pick a WordPress theme that will allow for a highly professional and modern website, and our Biotellus theme was the perfect choice. Specifically, the company opted for the Sustainable Energy demo that features a large hero image slider with text and CTAs, and a dynamic succession of sections with images, text and icons. It’s a layout that allows for sharing all the most important brand messages, services and projects, as well as awards. The company opted to add a contact form to the footer, which is, as per the theme design, quite large and allows for placing plenty of content without it seeming cluttered.

Energy Competence Center

The first Greek Energy Competence Center is a relatively newly formed cluster of companies, institutions and academic bodies working in the energy sector, with an accent on better use of renewable sources. Their website is built using our Biotellus theme, specifically the Main Home demo. The cluster did quite a bit of customizing of the theme’s design foundation. Considering they wanted to place a lot of links in the header menu, they decreased the font size, and they also added green separators between the items, matching the website color scheme and improving the readability of the menu. The theme comes with a video button, which they placed in the hero section. They also made great use of the interactive columns section that comes with the theme and always gives layouts a particularly modern and professional touch. Add to that the testimonials, the numbered section, clients list and partners, and it’s clear that the Energy Competence Center made sure to use the theme resources to the max, resulting in a dense, informative and functional presentation.

Firber Engineering

Firber Engineering is a British company specializing in waste and recycling containers. The company website is built using our Baumeister theme and opens with a hero slider with images and text delivering the most important brand messages and CTAs. The design is straightforward and professional, with clean and strong colors, neatly arranged sections and simple, no-fuss typography. The color scheme provides just the right amount of contrast to assure legibility and the sections are arranged to guarantee an ease of navigation and good UX. A simple navigation menu is placed in the header, along with the contact information, which is repeated in the footer. All in all, it is a design that ticks all the right boxes for the niche it’s used for.

Entera

For its web presentation, the Romanian smart green energy provider Entera fittingly chose our Stål theme’s Renewable Energy demo. What sets this particular demo apart is the left menu with items arranged vertically along the page. Entera combined this layout with a paginated hero slider which the visitor can flip through and learn more about the company, its services and its mission. Entera made sure to use some of the most practical theme elements, such as icons with text and progress bars, which give the website a modern and professional feel. The theme’s main color (red) is replaced with the brand’s yellow green, used for buttons, certain text sections and other interface details. Considering they have quite a few blog posts, Entera used the swiper slider to list them in an interactive and dynamic way.

Camacho Engenharia

Another website created with our Wilmer theme, the Portuguese construction company Camacho Engenharia opted for the Main Home demo, featuring a hero slider which the company customized by adding blue navigation arrows and monochrome photography. The theme provides a set of convenient and professional functionalities, which Camacho made sure to use to full extent. After the hero section, the website offers a clean, practical overview of the company services in boxes with links, an About Us accordion that packs the content into neat expandable sections, a projects list and a counter section listing the company’s most significant achievements, in numbers. The palette is simple and reduced to blue as the first main color, with occasional details in a warm yellow to break up the monotony.

Wrapping It Up

As we were able to see from the examples above, it’s clear that there are definitely some common denominators that all well-designed industry websites share. For one, it’s excellent usability. This usability comes from clean, easy to navigate layouts, with distinct and cleanly designated sections. Boxed content areas, sections with icons that draw attention to the content and well-placed CTAs are important as they guide the user through the most important information, presenting it in an easily consumable manner.

Aesthetically speaking, industry websites tend to be if not stripped-down, then definitely free of unnecessary bells and whistles. Good contrast and plenty of white space assure a clean and streamlined viewing experience, and functionalities such as social links, contact forms and maps make sure the business remains within an easy reach to all potential customers and clients.

Our themes provide a plethora of functionalities for everything a service or industry website might need – process bars, counters, accordions and toggles, pricing lists, map shortcodes and much more. And that’s most likely the number one reason why all the websites we visited today leave such a lasting positive impression and instill a strong sense of competence and expertise.

Much like the food industry, cosmetics is a field that relies as much on the visual as it does on the substantial (the ingredients, the actual product quality, etc). Today, if you want to make it in the cosmetics, skincare, perfume or makeup industry, you have to build and maintain a rock-solid brand, above all. Visual communication is key, especially for those aiming to advertise and sell digitally. If we can’t smell or feel a product, how can we decide to purchase it? That’s why it is vital to have a strong message, both visually and otherwise, that will contain everything a prospective buyer needs to know about the product, communicated through visual storytelling. The skincare and beauty websites we’re going to visit today all have a compelling story to tell, and stunning design solutions to match and support it. Here they are:

Plenaire

Following the trend of focusing on individual skincare needs and utilizing only natural, carefully chosen ingredients, Plenaire offers a line of products created to help people learn how to indulge in themselves. The design of the website is based on airiness and beautiful blue, lilac and gray tones that, combined with white space, communicate a clear message of wellbeing and health. A particularly lovely touch are fine, discrete dots that float around the screen, reflecting the speckled pattern that is featured on most of the product packaging.

A.N. Other

The niche perfume market is known for quite intense brand strategies, focused around meticulously created brand stories. A.N. Other is a fragrance manufacturer that built a powerful, one could perhaps even say revolutionary strategy – they stripped away the narrative completely, both visually and otherwise, allowing the excellence of the product to speak for itself. By ignoring the branding side of the business, they achieved more flexibility in terms of expensive ingredients, basing their production on the most exquisite components and supreme craftsmanship. But enough about the product, let’s take a look at the website. The design concept is simple, elegant and striking. It is based on large, clean sections of text and imagery, interchanging along the page, in a monochromatic palette skillfully broken by occasional touches of warm pastels. It reflects the brand philosophy of minimalism and focus and creates a rather flattering effect.

Deepondé

“Deep ponder” is the main idea behind the Korean beauty and cosmetics brand Deepondé. The brand invites us to dive deep into ourselves and ponder what it is that beauty means for us. The homepage is centered around a full-width video section with stunning footage that associates nature and its life-affirming processes with the natural beauty of our skin. The interface is clean and minimalist, allowing the imagery to take center stage, while at the same time supporting the brand philosophy.

Snif

Passing to somewhat more saturated atmospheres, we come to Snif, a luxury scent brand that aims to break with old industry traditions by offering top-grade, exquisite products that don’t break the bank. Sniff offers 7-day trials for their scent kits, allowing the clients to actually get to know the fragrances before committing to a purchase. The website sports a very modern look based on select vintage elements (the colors and the typography, mostly), sharp grid lines and geometric sections in various proportions. While the grid and the palette communicate a sort of design seriousness, the brand made sure to add a few playful touches, like the marquee and the cookie popup, and there are even some brutalist details cleverly peppered around the pages.

Maison D’Etto

Another luxury brand of artisanal fragrances with a sharply defined philosophical, somewhat individualist approach, Maison D’Etto proposes five pillars of connection to self, the world and the others. Through them, it aims to instill individuality into its luxury fragrances, empowering the clients to explore what each fragrance actually means to them, and them alone. While promising to steer clear from any form of suggestion of interpretation, the brand still delivers a thoroughly crafted visual message through its website. If we were to judge from the layouts, the color choices and the typography, we would be inclined to assume the fragrances pack a soft but elaborate character, unobtrusive and even somewhat veiled, with a hint of nostalgia. The website is very atmospheric, appearing as if beneath a fine sheer curtain, a bit dreamlike, but airy and pleasant.

Typology

Elegant, minimalist and with just the right amount of contrast, the website of the French cosmetics brand Typology communicates a serious approach to skincare with a strong focus on style and aesthetics. The minimalist vibe is built using basically just black (occasionally gray as well) for the interface elements, and the visual content provides warmth through amber-colored bottles. The clean, airy sections with products and text are interrupted only by a full-width video section that balances the mood with vitality and dynamicity.

F. Miller

F. Miller is a Canadian brand of clean, botanical skincare. Their line of products is not exactly cheap, but it is developed with the utmost care for every single aspect involved – from extensive research and nutrient-dense ingredients to sustainable manufacturing and ethical business. Aesthetically, F. Miller is all about minimalism, both in product and in web design. The simplicity of the packaging is reflected in the clean, geometric, grid-based layouts of the website, with minimalist black typography that mirrors the white bottle labels. Thanks to white, airy backgrounds and geometric sections, the interface is easy to navigate and instills a sense of freshness.

Feals

Feals is a US-based company offering balanced CBD products – oils and mints – in a range of strengths. The products are meant to help with anxiety, ease pain and boost sleep, as most CBD products do. The company goal is simple: to make people feel better. And the website reflects this with a smart choice of colors. A soothing sky-blue opens the homepage, combined with a lovely warm orange that promotes joy and optimism. Some of the sections feature a very pale pink background, another soothing hue, white interface text adds a touch of airiness and dark gray text provides a welcome contrast. It is a well-balanced, pleasant design that does an excellent job at communicating the brand mission.

Auteur

Auteur is a German luxury cosmetics brand with a range of high-active products for repair and rejuvenation. The website design reflects the elegance and sophistication of the brand’s product packaging, but in a lighter, airier vein. Monochromatic interface elements create a lovely balance with the white and gray backgrounds that carry a touch of purple, while the amber and turtle shell in select imagery hint to a more intense, passionate component of the brand. The serif PF Regal typeface is an excellent choice for the titles here, as it carries a distinct elegant feel, and the sans-serif GT America provides for legibility and functionality of the rest of the textual content.

Humanrace

Taking better care of ourselves means taking better care of others – this is the credo that famous musician and producer Pharrell Williams pursued when he founded Humanrace, a wellness product company that has the goal of making wellness accessible to everyone. While not necessarily as happy-go-lucky as the musician’s stellar hit Happy, Humanrace does carry an air of decisive optimism. A lovely, life-affirming forest green is the main color here, featured in product packaging, as well as in the website logo and select interface details. This color pairs wonderfully with white, light gray and blue that dominate this simple, yet effective design.

Hi, Skincare

Hi, Skincare is a beauty salon chain based in Arizona that offers personalized skincare services including facials and product recommendations. Their focus is both on the excellence of service and on affordability, with the goal of helping everyone reconnect with their skin and start a journey to rejuvenated and improved skin. The website is marked by a gorgeous combination of deep bright orange with lilac and mauve, creating an atmosphere that is both warm and lively, and a bit vintage. The interface is made up of large full-width sections (including video sections) combined with sections in grid, which contribute to a dynamic yet balanced feel of the page. Occasional bold details, such as orange CTAs, animated icons and SVGs, serve as sort of fresheners of the otherwise rather clean layouts and large typography adds a modern touch to the website.

Melyon

Aiming to become “an inclusive force in an exclusive industry,” the Swedish skincare brand Melyon offers sustainable, cruelty-free, clean products made with people of color in mind. The practical, functional website layout is designed for seamless shopping UX, with neatly divided sections. Split sections with full-width images and videos add dynamicity to the experience and help reinforce the brand message, the one about inclusivity, dignity, diversity and empowerment.

Mutha

Similarly to Typology, the US-based cosmetics brand Mutha employs a stripped-down, monochromatic palette, with ample use of grayscale, moving perhaps even further than the conventional skincare aesthetics (which is often based on soft tones, pastels and feminine hues). Mutha is a brand with an attitude and a loud, important message. Stressing the fact that our bodies need and deserve care because what they do is so important, Mutha offers a range of high quality products made with top ingredients. The products all come in uniform metallic blue packaging, which gives the shop pages a unique and impressive look. The bold, irreverent character of the brand is perhaps best embodied in the choice of typography – large and occasionally very large Sequel Wide font combined with Sequel Sans, sometimes so large it almost hampers the legibility.

Bite

Sustainability, eco-friendliness and ethical approaches to manufacture are some of the principles that have been gaining momentum across all industries over the last decade or so. Bite is one of the brands that did a wonderful job at taking something everyday and simple, specifically – brushing, and making it right in terms of environment. Bite offers dental hygiene products that are sustainable, clean and completely plastics-free. For instance, they sell toothpaste that doesn’t come in a tube. Instead, the paste comes in the form of single-use drops in a glass jar. Bite also sells whitening fluid, mints, deodorants and other products for everyday use – all 100% sustainable. The website features a combination of contemporary, clean design with plenty of breathing room and more playful, 1990’s-style details, emojis and buttons with rounded edges, which lends the brand a modern, hip feel.

Wrapping It Up

If we were to map out some of the common design denominators in the websites we’ve just visited, storytelling would have to be among the obvious ones. Many (if not most) cosmetics and beauty websites rely on this tool for winning the customers over. And the niche is very suitable for it, too. Whether through a careful selection of visuals (both images and videos) with a strong appeal to our senses, or through a meticulously planned page architecture, we’ve all been told some very pretty stories by these websites. And they stuck. Which means they’re done right.

Another thing we can notice here is the color play. We haven’t seen many bold and vibrant colors in these websites, or overly sugary pastels either. Chromatic exploration is, therefore, another trend that has been marking the skincare and beauty industry. We’ve seen a lot of monochromatic or grayscale designs, broken up by occasional, carefully selected color details. We’ve also seen vibrant, loud colors in places where we’d expect to see baby pinks and blues. Experimentation of this sort is always good as it helps us break away from stereotypes and tell more compelling stories that really resonate with their audience.

At this point in time, it seems we have more pressing social and environmental issues than ever. The devastating fact is that poverty, illness, war, famine, ecological disasters and other threats to the wellbeing of our race and our planet are too many to count. Every time we open the newspapers or check our favorite news outlet, we face a new problem, a new disaster. Fortunately, what we also see is a rising number of activist organizations, funds, charities and other groups working to fix the world, one issue at a time. And a lot of that takes place online. That’s why today we want to talk about digital activism and the change it can make.

Continuous innovations in the field of web design have led to the onset of various convenient types of civil participation in digital form. We can make donations online in just a few clicks. We can sign up for an activity, share a cause with our peers, raise awareness and much more – all from the comfort of our own home. Sure, some would say that’s not real activism, but hey, when a child is starving every dollar makes a difference.

But digital activism is more than just fundraising. It’s also about using innovative, engaging design solutions to inspire people to take action. It’s about employing visual tools to bring a certain issue to surface, to raise awareness in what is today the single most efficient manner. People spend a lot of time online. A lot. Some even too much. And not using the internet as a vehicle of change would not only be plain lunacy, but short-sightedness, too.

We had a very hard time picking a limited number of activist websites to share with you today. Choosing among all the active causes is a tough chore for one’s conscience. They are all so, so important, each in their own right. But we had to narrow it down, so we used the quality of design and UX as the criterion (not the easiest task either, by the way). So, let’s get to the gist of it. Here’s our pick of the best digital activism websites right now:

Lewa House

Lewa House is a guest lodge and a property in Kenya that has been hosting visitors since the 1970s. More than just a tourist facility, Lewa House is focused on raising awareness about endangered wildlife in that part of Kenya, and in Africa in general. It teaches people how to live with nature, not against it, and how to reverse the dangerous effects of poaching, wildlife exploitation and environmental neglect. The website is wonderfully designed, with plenty of interactive sections, most notably the map of the area and the property, which can be explored using click and drag to navigate, and scroll to zoom in and out. Beautifully narrated and with some stunning visuals, the website translates a piece of Kenya’s unique atmosphere into digital form.

Listen and Donate

Pone is a French musician and producer who suffers from ALS or Lou Gehrig’s disease. In 2019, Pone achieved an extraordinary feat: he recorded and mixed an EP using only his eyes (the only means of communication the disease has left him with). The EP is called Listen and Donate and has a promotional website with the same name to accompany it, raise awareness but also raise funds for caregiving networks. Just like Pone himself, the website is nothing short of incredible. It can be navigated using your gaze, if you turn your webcam on, but it also features conventional mouse navigation. The center of the website features a video of an eye which follows the mouse around the screen. It also serves as the menu from which we can get to know Pone’s incredible story, order his EP and make a donation to Trakadom, the charity that finances caregiver training programmes.

No Fishing

No Fishing is an online campaign by the eco-marine organization Sea Shepherd, created to raise awareness about the dangers of fishing nets in oceans and to collect donations for this important mission. To be completely honest, there is no better way to describe the project, and the accompanying website, than simply “This is SO cool!!” Because it is. It’s incredibly cool. The website first takes us through some devastating stats about the effect of the fishing nets on marine life worldwide, as well as the whaling practices and their catastrophic results. It then takes us on a tour around the globe showcasing Sea Shepherd’s ships, whose results are nothing short of spectacular. 3D objects, interactivity and, of course, the powerful animated intro, make you instantly reach for your wallet and hit that donation form.

Fingerspelling

If you read our article on beautiful purple websites then you probably remember Fingerspelling, a wonderful project for learning how to spell in American Sign Language. Created as a game, Fingerspelling uses machine learning and the user’s webcam to check and correct the hand gestures that represent letters of the alphabet. The website is run by the American Society for Deaf Children and promises that no information collected through the game, such as recordings, will be shared with third parties. The design of the website is functional and, if not minimalist, then definitely simple, which is a fitting choice. In designing the game, the focus was on functionality and efficiency of the code, assuring the game runs smoothly. The learning process itself is incredibly fast, thanks to the feedback and to the fact the gestures are checked and corrected in real time, just like they would be in a live class.

At Glacier’s End

You know how they say that life imitates art? The concept of mimesis can often be applied to nature, too. There are parts of this planet that are so surreal and stunning, they seem like an oil painting, a collage or a man-made sculpture. The moment he laid eyes on the Icelandic glacial rivers, the American landscape photographer Chris Burkard knew he needed to make a contribution towards saving them. Namely, the glaciers and rivers in Iceland, which are indeed gloriously beautiful, are also endangered, mostly by damming for the purposes of aluminum mining. To help save these gems of nature, Burkard started a project of photographing and filming them from the air. The result is a jaw-dropping online project called At Glacier’s End, a cinematic, interactive experience with stunning photography and just the right balance between visual and textual content. The sheer impressiveness of the photographs urges an instant reaction, prompting the visitor to learn how to help save Iceland’s (and the whole world’s) endangered treasure.

The Sea We Breathe

Started by the Blue Marine Foundation, The Sea We Breathe is an immersive digital journey through the world’s oceans, their currents, intertwined ocean ecosystems and the impacts of climate change on marine life. The website opens with a meditative moment in which we are invited to take a few deep breaths following the gentle rolling of the waves, before taking a deep plunge into the ocean and selecting one of the three currents or journeys – the Ocean’s Web of Life, Protecting the Underwater World and Rainforests of the Sea. Each journey teaches us about the harmful impacts of environmental problems on the health of the oceans which are vital not only for the creatures living in them, but also for humans. Beautifully animated, exciting and engaging, with spectacular visuals and wonderfully arranged music, The Sea We Breathe is a project that leaves no one indifferent about the destiny of our oceans.

The Hiring Chain

The Hiring Chain is a wonderful campaign by CoorDown, the Italian national coordination body for people with Down Syndrome. The concept is strikingly simple, strikingly effective: by hiring a person with Down Syndrome, you’re giving them a chance to show they make a valuable employee and therefore incite other employers to do the same, thus forming the Hiring Chain.

The visitor starts the website experience by holding and dragging two hands together to meet, a lovely symbolic start for a project at whose heart lie the principles of solidarity and assistance. What follows is a fullscreen video, consisting of a short, heartwarming film about the Hiring Chain, with catchy, uplifting music performed by Sting, telling the story of how a group of people helped another group of people find a job. The website is available in two modes – one with and the other without the lyrics shown on screen. The atmosphere bears a slightly vintage quality, thanks mostly to the music and the typography, and is so positive and hopeful it will leave you whistling the Hiring Chain tune for days.

The Year of Greta

Hands down the single most influential activist of the last decade, perhaps even the century so far, Greta Thunberg became the face of the environmental protection movement when she took the world by storm in 2019. To celebrate this remarkable person, who managed to achieve so much (a keynote address in the United Nations, the Time Magazine Person of the Year…), the Dutch creative studio Superhero Cheesecake created a wonderful digital homage, called The Year of Greta. The website opens with a 3D figure of Greta standing fiercely on a rock, almost as if suspended in empty space. The timeline of her rise from a local campaigner to international activist slash superstar within a single year can be explored using drag or scroll, immersing the visitor into her story. Whether we already knew about Greta’s efforts or not, by the end of the journey, we are left struck and humbled by this young person’s dedication, strength and resilience thanks to this touching, honest project.

Save Whales

Somewhat similar to The Sea We Breathe, Save Whales is a digital project by Red Collar that uses animation, interactivity and superb digital imagery to raise awareness about the endangered marine life, specifically five species of whales. As we already talked about in our piece on page transitions, the website features beautiful mask transitions illustrated like waves rolling in and out, which were created by hand. Another impressive element are the stunning 3D models of whale species, some of which were pretty hard to do, considering the available images were quite different between each other. What’s also quite impressive is that the entire project was finished in just 14 days. The website also features a very hands-on, actionable section with advice and information on what each of us can do to help these majestic and tragically endangered creatures.

Stonewall Forever

The Stonewall Riots are regarded as the pivotal moment in the history of LGBT liberation movement. In 1969, a violent clash between the rioters, mostly patrons and owners of the Greenwich Village gay and lesbian establishments, and the police who excercised brutality during the event, sparked the first gay pride marches, a tradition that lives to this day in every place where LGBTQ rights are being disputed. Stonewall Forever is a website created as a living monument to the event, bringing together queer activists looking back and reflecting on the Stonewall anf the LGBTQ rights before and after the riots. With an intersectional approach, it places a particular focus on trans people, POC and the homeless who were involved in the scene around Stonewall and whom the history seems to have deleted from its archives.

The website was created to accompany a documentary by the same name, and features a remarkable series of photographs, stories and testimonials divided into six chapters. It starts with a beautiful 3D rendition of a rainbow made of particles bursting into the clear blue sky from the famous New York City neighborhood. We then get to explore the history of Stonewall and the development of the LGBTQ movement through wonderfully animated drag and scroll navigation, to pick chapters and dive deep into the remarkable stories of activists old and new. It is a true living monument, translated into the digital form, to the struggle and the love that are so inherently intertwined into the movement.

Your Plan Your Planet

Created in collaboration with the California Academy of Sciences and Ellen Macarthur Foundation, Your Plan Your Planet is a Google sustainability project that aims to teach people on how they can save water, food and energy, and how they can extend the lifespan of various personal and household items. Based on the principles of circular economy, the project is divided into four categories, each one dispensing practical and actionable tips on energy and water saving and sustainability. Facts and tips are presented in the form of simple but smart animated illustrations, and they can be downloaded for offline use. And to keep things interesting, you can make a pledge for each tip, for instance, you can pledge to get a water-smart showerhead and even set a reminder in case you forget.

Blue Heart by Patagonia

Blue Heart is a project by the famous outdoor clothing and gear brand Patagonia. The goal of the project is to raise awareness and protect some of Europe’s last wild rivers, specifically in the Balkans. If you’re wondering what “wild rivers” means, it indicates a large, powerful river with no dam on it. According to the project, dams are very harmful for the rivers: they do not help produce clean energy and cause environmental issues in the surrounding regions. Blue Heart is a documentary focusing on the largest undammed river in Europe – Albania’s Vjosa. The project website is striking and direct – beautiful fullscreen imagery and cleverly placed CTAs offering the visitors a chance to learn more about the problem with dams, to watch the video and, of course, to take direct action.

Restore Hope Appeal by Compassion

Restore Hope Appeal is a fundraising website started by the Australian Christian charity organization Compassion, with the goal of raising funds for different disaster-stricken areas around the world. You may remember it from our piece on split screen layouts, in which we praised the clever division of the homepage into two adjacent sections – one with the donation form, and the other with short info about the goal and links to pages where we can discover more about those affected by flooding, typhoons and cyclones, locust swarms and, unfortunately, many other disasters taking place in the world right now. Straightforward and effective, but also featuring some lovely design solutions, Restore Hope proves to be an excellent vehicle for collecting much needed charity funds.

Wrapping It Up

We have seen some truly inspiring examples of various causes presented in digital form, each featuring unique design solutions that enhance the experience and promote participation. Animation and interaction are basically a must, as these are the elements that break the barrier between the digital and the physical (or at least mimic breaking it), thus pulling the visitors deeper into the narrative. Cleverly placed and well-designed CTAs, high-quality imagery, video, music and sound effects, 3D animation… these are all vital elements for a website that aims to raise awareness, promote a cause and reach a goal. Flat, static design is good for protest banners. Online, it’s all about depth, interaction and motion. In fact, what it boils down to is storytelling. To get people to help reach a goal, you need to tell them a compelling story, using all means available, carefully orchestrated to form a unique voice that cannot be unheard.

Transitions are today considered a vital part of UX design. Flat and static design is no longer a viable option for any sort of website, let alone one that aims to increase its traffic and conversions. Interactivity has long stopped being merely a trend – today, it’s a must. Mobile web design, which, naturally, has its own set of rules due to its inherently different nature and build, has influenced a lot the way users perceive web as a whole. Even on desktop, we expect skeuomorphism, we expect motion, and we expect fluency. While definitely not the only factor, page transitions certainly play an important role here.

Why are page transitions so important? Why can’t we simply make a new page load without any “special effects?” The answer, to a great extent, lies in continuity. When designed and animated properly, page transitions assure a sense of fluidity in the journey between different site locations. No abrupt stops, no waiting for a page to load while we stare at an empty white space. With transitions, we are engaged, amused and, oftentimes, delighted. We are carried through the journey without having to bother about its steps and stops.

In addition to providing visual continuity, page transitions also keep the visitors engaged and entertained. Depending on what you’re trying to achieve and what’s in line with your brand and style, you can have your users go “Wow, that was cool!” or “Oh yes, that felt nice.” Because today the digital world and the online realm are so intrinsically connected to our “actual,” physical existence (and to an alarming point, some might add), what we experience online translates to what we feel IRL. Well, to an extent, at least. So, a smooth navigation experience, of which page transitions are an important element, guarantees positive feedback and work towards better retention and, ultimately, conversion.

Deciding on which exact sort of page transition to apply, what kind of animation, the duration, the movement to design – these can be tough choices. After all, not all transitions we see online are good. Some are over the top, some are inappropriate for their wider context, and some are poorly executed. Then again, there are page transitions that are designed and carried out perfectly and add enormous value to the overall design. Today, we’re going to go through some of them. Stay tuned as we check out:

Lama Lama

Lama Lama is a creative digital company from the Netherlands with a rather memorable online presence. The animated logo introduces the leitmotif of figures made of large pixel-like fields, repeated in the cursor effect, which leaves a trace of squares forming shapes. This reflects one of the pillars of the agency philosophy, and that is playfulness. Each page transition involves a rapid masking effect reminiscent of old-school arcade games, with a quick color fill consisting of a mass of enlarged pixels. The animation is simple so it doesn’t hamper the UX by slowing the loading times down and provides a quick and fun passage to the next destination.

Synchronized

The website of the digital creative studio Synchronized is a wonderful exhibition of the studio’s superb taste and technical adeptness. It is full of delightful elements and details, like the neon-green line that is drawn as we move the cursor around, not disappearing, but instead leaving a traced path of our movement. When clicked, each of the showcased projects expands in the form of a fullscreen popup, so it’s not necessarily a page transition, rather a page opening we’re looking at here. Still, the elegance of these pages, and the lovely fluid animation that accompanies the transition (resembling a piece of paper submerged in water, or perhaps a photograph dipped into the developing fluid), make it worthy of the appearance on this list. The animation is repeated, although in reverse, when the popup is closed as the “paper” softly falls back into its original position on the project list.

Haritos

The website of the award-winning Greek creative director and designer Haritos Constantinos dons a minimalist, predominantly monochromatic layout with several interesting touches created to spice things up. For the page transitions, Haritos opted for a simple but striking SVG morph based on the contrast between black and white. The upward color fill usually ends at the top of the page, but here it softly bounces back down, like a gentle but powerful wave sliding in and out on the shore. At this point we’d like to note that the SVG morph transitions are quite popular these days and can be seen plenty. For instance, the Montreal-based agency Kffein employed a similarly reduced palette with both vertical and horizontal morph transitions, sometimes even in the same (or almost the same) color as the background of the current page.

Alessandra Zanghi

Alessandra Zanghi is a destination wedding consultant based in Lago di Garda, Italy, whom we already talked about in our piece on pink websites. Her website is basically everything you’d want your wedding to be – tender, sophisticated, beautiful and smooth. What contributes the most to this sophisticated character are the page transitions, if they can be considered transitions, since the page (and its URL) remains the same, but elements go through a soft, elegant change of place within the layout, creating a sense of being on a different page. Alessandra’s story is told in chapters, so these transitions make a fitting choice, gently carrying the visitor from one point to another and then yet another.

Something similar, although with actual transitioning to a different page, can be seen in the online portfolio of the designer and writer Hoang Nguyen. The blog page consists of a list of posts that can be viewed as a grid or as a list, and both options include elegant page transitions with the edges blending into the background as the list item appears to expand to the point of taking up the entire page, in a fade to white transition.

Lēonard

The innovative (not creative – mind you) Lēonard agency is our old acquaintance from the piece on the stunning gradient websites, in which we focused on the chromatic merits of their wonderful website. Today, we want to point out the transitions, which, again, may not qualify as page transitions per se, and could be considered interactive links, in that they transform when interacted with, leading the user to the designated location. Links come with different transitions, fading out, sliding left, right or askew, always maintaining low contrast with the gradient background. The entire composition is therefore balanced in its subtle dynamicity, and the transitions give the website a distinct sense of fluidity.

Glenn Catteeuw

The website of the Belgian multidisciplinary designer and art director Glenn Catteeuw bears a distinct geometric quality, with plenty of grids, cubes, sharp lines and triangles. The main page rolls between different sections as the user clicks on About, Work and other links, but can also be scrolled, of course, with the same effect. The Work section features select projects which, when clicked, burst open in a striking animation made of cloud forms and geometric forms on a dark background with a noise texture. The transition is smooth and in perfect line with the overall gloomy character of the website.

The Metropolitan Enigma – Salvatore Ferragamo

To support the SS21 collection, the fashion house Salvatore Ferragamo created a lovely interactive project, a game in fact, called The Metropolitan Enigma. The visitors are called to solve three mysteries, which consist of simple yet engaging little games presented through illustrated narratives. To pick a mystery, we are invited to click on one of the three maps. This prompts a gorgeous cloud-like transition, with the image gathering like clouds in front of the sun, and vice versa, but it also resembles the way paper burns, from the center to the edges. Combined with the illustrations, the music and the palette, these transitions help form a unique mood – elegant, classic and timeless.

Spatzek Studio

Spatzek Studio is a web design and development company creating web solutions, most notably limited ready-to-go websites at affordable prices. The studio website unites boldness with simplicity, through big sections with large and very large typography and a simple palette reduced to black, white and a lovely shade of rust. And precisely this last color is the main protagonist of the page transitions on the studio website. When clicked, links to inner pages prompt a fullscreen blinds effect in the rust orange color combined with black. The effect is short and striking, and the color choice gives off a slightly retro mood, reminiscing the ‘60’s and ‘70’s design trends.

Something very similar can be seen in the website of the creative and branding agency C8, where the palette is also reduced to three colors – black, white and red, and the same blinds transition, but this time vertical instead of horizontal like in the case of Spatzek Studio. The folks of Design Canada have something similar on their website, with thicker, horizontal lines gradually filling the screen during page transitions.

Disrupt by Oui Will

We have already covered the wonderful project Disrupt by OuiWill in our piece on stunning deep green websites, but the San Francisco-based digital brand agency deserves another mention, this time on account of the wonderfully designed page transitions. Similarly to Spatzek, C8 and Design Canada, Oui Will opted for a transition based on linear sections. However, more than simple Venetian blinds effect, the transitions here involve wider, asymmetrical areas that open and close, moving from the diagonal to the vertical positioning. There’s something cinematic in these transitions, reminiscent perhaps of some older James Bond movies. The transitions are consistent with the rest of the layout in terms of the palette, being based on the same deep green, combined with black, guaranteeing a smooth and fluid visual experience.

Save Whales

Save Whales is a project created by the award-winning Red Collar agency with the goal of raising awareness about five endangered whale species and some tips on how we can help them. The project is very realistic, with 3D models of whales that can be moved around, as well as animations and sound effects. The list of species is given as a horizontal scrollable list but does not feel like a list at all – the animals are presented in their natural surroundings in fullscreen images, maximizing the immersive effect. When clicked, each item opens a new page, with illustrated transitions that represent waves or splashes of water. The transitions were made by hand, involving 66 rendered frames. The agency made sure the amount of animations on the website doesn’t overload the browser by transferring them to HTML5 Canvas and applying background media loading.

Kikk Festival 2018

The Belgian Kikk Festival of digital creativity is known for crafting visually innovative and inspiring programme showcases for each year’s edition. We’ve talked about the 2021 edition in our piece on websites inspired by poster aesthetics, while the 2019 edition was featured in our list of the best pink websites. This time around, we’re going to check out the programme for the Kikk Festival 2018. The website dons a playful, beautifully balanced character based on a youthful, optimistic blue, with animated hand-drawn illustrations and a circular cursor in pink. But enough about the layout – we’re here to check out the page transitions. These follow the joyous, optimistic vein of the entire composition and consist of splashes of blue, coming from different directions for each link. The festival theme for 2018 was Species, which is hinted to both in the illustrations representing microorganisms and primitive vertebrates, and in the splashes and the overall fluid character of the site, reminiscing the primordial soup from which we all evolved.

Wrapping It Up

So there you have it. We have seen some truly terrific examples of page transitions – smooth and elegant, flashy and bold, organic and subtle. Some of them use the same or similar animation effects, some are innovative and unique. But did you notice they all have one thing in common? What would you say that is? It’s hard to put a finger on it precisely because it’s something that should be felt or intuited, not perceived explicitly. And that is fluidity and smoothness. A good page transition carries us away from a page, to our desired location, on tender, soft wings that glide smoothly through the ether, so to speak. Poetry aside, all the transitions we saw today are crafted to the most minute detail, and impeccable coded. No halts, no glitches, no stops, both visually and technically. Just an uninterrupted navigational flow. And that’s the gist of good page transitions.

If you know of other page transition examples that you think merit the attention and praise, don’t hesitate to drop us a line in the comments section.

The rise of mobile browsing has brought forth some considerable innovations when it comes to navigation design. Multi-touch actions, such as pinch and expand, swipe, double-tap and similar, are today basically native to mobile environments, while on desktop they are more likely to be found in websites designed to provide entertainment or an artistic value. We can find them in games and game showcases, playable websites and experimental web projects, but we’ve also been seeing more and more of them in commercial websites, online shops and portfolios. Besides the scroll, among the most widely used ones are click and drag interactions.

Drag interactions can be seen as part of the skeuomorphic trend in design. They are designed to mimic an actual, physical action. In a way, the mouse serves as an extension of our hand, and we use it to basically pick up and move an on-screen object, element, section, sometimes even the entire screen. We get to move objects, make figures jump, rise, grow, shrink. We put things together and reorganize the screen. Just like we do “in real life.”

Like other gesture interactions, drag interactions add an exciting exploratory touch to user experience. They pull the user deeper into the interface, blending the edges between the physical and the virtual. As such, they bring tremendous value to a website. However, it’s not enough to just introduce drag or hold to a design. It needs to make sense and to be intuitive, or clearly indicated.

We’ve spent a lot of time exploring all sorts of web interactions and we have to say, there are some truly remarkable creations out there. Here are our top picks of websites featuring innovative and inspiring drag interactions:

The Body Shop Body Butters

Known for its extreme attention to design, the Body Shop prepared a wonderful showcase for its 2021 series of body butters. Immersive and intricate, with a strong accent on the sensuality and femininity, the showcase also featured some quite interesting interactive elements. The narrative of the showcase is divided into several chapters, and the Love Every Inch chapter features a set of videos and stills but what interests us here the most is a top section that can be dragged and pulled down, as the button instructs the visitor. This prompts a new layout layer to appear, which starts filling with jars of body butters of all sorts, hopping around, almost bubbling, all wobbly and playful. The visitor can close the section and then come back to it later, to find it filled with even more body butters, like an entity that exists in and by itself. This section is repeated in the chapter Love Your Planet where, again, we get to pull the green tab and reveal the wobbling multitude of body butter jars. This chapter also features a beautiful narrative about sustainability and the wonderful people behind the new, fully recycled body butter jar, which can be navigated by dragging the slider left or right.

Spotify – Listening Together

Say what you want about Spotify but the streaming service sure can offer a remarkable digital experience. We already covered Spotify’s Fan Study in our piece on purple websites, and this time around we want to talk about Listening Together, a celebration of communal listening. The concept is simple – according to Spotify, each second there are more than 30,000 people listening to the same exact tune at the same time. To celebrate the fact that listening connects people who have otherwise never met and probably never will, Spotify created an interactive presentation centered around a 3D render of the planet Earth that can be dragged and turned around to explore geotags and related tunes enjoyed at those spots at any given time. The interaction is seamless and the experience is immersive and fun, so don’t be surprised if you catch yourself procrastinating on this website.

I Buongiorno

The website of the Italian winemakers from the Puglia region, I Buongiorno, is a wonderful illustrated showcase of the family wines, their mission and their story. The entire website is based around horizontal navigation with collages combining photography and illustrations. The visitors are invited to drag or scroll the slider to explore the wine selection or the winery timeline. A semicircle at the top of the page serves as an indicator of where we are in the horizontal line at any given moment. The circle is the visual leitmotif of the website, and can be found in the logo, the icons, the favicon, as well as the cursor. The interactivity is smooth and immersive and helps pull the visitor deep within the story of the I Buongiorno.

Falter Inferno

These days, more and more brands, companies and outlets opt for immersive storytelling experiences instead of “conventional” flat websites. One such endeavor, and an utterly impressive one, too, is the project of the Viennese newspaper Falter. Falter Inferno offers a gloomy, dark and depressive reality check told through chapters, each illustrating one particular sort of oppression we are all experiencing in the modern world. The story is initiated by dragging and dropping a simple circle on a dark background, like pulling down a curtain. At the end of the narrative, the visitor is asked to drag a hand from the upper edge of the screen and bring it to clutch and pull on the hand in the bottom. Then, in a whirl, everything changes and we are pulled back up to the surface, thanks to Falter, a figure that aims to liberate us by crushing all the reactory, conformist habits of the modern man and telling the truth loud and clear. Short, intense and powerful, the website is a masterpiece of interactive web design, animation and illustration and does an extraordinary job at promoting the brand.

Land Lines – Chrome Experiments

Chrome Experiments is a series of web creations made by coders pushing the boundaries of technology, which also includes an open set of tools and resources for other coders to play and experiment with. Land Lines is an experiment based on Google Earth satellite imagery that can be explored by dragging or drawing with the mouse. The “Draw” action finds an exact match for the line the user draws, while “Drag” creates an infinitely connected line of roads, shorelines and rivers. Like everything that has to do with Google Earth, it is an incredibly addictive experience, as the drawing and dragging interactions provide an infinite string of results in a very satisfying, even soothing manner.

Wannabe Store

Wannabe Store is a shop doing everything it can to prove it’s not selling toys, or at least not just toys – its range of action figures, collectibles and props is a true delight for all the aficionados. The website, which dons a surprisingly minimalist and even toned-down style (one would perhaps expect a flashier, noisier character from such a shop), opens with an interactive section based on the drag action. A big bearded skull is featured as a 3D object in the center of the page. For those who don’t figure it out immediately, there’s text a bit below indicating that the skull should be pulled and dragged to initiate a change. As we release the drag, the skull jumps a bit, rotates, changes color and – changes its hat. This delightful piece of interaction has no other purpose than to welcome the shoppers and provide a bit of entertainment before going down to business – shopping for figurines and collectibles.

makemepulse

We already talked extensively about this one in our list of the best playable and interactive websites but such a jaw-dropping creation definitely deserves a revisit. makemepulse is an interactive studio and advertising agency with an impressive roster of clients and obviously an even more impressive roster of creatives working in it. In 2018, the agency decided to create an interactive digital experience to celebrate the new year, resulting in Nomadic Tribe, a digital utopian tale of a tribe that each year travels to a new island where it coexists in perfect symbiosis with nature. For such a theme, deciding to visually craft it as a tribute or a homage to the great Jean Giraud a.k.a. Moebius was a smart choice. In fact, the visuals are so reminiscent of Moebius’ style, particularly the Edena series, that some might even be tricked to believe the master himself did it – until the end, at least, when we reach the disclosure. We could go on forever about the superb aesthetic value of this project, but this time around we’re focusing on interaction. The tale is divided into chapters, each of which is initiated with some user action. The chapters themselves are interactive – you get to drag and basically “pull” a flower from the earth, make it as big as you want and point it in any direction you like, and you also get to dictate the speed at which the majestic birds will carry the tribe to the next island. The animations are immaculate and the illusion of bringing a beautiful flower to life by dragging your mouse provides a strangely satisfying feeling. The user becomes part of the experience, feels like part of the experience and, hopefully, revisits his or her own place and role in a world that has alienated itself from its own source of life.

Wrapping It Up

Drag interactions are a splendid way to bring vitality to a design. Their biggest value lies in the fact they help connect the user and the interface. The division between the two is no longer restrictive – thanks to interactions like click and hold, drag, pull and scroll, the website visitor becomes an active participant in the experience, which is no longer limited to just viewing.

Drag interactions are also an excellent way to show off your coding and design skills. In order to do their magic, these interactions need to be carefully mapped out and carried out without a glitch. That’s why we mostly see them in websites that otherwise boast immaculate UX, the cleanest possible code and the most innovative design.

We hope you enjoyed our selection of websites with the inspiring, exciting drag interactions. If you have any favorites of your own, make sure to share them with us in the comments section!

Designing a website without paying attention to the contact page is much like preparing a sumptuous, candle-lit five-course dinner, and then giving the guests plastic utensils to eat with. Sure, contact pages serve a specific, practical purpose and their nature is inherently functional, but you can’t just slap some links on there and call it a day, can you? Contact page design is something that mustn’t remain an afterthought, and fortunately that’s something that more and more designers are realizing these days.

When wireframing a contact page design, there are a few things to keep in mind:

There’s a lot to be said about contact page design but it essentially boils down to whis: this page should get the visitors to reach out, connect, perform a desired action. It should inspire and encourage them, and a contact page with basic, dull or downright ugly design won’t do that. An intricate contact page with tons of animations, illustrations and dense content won’t do that either. It will confuse and possibly frustrate them. It will make them leave without clicking that “Contact Us” button.

In addition, a good contact page should include more than just a sign-up form and an email link. It should provide the visitors with all the available resources for reaching out, be that a physical address and a phone number, or links to the social media profiles. It should also make it easy to navigate to other pages of the website, or to go back.

Finally, if the contact page delights, wows or dazzles the visitor – all the better. A well-designed contact page is a sign of commitment and consistency, and leaves a very strong, very positive impression.

That being said, we were recently inspired to do a browsing session in search of the finest examples of contact page design. Here’s what we found:

The Badass Project

The Badass Project started as an answer to the question “Why are all wedding pictures always the same?” and the result was a wedding photography studio that captures real moments, real people, real emotions, like they happen in life, not in magazines. The studio website is appropriately unique, too. Instead of soft tones, feminine details and subtle calligraphic fonts, the layout sports a loud, flashy, in-your-face design based on black and yellow. The contact page can be reached through a fullscreen menu that opens via an eye-shaped icon. The page reflects the studio’s direct, playful, youthful approach to business, with some sections that appear to be there just for fun (the “Blah, blah, blah, blah…” one, for instance) but it is nonetheless supremely functional. Visitors can submit an inquiry via a large form equipped with all the practical fields, that doesn’t really look like a form but serves the purpose perfectly. The “Send” link is the cherry on top of this loud, bold cake – oversized handwritten letters that grow even bigger when hovered upon, coupled with some arrows pointing to it.

Levon Aronian

The website of the Armenian chess master Levon Aronian offers a wonderfully geometric, chess-inspired layout consisting of thin grid lines over a white background. The content is neatly arranged within geometric sections, sometimes animated, sometimes static. The tidiness of the layout is by no means ordinary or plain – in fact, the design has a uniquely distinctive character and leaves a lasting impression. The contact page reflects the design of the homepage perfectly, except, perhaps, it has less content, which is to be expected. After the initial section, which contains the usual: a short message and the email address, we scroll down to a beautiful contact form, adorned with subtly animated details – a curvy arrow of the “Send” button and an eight-pointed star with a purely decorative purpose. The page closes with social media links and links to other site pages in a footer that continues the overall geometric, mathematical character of the website.

Chungi Yoo

The portfolio website of the German-based art director, designer and illustrator Chungi Yoo is a delightful and fun display of Chungi’s skills and taste. A lovely feminine (but not sugary!) palette, interesting design elements and animations and beautiful typography set a unique and recognizable tone. The entire website, which the designer dubbed her “playground” (and it certainly does feel like one), is laced with lovely little design details, icons, animations, microsections, but the contact page is the real treat. It opens in a light blue tone with a circular section housing a lovely custom illustration, and follows with large sections dedicated to different modes in which the visitors can reach out to Chungi – an email button and links to her social media profiles. The large typography, animated letters and icons and skillfully matched background colors create an exciting composition with a distinctly outgoing vibe. The most interesting detail, however, is the little star icon in the upper right corner. When clicked, it prompts a fiesta of circles, or rather bubbles with smiley faces, a bit psychedelic, a bit cute, welcoming the visitor to Chungi’s world – to her playground.

Matthew Fisher

If you read our piece on effective eCommerce design, you probably remember the wonderful Matthew Fisher, designer of art objects centered around natural materials, heritage and superior craftsmanship. His website, available in light and dark mode, is elegantly minimalist, with distinctive typography. The contact page can be reached via a fullscreen menu and represents a striking combination of monochromatic design and discrete interactivity. Large Sang Bleu letters invite the visitor to get in touch and are linked to email. The contact details are to the left and social links are placed at the bottom of the page. The mood of this page is in line with the overall character of Fisher’s website – clean, elegant and striking.

Sea Harvest

One of our favorite designs and our old acquaintance from the piece on layouts inspired by poster aesthetics, the website of the Australian Sea Harvest fishing company is a lovely homage to fishing communities everywhere. The layout closely resembles newspapers (like the ones fish is wrapped in), with neat sections and a monochromatic palette that is broken down only by occasional details. One such detail, for instance, is the color change and the handwritten circle effect when menu links are hovered upon. The contact page is perhaps the most newspaper-y one. It has the same header as the homepage and other pages – clean, geometric and very user-friendly. It’s followed by two parallel sections with company locations, and a section with contact details and a vintage illustration of an old school telephone. The page closes with a comic strip from Garfield in black and white, which assumes color when hovered upon. It’s a page that is simultaneously practical and fun, with design that perfectly reflects the carefully crafted aesthetics of the company.

Hallo Basis

Hallo Basis is a German visual communication agency offering the services of branding, web design and graphic design. Their website reflects their innovative approach to work – it is full of interesting, modern design solutions, from fullscreen animated illustrations to horizontal navigation. They don’t have a contact page per se, but rather a footer that serves as the gateway for various communication channels – email, social media links, the usual. For some reason, the designers decided to repeat the same information in the two footer columns, one only slightly larger than the other. The footer dons a low-contrast look, with white letters on a light gray background, which definitely looks smooth and elegant but may pose an accessibility problem for some users.

Ali Ali

Ali Ali, or Ali Two Times, is an award-winning director of commercials from Cairo, Egypt, and a member of The Good People film studio. Ali’s website has a rather minimalist character, with interface colors reduced to the monochromatic scale. The Bio page is based on a dark, almost black background, while the works are presented in a separate page with a textured, light gray background. As for the contact page, it maintains the minimalist vein and bases its character on the dynamics between large and small (even tiny) text in the Monument Grotesk typeface. The focus of the page is on the contact with Ali’s agents in several different regions. The atmosphere is clean and cinematic at the same time, thanks to the reduced layout and the grainy texture of the background.

Object

Object is a design studio working in the fields of branding, design systems and technologies. Their website is a modern, playful display of skill and past projects, with the homepage based on the combination of green and blue, and more toned down sections in plain white on black. The contact page, however, is decisively bolder. A bright, loud blue background, which reflects the blue in the studio’s favicon, hosts a flashy greeting animation, with different ways to say “Hello” in various fonts and colors. Further down the page, a more neatly arranged section provides contact information in a clean, easy-to-consume way. This way the overall design of the page encompasses two important traits of the studio’s character: playfulness and professionalism.

Dennis Berti

Dennis Berti is an Italian photographer and visual storyteller currently based in Mexico. His website is a fun and finely tuned carnival of illustrations, animated details, interactions and non-linear navigation events. It’s a fun place to be at, but it is also practical and functional, which makes it an excellent piece of design. The contact page can be accessed through what appears to be a side note in the fullscreen menu, at least if we compare the small link with the large typography used for the other menu items. Once we do get there, things get cleaner – bold typography and a nicely contrasted palette provide for the high usability of this page, which, by its nature and purpose, should be functional above all else. We are offered a choice between two email addresses, one for chat and the other for talk, and the big START+ link takes us to a clean and elegant contact form. Interactions contain animations – a color change on some elements, and a watery, squiggly effect on the others. The page is completed with a round icon in the bottom left corner, inviting the visitors to discover Berti’s journey through his journal.

Grove Lust

Grove Lust is a Belgian digital studio with distinct aesthetics, at least when it comes to their website. A deep teal coupled with light pink sets a soft mood, the textured illustrations that appear on hover speak about the studio’s creativity while the grids and borders give the entire layout a clean, serious feel. The Get in Touch page keeps in line with the overall design and impresses with its unique combination of simplicity, functionality and looks. “Let’s talk about it,” call the big linked letters in the middle of the page, as soft, abstract forms gently sway in the background. The page is equipped with handy links to the most important pages and the Instagram link is tucked in the thin vertical sidebar. Highly atmospheric but simple, it’s a page that does a great job at offering a communication channel to the visitors.

Universal Favourite

Universal Favourite is an Australian creative and design studio with an international portfolio. Their website offers an insight into the studio’s past work and packs an airy, modern and youthful character, built around a light color palette, large arrows and buttons and the lovely Editorial New typeface. A particularly delightful detail are the custom cursors that appear when certain sections representing the projects are hovered upon – a different cursor (rice bowl, beach umbrella…) for each section. The website doesn’t have a separate contact page. Instead, clicking on the round button in the bottom left corner opens a large, beautifully designed contact popup that somewhat resembles a rolodex card. The popup is very clean and readable, and has four distinct contact links serving four different purposes – project, media and job inquiries, as well as general inquiries. Each link consists of a custom icon and circular text and is animated to move on hover. Additional contact buttons with rounded edges complete the contact form, providing all the necessary information while remaining decisively on-brand.

Kacper Chlebowicz

The portfolio website of the Polish art director Kacper Chlebowicz is a stunning display of his passion for motion design and interaction. Basically monochromatic but rich in 3D objects and abstract shapes, the website is a delightful journey through Chlebowicz’s work. The portfolio is essentially a one-page website with jump-to links in the menu and in the footer that lead the visitor to the desired destination – Work, About and Contact. The contact section is located at the very bottom of the page and, unlike the rest of the website, has a dark background with a stronger contrast. The section is relatively conventional, save for the large, mismatched typography and one quirky, humorous detail – a skewed GIF of Jim Carrey from Bruce Almighty that appears as we hover over the section and keeps following the cursor.

Chiara Luzzana

In a tone that seems to share the aesthetic principles of Ali Ali’s website, at least when it comes to colors, the portfolio of the award-winning sound designer Chiara Luzzana offers an immersive experience for almost all senses – eyes and ears in particular. Distinctive typography, 3D objects, handwritten details and stunning sound design welcome the visitors who can reach Luzzana through her contact page, accessible via the fullscreen menu. The CTA text is presented in two different typefaces – Neue Montreal and Rosindale Display, combined within the same words. The contact page provides Luzzana’s email address, as well as social links. The newsletter signup form is supremely elegant and minimalist, consisting of a single thin line and a thin, but decorative arrow button. It’s these little details, combined with the use of different typefaces and the round cursor, that counteract the strictness of the minimalist layout and provide the page with a well-rounded character.

Wrapping It Up

Contrary to what some believe, contact pages are actually among the most visited website pages. And yet, some designers treat them as “pages of secondary importance,” although these don’t really exist. Even the legal pages deserve full designer attention, as only the well-rounded, consistent style guarantees for good web design that will be recognized as such.

Playful, serious, minimalistic, animated, cluttered, clean… We’ve seen all sorts of contact page design styles today, but they all have one thing in common – for all these examples, the designers have obviously paid due attention to this important part of any website and introduced innovative, interesting and inspiring solutions.

Footers are perhaps the most underrated part of a website, and that’s an injustice that current design trends aim to rectify. Website footers are inherently practical – they serve to provide information such as contact info, addresses, phone numbers, links to social platforms, and copyright text. Best practices indicate that we shouldn’t fail to place that particular content in the footer, because the visitors are used to finding it there. But from the strictly design perspective, not too much attention is generally paid to that part of a page. Today, however, we are seeing more and more of some innovative footer design practices, as designers decide to experiment a bit and give the footer the attention it deserves.

In particular, we are noticing that the footers are becoming larger. Previously limited to the very bottom of the page, thin and inconspicuous, footers today seem to claim more room, growing in height, often occupying the entire screen. This practice allows for cleanliness and order, but also allows the designers to place illustrations, animations and large pieces of visual content into this area.

Large footers often come with various revealing effects, where they appear to be hidden beneath the main page content that can be “pulled off” or slid away to reveal the footer.

We are also seeing footers with minimalist content, footers that have three or more parts, footers with oversized typography, and so on.

But instead of talking, let’s move on to showing. Here are some of the best examples of innovative footer design right now:

Canvas Agency

The Canvas Agency offers artist representation services in a modern, dynamic and truly supportive way. Created more as a community than a classic agency, Canvas creates a safe and inspiring environment in which all its artists can work, thrive and grow. The agency website basically serves as a wall for showcasing the artists’ works and the artists themselves, arranged on a simple light background in warm hues. As we scroll down to the footer, the background turns to a very deep purple or burgundy, with the just barely visible agency logo. Coupled with white typography and light pink interface elements, it creates a cozy but elegant atmosphere. The footer is rather big and hosts a conveniently large sign-up form with a witty CTA, while the bottom section is reserved for the usual links to inner pages and social platforms, arranged in several columns. The unusual height of the footer allows for the elements to occupy each its own place, so the entire section does not look cluttered at all.

Sol’ace

The website of the furniture and interior decoration shop Sol’ace reflects the company’s dedication to natural and sustainable materials, natural tones, curved, soft lines and an overall classical design. Everything is finely balanced and perfectly matched in an airy visual environment. The layout allows the showcased products to get all the attention, which is only logical, after all. However, when we get to the footer, things change a bit. While the branding aspect itself previously conceded full spotlight to the items, remaining discrete, the footer allows it to become louder for just a bit. The huge letters in Basic Commercial font take up the central part of the large footer in a brownish olive hue. The bold typography is counterbalanced by fine grid lines and borders, as well as with the quite minute lettering used for the footer menu links.

Miti Navi

Miti Navi is a company offering a range of naval services – a shipyard for sailboats, charter boats and refit services. The breezy, elegant color palette is based around dark blue and powder-pink and complemented by the lovely Voyage typography, landing the entire layout a supremely sophisticated feel. The website’s most striking part, however, isn’t the hero or central content sections, as it’s usually the case – it’s the footer. It merges with the preceding section in a lovely passage from light pink to dark blue, resembling the bow of a sailboat, and proceeds with a clean, elegant layout with neatly balanced content and some subtle lines to provide additional order. This is also an excellent example of the use of GT Pressura typeface, which here instills a sense of professionalism and technical expertise.

Lunchbox

Lunchbox is an integrative system for restaurants, created to encompass everything that operating a restaurant could possibly entail in terms of digital experience, from ordering to marketing and loyalty. The website sports a fun, bright and bold design with plenty of quirky and humorous details, with bright yellow as the prevailing color motif. Again, we have here a quite oversized unfolding footer that fills up the entire screen and essentially feels like a separate page. Menu links are neatly arranged to the sides, an illustration in line with the site aesthetics occupies the center, and the main protagonist of the footer is the CTA inviting the visitors to book a product tour. The section ends with a large company logo, rounding up the exciting, engaging website experience.

Anti

Anti is a product design studio that creates lamps made from reclaimed waste materials. A cyclical approach to materials and production that respects the environment are the focal points of the studio mission, as they only use waste to create their products. Their website is a modern, elegant, monochromatic display of both the mission and the products, neatly divided into geometric sections and a combination of horizontal and vertical navigation. Thanks to this, the homepage is not long and we quickly arrive to the footer with black background, located below a gray product section. The footer is clean and readable, very easily navigable, consisting of just menu links divided into four symmetrical columns. Menu titles are given in Silk Serif, while the sans serif Aeonic typeface is used for the items. The result is simple, elegant, and to the point.

Aquerone

Marketed as “Europe’s first luxury CBD and cannabis lifestyle concept store,” Aquerone has a gorgeously crafted website designed by our old acquaintance Niccolò Miranda, who we’ve sung praises to in our piece on websites inspired by poster aesthetics. In a soft gray and beige palette, with plenty of wonderful little motifs inspired by ancient Rome, the website is supremely elegant and extremely well-executed. We can’t go through every single design merit of it right now, so let’s jump straight to the footer. As we scroll all the way down, the boxed content of the website, tucked within a fine border with round edges, slowly lifts to reveal the underlying footer. The bottommost part of the website looks like it was hidden beneath the content all the while, and the interaction between the sections has a distinct physical quality. The footer consists of neat columns, as well as the company logo and social items, neatly divided in the footer top and bottom sections.

Zoox

Zoox is a mobility-as-service company that has developed a fully autonomous unmanned vehicle for urban commuting. Something between a cab and a bus, the Zoox unites the latest vehicle design trends with functionality and innovative technological solutions. The company website offers a modern, neon-tinted atmosphere with excellent 3D graphics. Designers of the Zoox website wanted to shake things up a bit (but not too much!) in the footer department, treating it as not necessarily the end of the page, but rather as a spot from which the user can navigate further – in this particular case, to the Vehicle page. This adds dynamicity to an area that usually has an “end of the road” character and spices up the UX.

Antinomy

Antinomy is a famous, award-winning creative studio building digital experiences, with clients that include the ranks of Visa, WeTransfer, SpaceX and Alicia Keys. The entire agency website is composed of white and black sections – textual content mostly takes up the white ones, while the black sections include full-width images. This changes in the footer, though, where the designers opted for black background with a single word – Mail – in large, bold Helvetica Now typeface. The footer is decisively minimalist and looks and feels like a page, not a section. It takes up the entire screen, the menu is located in the top area (resembling a header menu), the name of the agency is in the top left and the logo in the top right corner. The agency address and social links are the only content beneath the Mail link and there are no decorative elements or superfluous details whatsoever. It is a bold, somewhat rigid, and definitely striking footer.

Cubitts

Light and airy, but rich in content and character, the website of the London-based eyewear company Cubitts is an excellent reflection of the company philosophy and spirit. The website makes it easy to get lost in – whether you are looking at the absolutely stunning models of spectacles and sunglasses or reading the journal, you’re bound to have a lovely, relaxing time there. But this time ‘round we have to jump right down to the footer, as that’s our business here today. One piece of text – the one inviting visitors to reach out to the company via listed channels – describes the company offices as “elegantly-designed yet upbeat and lively” and that’s actually an excellent description of this footer, too. Airy like the rest of the website, but with a slightly dimmer background, the footer features a lovely illustration, some brand statements, links and newsletter signup form, as well as a live chat popup. Rather convenient contents, but, just like the rest of the website, presented with just the right mix of elegance and wit.

Red Company

Red Company is an innovative real estate company based in Rotterdam, Netherlands. Their website is a modern, professional and well-crafted display of the company goals and mission, alongside their most successful and emblematic projects. It features interesting design solutions, such as sections with horizontal navigation, as well as the right dose of interactivity and animation. The overall mood is quite minimalist through the website, but the part that literally couldn’t be more stripped down is the footer. Consisting of just the logo and three contact routes, the elegant full screen footer with black Freight typography on a white background exudes sheer confidence.

Seed

If you read our article on deep green websites, you probably remember Seed, an innovative probiotics company with a gorgeously crafted website. The dark green mood of the website is set by a couple of carefully chosen hues – some of which are plain and the others have a texture to them. These are broken up by areas of white, like the section preceding the footer, livening up the atmosphere and creating a welcome contrast. The content is distributed mostly around the edges of the footer area, allowing for plenty of breathing room, and it is limited to the essentials – a brand message, a contact form and some usual links.

Vide Infra

Vide Infra is a branding, web and product design agency with offices in Riga and Moscow. The agency has won a number of accolades for its work and has worked with clients such as General Electric, British Airways, DNB and Air Baltic. Their monochromatic website exudes a distinctly contemporary and serious character, and its design has won several accolades. Going down to the footer, we again see a fullscreen section with large, bold elements – a big circular button leading to the contact page, and a marquee with large typography, inviting the visitor to get a quote. The footer is clean and simple, with select interactions that give it dynamicity and spark.

Aroz Jewelry

Founded with the mission of approaching jewelry-making the way the old masters did – with great appreciation and respect both for the craft and for the customers, Aroz Jewelry from Belgium not only designs and manufactures fine pieces but also grants them second life, through reparation and restoration of old pieces. The company website is a lovely, soft and feminine presentation of fine pieces of jewelry, bathed in pastel colors and neatly sectioned with thin lines. But the real masterpiece here would have to be the footer. Starting well before the actual bottom of the page, the footer is divided into three rather large sections – the first one invites the visitor to get in touch and has a gorgeous full width image as the background. The middle one is shorter and features simply a link to Instagram on a warm brown background. The final section is the closest to the conventional menu design – simple white links and company address on a dark background. This is a design that keeps in line with the latest trends in terms of oversized and fullscreen footers, but takes it up a notch by proposing a neatly sectioned three-piece footer.

The Scott

Every website has a footer – one footer, right? Well, some actually have two! The website of the Arizona’s Scott Resort ends with a rather conventional footer with the signup form, contact details and a menu with links to the usual pages. But that’s not the end of the page – keep scrolling and the footer will slide up, revealing another footer. This one occupies the entire screen, has a light, airy background and features links to all the hotels and locations from the Scott line. In fact, this footer even has a header, so it looks and feels like a page on its own.

Union Construction

Under Construction is a Canadian company offering bathroom and kitchen renovation services, most notably ceramic works and floor heating. The website is an elegant and minimalistic showcase of the services and completed works, with mostly conventional – but elegant – design solutions. The footer, however, is something of an exception. The main homepage content ends in what we might actually expect to find in the footer – the contact information (the phone number is given in very loud, large typography), contact links and the company address. As we scroll further down, the content moves up to reveal the actual footer, which consists of nothing but an image of what appears to be a towel branded with the company logo. To keep things on the conventional side, the copyright text and the Back to Top link complete the footer, and the page ends with a completely empty, black footer bottom area. The mood of the entire footer section is edgy and dark, but tidy and professional.

Wrapping It Up

Well, these fine examples of footer design sure change one’s view of this ubiquitous, but often neglected part of a website. We’ve seen some truly remarkable pieces – elegant and sophisticated, bold and distinctive, oversized and double footers are proving that to treat the footer as merely a design afterthought would be a huge mistake.

Visitors always appreciate the effort. To see a footer that has received due attention and care leaves a very positive impression, it complements and rounds up a design. One caveat is in order, though: if you plan on designing an oversized, loud or in any other way unusual footer, make sure it is in line with the overall character of your website. The footer should round up and complete a layout, not throw it off balance. And if it’s designed with care and love, it can complement the layout in delightfully unsuspected ways. If you have your own footer design favorites that you think merit the attention, make sure to give us a shout in the comments.