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.

Perfume Website Product Page

Today I continued with creating the product pages for my website. Here is an image of my product page for the desktop version of my website:

I included all the necessary elements for a conventional product page, for example; price, add to bag button, product description, images of item, quantity button and small amount of information on delivery options.

For the product description, I made up a explanation, describing the scent of the perfume and the products target audience. I also made sure to use simple, clear image so the website user can easily see what is on offer and the appearance details of the product. 

I kept within the theme of my website, as I used the same colours, font styles, similar images and kept the header and footer the same. This is so it is recognisable to the user and so that the website looks tidy and professional.

My product page is quite unconventional, as I have made it look a little bit more like a homepage but with further detailed information on the product,  the option to enter quantity and the button which adds the item to the bag, ready for on the checkout page.

I have started on my mobile version of the product page. So far I have just inserted the image and the add to bag symbol, however a lot of the elements used in the desktop version, needs to be placed in vertically. This is because the mobile is a lot longer in length design wise, and therefore needs some adjusting so I can offer the best possible user experience.

Here is a screenshot of how far I have got:

I will insert an actual image here when I have finished the mobile version. I will also update the image above if I make any more changes to my final website pages.

Here is an updated image of my final product page for mobile:

Here I have added the same image that I used on the desktop version and also added the edits on top to create the fan effect. Although, I cannot actually add the text on top of the image as well, because this would be too small and could not be interpreted for the target audience, therefore representing a bad user experience.

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.

Website Wireframes

I researched some website wireframes to gain more of an understanding of how to create a simple layout design with no colour or actual text. Here is an example of a website wireframe, including a before and after image:

I then went onto Adobe Illustrator to create my own wireframe layout on my perfume product. This is what I came up with:

This is the desktop view of the website.

In this layout design I have chose a very simple theme, because I think this works best and is very clear for the audience to navigate around the site. I have also included a lot of image spaces, as this makes the overall look of the website more interesting, instead of rows and rows of text which comes across as boring.

Next I designed a mobile version of this website design. This is what I created:

Here is my second desktop view of a different wireframe I have come up with:

Here is the mobile version of the one above:

This is my third and final wireframe option that I have created on Adobe Illustrator:

Finally, this is the mobile version on my final website wireframe:

My favourite desktop and mobile wireframe is the first one, as I think it looks professional, yet simple and clean. However I think that my second wireframe would suit my product the best, as I am only selling one product on the whole site, so needs to be chic and simple.

This is good because the user would be able to clearly navigate around the site easily, both on the desktop and mobile versions. It also looks very uniform and classy which I think connotes an elegant, high end product that is being sold on the website, and therefore attracts the audience.