Mock-ups

As our client’s website’s colour scheme is white and grey, so we decided to use these colours for our campaign in order to keep it consistent. That way users that come across our campaign will be able to go to our client’s website and feel like it is a continuation of information, without feeling like they have go onto a website that is completely different.

Landing Page Desktop Version

LandingPage1-ALandingPage1-B

For the landing pages we are planning to have multiple iterations with slight differences in focus (Food over wine, location over event, etc.)

The viewer will be able to choose which wine they would like to know about. The image of the wine that is not chosen will fly down off screen while the information of the wine that was chosen will fly down and occupy the space on the right.

For example: The bottle on the left is chosen so the information about that win appears on the right.

The large image of more pizzas with wine will be a clickable image that will allow the viewer to go to our client’s site to learn more.

Landing Page Mobile Version

The mobile version of the landing pages is very similar, but it is portrait instead of landscape so mobile users view their phones portrait. Therefore keeping it portrait will be easier for the viewer to look at our landing pages on their phones.

The same concept of tapping on the left or right side is used on the mobile page but the user will be tapping on the top or bottom option. The question will be at the centre so the viewer will read it and choose between the top or bottom.

 

Mini Website Desktop Version

Home Page:

LandingPageMiniSiteHifi

A large HD image will be the background image of the home page. Our client’s logo will be at the top centre of the home page, enabling users to know who’s site they are currently on. The three images at the bottom are the different sections that are on the page, ‘Wines worth watching’ are wine videos, ‘Fact of the day’ is information taken from our client’s glossary page, and ‘Match of the day’ is foods pairing with wine.

Video Page:

As explained in our mockup blog post, the video section has a playlist on the right-hand side with the clicked video taking up majority of the webpage. The link to our client’s website will be on the bottom right, making it easy for users to click on the link if they are wanting to see more than that is already in the playlist.

Fact of the Day Page:

LandingPageMiniSiteHifiFact

We are planning to have images of the wine on both sides and the information in the centre to bring as much attention to it for viewers to read.

Match of the day: 

 

LandingPageMiniSiteHifiMatch

Each day, there will be a different wine and food pairing so there is always something new for viewers to read and find out. By having an image of the wine and food, it will emphasise which foods go with certain wines. The text will also be in the centre for viewers to easily read. If viewers are wanting to learn more, they are able to go to our client’s website which will be a link at the bottom right-hand corner.

Mobile Versions:

Home Page:

Instead of having the images in a grey box like the mini-site, the hander will be in colour to differentiate it from the content below. The viewer will be able to click on one of the three images which will lead to the section.

Video Page:

The header will stay the same on all pages with a grey background so the logo stands out. On the video page, the main video of the day will appear at the top making it easy for the viewer to watch as it will be the main thing on the page. Below the video, will be a description of the video  and information that is not shown in the video.

There will be a playlist of other videos users could watch and a button to view more on our client’s site.

Fact of the Day Page:

The title of the wine will be at in the centre bring attention to the name, with an image of the wine below it. This page will have a little fun fact about the wine that the viewer would probably not know. As always the button to find out more will be at the bottom, easy for the viewer to click.

Match of the Day Page:

The design for this page is very similar to the ‘Fact of the day’ with a grey box holding all the content. We have decided to place an image of the wine bottle at the right side to show the viewer what kind wine they can drink with certain foods. The type of food will be at the top left-hand corner so it is obvious to the viewer that this is the kind of food that goes nicely with wine.

 

(Note: We will be given images from our client to use for this campaign.)

Advertisements

One thought on “Mock-ups

  1. We should probably have WineGuy at the top instead of his logo because people who are new wouldn’t know what his logo stands for. I also think there is a lot of white space so by having his name “Wine Guy” may actually be better.

    For the mini-site, the user may just be wanting to know more about the foods that go with certain wines. Perhaps we can make the link to our client’s page more obvious instead of just a little box at the corner.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s