Contact Page - Dribbble Product Design Course Warmup

This is a website contact page for a fictional consulting firm. I wanted to provide both the option to call/email the company directly, as well as use a contact form. Additionally, I have provided a "preferred contact method" field, as some businesses or individuals may be more responsive via phone or email during business hours.

This was a weekly warmup for the Dribbble Product Design Course. Continue reading below to see my process.

Mood Board

I initially gathered inspiration from other contact page designs floating around the web. I shortlisted some of the screenshots I had gathered that really captured the vibe I wanted, and then circled what I particularly liked about each design.

I liked the use of a side-bar image for visual interest. This was utilised in my final design to call out direct contact details for the company, as well as social media links, which I also picked out from the mood board.
I really enjoy the use of organic shapes and light, bright colours.
Though it didn't make it into my final design, I did like the use of a map to show off a brick and mortar location. I decided that this was not essential for the use case of a digital consultancy.

Wireframing

Once I had gathered inspiration and ideas and settled on a business case for this design, I started mocking up a very low fidelity version of my layout. For this, I used Dave Whitley's Lofi Kit.

High Fidelity Screens Exploration

I decided on an overall colour palette based on a fantastic graphic I found on Unsplash for the sidebar. Pulling my main colours from here kept everything feeling smooth and consistent, and I complemented my primary and secondary purples with a cool off-white and a bluish-black for neutrals.