The website will fit to consistent grid throughout in desktop, tablet and phone formats. The whole site will consist of one long page with navigation through anchor points via scrolling or clicking the links in the navigation bar.
I created a 6 x 9 grid with 5mm margins and gutters to develop the construction of the content. Something that was noted when analysing competitor's sites was that the content was always very high up the page or had a lot of distractions around it. I wanted to present Bijou's navigation clearly to make the user experience a smooth journey through the content and not hidden with lots of distracting content.
This was completed by working one box in from the edge on both sides and then leaving two boxes in each direction blank so it stood out properly with no content distracting the user from finding what they wanted.
The logo fit in the top left as the first thing a user will see upon entering the site. This embeds the logo in the user's mind to remind them who they are looking at.
The social icons followed the exact same rule as the navigation but on the opposite side at the bottom of the page.
Aesthetically, the colour white works with bridal content perfectly as it links with traditional dresses and bridal attire. Therefore the content would be presented in white over darker photo backgrounds, this would allow it to stand out in the foreground, yet feel relevant to the content itself.
After building the structure of the site, I had the idea of presenting a greeting in the middle of the site to make the experience feel more human and friendly rather than corporate and boring.
To stand this message out, a combination of gaussian blur and a darker opacity over the photo within a stand out box would present it in a contemporary and well balanced position.
I mocked this up onto a macbook to see how it'd look in context and to show the owner of the shop to receive feedback on the direction of the site.
I gave her a ring once I had sent it to hear her reactions over the phone to be sure it was honest. Even though I was confident with its functionality and aesthetics, it is nothing like other bridal sites. Her reaction was great, she got very excited and absolutely loved it. Even though it wasn't something she asked for, she liked the welcoming box and said it felt a lot more like going into the shop but online so it represented the friendly nature of the business perfectly.
The nail on the head with this mockup allowed me to develop the rest of the site. Next was the boutique page. Considering the scroll functions with full screen content, when the boutique button was clicked, the page would flow down to the next section of full page content.
Using the same grid, the content for the boutique page was constructed to present information on the shop as well as a few photos. This will give future brides an insight to the environment before visiting or booking an appointment.
The photos will be taken at the boutique once the interiors are complete.
Once the website has scrolled down to reveal the boutique page, it will be made obvious to the user how the content flows. Users will be prompted to scroll down again, or even scroll back to the top to click another button. This removes the requirement of the exact same navigation buttons on this page, making the content stand out more and prompting the user to explore the site.
The next page still followed the grid set up, however this one worked in a different way to the other static pages. To take full advantage of the scree, the content would be displayed on a full screen slider which would go left and right through the different designers. This would make adding and removing designers an easy task to complete.
Each page would have the title in the top left, the designers name and description on the right and then two methods of navigation: the arrows on the left and right, and the opaque dots placed at the bottom left. This promotes the clear aesthetics and makes sure that the function of the site is not over-seen by anyone.
Apart from the Madeline Isaac-James and Ivory & Co. pages, the photos are only used to mock up the site as primary source photography is yet to be taken.
In regards to the contact page, I created a selection of three different layouts, all containing the same elements in a different composition.
I spoke to the client and asked her what she liked the most. Unfortunately she liked all of them but upon asking her questions of how she ingested the information on the page, it was made clear that the final one I designed was the best as all of the contact information flows down the page in line with the logo and then the google maps embed was on the other side as a clever but useful feature but not entirely necessary.
The footer was built with the intentions of leaving the last impression to the consumer, the logo, a gateway to the social networks that the business is involved with and finally the credits of the site for promotion of the designer (me) and the back end developer (chrish).
Now all the layout + design is complete and the client's feedback was that it was better than she imagined it could be, all that is left is to take photography of the boutique and then brief the developer for it to be built.
Leave your comment