{"id":35203,"date":"2022-03-04T15:00:13","date_gmt":"2022-03-04T14:00:13","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35203"},"modified":"2022-03-02T14:19:41","modified_gmt":"2022-03-02T13:19:41","slug":"examples-of-contact-page-design","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/examples-of-contact-page-design\/","title":{"rendered":"13 Inspiring Examples of Contact Page Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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\u2019t just slap some links on there and call it a day, can you? Contact page design is something that mustn\u2019t remain an afterthought, and fortunately that\u2019s something that more and more designers are realizing these days.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When wireframing a contact page design, there are a few things to keep in mind:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Functionality: this page should fulfill its purpose of providing a means of contact, and not much else.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">User-friendly UX: a good contact page makes reaching out a breeze. <\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">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.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There\u2019s a lot to be said about contact page design but it essentially boils down to whis: this page should <strong>get the visitors to reach out, connect, perform a desired action<\/strong>. It should inspire and encourage them, and a contact page with basic, dull or downright ugly design won\u2019t do that. An intricate contact page with tons of animations, illustrations and dense content won\u2019t do that either. It will confuse and possibly frustrate them. It will make them leave without clicking that \u201cContact Us\u201d button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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<strong> all the available resources for reaching out<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, if the contact page delights, wows or dazzles the visitor &#8211; all the better. A well-designed contact page is a <strong>sign of commitment and consistency<\/strong>, and leaves a very strong, very positive impression.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, we were recently inspired to do a browsing session in search of the finest examples of contact page design. Here\u2019s what we found:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-badass-project\">The Badass Project<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#levon-aronian\">Levon Aronian<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#chungi-yoo\">Chungi Yoo<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#matthew-fisher\">Matthew Fisher<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#sea-harvest\">Sea Harvest<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hallo-basis\">Hallo Basis<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#ali-ali\">Ali Ali<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#object\">Object<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#dennis-berti\">Dennis Berti<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#grove-lust\">Grove Lust<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#universal-favourite\">Universal Favourite<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#kacper-chlebowicz\">Kacper Chlebowicz<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#chiara-luzzana\">Chiara Luzzana<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-badass-project\"><\/a>The Badass Project<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/The-Badass-Project.jpg\" class=\"attachment-full size-full\" alt=\"The Badass Project\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/The-Badass-Project.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/The-Badass-Project-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/The-Badass-Project-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/The-Badass-Project-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.badass35.com\/en\" target=\"_blank\" rel=\"noopener\">The Badass Project<\/a> started as an answer to the question \u201cWhy are all wedding pictures always the same?\u201d 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<strong> a loud, flashy, in-your-face design based on black and yellow<\/strong>. The <a href=\"https:\/\/www.badass35.com\/en\/contact\" target=\"_blank\" rel=\"noopener\">contact page<\/a> can be reached through a fullscreen menu that opens via an eye-shaped icon. The page reflects the studio\u2019s direct, playful, youthful approach to business, with some sections that appear to be there just for fun (the \u201cBlah, blah, blah, blah\u2026\u201d 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\u2019t really look like a form but serves the purpose perfectly. The \u201cSend\u201d link is the cherry on top of this loud, bold cake &#8211; oversized handwritten letters that grow even bigger when hovered upon, coupled with some arrows pointing to it.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"levon-aronian\"><\/a>Levon Aronian<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Levon-Aronian.jpg\" class=\"attachment-full size-full\" alt=\"Levon Aronian\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Levon-Aronian.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Levon-Aronian-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Levon-Aronian-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Levon-Aronian-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The website of the Armenian chess master <a href=\"https:\/\/levonaronian.com\/en\/\" target=\"_blank\" rel=\"noopener\">Levon Aronian<\/a> 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. <strong>The tidiness of the layout is by no means ordinary or plain<\/strong> &#8211; in fact, the design has a uniquely distinctive character and leaves a lasting impression. The <a href=\"https:\/\/levonaronian.com\/en\/contact-us\" target=\"_blank\" rel=\"noopener\">contact page<\/a> 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 &#8211; a curvy arrow of the \u201cSend\u201d 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"chungi-yoo\"><\/a>Chungi Yoo<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chungi-Yoo.jpg\" class=\"attachment-full size-full\" alt=\"Chungi Yoo\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chungi-Yoo.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chungi-Yoo-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chungi-Yoo-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chungi-Yoo-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The portfolio website of the German-based art director, designer and illustrator <a href=\"http:\/\/www.chungiyoo.com\" target=\"_blank\" rel=\"noopener\">Chungi Yoo<\/a> is a delightful and fun display of Chungi\u2019s 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 \u201cplayground\u201d (and it certainly does feel like one), is laced with<strong> lovely little design details, icons, animations, microsections<\/strong>, but the <a href=\"https:\/\/www.chungiyoo.com\/contact\" target=\"_blank\" rel=\"noopener\">contact page<\/a> 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 &#8211; an email button and links to her social media profiles. The large typography, animated letters and icons and skillfully matched background colors create <strong>an exciting composition with a distinctly outgoing vibe.<\/strong> 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\u2019s world &#8211; to her playground.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"matthew-fisher\"><\/a>Matthew Fisher<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Matthew-Fisher.jpg\" class=\"attachment-full size-full\" alt=\"Matthew Fisher\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Matthew-Fisher.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Matthew-Fisher-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Matthew-Fisher-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Matthew-Fisher-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you read our piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/effective-ecommerce-website-design\">effective eCommerce design<\/a>, you probably remember the wonderful <a href=\"https:\/\/mfisher.com\/\" target=\"_blank\" rel=\"noopener\">Matthew Fisher<\/a>, 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 <a href=\"https:\/\/mfisher.com\/contact\" target=\"_blank\" rel=\"noopener\">contact page<\/a> can be reached via a fullscreen menu and represents <strong>a striking combination of monochromatic design and discrete interactivity<\/strong>. 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\u2019s website &#8211; clean, elegant and striking.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"sea-harvest\"><\/a>Sea Harvest<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Sea-Harvest.jpg\" class=\"attachment-full size-full\" alt=\"Sea Harvest\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Sea-Harvest.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Sea-Harvest-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Sea-Harvest-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Sea-Harvest-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One of our favorite designs and our old acquaintance from the piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-inspired-by-poster-aesthetics\/\">layouts inspired by poster aesthetics<\/a>, the website of the Australian <a href=\"https:\/\/www.seaharvest.net.au\/\" target=\"_blank\" rel=\"noopener\">Sea Harvest<\/a> 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 <strong>color change and the handwritten circle effect<\/strong> when menu links are hovered upon. The <a href=\"https:\/\/www.seaharvest.net.au\/contact\/\" target=\"_blank\" rel=\"noopener\">contact page<\/a> is perhaps the most newspaper-y one. It has the same header as the homepage and other pages &#8211; clean, geometric and very user-friendly. It\u2019s followed by two parallel sections with company locations, and a section with contact details and <strong>a vintage illustration of an old school telephone<\/strong>. The page closes with a comic strip from Garfield in black and white, which assumes color when hovered upon. It\u2019s a page that is simultaneously practical and fun, with design that perfectly reflects the carefully crafted aesthetics of the company.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hallo-basis\"><\/a>Hallo Basis<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Hallo-Basis.jpg\" class=\"attachment-full size-full\" alt=\"Hallo Basis\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Hallo-Basis.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Hallo-Basis-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Hallo-Basis-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Hallo-Basis-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/hallobasis.com\/\" target=\"_blank\" rel=\"noopener\">Hallo Basis<\/a> is a German visual communication agency offering the services of branding, web design and graphic design. Their website reflects their innovative approach to work &#8211; it is full of interesting, modern design solutions, from fullscreen animated illustrations to horizontal navigation. They don\u2019t have a contact page per se, but rather <a href=\"https:\/\/hallobasis.com\/#footer_type\" target=\"_blank\" rel=\"noopener\">a footer<\/a> that serves as the gateway for various communication channels &#8211; 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 <strong>low-contrast look, with white letters on a light gray background<\/strong>, which definitely looks smooth and elegant but may pose an accessibility problem for some users.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"ali-ali\"><\/a>Ali Ali<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Ali-Ali.jpg\" class=\"attachment-full size-full\" alt=\"Ali Ali\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Ali-Ali.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Ali-Ali-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Ali-Ali-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Ali-Ali-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/alitwotimes.com\/\" target=\"_blank\" rel=\"noopener\">Ali Ali<\/a>, or Ali Two Times, is an award-winning director of commercials from Cairo, Egypt, and a member of The Good People film studio. Ali\u2019s 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<strong> bases its character on the dynamics between large and small (even tiny) text in the Monument Grotesk typeface<\/strong>. The focus of the page is on the contact with Ali\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"object\"><\/a>Object<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Object.jpg\" class=\"attachment-full size-full\" alt=\"Object\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Object.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Object-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Object-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Object-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/object.design\/\" target=\"_blank\" rel=\"noopener\">Object<\/a> 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 <a href=\"https:\/\/object.design\/contact\/\" target=\"_blank\" rel=\"noopener\">contact page<\/a>, however, is decisively bolder. <strong>A bright, loud blue background, which reflects the blue in the studio\u2019s favicon, hosts a flashy greeting animation<\/strong>, with different ways to say \u201cHello\u201d 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\u2019s character: playfulness and professionalism.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"dennis-berti\"><\/a>Dennis Berti<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Dennis-Berti.jpg\" class=\"attachment-full size-full\" alt=\"Dennis Berti\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Dennis-Berti.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Dennis-Berti-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Dennis-Berti-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Dennis-Berti-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/dennisberti.com\/\" target=\"_blank\" rel=\"noopener\">Dennis Berti<\/a> 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\u2019s a fun place to be at, but it is also practical and functional, which makes it an excellent piece of design. The <a href=\"https:\/\/dennisberti.com\/contact\" target=\"_blank\" rel=\"noopener\">contact page<\/a> 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 &#8211; <strong>bold typography and a nicely contrasted palette provide for the high usability of this page<\/strong>, 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 &#8211; 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\u2019s journey through his journal.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"grove-lust\"><\/a>Grove Lust<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Grove-Lust.jpg\" class=\"attachment-full size-full\" alt=\"Grove Lust\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Grove-Lust.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Grove-Lust-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Grove-Lust-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Grove-Lust-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.grovelust.be\/\" target=\"_blank\" rel=\"noopener\">Grove Lust<\/a> 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\u2019s creativity while the grids and borders give the entire layout a clean, serious feel. The <a href=\"https:\/\/www.grovelust.be\/workflow\/#get-in-touch\" target=\"_blank\" rel=\"noopener\">Get in Touch<\/a> page keeps in line with the overall design and impresses with its <strong>unique combination of simplicity, functionality and looks.<\/strong> \u201cLet\u2019s talk about it,\u201d 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\u2019s a page that does a great job at offering a communication channel to the visitors.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"universal-favourite\"><\/a>Universal Favourite<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Universal-Favourite.jpg\" class=\"attachment-full size-full\" alt=\"Universal Favourite\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Universal-Favourite.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Universal-Favourite-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Universal-Favourite-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Universal-Favourite-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/universalfavourite.com.au\/\" target=\"_blank\" rel=\"noopener\">Universal Favourite<\/a> is an Australian creative and design studio with an international portfolio. Their website offers an insight into the studio\u2019s 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 &#8211; a different cursor (rice bowl, beach umbrella\u2026) for each section. The website doesn\u2019t have a separate contact page. Instead, clicking on the round button in the bottom left corner opens<strong> a large, beautifully designed contact popup that somewhat resembles a rolodex card<\/strong>. The popup is very clean and readable, and has four distinct contact links serving four different purposes &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"kacper-chlebowicz\"><\/a>Kacper Chlebowicz<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Kacper-Chlebowicz.jpg\" class=\"attachment-full size-full\" alt=\"Kacper Chlebowicz\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Kacper-Chlebowicz.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Kacper-Chlebowicz-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Kacper-Chlebowicz-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Kacper-Chlebowicz-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The portfolio website of the Polish art director <a href=\"https:\/\/kacper.ch\/\" target=\"_blank\" rel=\"noopener\">Kacper Chlebowicz<\/a> 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\u2019s 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 &#8211; 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<strong> large, mismatched typography and one quirky, humorous detail<\/strong> &#8211; a skewed GIF of Jim Carrey from <em>Bruce Almighty<\/em> that appears as we hover over the section and keeps following the cursor.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"chiara-luzzana\"><\/a>Chiara Luzzana<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chiara-Luzzana.jpg\" class=\"attachment-full size-full\" alt=\"Chiara Luzzana\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chiara-Luzzana.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chiara-Luzzana-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chiara-Luzzana-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Chiara-Luzzana-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In a tone that seems to share the aesthetic principles of Ali Ali\u2019s website, at least when it comes to colors, the portfolio of the award-winning sound designer <a href=\"https:\/\/www.chiaraluzzana.com\/\" target=\"_blank\" rel=\"noopener\">Chiara Luzzana<\/a> offers an immersive experience for almost all senses &#8211; 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<strong> two different typefaces &#8211; Neue Montreal and Rosindale Display<\/strong>, combined within the same words. The contact page provides Luzzana\u2019s 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\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Contrary to what some believe, contact pages are actually among the most visited website pages. And yet, some designers treat them as \u201cpages of secondary importance,\u201d although these don\u2019t really exist. Even the <a href=\"https:\/\/qodeinteractive.com\/magazine\/must-have-legal-pages-for-any-wordpress-website\/\">legal pages<\/a> deserve full designer attention, as only the well-rounded, consistent style guarantees for good web design that will be recognized as such.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Playful, serious, minimalistic, animated, cluttered, clean\u2026 We\u2019ve seen all sorts of contact page design styles today, but they all have one thing in common &#8211; 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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Contrary to what some believe, contact pages are actually among the most visited website pages. And yet, some designers treat them as \u201cpages of secondary importance,\u201d although these don\u2019t really exist. A well-designed contact page is a sign of commitment and consistency, and leaves a very strong, very positive impression<\/p>\n","protected":false},"author":3,"featured_media":35237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,37],"class_list":["post-35203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-ui"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35203"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35203\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35237"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}