13 Inspiring Examples of Contact Page Design
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:
-
Functionality: this page should fulfill its purpose of providing a means of contact, and not much else.
-
User-friendly UX: a good contact page makes reaching out a breeze.
-
Consistent and high-quality design: all pages, including the contact page, should be in line with the overall design, character and feel of the website.
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 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.
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.
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.
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.
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.
Top Themes for Creatives
View Collection
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, 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 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 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 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 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.
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.
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.
