Self Initiated: Final Designs

In this section I will showcase my designs for the desktop version of  IVY Infant Clothier, after discussing previously about how people use shopping websites on desktop most of the time.

My website is aimed directly for the desktop, but will obviously be usable across different devices such as tablet and smartphone, and will be responsive through using a framework.

Home page

Home Page Overview

homedesign

Section 1 – Hero/header

heropage1.png

 

  • Background Video

    The background of the hero section, will be a video. Like I was speaking about during my research stage is that on most clothing websites at the top they usually have some intense visual, usually a slider that advertises products from different clothing ranges.

    Because IVY Clothing is such a small business, Louisa will not be able to keep up with updating this section and also means that she would also have to have a designer at hand to create large beautiful images on the top of the page.

    I tried to developed a replacement for this, so that the website could keep up-to date with modern web trends of clothing websites. So I decided to add a video background to this, that will wow the user once entering the page. My idea for the video, is the use of old footage that will reflect the personality of the company.

    Old footage that looks like a home video, baby footage of IVY. This would not only create a visual output for the emotion of the website, but would also hopefully immerse the user into the world of IVY Clothing.

  • Navigation

    The Navigation will be a standard inline nav, once the user scrolls down the screen the navigation will stick to the top of the page, following the user all the way down the website allowing the user to quickly navigate throughout the website without having to worry about scrolling all the way to the top of the website.

    Bellow the navigation is the new IVY Infant Clothier logo, and bellow that is the smooth scroll button which will drop the user further down the website, to the main body of the page.

 

Section 2 – Main Body (New In)

newin.png

Bellow the hero section is the new in section, on this part of the home page all of the latest uploaded material is displayed. This will allow the user to instantly get a feel for the new range, and new ideas and styles that Louisa is implementing into her dresses.

As you can see the use of white space is very prominent, but this is important allowing Louisa’s work to do the talking, and emphasising the colour and feel of each dress, obviously because this is the main aspect of the website, the users focus must be on the product and nothing else.

Section 3 – Select Via Pattern

shopviaprint

On this section of the home page, the user is able to filter the content that will display on the store page, via selecting the product via the print that has been implemented. I took inspiration for this section from the Cath Kidston website.

If a user/consumer has seen a dress that they like with a certain print, they are then able to look for other dresses using the same print.

 

About Page

About page overview

ivyaboutpage

Section 1 – Navigation

navigation

As it can be seen once on the about the page, the navigation changes. Only this is the navigation that sticks to the screen on the first page once scrolling down the page. I removed the hero image for this page, because it is unnecessary it doesn’t need to be there.

This navigation will be on every other page, it allows for a more fluid navigational element. The navigation on the home page along side the hero section, is only there to wow the user once entering the website, and is unnecessary for the other pages.

Section 2 – Main Body (About Louisa and IVY)

 

aboutlouisa

The first section that comes up is the about section, this tells the user the story of how IVY Infant Clothier started out, and tells a little back story of Louisa and IVY. The reason for the about page is that it brings the user and Louisa a little bit closer together.

Section 3 – Main Body (About The Product)

theproduct

Bellow the about me, will be a section that gives the user insight into how the dresses are made, and what materials are used. This will allow the user to create an understanding of the quality of the product, and what they are buying.

Which can be argued to be a good way of improving sales, allowing the user to understand the quality of the product is always a good thing.

Store page

 

Store Page Overview

storepagefinaldesign

 

Section 1 – Filter

 

filter

On the first section of the store page, it allows the user to filter down the content that is displayed within the main body of the page. Allowing the user to choose from:

Type

  • All
    This will display all of the content.
  • Daughter
    This will display clothing only for the daughter.
  • Mother & Daughter
    This will display the content for both mother and daughter such as matching dresses.

Print Selection

  • Floral
    This will only show content with a floral pattern
  • Pattern
    This will only show content with a generic pattern
  • Polka Dot
    This will only show content with a polka dot pattern

This allows the user to define exactly what they want, to show up within the content bellow, making it easier for the user to narrow it down.

Section 2 – Main Body (Clothing)

clothing.png

On the second section of the store page, is the clothing itself. Allowing the user to work there way through each different piece of clothing, via the slider underneath. All of the content on this section appears in relation to the filtration that has been selected, via the user.

 

Product View Page

Product View Overview

productview

This page, brings up the selected piece of clothing, dependent on the users selection. It will bring up the name of the dress the price of the dress and also allow the user to have a look at the sizing chart.

Underneath the sizing will be a description of what the dress is, and what material it is made from. If the user likes the dress, they can then decide on how many they want by changing the number within the quantity section, next to the add to cart button.

Contact

contact.png

The contact section will appear on each page as a contact footer, when the user selects contact on the navigation they will be smooth scrolled all the way down to the bottom of the page.

On the contact section will be a contact form, allowing the user to enter there name email and enter a message, to directly email Louisa, if they have any questions. Bellow that section is links to her social networking accounts allowing the user to visit her different pages on the internet. (This is also very good for SEO)

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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