top of page

CONCEPT REFINEMENT

For my homepage I added the menu to the new layout. I also added the drop downs.
Here I made the circle behind the logo slightly transparent which works with the background much better.
I then decided that I would join the two separate designs I was working on and make them one. Now this page has become my opening page. Here I also made another circle behind the logo which looks really effective giving the logo space to look not so awkward. 
Because I combined my concept 1 and 2 as an opening page, I made me concept 3 my home page. This means that my opening page will take you to my home page. I also turned the master page off on my opening page.
For my home page I figured out a solution for the pixelation of my menu by having to use text exported from illustrator. Because of this I wont be able to use drop downs. But I have shown in my concept development that I know how to use and make drop downs.
Here I removed the photo slide show on the left and replaced it with a single photo. I then created a text label to go over the image. 
I then continued down the homepage with a wide image banner. I also made the text label to go over it in illustrator. For the text being white I made sure a put a slight drop shadow behind it so that it didn't blend with the background. 
Continuing down the home page I place three more photos side by side and created the labels in illustrator. For every one of these labels and images, I hyperlinked to the particular page it is advertised for. 

Home Page / Opening Page

I then made this banner to link to the shop instagram page. I used two different fonts and a transparent background logo.

Store

For the store I created individual labels for each item containing the brand, price, name and photo. Each photo was cropped to square and exported and place on the site. I also added a small menu on the side to refine the search.
I then added a title to each of the store pages to make it clear as to what page the viewer is on. 
For my homepage I firstly
For the cart page I firstly made an icon that the page can be accessible from. I did this by creating a navy rectangle and added text to the right side. I then drew a bag in illustrator and place it in the rectangle. 
I then moved the icon to the right side of the site and but text next to it were you can be taken to a gift card page. 
I then made the cart page with text and shapes. I also added a promo code and gift card code to the bottom.

MY CART

To create my labels page I decided to break it up into letters to make brands easy to find. Although I found there was lots of empty spaces.
I then moved the lists to the length of the screen for fill the gaps.

Labels

For each of the labels I made a separate page featuring everything in the store of that branded product. At the top of each page a place the label logo.
I wanted to add an animation to the top of my page to make it more excited. I then thought up a wave set animation for behind the logo. I then drew a sequence of waves starting with a straight line then adding a wave every drawing.

ANIMATION

I then imported these drawings into Adobe Animate and place each shape on a separate keyframe. I alter the frame rate and exported it.
Here I placed the animation onto my site and put it behind my logo! This is one of my favourite elements of the site.
To create my Shop Instagram page was very difficult. I had to download a widget from online and enter and few different codes into my site and instagram page. There was a lot of altering the setting and I finally managed to live stream my instagram page to the site page!
I changed the settings a bit for so that it displayed in threes. It also allows to the view to view each image.

Shop INSTAGRAM

EXTRAS

For the extra pages I created  a small menu down the bottom of the mater page containing 'Contact us', Shipping', 'Gift Cards' and 'About'. 
For each of these pages I used all text and a few information widget boxes where the customer can enter information.

MUSE LAYOUT

This photo above shows how many individual pages I had to design which is a lot!! I also had to link all imagery to it's own page so that each button and link is working.
bottom of page