Final Website Images

Today I completed my perfume website project and updated everything on my current publishing brief. I have also uploaded my website pages on InVision, which is a preview/prototyping website. This allows people to see what their project looks like and it enables them to experience the website as if they were a user. Here are my links to Invision; Website- Desktop and Website- Mobile.

To do this I created a prototype folder that contained all 7 screens. I then uploaded the png files for each of the pages, as well as whole new files for the hover states.

The image below demonstrates the separate screens I uploaded, so I could link from page to page and insert the hover states over certain screens. This is so I can go to the homepage and then navigate around the site as if I was the user, this helped me gain an understanding of the user experience my website offered.

 

Here are the final images of the desktop version of my website homepage and product page.

Below is the final images for the mobile version of my website of both the homepage and product page.

My Perfume Website Homepage

I have designed my website homepage for both desktop and mobile viewing, this is a screenshot of my desktop version:

I have made sure that all the type is within the guidelines and that everything has equal spacing between each segment of the website so far. I have kept the main layout quite simple because I think this works best for the product, as I want it to comes across high end and classy to my target audience. Whereas if this was more cluttered with lots of text and information, this can be quite over-whelming and therefore does not have a good user experience.

The CTA (call to action) on this website is the 'Buy now' button. I have put this near the top on the main product image, this is so the user can clearly see how and where to purchase the product, without scrolling or trying to find the link.

Here is a screenshot of my mobile version of the website homepage:

This was harder to design because I wanted to stick to the same layout as the desktop, however this would be appear too small and would be hard to navigate across the site for the user. I made sure to increase the sizes of all the important text, so it is clear and easy to read and click. On the other hand, this can take up a lot of space, and some major design layouts needed to be changed. For example the two middle images are next to each other on the desktop version and on the mobile version, they are placed vertically. This makes it easier to see the information without having to zoom.

I have the same CTA button on the mobile version so it is easily recognisable and understandable to the target audience. Again placed at the top, for quick and easy access for the user.

All the photos on the website I have taken myself, and all images appear on both the desktop and mobile version. I took quite a variety of photographs, however the ones on the website were the final photos. Here are the other images that I could have chose:

I picked the best quality and the more simplistic images, as this works best with the theme and style of my website.

On both platforms I made sure to organise all my layers on Adobe Photoshop, so I can clearly see whats what. Here is what the organisation looks like:

I colour coded and created folders according to which part of the website I was working on. As you can see above, I have separate groups for the header and the footer of the website homepage, so if it comes to having to move them, I can just click on the folder to move the whole segment.

Here is what it looks like within one of the folders:

This I found very helpful because before I would have to search through every layer to find what I wanted and would take a lot longer than just having it all there for you already.

I designed these website layouts from my wireframes that I created, here is a link to my website wireframes blogpost.

I have also completed a blog on website hover states.