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!

Typography plays an important role in web design, and the right font combinations can greatly enhance your work. However, finding optimal fonts for your projects can be a challenging affair. You may stumble upon the typefaces you like randomly while reading an online magazine or looking at a web poster. But even after you identify a font, you may find it hard to know where to download it from, with so many typography websites around. And as typography is an important design element, not only a matter of preference, it’s essential to get it right.

There’s plenty of websites to download fonts from, but it’s hard to know which sources to focus on.

To save you from having to crawl through countless web pages, we’ve compiled a list of 13 websites that pack high-quality fonts you can use for personal and commercial projects.

Google Fonts

Google Fonts is among the most popular and most used font resources in the world. It’s an open source library, with an impressive catalog of 980 fonts that can be used in 135 languages. And you can get them all for free and create some stunning Google Font combinations for your site.

To find a font to your liking, use the Search option at the upper left corner of the page. There are also multiple Categories to choose from, such as serif, sans serif, handwriting, etc. You can also activate additional search parameters such as Language, as well as Font Properties (font thickness, slant, width). It’s also possible to preview how your content would look like written in multiple different fonts. The previews are displayed across the screen. Type in letters of the alphabet, sentences, paragraphs, numerals, and your own custom content.

As you hover over a specific font, you’ll see that you can modify the font weight and the font size of the previewed content. There’s also an option to sort fonts by Trending now, Most popular, Newest, and by Name.

To select a font family, click on the + sign in the upper right corner, in line with the font’s name. When you open the Selected Font Family window (at the bottom right corner of the screen) you’ll notice there’s a code you can use to embed the font into your webpage as well as the code to specify in your CSS. There’s also the possibility to modify the font weight, as well as to choose between several languages, depending on the font. For instance, if you select Open Sans, you can choose between Cyrillic, Greek, Latin, and Vietnamese.

Google Fonts also lets you choose between light and dark backgrounds, as well as to view fonts as a list or in grid.

Font Squirrel

Font Squirrel is a great website for discovering free fonts that are ready for commercial use.

Under the name of each font you’ll notice several symbols.

The icon of the computer stands for commercial desktop use (for commercial graphics and documents). The globe shaped icon is for embedding the font in your website with CSS. The one that looks like a Kindle is for embedding fonts in eBooks and portable documents. And the one that looks like a phone is for embedding fonts in apps and software.

If an icon is dark, that means you can use the font, and if it’s light, then it’s illegal to commercially use the font.

Even though it’s said that all fonts on Font Squirrel are free, in their FAQs the authors suggest you still carefully read the license for each font, just to be on the safe side.

Browse the font collection by name, by tags, licenses, size, language, etc. You can also search through the Recently Added, Most Popular, Hot Today, Hot Web Fonts, and Almost Free categories.

Some of these fonts can be downloaded from Font Squirrel directly, while in case of some other fonts, you might get redirected to other websites.

What’s really cool about Font Squirrel is their Font Identifier. When you see a picture with a font you like somewhere on the web, upload that image to the identifier, and it’ll try to match the font with one available on Font Squirrel.

Fontspace

Browse the huge font assortment on Fontspace and find the perfect font for your next project.

At the moment, Fontspace comes with more than 64k free fonts to choose from, and all of them are legally licensed. There’s a myriad of font tags you can go through to find the font that best fits your requirements. Alternatively, you can also just browse Popular and New categories, or jump into the unknown by checking out the Random tab.

Some fonts are intended for personal use only, but if you tick the Only 100% free fonts box, Fontspace will show you the fonts that you can use for all kinds of projects.

It’s possible to preview the content as well, simply by typing in words, characters or numbers in the designated field. The size of each font can be modified right on the spot, as well as its background color.

By clicking on a font’s name, you can read some additional info about it, or leave a comment to the author (to do this, you need to create an account).

To download the font, you don’t even have to click on it, nor do you have to register on the website. Simply press the cloud-like icon with a downward-pointing arrow, and your download will start straight away.

Befonts

Another great font resource for all creatives is Befonts. It features numerous fonts, some of which are free for personal use, while others are free for commercial use as well.

By clicking on a font family, you’ll be able to check the font format and the license. The preview option is available, too. What stands out here are the images showing the selected font family in action, so you can easily picture what kind of project you could use that font for. There’s also the Check out more button, that takes you to the author’s or to the source website, where you can find even more info on the font.

At the top right corner of the page you’ll find several categories to choose from – Basic, Display, Script, and Miscellaneous, with each category containing several sub categories. Browsing fonts by keyword is also enabled.

DaFont

DaFont is a great fonts source available in 6 languages.

The platform has an impressive category system, with a plethora of font categories to choose from. This is an important feature for all designers, as it facilitates the process of finding the appropriate font for a specific type of project.

You can browse fonts by alphabetical order, themes, authors, the countries they come from, etc. When you select a category, it’s further possible to sort fonts by different criteria, such as popularity, name, or to list the latest font additions first. By clicking on More options in the filter, you can choose to list only 100% free fonts, those that are free for personal use, etc.

Of course, it’s possible to preview any word of your choosing and to adjust the font size. To download a font, press the Download button. Fonts come packed as .ZIP files, and to get them, you don’t even have to register on the website.

FFonts

FFonts currently packs a whopping 104,567 fonts and a whole bunch of font categories to explore. the categories are listed on the left-hand side, while the font previews take up the center part of the screen.

Upon selecting a font category, you can order fonts by name, newest added, or top downloaded.

Once you select a particular font, you’ll get more info about it, and you’ll also have the option to preview content using that font. There are also all kinds of image previews showing you what the selected font looks like in different types of creative scenarios.

FFonts also features a Font Finder, which helps you find a font from any image. Just like on Font Squirrel, all you have to do is upload an image containing the font and FFonts will help you identify it.

Free Script Fonts

When you’re in need of script fonts, the Free Script Fonts website is an excellent solution.

Most fonts are free for personal use only and can be downloaded via Dropbox. To use them for commercial purposes and to get the full version of any font, you’d have to pay an amount determined by the font author.

Fonts are divided into 8 categories – Bold, Display, Fancy, Feminine, Heart, Logotype, Kids, and Wedding Font. There are also multiple labels (placed at the top of the screen) for you to browse through in search of the font to your liking (even more labels become visible once you select a font). You can also view fonts by using a specific keyword, depending on the type of the project you’re working on.

This website also features Adobe XD Resources, and most UI kits and icons can be downloaded for free.

FontsArena

The FontsArena website features an abundance of gorgeous fonts. Some are available for personal use only, and others for commercial purposes as well.

As on previously listed websites, you can search for a font by keyword, or by category. Some of the available categories include – Best, Variable, Sans, Serif, etc. You can preview any word you like before purchasing the font. All fonts come with descriptions, where you can also check the font license, which languages the selected font supports, etc.

There’s more than just fonts on the FontsArena. You can also read articles on font-related topics, and get the latest typeface news.

Pinspiry Fonts

Pinspiry Fonts comes with an extensive catalogue of serif, sans, slab, script and display fonts you can download free of charge.

Keep an eye on the Weekly Freebies tab, that features commercial fonts you can get for free but only during that one week. When in need of inspiration, check out the Inspiration tab that packs some interesting fonts collections, such as The 10 Best Free Vintage Script Fonts of 2019, and similar collections.

When you see a font family you fancy, click on it to see it in action and to check how much value it can add to your designs.

Besides fonts, this website offers other design resources for free, such as templates, mockups, graphics, photos, etc.

1001 Free Fonts

Don’t be fooled by the website’s name. 1001 Free Fonts features way more free fonts. In fact, there are more than 2300 pages filled with any type of font you can think of.

You can enter your text at the top, adjust the font size and the color, and then scroll down the page to see what the content would look like with each font.

To find a particular font, use the search option. Alternatively, view New and Top fonts, browse them alphabetically, or go through multiple available font categories.

Most fonts on the website are free, but some are free for personal use only, so if you’d like to use them in commercial projects, you’d have to buy a commercial license.

Unblast

Unblast features a mesmerizing selection of design resources, such as mockups, icons, vectors, and of course, fonts.

Both free and premium fonts are available, organized in several categories: serif, sans serif, display, script, condensed, vintage, and more.

The search bar is placed at the top of the page, so you can look for a font by a specific keyword. Other design resources will also appear in results. To find fonts that match your keyword, look for the Fn mark beneath the picture.

Even though you can’t preview your content using a particular font, there are image previews which illustrate how each featured font looks when applied.

Abstract Fonts

Abstract Fonts is yet another grand source of great free typefaces.

Fonts are organized in 62 categories, but there are some that are uncategorized, so make sure to check them out as well. Browse fonts alphabetically, check out the new and popular tags, or look for fonts by their designer. Of course, if you know what you’re looking for, use search. There’s also the custom preview option at the top of the page.

Some fonts are free for personal use, others for personal and commercial. That’s highlighted below the name of each font, so pay attention to this before downloading any fonts.

The League of Moveable Type

The League of Moveable Type advertises itself as “the original, the first, the open-source font foundry.” Back in 2009 when it was founded, the web was still relatively young and the browsers hardly managed more than 10-12 web-friendly fonts. When major browsers started working towards enabling custom rules for fonts in stylesheets, the League decided to start offering high-quality, open-source fonts that people around the web can not only use, but can check them out “under the hood” to see how fonts are actually made, and start creating their own.

Their catalog currently consists of some 17 fonts with various styles, which can be either examined (their source, that is) or downloaded for free. For those wishing to support the work of this remarkable foundry, there’s a handy donations button.

The League of Moveable Type is a favorite of many major brands and media outlets, most notably Discovery, Warner Bros, WHO, Pitchfork, Wired, Subway and Instagram.

Final Words

Regardless of which of these 13 websites you visit, you surely won’t leave empty-handed. Whether you’re on the lookout for fonts for personal or commercial use, these are definitely the most reliable places to find what you need.

And remember. You don’t have to always go for standard, overused typefaces. Each website from the list stands as a great source of all types of fonts and typography inspiration, so don’t be afraid to try something new and fresh in your work.

No matter what kind of website you are running, chances are you are hosting content in multiple formats. Also, whatever else you are doing, you are also likely working on improving your website and making it work better for you, your staff, and your visitors. How does the format you store your files in affect your website‘s performance or its user experience? And where does the lossy vs lossless dilemma figure into the whole story?

As is so very often the case, there is no simple answer. The question of whether lossless is better than lossy or vice versa depends largely on what the file is supposed to be used for and what it does on and for the website in question. To fully examine the issue, we will be taking a step back first. We will discuss the difference between lossy and lossless formats, as well as some typical use cases, before returning our verdict. We will spoil it for you in advance, though: it really does depend and there is no one single answer.

Here‘s what we‘ll be talking about:

What Is the Difference Between Lossy And Lossless

First things first: what is the difference between lossy and lossless? Well, it‘s all down to encoding. Encoding is the process of converting analog input into a digital signal and storing it in a format readable by computers – a file. This file is then decoded and displayed for website visitors using a browser.

But this is already several levels of abstraction beyond the thinking of the casual internet user. Let us consider photography, for instance. A photograph is basically captured light presented as an image. In order for it to be digitized as a computer file which can be stored, copied, edited and displayed to website visitors as an image, it needs to be parsed in a way understandable to machines – rendered into ones and zeroes, if you will.

This is what encoding is all about: converting real-life information, in this case an image, into an electronic signal.

Inevitably, some information is always lost – real life imagery cannot be infinitely accurately mapped to a finite grid of pixels, for instance. One can never get out quite what one puts in. Therefore, there is no truly lossless encoding. But the difference between lossy and lossless compression is how much information is lost.

With lossy compression, the file size is the key. Lossilly encoded files do away with the absolute most they can, making for a tiny, low quality file.

As far as lossless compression is concerned, the goal is to keep the high quality of the original media file. This means a greater level detail is present, but the file size is also generally greater.

The terms lossy and lossless mean the same in the context of image, audio, video, and other media files. Throughout this article, as in the example above, we will be using image files as an example, but the principles apply.

When Are Lossy Formats Used

When optimizing image files for the internet, one is usually thinking about reducing the size of the file. In this case, lossy compression has several advantages: your images can often be reduced to mere kilobytes of data, conserving storage space. If you are stuck for storage, you might want to resort to lossy formats in order to do more with less.

There is another important advantage to small file sizes – website loading speeds. A lot of the time, lossy media is completely fine. Most times you don‘t need high-resolution images for your website graphics, for instance.

So, when are lossy file formats used? Most times. They load faster and they get the job done.

When Are Lossless Formats Used

As we‘ve mentioned before, some degradation is a necessary product of encoding. With lossless formats, you get as much of the data as it is possible to save. This means that the quality of the media encoded is very good, but that goes at the expense of size and speed. Since the goal is to preserve as much of the original input as possible, lossless compression often only means slightly slimmer files, which means slower loading times and greater file sizes.

However, maybe lossless media is just a feature of your website. Maybe you are hosting an archive of rare old video stock for filmmakers and documentarians, or high-resolution scans of Cold War era military maps for history nerds. In that case, you really need the best possible quality for your media. However, loading speed is related not only to your visitors’ user experience – it is a question of performance. Slow loading may cause more than just frustration in visitors, too. If they leave the website before it even loads, your bounce rate will be adversely affected, and that may in turn have an effect on your SERP ratings.

This means that you need to take the adverse effects of using large files on your website and try to mitigate them.

Lossy vs Lossless: Final Verdict

Lossy. Definitely.

If you thought that’s suspiciously simple, you are right.

As we‘ve said before, lossy formats mean lower media quality, but most often it does the trick.

So, lossy it is.

Unless your entire concept revolves around high-quality media files. In that case, you have to go with lossless.

Regardless of the concept, though, sometimes you just need one large file or two to achieve your website‘s purpose or design vision. In that case, you need to do your best to avoid it adversely affecting your visitors‘ experience of your website.

A thing you can do, in the case of images, is not make your visitors load all your images at once, but rather offer them an image gallery with clickable thumbnails. The thumbnails are quick to load, and the visitors will know to expect a slower loading time for the full-size image. In the case of video or audio, you may offer compressed versions as demos which load with the website, and download links for the full versions. Most websites host video externally, anyway.

In Conclusion

As you can see, we can‘t offer you a straight answer. It all depends on what you wish to use the media for. Need some background music? An .ogg or .mp3 will do just fine. A .flac file will take ages to load, but is indispensable to audiophiles and might be appreciated by sound engineers. Want some fun ornamental graphics for a vignette on your website? A tiny .png is probably fine. Hosting digital photos? A high-resolution .jpeg (or .jpg) is a must. Consider your options with regards to server space and your website‘s performance, and make the choices which work best for you.

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

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

Quick Tips for Designing Perfect Online Case Studies

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

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

Juicebrothers by Lama Lama

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

Art of Swissdent by Creative Nights

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

Max Shkret by Zhenya Rynzhuk

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

Mercado by Loer Architecten

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

Self Scenter by Ultranoir

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

Fontshare by Wemakefab

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

More & More Nespresso by Playful

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

Bian 2016 by Baillat Studio

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

Prada Employees Online Store by Niccolò Miranda

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

Ortovivo by K95

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

Obys Agency Typography Principles

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

Komuso Design by Tubik

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

The 92 Group by Humana Studio

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

DreamHaus by WØRKS Studio

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

Topline by Parsons Branding

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

Weekend by Hello Today

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

Posted by Fuge

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

Decathlon App by Fuego Camina Conmigo

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

Unstuck by Violet Office

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

Wrapping It Up

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

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

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

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

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

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

Columbia Containers

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

Fetch Worldwide

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

Carboflotta

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

GBH International

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

Fertighallen

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

Passer Group

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

Rzonca

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

Phoenix Mecano Kecskemét

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

Vesam Group

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

Ambrox

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

Armor

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

Pardue Masonry

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

Stampa Steel

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

Energy Competence Center

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

Firber Engineering

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

Entera

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

Camacho Engenharia

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

Wrapping It Up

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

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

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

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

Plenaire

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

A.N. Other

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

Deepondé

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

Snif

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

Maison D’Etto

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

Typology

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

F. Miller

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

Feals

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

Auteur

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

Humanrace

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

Hi, Skincare

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

Melyon

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

Mutha

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

Bite

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

Wrapping It Up

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

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

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

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

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

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

Lewa House

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

Listen and Donate

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

No Fishing

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

Fingerspelling

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

At Glacier’s End

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

The Sea We Breathe

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

The Hiring Chain

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

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

The Year of Greta

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

Save Whales

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

Stonewall Forever

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

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

Your Plan Your Planet

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

Blue Heart by Patagonia

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

Restore Hope Appeal by Compassion

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

Wrapping It Up

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

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

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

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

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

Lama Lama

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

Synchronized

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

Haritos

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

Alessandra Zanghi

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

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

Lēonard

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

Glenn Catteeuw

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

The Metropolitan Enigma – Salvatore Ferragamo

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

Spatzek Studio

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

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

Disrupt by Oui Will

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

Save Whales

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

Kikk Festival 2018

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

Wrapping It Up

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

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

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

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

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

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

The Body Shop Body Butters

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

Spotify – Listening Together

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

I Buongiorno

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

Falter Inferno

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

Land Lines – Chrome Experiments

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

Wannabe Store

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

makemepulse

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

Wrapping It Up

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

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

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

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

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

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

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

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

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

The Badass Project

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

Levon Aronian

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

Chungi Yoo

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

Matthew Fisher

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

Sea Harvest

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

Hallo Basis

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

Ali Ali

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

Object

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

Dennis Berti

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

Grove Lust

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

Universal Favourite

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

Kacper Chlebowicz

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

Chiara Luzzana

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

Wrapping It Up

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

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