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.