Today I worked on the contact page, this page will be one of the major portions of the page as it will be used to arrange bookings - the main source of income for the business. It's important the user experience on this page is fluid, so the user can easily input their information and contact OAC.
The contact form fills the majority of the page. Spanning across it, split into two columns for the entry points. Mainly because you can't miss it, and that's fairly important. The boxes use a 50% grey so they almost blend into the infrastructure of the page, without standing out too much.
The contact form uses the basic information I've seen in other contact forms. The type uses the same colour as the content boxes which surround them, as they will be replaced when the user enters their own detail. I've used an impromptu 'Say Hello' as a pleasant greeting to the section. With the title, also greyed out 'contact us' above, to make it clear what the section actually is.
I added the contact us button below the section, left aligned. I adjusted the tracking of the words slightly, a gentle amount so it allows the type to fit the content box ever so slightly.
I wanted this button to work as a rollover. Rollovers are a great way to show the content is interactive, to show that this section is actually a button rather than any other piece of content. Throughout the website, the rollovers fill themselves with the wine colour and the type/content goes white - which is what I've done here to assure the website is consistent.
I also planned to add a Google Maps section to the website, I know these can be done relatively easily, and they're fairly customisable. I used a screenshot of York, where OAC photography is based from Apple maps as a placeholder, as I can't embed Google maps into a photoshop file.
I used a clipping mask to add the map to the design. The advantage of using layer masks, such as clipping masks and vector masks is that they are nondestructive so they can be edited later on. I also used a hue/saturation adjustment layer to desaturate the image, so it fits in with the page, as the consistent theme throughout is greyscale.
You can see the google maps section in the page. To add some variation on the width of the page, I've allowed this content to extend to the edge of the document. I also added a location symbol, which I based on that I saw in VW adverts.
When working at Bloom, I spent a lot of my time doing web design. I learned that you have to show how everything will work. So, what happens if someone doesn't fill out the mandatory fields in the contact form and then submit? The black fields' type goes wine, which draws attention to them, so the user is able to fill it out properly.
I also demonstrated what happens after you submit the information into the contact form and then send the information. The contact form will disappear, and you will get a thank you message. Using the similar grey type to the title, so it blends into the page. Removing the contact form prevents the user from submitting the same form multiple times.
Overview of the contact page.
-
I ended up making some quick amends upon review, reflexing on what the client said initially. The page looked too serious. The clean white space factor, which is what we're after is working, prioritising the content, however the black and white colour scheme pulled it down.
I ended up adding some colour to some headings, using the business alternative colour. Which really draws you into the type. 'Say Hello!' is quite a friendly introduction to the section, which sets the tone of the page.
And also adding the colour to the type and the outline of the submit button. Which now works as an invert when you roll over it - as per the rest of the website. Making it much more consistent with the rest of the website.
Leave your comment