Client Design Brief

Client Design Brief

Introduction

MYRETROLIFE is a new retro design company that is starting and would like a new website developed to promote their online services.

They are a local design company who specialise in retro designs and minimalistic designs. MYRETROLIFE currently has a small team and are hoping that the design of their new website will impress new clients.

We would like you to create a parallax website replicating the initial design that they have given. The website will be split into SEVEN sections.

Section 1 – Logo Area Section 2 – Who We Are / What We Do Section 3 – Gallery Section 4 – Prices Section 5 – The Team Section 6 – Contact Us / Find Us (including the footer)

Each section should take up 100% of the browser screen in width and height, apart from the footer which has a specific height in pixels that is included in Section 6.

Target Audience

Our target audience is 16-30 year olds. We are typically looking for both male and female clients that would like personal photos such as weddings, families and events. We can also work for companies to promote and photograph their events.

Our service is personal and as such, we always try and get the best photos possible. As you can imagine, there is a lot of personal photographers and the competition is very strong. We need a well-designed and contemporary website to compete with them.

Client Design Brief

Colours

Fonts

We would like three fonts used throughout the website. The files are within the assets/fonts folder. These fonts should not be installed on the computers, instead, they should be linked using CSS.

Liberator Regular for all headings

Liberator Regular

Nevis for all content

Nevis

A Love of Thunder Regular for footer content and price of packages.

A Love of Thunder

#45434E #C0BA96 #B4AFCC #51477F #F2F2F2

Client Design Brief

The Website

We would like the website to be as contemporary as possible. We love the design that our designer has created and we would like you to replicate that design as close as possible.

Main Logo Footer Logo

Everything that you need can be found within the Assets folder. You should not need to edit an image using image editing software as we would prefer you to use CSS where necessary.

HTML5 should be used throughout the website.

Below we will detail what we expect of each section.

Client Design Brief

Section 1: Header Image

The first thing that a user should see is a full screen image of the logo. The logo should be responsive and change size dependent on the user’s browser size. The image should also be centred. This section should take up 100% of the width and height of the browser. The background colour should be:

#45434E

Client Design Brief

Section 2: Who We Are / What We Do

This should be made up of two sections: Who We Are and What We Do.

<h2> tags should be used for the titles.

<p> tags should be used for the content.

A border should be placed on the right of Who We Are and on the left of What We Do. The border should be 5px thick (10px in total) and should have a gap of 2.5px between. And image below will show you to better explain:

The text is provided within the Assets Folder.

Client Design Brief

Section 3: Gallery

The Gallery should look like the image above, using four columns

<h2> tag should be used for the title.

The images provided are black and white – we would like you to create a hover state that changes the colour of these black and white images to sepia using:

We would like you to add browser compatibility for Firefox, Chrome and Internet Explorer / Edge for this hover state.

We would like to see an animated transition for the hover states.

The gallery should be responsive to fit a mobile view.

The colours can be found using the PSD file.

Client Design Brief

Section 4: Prices

<h2> tag should be used for the title.

The prices section that includes the 3 columns for prices should be wrapped in a DIV with 80% width.

Each column should be the same width, with a margin of 25px in the yellow highlighted area.

The text should be centred.

Each column should have a padding of 15px.

The columns should be responsive to fit a mobile view.

Client Design Brief

Section 5: The Team

Three columns should be created for this section.

<h2> tag should be used for the title.

The names for each team member should use <h3> tags.

The word ‘DEVELOPER’ should use <h4> tags

The images provided for the team are black and white. We would like you to use the same sepia hover effect as used in The Gallery section.

The word ‘DEVELOPER’ should use <h3> tags.

The text should be centred down the middle of each column.

We would like you to add browser compatibility for Firefox, Chrome and Internet Explorer / Edge for this hover state.

We would like to see an animated transition for the hover states.

The images are not circles – we would like you to use CSS to create circles so that we can easily switch the team images if needed.

The images should be responsive to fit a mobile view.

Client Design Brief

Section 6: Contact Us / Find Us

This section is split into two columns – Contact Us and Find Us.

<h2> tag should be used for the title.

Contact Us:

This section should have 3 input fields:

o Nameo Emailo Message

The input fields should be using placeholders using the colour of the background and the font nevis.

The input fields should also have a background colour of #F2F2F2

The SEND button should use a background colour of #C0BA96 and the SEND text should be #F2F2F2.

The SEND button should invert the colours when hovered over, and when clicked, change to #9BCC9B. please see example below:

Normal State Hover State Active State

Client Design Brief

The input fields should have a form of validation for name, email and message.

The MESSAGE field should be a text area and should have a maximum character limit of 250.

Find Us:

The Find Us Heading should float to the right and the map image will be provided within the Assets folder.

Footer:

The footer should use two columns.

Left Column – footer logo

This should include the FOOTER LOGO image with a margin on the left of 20px.

Right Column – address

<address> tags should be used for the address.

This should include the address using the font ‘A Love of Thunder’. Using the gold colour used throughout the website.

The background colour should be: #45434E

Client Design Brief