For a wide range of creatives and industry professionals, having a WordPress portfolio website is the easiest and surest way to get their work out there, be noticed, get more clients and grow their name. It’s easiest because WordPress makes it so. It’s surest because, without an online portfolio, you’re as good as invisible.

In this article, we will cover some basics of what an online portfolio should have, why WordPress is such a great choice and how to get started.

Note: Because we have a comprehensive guide on how to create a WordPress website that covers virtually everything you need to know in this process, we will not delve in technical details and just highlight the most important questions, so make sure to keep our guide at hand when you start making your own WordPress portfolio website.

What Is an Online Portfolio?

Donde – Artist Portfolio Theme

The word “portfolio” is a Latin term denominating a portable stack of papers. Until everything went digital, a portfolio was an actual, physical collection of an individual’s most representative work (projects, sketches, designs, blueprints, etc). A lot of people still have physical portfolios but in the last couple of decades, we are seeing a prevalence of online ones.

An online portfolio is a digital collection of work samples, projects, and achievements that individuals or businesses use to showcase their skills, expertise, and experience. It is a representation of one’s capabilities and accomplishments, usually tailored to a specific industry or profession. The most common use of portfolios is when seeking employment or new clients, and it often accompanies a professional CV or biography.

An online portfolio can come in various formats: a website, a blog, a social media profile or a profile on dedicated platforms (for designers it can be Behance, Dribbble, Portfoliobox, etc). These formats allow creators to customize their presentations according to their preferences and target audience. They serve as a dynamic tool for self-promotion, enabling individuals to attract potential clients, employers, or collaborators by providing a compelling overview of their talents and achievements, complete with personal info and a professional biography, as well as contact info.

What Makes a Good Portfolio?

Alicia – Elementor Portfolio Theme

A good online portfolio represents a clear and cohesive narrative of your work, highlighting your skills and accomplishments effectively. It should feature high-quality visuals that accurately represent your projects, along with concise descriptions that provide context and insight into your process. The visuals can be displayed in a simple and minimalist way, one below the other, but for maximum effectiveness, it’s best if they’re arranged in gallery layouts, in slideshows that can even be fullscreen, with a parallax effect, etc. It’s also a good idea to create a separate page for each of your most accomplished works, where visitors can explore it further and with more details.

Navigation of your online portfolio should be intuitive, allowing visitors to easily explore different sections and projects. Additionally, a good portfolio is responsive and optimized for various devices, ensuring accessibility for a wide range of audiences. This is essential since most people access the web through their hand-held devices these days.

Finally, incorporating elements such as testimonials or case studies can add credibility and further engage visitors with your work.

Who Should Have a WordPress Portfolio?

Munich – Creative Portfolio Theme

An online portfolio can be useful for a wide range of individuals and professionals across diverse fields. Most commonly, it’s associated with creatives such as graphic designers, photographers, artists, and writers or anyone else who can benefit from a portfolio to showcase their work and attract clients or potential employers.

Portfolios are not limited to creative industries. Professionals in industries like web development, marketing, and consulting can leverage portfolios to demonstrate their skills and previous projects to prospective clients or employers.

Additionally, students and recent graduates seeking internships or entry-level positions can use portfolios to showcase their academic projects, internships, and extracurricular activities to stand out in a competitive job market.

Essentially, anyone looking to present their skills, expertise, and achievements in a visually compelling and organized manner can benefit from having an online portfolio.

Why WordPress?

Areia – Portfolio and Agency Theme

There’s a variety of platforms you can use to build and host your online portfolio, but there are plenty of reasons why WordPress in particular makes a great choice.

First of all, it’s cheap. The software itself is free, the free themes are quite good, and there’s a whole range of free plugins that can provide additional portfolio functionalities. You do have to pay for hosting and domain, but these costs are rather affordable, too.

Second, WordPress is an open-source platform with a very lively ecosystem of theme and plugin developers and a rich support community. It is scalable, giving you plenty of room to grow, expand and get more traffic.

WordPress is, to a great extent, responsive by default, meaning your portfolio will look good on mobile devices, too. You will probably have to tweak a few things here and there, but it’s not much work. Plus, the built-in SEO features will help you get your portfolio out there in the search engine result pages.

Next, WordPress has a rather easy learning curve. It is equally suitable for beginners and those who already know their way around HTML and CSS. Again, thanks to the great and active community and plenty of documentation, you can solve most problems on your own.

Finally, the look of your WordPress portfolio is mostly dictated by the theme you’re be using, and there are tons of amazing portfolio themes that provide innovative and elegant design combined with the essential portfolio functionalities and features.

Elements That Every WordPress Portfolio Should Have

Lyndon – Portfolio Theme

Every WordPress portfolio website should incorporate several essential features and elements to effectively showcase work and engage visitors:

Clear Navigation: Easy navigation can be achieved with a user-friendly menu structure that allows visitors to explore different sections of your portfolio effortlessly. Menus and other navigational elements should be located in places that are intuitive and where most people will look. Check out our guide on how you can improve your website’s navigation and consider using innovative navigation solutions like fullscreen navigation.

High-Quality Visuals: A portfolio should feature only high-resolution images or videos that showcase your work effectively. In addition to accurately representing your work, high-quality visuals also instill a sense of confidence and professionalism.

Portfolio Grid or Gallery: Display your projects in a visually appealing grid or gallery layout, allowing visitors to browse through your work easily. Implement features like filters or categories to organize projects by type, industry, or skill.

Portfolio Slider: To make the portfolio even more engaging, interactive and visually compelling, consider displaying the work as part of a slider or a carousel. With the right tools, such as Qi Addons for Elementor, you can easily create highly innovative displays like device frame sliders, circled sliders, parallax image showcases, cards galleries and much more. These will add a spark to your presentation and help you come off as imaginative and up-to-date with the latest design trends.

Project Pages: Create dedicated pages for each project, providing detailed descriptions, objectives, methodologies, and outcomes. Include before-and-after images, client testimonials, or case studies to provide additional context and credibility.

About Me Page: Introduce yourself or your team on an “About Me” or “About Us” page. Share your background, expertise, and passion for your work to build trust and rapport with visitors.

Contact Information: Make it easy for visitors to get in touch by including clear contact information or a contact form. Consider adding social media links or a dedicated “Hire Me” button to encourage potential clients or employers to reach out.

Testimonials or Reviews: Incorporate client testimonials, client reviews, or endorsements to build credibility and trust with potential clients or employers. Display these testimonials prominently on your homepage or project pages.

Call-to-Action (CTA) Buttons: Include clear and compelling calls-to-action (CTAs) throughout your portfolio website to prompt visitors to take desired actions, such as contacting you, viewing more projects, or subscribing to your newsletter.

SEO Optimization: Optimize your portfolio website for search engines by using relevant keywords, meta titles and meta descriptions, and alt text for images. This helps improve visibility and attract organic traffic to your site. SEO is a complex field so make sure you check out our article on SEO basics.

Now let’s see how you can get all this up and running. First things first, you’ll need…

Hosting and Domain Name

Lorne – Creative Portfolio Theme

We said earlier that WordPress is free but for a WordPress portfolio you still have to pay for a few things, primarily for hosting and domain name.

The domain name is essentially your portfolio’s address. You need to think this one out carefully because it should be representative of you as a professional or a creative. It should be straightforward, clear, and uncomplicated. For a portfolio, the best practice is to use your own name or your professional alias (if you’re using one) for the domain name. If your preferred domain name is taken, you can still create one that’s close to your personal or professional brand. And if you get stuck, there are some cool domain name generators that can help.

Some people buy a domain name they like before figuring out the rest. However, the more common option is a two-in-one solution that includes both hosting services and a domain name. A lot of hosting providers include the domain name in their packages, along with other features, so this can be an important factor to consider when choosing the hosting provider.

Hosting services come in different plans or tiers. The plan you’ll choose should depend on the size of your website and the amount of traffic you expect. If you’re just starting out, you probably don’t expect a lot of traffic right away, but you never know how big you can grow so it’s important to pick a plan that allows for scaling up (and down) and handling traffic peaks. And since portfolio sites are usually media-rich, you may want to pick a plan with considerable hosting bandwidth.

Some providers have plans designed specifically for WordPress users. There are several good reasons for using managed WordPress hosting but you should know that shared hosting, which is more affordable, can also be a good option. Finally, there are hosting options that are completely free, but before you sign up for that check out our pros and cons of free WordPress hosting.

How to Choose A Theme for Your WordPress Portfolio?

Qi Theme for Elementor

We now come to what’s probably the most important choice you’ll make when setting up your online portfolio. WordPress themes are responsible both for the look and for the functionality of your website. They determine the design, the layouts, and a lot of other visual elements, but also functionalities like navigation, certain premade pages, page sections, elements like testimonials, galleries, video sections, parallax sections, titles, icons, and much more.

When it comes to themes, you have two options: free themes and premium ones. Every year WordPress releases a new default theme and it’s the one you get when you install the software. These themes are actually quite good, and after the switch to full site editing there are nicely designed block patterns and templates you can use.

Then there are free themes designed by independent theme developers, like our own Qi Theme for Elementor, or Qi Templates for Gutenberg. Although free, these themes are superbly designed and come with demos made specifically for portfolios.

And if you’re looking for something a bit more advanced, there’s quite a large market of premium portfolio WordPress themes for you to choose from. These come in all sorts of styles, vibes and aesthetics, some are more feature-rich than others, and most of them include innovative and elegant ways to display your content and really impress with your portfolio.

Premium themes represent a one-time cost and usually come with a lifetime of updates, but make sure to pick one that has good support and documentation, responsive features and compatibility with the major page builders.

How About the Plugins?

Qi Addons for Elementor

We said earlier that the best portfolio themes already come equipped with features and functionalities that can elevate your portfolio and make it stand out. However, you will probably find that using certain plugins can further improve both the looks and the performance of your WordPress portfolio website. Plugins are like addons that you install on your website to add certain functionality. Most WordPress websites have quite a few plugins since basic WordPress and themes cannot possibly include everything a website could need, plus some specific practical requirements might always emerge.

For instance, you will probably need security plugins to make your website safer and more reliable. Then, you should also consider an SEO plugin like Rank Math or Yoast, plugins for adding contact forms, and so on.

A lot of plugins are actually completely free and won’t cost you a penny. However, there are premium plugins too that are worthy of consideration, especially for a portfolio website. One of such plugins is Qi Addons for Elementor, a collection of extremely useful widgets or addons for the popular page builder. What’s great about this plugin is that with a single installation (and a single payment) you get hundreds of features that can significantly elevate your WordPress portfolio, such as innovative sliders and carousels, fullscreen elements, typography effects, interactive carousels, flip boxes… All that plus various business, SEO and infographic elements.

In short, you will probably need some plugins, but you don’t have to add them all right away. As you build and promote your WordPress portfolio, the need for certain plugins will emerge spontaneously. Just make sure you’re using plugins that are regularly updated and maintained, and regularly uninstall the ones you’re no longer using.

Getting Your Portfolio Out There

Portfolio websites are specific as they’re mostly used as a sort of digital CV and, as such, don’t rely that much on organic traffic. However, there’s no reason not to work on your marketing and SEO to actually get some organic traffic and therefore reach more potential clients or employers.

First of all, you need to understand the difference between inbound and outbound marketing. Next, you will want to look into content marketing and see if perhaps you can enrich your portfolio with articles, blog posts, case studies, know-hows etc, anything that can provide value to the visitors and drive more traffic your way.

You should also regularly monitor the performance of your WordPress portfolio using Google Analytics and focus on the most important metrics, for starters.

As for SEO, we said earlier it’s a big and complicated field but one you can definitely master on your own, if you’re persistent. We suggest you check out our selection of the best SEO blogs and resources that regularly release useful and relevant content, as well as the list of 150 SEO terms every WordPress user must know.

Installing an SEO plugin, which we mentioned earlier, is a great way to make sure you’re on the right track in this department. Most of these plugins make sure you have your meta titles, meta descriptions and image alt text in place, which is essential for portfolio websites. Keywords are also important but since you probably won’t have much textual content, it’s perhaps a lesser concern. Proper URL structure, however, is important for each and every page of your portfolio so make sure you follow the best URL practices and guidelines.

Finally, don’t forget to promote your WordPress portfolio on social media, especially creatively oriented ones like Instagram, Pinterest and TikTok. Wherever you have a profile, link it to your website, and vice versa, using social icons.

We hope this article provided solid and actionable first steps into creating a truly memorable WordPress portfolio. Once you get it up and running, we hope you’ll let us know in the comments!

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 split screen is by no means a new technique. In fact, some of the earliest works of the silent film era featured this technique, used to present two actions or two situations within a single screen, divided vertically, horizontally, or even diagonally. In web design, however, the split screen layout has become increasingly prominent over the last five or so years, especially for hero sections. Let’s see why that is.

The Role of Split Screen

First of all, a split screen is an excellent way to convey two messages simultaneously. When used for the hero section of the homepage, split screen is what the users see first, and what makes the first and the strongest impression. Therefore, you want to place your most important messages – both textual and visual – right there. Being made up of two parts, split screen can help you convey not one but two messages, and also allows you to combine visual storytelling with plain text.

This sort of section structuring can also help introduce a streamlined, modular layout for pages, with content organized in blocks or sections for easier viewing. In addition, split screen sections can be animated to add dynamicity and increase engagement with the content.

From the strictly visual point of view, split screens, being inherently dualist, create a sort of positive tension between two juxtaposed parts, and when those parts are carefully calibrated and matched together, they can create a truly superb piece of design that complements the brand style and aesthetic.

Now, there are a lot of ways you can design a split screen section. It can be animated or static, symmetrical or asymmetrical, straight or skewed, simple or layered. It can contain video, interactive elements, CTAs, digital art objects or just plain images. The choice of content is dictated by the sort of website the section is used for, its context, content and intended effect.

To really get a clear picture of how a split screen can be used and what sort of effect it can create, it’s best to examine some of the actual examples of this sort of layout in use. That’s why we compiled this list of websites that feature different sorts of split screen and showcase its versatility in the best possible way. Here’s what we will be looking at:

Empty State

Empty State is a design studio, or rather a brand, that creates configurable lighting, developed by the London-based Cameron Design House. The website opens with a seemingly static hero section composed of image and text, however, as soon as we start scrolling, it reveals to be a split screen section, or rather a split screen slider, with the left and the right part moving in the opposite directions. There are five slides altogether, and once we go through all of them, we return to the first one, from where we can navigate further and explore the products, learn about the studio or reach out through the contact page. The palette is neatly defined and consists of warm greyish pastels combined with a bold navy blue. The dualism of the colors fits well with the balance provided by the split screen slider and its symmetricity, so the overall tone of the website is one of measure and skill.

Visionnaire

Visionnaire is a Toulouse-based casual clothing brand with a distinctively youthful and contemporary character. Their online shop offers a modern, colorful display of the available items, opening with a split screen hero section that introduces the current collection. In fact, the entire website is neatly sectioned – the topmost part is reserved for the news ticker, followed by a prominent header menu, and, further down the page, the product categories introduced in tightly-packed and symmetrically arranged fullscreen sections. The intensity of the palette and the densely arranged images are countered by a sense of order that comes from this split or dual arrangement of content, balancing the entire layout.

Letter

High-end financial services deserve high-end design, and that’s precisely what the banking and financial platform Letter got when they commissioned a website from the Bristol-based Green Chameleon agency. It opens with a striking split screen hero section with one side in white, containing hero text, and the other side with dark background, featuring the image of a credit card contained within a sharp-edged iridescent prism. The entire section communicates not so much luxury as class and wealth, with a touch of tech aesthetics. A scroll-initiated animation brings the right section to full width, as the prism breaks into a dozen small pieces, releasing the card. This could have easily been an intro video section, but the designers smartly made it a user-triggered animation instead, which certainly required more effort and time but yielded a much more exciting result.

Restore Hope Appeal by Compassion

Compassion is an Australian Christian charity that organizes child sponsorship programs and other charity and outreach efforts. Last year, they launched Restore Hope Appeal, a website dedicated exclusively to collecting funds for disaster-stricken areas around the world. The website opens with an intro page consisting of a split screen with two quite opposing sections – one in a beautiful sky blue, communicating hope and compassion, equipped with donation buttons, and the other dark, serious, with devastating images of disaster-affected areas, and a large circle inviting us to find out more. This excellent standalone page contains everything we need to get informed and make a donation, and its visual appeal strikes as perhaps more elaborate than what we’re used to from charity and donation organizations.

Geoff Levy

The split screen layout makes a particularly good choice for cinema and video-related websites, as it offers a dynamic and immersive viewing experience and makes a strong impression. A good example of this use is the portfolio website of Geoff Levy, an award-winning Cuban-American film and video director based in New York City. His website opens with a beautiful fullscreen split screen, one side of which is static and dedicated to his photography work, while the other features a video background and links to Levy’s film projects. The division is neither fixed nor definitive, though – the proportions of the two sections change depending on the cursor movement. If we lean to the left, the photography section will expand, take up more room and display links to related works, and the same happens with the right section. For those who prefer a more conventional user experience, the page is available in a grid layout as well, accessed through a simple icon placed on top of the divider line.

Infrared

Infrared is a company offering spa services in Texas, with a particular accent on infrared sauna treatment. The website opens with a striking split screen hero section in an appropriate red palette, combined with pink, orange and other warm, intense colors that communicate heat and light. The left section offers a beautiful combination of large pink typography on a coral red background, and the right one contains the image of an infrared lamp used in saunas. As we scroll down, the split screen layout diversifies, changes color, assumes a lighter character and offers a series of textual information and images. Some of the sections are animated, mostly with slide-in animations, and occasional animated icons serve as delightful interface details.

Maxim Aksenov

Maxim Aksenov is a multidisciplinary designer and art director from Russia. His portfolio website represents a showcase of some of his most important projects, and is a fine piece of web design in itself. This single-page website is divided into numbered sections – it opens with an About section and then proceeds to the Work, which, logically, occupies most of the page. The introductory section, or a hero section if you wish, features a split screen neatly divided by a sharp and thin separator line. A blurry photograph of Aksenov is on the left, and a short introduction, alongside the logo, is to the right. After this initial section, we are invited to scroll further down and discover the featured projects. These too are presented in a dualist manner, with images on one side and white space on the other, giving the visuals a necessary breathing room and occasionally featuring brief text regarding the project.

Bennett Tea

Bennett Tea is a tea brand that, according to its own statement, has “the vision to be the world’s most respected private label tea company,” a goal that it aims to achieve by providing outstanding services and superior quality tea to discerning tea drinkers and connoisseurs around the world. The entire Bennett Tea website, and the tea store section in particular, represent a fine piece of web design, with a carefully chosen color palette based on reds, pinks and dark blues. The shop comes in a split screen slider layout, with the left side containing the image of the tea tin, and the right side offering information about the origin, aroma, flavor and texture of the tea. When scrolled, the slides change smoothly, one tea after another, as the image background consisting of geometric shapes changes order and colors to reflect the design of the tin.

Boynton Yards

Boynton Yards is a brand new science and innovation campus located in Somervile, Massachusetts, and one of the state’s largest campuses of its kind. This massive project consisting of lab and office buildings, apartments and a huge park area represents an ambitious endeavor whose promotion includes a modern, clean and informative website. It opens with a split screen section consisting of a hero image and hero text in white typography on black background. Serious and professional, the layout is free from superfluous embellishments and conveys perfectly the innovative, tech-oriented spirit behind the project. The text-image dynamic is maintained in several sections of the homepage, combined with text marquee, fullscreen images and even some illustrations. It’s a fairly straightforward design, typical of the tech and architecture niche, but a design done with skill and a great focus on balance.

Don Barber & Groom

Located in the heart of Athens, Greece, Don Barber & Groom offers superior barber and grooming services for men in a beautifully designed and decorated space, using the highest quality products. The website, which places equal focus on the quality of services and on the team that provides them, reflects the care and attention that the salon management put in all aspects of their work, including style and branding. A split screen hero section offers a glimpse into the salon’s interior on one side, while the other introduces the team, the salon motto and a welcome message in a text marquee. Elegant but unpretentious, the website takes on a character that, not being overly masculine, is meant for gentlemen, not macho types.

Combo

Much like its name suggests, Combo is an agency that combines a set of skills and services, from strategic consultancy to design and branding and from customer research to retail and product design. The website opens with a very simple, very minimalist hero section containing just the name of the agency. One click anywhere on the page reveals a split screen layout with a wide vertical band that serves as a separator and remains static as the page is scrolled. The left and right sections feature selected agency projects, presented in the form of photographs, videos, animations and illustrations. What’s interesting is that the individual project pages also feature a split screen layout, each side presenting different elements from a project, including a brief case study.

A.N. Other

The world of niche perfumes isn’t exactly known for stripped-down branding. On the contrary, in the majority of cases, these companies really go out of their way to create complex brand narratives with meticulously created aesthetics, to the point we sometimes find ourselves wondering what it is that we’re buying – the fragrance or the brand. That’s exactly what A.N. Other wanted to avoid. This Miami-based niche perfume house takes particular pride in its philosophy of “No Rules. No Limits. No Nonsense” and has a website to prove it. Far from austere or under-designed, the website offers a clean, finely styled and elegant display of the fragrances, their creators and their story. The split screen homepage features interchanging sections of images and text, minimalist and airy, with no unnecessary embellishments whatsoever. The split screen layout adds to the dynamicity of the page, making up for the lack of colors and interface details, and stays perfectly in line with the company’s ethos.

PenzGidroMash

Although so often featured in portfolio websites, split screen sections have found ample use across all industries and niches, including tech, manufacturing and construction. One particularly fine example of this sort of design is the website of the Russian company PenzGidroMash, specializing in manufacturing of systems and components for the oil, gas and petrochemical industries. The opening section introduces blue as the brand’s main color on one side of the screen, and an image of a large industrial tank on the other, conveying all the necessary brand information before the entire background turns dark grey and various content sections take turn one after another, introducing further information about the company and its activities and products. The industrial tank remains present throughout the website, animated to change place, rotate and zoom in and out. The entire design is precise, modern and easy to navigate, and does a great job at conveying brand identity.

Pandora

In another excellent example of split screen sections with video content, the award-winning production company Pandora created an immersive full-screen experience with two videos playing independently on each side of the split screen slider. The slides, consisting of video clips from projects and campaigns, change upon scroll, one side moving up, the other moving down. The smooth movement of the slider animation, as well as the video content itself, create a dynamic and quite impressive environment and help lure the visitor deeper into the company’s creative vision. The layout is rather minimalist – in addition to the fullscreen split screen slider, there’s a couple of navigation links at the top, very brief information about the projects, and that’s it. When clicked, the navigation links open in split screen as well – the new content takes up one slide, while the other keeps looping the video. Not only does this approach help keep the company’s work in focus, but it also assures a balanced and consistent atmosphere of the entire website.

F. Miller

F. Miller is a line of botanical skincare products based on the principle of “effective, utilitarian essentials,” and it’s precisely this principle that most likely dictated the design choices made for the brand website, especially “utilitarian.” While it’s definitely not stripped-down, the website is decisively minimalist, with a delicate, light palette consisting of off-whites and light blues. The layout is characterized by thin, sharp lines that divide the page into sections – the header and the footer and, most notably, the split screen section with a hero image on one side and text on the other. The lines give the layout a clean and serious look, while also accentuating the minimalist character of the page. Product images are also arranged in split screen sections, and this layout is present in individual product pages as well. The website has a sort of magazine feel to it, with clean geometric sections present throughout, borrowing perhaps some of the inspiration from the Swiss Style and its predilection for the grid.

Couro Azul

Couro Azul is a Portuguese company specializing in manufacturing of technical leather for the automobile and aeronautical industries. It is a rather impressive line of work and one that Couro Azul is very successful in, and that’s precisely the atmosphere and the message their website sets out to convey. After a fullscreen video intro section, the homepage splits in two – one side animated to display some of the brand’s most prominent leather products, the other continuing to display the teaser video from the introduction. The balance and contrast between the two sides lies not only in their arrangement on the screen but also in the interplay between a light and a dark background. This dynamicity between black and white is featured throughout the website, in other, differently structured sections as well, providing a coherent and consistent atmosphere.

Totême

Totême is a Stockholm-based fashion brand with a singular aesthetic that takes pride in the meticulous craftsmanship of its items and a superior quality of the fabrics it uses. Contemporary, minimalist and perhaps even a bit stern, the brand aesthetics are reflected in the website as well. Thin, neat lines separate the header menu items and most of the homepage content is presented in two split screen sections – the first one featuring an image and a video, and the other one with two images. The split screen layout is repeated in several editorial pages, with images and text alternating within the sections. Grid lines and geometric sections are present throughout the website, most notably in category pages and individual product pages. These lines communicate order and elegance and fit remarkably well with the brand’s ethos.

Capsul’in

In one of the most impressive examples of immersive interactive web design, the Paris-based Index Studio brings Capsul’in, a website created for the French manufacturer of aluminum coffee capsules of the same name. The website is paginated into six narrative units, covering design, engineering, customization, experience, specifications and contact. The interactivity is triggered upon scroll in a beautiful, smooth sequence of transitions. Each movement of the scroll prompts a new section to come into the viewport, and the sections themselves are geometrical, based on rectangles, and perfectly synchronized in terms of colors. While not all sections are designed as split screen (some of them actually serve a transitional or even decorative purpose), the split layout is the dominant one, presenting content that is relevant for the chapter it is featured in. As we scroll, the two parts of the split screen overlap, merge, slide in and out, zoom in and out in a beautifully orchestrated dance of elements, creating a stunning visual narrative.

Leandro Farina

Leandro Farina is a British photographer and art director working with interiors and still life, whose work has been featured in a number of renowned magazines and publications, from Vogue and Dazed to the New Yorker. His website is a stunning display of simplicity that stems from visual duality. It opens with a minimalist split screen, the left side empty and airy, containing merely a switcher where we can choose between viewing the Editorial or the commissioned works, and the right side displaying the photographer’s work. The right side scrolls vertically, with image backgrounds in meticulously arranged colors, while the left side remains still, providing a sort of homebase. When we switch to view the commissioned works, the division of the screen changes, so the vertical image slider is now on the left. As a beautiful exercise in simplicity, this website represents a perfect example of the power of the split screen.

Penumbra

Finally, it would be a shame not to mention our own predilection for the split screen. At Qode Interactive, we have used this particular slider layout a lot when designing our themes. One of the examples we’re most proud of is the landing page for the Penumbra theme. We wanted to make this theme available in two modes or skins – dark and light. The landing page features a neatly divided split screen that offers a preview of both modes and hints to some of the distinctive design elements that are present in both – the grid lines and a combination of chromatic minimalism and bold, bright, optimistic colors. When clicked, each of the sides expands but without pushing out the other side completely. This allows for the striking contrast to linger some more, before the user picks a mode and starts exploring.

Wrapping It Up

As we could see in all the stunning examples we went through above, split screen is a sort of layout that, when done right and applied properly, can represent an incredibly valuable asset for any website, regardless of the niche. We saw it in tech and industry websites, in cosmetics, fashion and photography – and it looked terrific each time, didn’t it?

The split screen layout can liven up a dull design, engage the visitor and add character to the page. If you’re looking for an exciting, elegant and striking device to open your website with, then you should definitely give split screen a go. There are a couple of things to keep in mind, though. First of all, conveying multiple messages and combining visually diverse content in two adjacent layout panels requires some skill, so this sort of design might not be a good choice for everyone. In addition, this sort of layout works best with minimalist designs. Content-heavy pages with split screen sections can easily come off as overbearing and the information you wish to convey may be lost in the clutter.

Experimentation with the paper form in web design has been around for quite some time. From grainy or noise texture to hand-written text and calligraphic forms, more and more web layouts resemble actual, physical designs on paper, often so much so they make us want to touch the screen to feel the paper between our fingers. These designs sometimes resemble greeting cards or notes, sometimes watercolor paper or a page from a book, and sometimes they are crafted to resemble posters – which is the style we’re going to investigate today.

The poster technique emerged in the early 19th century and quickly became a widespread advertising and marketing channel. Visual representation was always just as important as the message, so graphic artists, painters and typographers soon started creating elaborate, high-quality poster designs, many of which have become art history classics – just remember the famous posters by Henri de Toulouse-Lautrec, Jules Cheret and Alphons Mucha, for example. Art Nouveau, Secession and early Modernism gave some of the most incredible examples of poster art, and the technique continued to develop throughout the century, giving birth to notable styles like Constructivism, Art Deco, Object Poster style and the International Typographic style, just to name a few. Then came the Psychedelic style, Postmodernism, the Memphis Group and, of course, the 1980’s and computer graphics.

So, where are we today when it comes to posters? First of all, it’s vital to remember that the original purpose of the poster – to inform, advertise and propagate – has moved from the physical to the digital form. Today, we hardly even need actual paper posters. We have LED marquees, digital billboards and the internet instead. Poster art moved, to a large extent, to the web. And there isn’t a particular new style to speak of. Instead, what we are witnessing today is a glorious conglomerate, a melting pot of poster styles that reference the celebrated styles from the past, giving it a fresh polish in line with the times. Historical recontextualization of styles is present throughout all visual art forms, and the poster is no exception. More or less direct references, inspirational points and homages, combined with new design techniques and contemporary styles – this is the gist of the poster style in web design today.

So let’s take a look at some of the websites that incorporate the poster style in one way or another. We will be visiting:

Niccolò Miranda

Niccolò Miranda is an Amsterdam-based Italian designer and developer working in art direction, branding and motion design. He has received numerous accolades for his work and has worked with high-profile clients like Prada, AKQA and Awwwards. His portfolio website is an impressive display of design innovation, skill and imagination, and also a wonderful step out of the contemporary trends in web design. Conceived as a “paper portfolio” in digital form, the website looks and feels like a newspaper, with a distinct paper texture, newspaper-like columns and typography, and a lot of illustrations bearing a distinct poster quality. The style is a nod to fictional newspapers, most notably The Daily Prophet from the Harry Potter movies and The Daily Planet from Superman, a choice which dictated the sort of grid he used, as well as the typography. Miranda opted for illustrations rather than for photography in order to maintain the old newspaper aesthetic. The Work section explores the potential of tab based navigation and features reversed UI in a bookshelf style. The items are listed vertically and open sideways, allowing for horizontal scrolling, and the transition animations feature a torn paper effect.

Mamma Joyce Peppa Sauce

Hot sauces have been all the rage for the last decade or so, and sauce brands are literally impossible to count. With all that competition, it is vital to stand out, which is precisely what Peppa Sauce from Guyana set out to do with a fun, loud website that promotes a single product – Mamma Joyce Peppa Sauce. The dark blue background coupled with a very light pink for typography makes an excellent base for bold, almost flamboyant design that resembles old-fashioned posters for circuses and fairs, or perhaps, more fittingly, cure-all tonics that were sold door-to-door. To contribute to the poster quality of the page, the designer opted for oversized lettering, large icons, sections with text boxes with round edges and, most of all, the portrait of the originator of the sauce, the famous Mama Joyce, in a stencyl style, winking playfully and lovingly at the visitor. The website has a lot of movement going on, with different marquee sections scrolling in different directions, and it’s all topped with a photograph of the Mamma Joyce Peppa Sauce bottle just moving in and out of view.

Waka-Waka

There are websites that only hint quite discretely some of the elements of the poster style, which, in itself, is quite diverse as it is. For instance, the Los Angeles-based wood furniture studio Waka-Waka opted for a layout dominated by a logo in the custom-made Waka Sans typeface reminiscent of the International Typographic Style, aka. the Swiss design. The website opens with a loading animation that features poster-like design, or perhaps the first page of a newspaper or a catalog, which then zooms in and takes up the entire page. To contribute to the style, the designer opted for a highly reduced grayscale palette, interrupted only by the colors of the featured furniture. Inner pages, of course, are more conventionally designed and more practical, although those, too, feature certain poster features, such as flat, geometric color surfaces.

Nathan Taylor

In another excellent example of the diversity of poster aesthetics, the interactive designer and developer Nathan Taylor aka Nathan Tokyo created a wonderful, heavily referential portfolio website inspired by modernism in web design, with hints of the brutalist aesthetics. The muted color palette with noise texture makes one think of paper posters from the modernist era, and the Syne typeface, in bold style, which we discussed in our review of the best Google Fonts for 2022, also contributes to that character. The page is replete with little interactive sections, densely arranged in a geometric fashion, ranging from on-hover animations, to text reveal (also upon hover), objects that follow the cursor, and so on. Speaking of cursor, it’s one of the decisively brutalist elements in this design – a slightly oversized arrow with bold outline turns into a Mickey Mouse hand when it touches certain sections, and in some it even turns into the playful surfer “Right on!” hand gesture. The vintage quality of the design is based not just on the palette and the lettering, but also in details hinting to iconic objects from pop culture’s past, such as analog synths.

Sea Harvest

Fishing is one of the oldest trades in the world, and one that has often been associated with hardship, impoverished oceanside communities and simplicity. These days, however, fishing is far from a poor man’s industry. Still, a lot of the aesthetics associated with the trade have been maintained, as we can see in the brilliantly designed website for the Australian fresh seafood market, Sea Harvest. The homepage is designed in a minimalist manner, with thin lines dividing the layout into geometric sections, bold, headline-like typography, hand-drawn illustrations of fish and a light background with a paper texture. The entire layout feels like a simple paper poster taped to a telegraph pole in a remote seafront village, or, better yet, like a paper newsletter handed out in ports, as the paragraphs invite the user to “Read more on page 3.” This is subtly contrasted with certain modern interventions – for instance, the typography changes color from black to blue upon hover, and a marker-style drawing animation circles the menu items, also upon hover. It’s a masterfully executed, simple yet striking design that successfully unites hints to the trade particularities with modern web design demands.

Lamanna Bakery

Now, let’s revisit one of our old acquaintances which we discussed in our article on innovative hero typography. Toronto’s famous Lamanna Bakery is known for extravagant menu items, such as the Big Slice (which is an euphemism as the slice is not big but ginormous), as well as an array of decadent, indulgent desserts that combine Italian and North American culinary traditions. But enough with the munchies – let’s take a look at the inspiration behind the Lamanna website. Resembling a poster announcing a big game or perhaps even a circus, the design bears a playful, fun character imbued in humor and exaggeration. Huge yellow typography on the bright red background references the colors of the basic pizza ingredients – tomato and cheese, and an array of icons and illustrations reference that fun, exciting period of the late 1980’s and early 1990’s, bringing in mind some of Spike Lee’s visual iconography. Some of the sections feature a background in two shades of pink in wavy, psychedelic forms, which may be a hint to the classic psychedelia posters, and also a reference to cake frosting or ice cream. The poster-like design is occasionally broken with fullscreen photographs of food, just to remind the visitors exactly what sort of indulgence they’re in for.

Cevitxef Bilbao

Cevitzef Bilbao is a true mix of Hispanic and Latin cultures in one pot – a team of Venezuelan chefs preparing seafood Peru-style, in Bilbao, with the name and a lot of identity in the Basque language. Their main focus is ceviche but they also offer superbly cooked scallops, shrimp, fish and soups. The website is a poster-like celebration of typography and images, with fonts in an array of different styles and sizes. The Univers Light Condensed and Warnock Bold typefaces are used in both filled and outlined versions, in small, medium and large styles, occasionally in marquee, or with hover animations. This bold combination of fonts brings to mind design created for print, not web, which adds a distinct poster-like quality to the page. Motion and layout design with a variety of densely stacked sections, on the other hand, contribute to a supremely contemporary character of this website, which received the Awwwards SOTD recognition in 2021.

Kikk Festival 2021

Using poster design for websites promoting events, particularly festivals, has been a huge trend for the last ten or 15 years. Smaller indie festivals first started tapping into the 1970’s psychedelic poster aesthetics, and major festivals and event organizers soon jumped on the bandwagon. Today, we can see this sort of design for events of any kind, from food to tech gatherings. The website for the 2021 edition of the Kikk Festival, an annual event focusing on digital creativity and taking place in Wallonia, Belgium, also features a layout in a poster style, but without resorting to direct references or derivative visual elements. Instead, it is an imaginative, inspired and witty exploration of surrealist and vintage motifs scattered around on a grainy, paper-like background. The mood it sets is simultaneously retro and contemporary, and the main motif, a stairway that leads through the festival’s 10-year mark and beyond, to the future, communicates progress and a sense of optimism for what the future has to bring.

Kazuki Noda

Kazuki Noda is a Japanese visual designer and art director, whose portfolio website is one of the shining examples of grid-based web design. And it’s precisely the grid lines that lend the layout a particularly poster-like quality. Drawing inspiration partly from the Swiss design style, Kazuki created a beautiful, meticulously designed website full of innovative, delightful details and interactions, from the round cursor and animated typography to the color switcher that changes the two main colors of the layout. The background features a grainy effect that resembles both the television static and the texture of a quality paper. Subtle moving shadows give the design a realistic, physical feel, and the Lato typography, sometimes hollow, sometimes vertical, along with sections with rasterized or hachure patterns contribute to the poster quality of the page.

Lions Good News 2020

The poster inspiration for a web design sometimes comes in the form of subtle visual hints or select details, and sometimes it takes up the form itself – like in case of the Lions Good News 2020, a website created in order to celebrate 10 years of Cannes Lions, the prominent PR and digital marketing festival. The designers wanted to place a particular focus on the past, the history and the time itself, which dictated the choice of a nostalgic, vintage tone, achieved using monochrome contrasting and colors typical of flyers and newspapers from the 1950’s. The showcased projects are presented in the paper form, with noise and even folds and wrinkles, animated to mimic a wind effect. Whether they’re posters or newspaper pages flying across a cityscape, these elements carry a strong nostalgic quality, which was the initial concept behind this project.

Wrapping It Up

One of the biggest appeals of the poster style is that its mimicking of the physical quality of paper and paint, as well as design that is typical of print, rather than web layouts, basically transcends the medium – it reaches from one realm into another. For some, this transcending brings nostalgia for the past and simpler times. For others (typically younger audiences) it reflects the playfulness and the style experimentation typical of contemporary pop culture. And then there are all the references and familiar motifs that not only serve as visual cues but also spark delight that comes out of recognition of cultural and historic commonplaces. Finally, poster style in web design is also a testament to the designer’s good taste and knowledge of design history, which contributes to the appeal of the entire website and, by extension, the reputation of the brand.

We hope that this little trip to some of the best examples of poster style in web design has inspired you to dig deeper into this trend and perhaps explore its visual potential in your next project. If you do, let us know how it turned out!

There’s something about liquid metal that just mesmerizes. A steady flow of silvery, viscous fluid bears a distinct ASMR quality, with its pristine, spotless surface and motion that seems to confuse our brain – metal is supposed to be solid, right? Okay, we all know there are some not so solid metals, like mercury. We also know that many types of metal can be melted into a liquid form. So we can’t say it’s something supernatural or uncanny, and yet, we can’t take our eyes off it.

Our fascination with liquid metal isn’t a new thing, but it’s definitely an “it” thing at the moment. Flat and static designs have long stepped down and surrendered the throne to weird, experimental and innovative design solutions – just think of the acid graphics revival and all the microtrends that sprouted from it. The dissemination of content on social media is moving at the speed of light, pumping in hundreds of new concepts at a head-spinning rate, delighting users but perhaps putting designers in the awkward position of always having to churn out new, exciting, boundary-pushing projects. To do this, they often reach back into past cultural and artistic traditions looking for inspiration.

One possible source of inspiration for this trend is certainly the visual tradition of science fiction. Liquid metal can be seen on quite a few book covers from the genre, especially paperbacks, where designers really used to go wild. From spaceships to cyborgs, there was a lot of glimmering iridescence of the smooth, flowing metallic surfaces. The aesthetic was soon transposed to cinema – one particularly familiar example is T-1000, the bone-chilling shapeshifting assassin from James Cameron’s cult Terminator 2. The way he can turn into a puddle of liquid chrome only to assume human form again and brutally annihilate whomever is in his way remains for many the single most striking visual from the movie.

Then, of course, there’s metal music with its array of subgenres, some of which, such as progressive metal, continue to nurture a predilection for this sort of aesthetics, which, in turn, stem from comic books and graphic novels. And let’s not forget the 1990’s and the obsession with speed, power and technology.

Actually managing to trace the inspiration back to its origins is almost an impossible task. As is always the case in pop culture, there has been so much borrowing, recontextualizing and reinventing of certain motifs that the pathways are too difficult to untangle. Let’s return to the present moment instead.

A quick stroll around Behance looking for chrome-based design yields some remarkable results and shows that there are quite a few talented designers exploring this style. The Italian motion graphics designer Sic Est, for example, did a wonderful job with applying liquid metal textures and CGI for the Versace Timeless SS18 campaign, while the Beauty Alchemist editorial for Schön! Magazine explores liquids in the context of makeup. The liquid metal trend is so hot right now you can even get chromatic toolkits to use for your next design.

Instagram is a likewise rich source of inspiration when it comes to chrometype and liquid metal effects. The #chrometype hashtag has over 77k posts, there’s an account dedicated entirely to this style, and there are, of course, liquid metal filters you can apply to your stories for a weird, futuristic or cyborgian look.

Finally, it’s worth remembering that, in the last decade or two, mainstream pop music has been the single most influential herald of visual trends and aesthetics. As artists strive to offer cutting-edge, innovative visuals accompanying their material to help build their persona in a holistic way, a lot of what we see on album covers and in music videos is immediately picked up, emulated and reworked, often finding its way down to the most mundane levels, such as Hot Topic garment items and so on. When it comes to liquid metal, we have seen it around a lot, most notably in the artwork for Lady Gaga’s Chromatica, Rosalia’s single Aute Cuture and Rina Sawayama’s tour merch.

Today, however, we’re going to focus on some of the most successful examples of the liquid metal and chrometype trend in web design. Here are the websites we’re going to visit:

Thibaut Foussard

If Thibaut Foussard doesn’t move you to pursue a career in creative development, perhaps by signing up for a couple of online courses for the job, no one will. This French developer and JavaScript enthusiast created for himself a gorgeous portfolio website, a modern layout with geometric motifs and light that changes gradually, from dark to light, as we scroll down and explore the website. Thin, sharp lines and circles are counterbalanced by large, irregular drops of dark liquid metal, gently floating upwards. The entire page has a grainy texture, and some of the largest drops (or blobs) also have a surface that’s not perfectly smooth. This texture adds depth and a life-like quality to the design and wraps it in a distinctive, cinematic atmosphere.

Lunch Concept

A brand that we already wrote about in our exploration of innovative hero typography, the concept store Lunch Concept opens with a stunning video section with huge metallic typography across. Despite mimicking cold, sharp metal, the type has a slight sensual quality to it, perhaps because of its matte texture and the curve connecting the letters L and N, or perhaps because of the underlying video that lends some of its atmosphere to the logo as well. Even more than fluidity, the matte black buff of the letters communicates tactility and texture, while the sharp point of the letter C adds a bit of an edge to the character. The letters look bendable and hollow on the backside, and the overall effect is a desire to touch, explore and play around with the logo.

Hanai World

Marketed as a mixed reality social platform, Hanai World is set to deploy in late 2021 and is planned to involve a community of creators, developers and tech companies working together to provide synchronous physical and digital experiences, primarily in the field of entertainment. For now, the only glimpse into the platform (and the movement, as the creators call it) is the website calling for new team members, creators and developers. Judging from the design, it’s going to be one modern, future-oriented environment for creatives and developers to basically compete with each other in who can deliver a more innovative experience with a heavy emphasis on aesthetics. The dynamic background in a pastel gradient gives off a vibe of cosmic melancholia, a mood supported by a number of objects, mostly spheres, made in liquid metal, orbiting around each other or simply floating in and out of view. A pair of liquid metal hands reaches out from windows to some parallel worlds, welcoming new members. The entire composition supports the idea of creating new universes within our existing one and bypassing the walls between physical and digital realms.

&Walsh

&Walsh is a New York-based branding and advertising agency with a distinct, modern vibe and a dedicated but playful approach to work. In addition to providing an excellent illustration of the liquid metal trend, their homepage also serves as proof of how important context is in web design. The agency logo consists of a large metallic ampersand in calligraphic style, with matte black surface. Alone, the logo could even be perceived as classic, as it appears to be made of wrought iron. However, certain elements of the type design here, the way the logo is nested in a modern layout and, most of all, the video section underneath it all give the ampersand a more contemporary feel, and its material and texture don’t feel as vintage as they would outside of this environment.

Speaking of the video section, it too represents an inspired investigation of the potential of liquid metal in design. The initial sequence features metallic shapes that flower and spread on a woman’s face, forming the ampersand, and then cuts to a sequence representing a sea of molten metal, from which a lava-like mass emerges, then forms, again, an ampersand, which then sinks back into the fluid, releasing a cloud of vapor and smoke. It’s a fine piece of branding that simultaneously shows the multifaceted nature of liquid metal, showing it doesn’t always need to be high-gloss and gleaming and doesn’t have to pertain to a dystopian, futuristic or high-tech narrative.

Yuta Kawaguchi

Yuta Kawaguchi is a Japanese designer with an unmistakable, edgy style. His work is known for 3D type forms that feel sharp as a knife, or perhaps a shuriken, as many of them feature forms inspired by this weapon. His designs are usually set in bold, ultra-vivid environments with soylent greens, radioactive yellows and post-atomic blues. The typography style borrows inspiration from the 1980’s and 1990’s B-production action movies and horrors, as well as from heavy metal iconography and hip-hop culture. It’s a radical, loud and aggressive mix of influences, with each piece carried out to perfection. His liquid metal designs are particularly striking, as they have a distinct physical quality – they look like they could cut right through the screen, and their gleaming surfaces reflect colors that speak of dystopian times.

Blobmixer

14islands is a Swedish creative design and development studio with a number of major projects and awards under its belt. The studio also creates fun, interesting projects for no apparent purpose other than to delight the users and, well, showcase its team’s skills. One such project is Blobmixer, an online tool (or toy, if you wish) for creating 3D blob shapes which can be viewed and interacted with in VR, as well as downloaded or shared with friends. The tool is extremely simple and intuitive, and can be used by anyone. In addition to the tool itself, the website features a showcase of some of the best blobs made with it. Some of them feature a liquid metal texture, and one is even named after the above mentioned T-1000. Other featured materials include water, plastic, lava, slime, liquid makeup, and so on.

Twomuch Studio

Here’s a design that seems to be all over the place and yet in some sort of weird harmony. The Twomuch Studio website opens with a cluttercore-ish mess of floating objects on a sterile white background, complete with a corner menu with what appear to be Patrick Starfish’s eyes. The assortment of floating objects includes a few screens, some bricks, a giant pencil, a megaphone, and several objects that are hard to identify. As they turn around, their surfaces transform from plaster-like white to liquid metal, first matte, then iridescent and shiny. And behind all this, the barely legible metallic logo of the studio, also shifting and changing color and texture as its metallic fluid flows and swells. Oversized, pixelated cursor arrows float alongside the 3D objects, too, and combined with the menu, add a brutalist touch to the design.

Henri Heymans

For his 2021 portfolio website, the independent front-end developer Henri Heymans opted for a page centerpiece that explores movement and texture using liquid metal as the medium. A planet-like metallic orb rotates around itself in the hero section of the website as its uneven, grainy surface flows and melts, resembling something between fine sand and TV static, while its sharper lines bring to mind smooth passages between colors in a gasoline rainbow. The orb is never still – it’s either turning around itself, or following the cursor movement. The page then proceeds to a rather conventional display of selected works, so the orb serves as an emblem of the author’s skills and also as a striking opening of the website.

Studio Push

Brutalist design and liquid metal seem to be a particularly hip combination right now. It actually makes sense – brutalism is about exaggeration and irreverence, and chrometype, being not only flashy but often also hard to read, fits into the ethos perfectly. The international multidisciplinary Studio Push from Paris, working with creative coding to create boundary-blurring graphic and typography experiences, is a good example. The homepage features a stripped-down, basic layout with essentially just plain black text on white background and gives off a raw vibe reminiscent of the earliest web pages. This decisively brutalist aesthetic is contrasted or, better yet, complemented, by a large marquee featuring the studio logo in chrometype, combining the liquid metal technique with the graffiti style, and also giving off an impression of text that was made by dripping thick fluid from a paint tube. The logo somewhat interferes with the reading of the text, and the experience becomes even more unfriendly when the text is clicked upon – clicking basically anywhere on the page prompts an image from a project to open, and further clicking opens new images without closing the previous ones. The result is an unnerving heap of images and text, complete with the logo marquee that never ceases to move across the screen. It’s a cheeky approach to design that basically yells “I don’t care about UX” but, as such, sparks curiosity and, paradoxically, a degree of appreciation.

Sofia Papadoloulou

Sofia Papadopoulou is a Greek visual designer and art director who creates immersive, forward-thinking digital experiences. Her website embodies one of the principles she pursues in her work – to “uncomplicate and beautify.” It is a dark, elegant, modern design, featuring grey text on a black background, with a single star cursor that sheds light on the text it hovers upon, revealing that, despite the darkness, the sentiment behind the design is one of optimism and joy. The central, albeit discrete element of this single-page website is an animated 3D object, an irregular sphere with a wavy surface, made of a matte black material that resembles metal, perhaps iron, but it could also be a smooth piece of lava stone. As we scroll down the page, the object transforms, flows, morphs under a changing light, but never does its presence or its transformation take focus away from the main content – the text.

Wrapping It Up

Animated, static, chrome-like or matte, liquid metal is bound to add that extra oomph to a design. Sure, it can’t possibly be a good choice for just any website and any brand – as we saw, liquid metal needs a specific context in order to work. While many would automatically associate this style with futurism, it’s important to remember that at this point there’s really nothing futuristic about liquid metal. Retro-futuristic, then? Sure. Future-nostalgic? Definitely. The world we’re living in right now is in trouble and hauntological melancholia has been a pervading concept ever since we realized just how deep the trouble was, which accounts for so many derivative aesthetics and seemingly anachronistic references to past trends and concepts. But liquid metal in web design is more than just a nod to a cool past aesthetic. In web design, metal, or really any other matter, is free from the limitations of its physical form. It can shift, bend, drip and melt in any possible and impossible way and, as such, it’s an amazing resource for designers looking to imagine, construct and direct their own vision of the future, bright or bleak.