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.