Crafting a brand new layout from scratch requires a lot of smaller pieces along the way. Internal pages don’t all look the same and these pages require some extra work to organize great designs. While the homepage is often seen as the most important mockup, internal page mockups prove quite useful when it comes time to start development.
The following examples and ideas should be invaluable to any designers working on a new contact page design. This may be for your own portfolio or even a large corporate website. I want to focus on specific trends and design techniques which can be used to create a stunning contact page with all the useful tidbits and knick-knacks.
Streamline the Contact Form
In this modern era of web web design it’s never been easier to create a dynamic contact form. These typically consist of 3-6 fields asking for the sender’s name, return e-mail, and their message.
Most visitors would rather use a contact form because it saves time. They don’t need to open their e-mail client and compose a new message just to get in touch with a company. Nowadays website contact forms often include security measures like CAPTCHA fields so they’re even more trustworthy.
Yummygum’s contact page is very clean and straightforward. It only has 3 individual fields and a big submit button. The simplicity makes this form appear less intimidating, but I also like how it’s designed to be larger with extra padding.
Larger text can be read easier and with more precision. This means a visitor can proofread their content a whole lot easier and with a greater sense of accomplishment.
For a more complicated design take a look at the Prince Ink quote form. The page is actually split into 4 sections, each relating to a different part of the project request.
Keep in mind that not every field needs to be filled out. Only the input fields with asterisks are required fields and everything else is optional. Most of the time this is implicitly understood but some visitors may not recognize the subtle indicators.
When designing a larger contact form be sure to design required fields more conspicuously. This technique will streamline the submission process and greatly improve the form’s user experience.
Uniform Design Traits
Let’s move on from a contact form’s uniformity into more aesthetic principles. After all, design is a big part of what makes a website look good. The contact page itself should feel like one big interconnected page with easily-digestible content. You might even tie it into the “about us” or “services” page.
You’ll notice that they do include a mailing address and some other info underneath the form. By placing the contact field front-and-center it becomes the primary choice for most visitors. Underbelly’s design is so clean and unique that it almost seems like fun to send an email!
For a slightly different example we can look at Dangerous Robot which uses a single page design. Their contact form blends with all the other sections of the page using bright colors and vector graphics.
Their contact form also seems to take center stage. The icons in each field represent the type of content which should be filled out. Visitors should be able to move through their message quickly without hiccups to slow down the process.
Mailing Directions & Local Maps
A company’s physical location often plays a major role in business dealings. Prospective clients may be interested to know where your headquarters are located. This address can also be used for mailing invoices, cheques, or anything else which needs to be delivered via postal services.
The addition of an embedded map adds more of a visual aspect to the address. Google Maps has a custom embed feature which allows developers to add fully-functioning maps onto the contact page.
Take the example found on BKWLD’s contact page. They include some basic email/phone info along with a dynamic map using Mapbox. This is just one of many great examples to demonstrate how a live interactive map can be used to improve a contact page design.
Since this photo is used as a background image the design feels like it blends more naturally. The map takes a backseat to content and while it’s still visible, it doesn’t feel intrusive.
Links to Social Profiles
Social media has turned into a high-powered monorail racing forward into the 21st century. Even if you don’t use the Internet it’s highly likely that you’ve heard of Twitter, Facebook, and YouTube.
Social profiles add a touch of personality to the contact page. These profiles offer legitimate methods for people to contact a company when e-mail and phone are skipped or not preferred. It’s best to offer different contact methods on the same page and let the visitor decide.
One of my favorite British creative agencies has to be Tone, both for their work and their portfolio website. The contact page uses a full map and location to their office along with a dynamic contact form.
But after scrolling down a bit you’ll also find a long horizontal block of social media icons. These link out to all of Tone’s various profiles including Twitter, LinkedIn, Google+, and Instagram. The buttons are large and very noticeable but they’re not smack-dab at the top of the page. E-mail, phone, and physical directions maintain priority.
If you’re looking for a smaller presence take a look at the contact section for Positive Advertising. Their site uses a single-page scrolling layout so everything is located together. The contact form is located at the very bottom with a phone number, email address, and mailing address.
Again you’ll notice that underneath these 3 methods of contact are some basic social media icons. The color scheme is much more subtle so the icons aren’t immediately conspicuous. Yet they still work and provide alternative methods of communication.
Showcase Team Members
Although this is a lesser-used feature it does add some personalization to the design. If you’re designing a personal portfolio then you might try adding a small headshot of yourself. Larger companies often break up photos onto team pages where each team member has a photo and a small biography.
The about page for Blue Sky Resumes includes a small section about their team. Each employee has their own bios along with links out to their own personal profiles. This is a rather unique page because it also includes contact details for the site itself.
While viewing the top of their contact page you’ll notice a fixed scrolling block along the left-hand side. Small buttons link out to information for e-mail, phone, and sending a request for quotation. Blue Sky Resumes has a very dynamic contact page which is a refreshing change of pace from other common designs.
For another example take a look at the Etsy team page. Each team member photo links to their own page with a small bio about what they do and who they are. This type of personalization is great for both customers and 3rd party vendors working directly with the company.
However the Etsy team page does not link directly to their contact page. This is a purposeful design choice because there are so many people working for the company that an employee list deserves its own page. The page does link back to their About page along with the Press page with some e-mail contact info.
A team member listing is not vital to the contact page design, but it can be a nice addition when appropriate.
Most contact pages include very similar elements which are arranged using different design techniques. I certainly hope these trends give you something to think about when crafting your own unique contact page design. The most important aspect of any page is usability. As long as your design caters to the user experience then you’ll have no problem designing exquisite contact pages.
For Similar Articles, see: