Website redesign

 From looking at the current website of the Manor pellet one of the initial problems I saw was how it was mainly image-based but you could only see four images per page and that  the viewer would have to keep scrolling back through pages and pages. This is something I've noticed in tumbler accounts and other fashion blogs however more research on this is my context blog.

When designing the website there were certain things in life that were important:

•  clean aesthetic
• whitespace
• limited colour
• reinforce branding
• easily navigated
• uncomplicated
• professional

 I wanted  to start this designing process on initiator creating a timeline effect of homepages I think this is the most beneficial way for me to design as I can see and experiment with what works and what doesn't.

 I started this part of designing through the list above and also from looking at a lot of websites and working out what I liked and why I liked them this can be seen on my context blog.

I have created these templates as an example of how I wanted to organise the images. I think this blog is mainly image-based so this is a key part of my designing a think it's important to compromise on how many images per page. It's important to have enough to keep the look interested but not to have that many that the images lose strength. These three grids are to help me organise the layout. The top one maybe lacking in variation which is why designed the middle one however the smaller boxes at the bottom may be too small to work.


This website was my first and the most simplistic due to the fact I wanted to get things down which I could then experiment with. You can see that typeface was something that I wasn't sure of, to stick with something serif or two create a secondary online typeface for the brand. I used the same headings and tabs as her current website is did not think these need changing. Another plus point from these is that they can continue with her tone of voice, which is important for me to retain as I think it's her bestselling  point the most interesting factor.

    This next website mockup is similar to the last but puts a pattern, which has been developed from the packaging on the back of the website. Visit this works out well as it reduces the whitespace and detracts from the interests of the photographs.



In the next website mockups I did is considering putting the man repellener logo with the Leandra Medine one too. I was trying to apply simplicity to the website. It was also important to experiment with whether or not each image will have a caption or date of rollover bar. From this website I discovered and decided that a serif typeface, in this case Times new Roman was relevant as it was the same typeface used in the logo. I don't think it needed a  sans serif typeface.

                                                   
 Referring back to the first website mockup I wanted to comment on the most positive aspects the white space was used well however, the tabs at the top seems to  spaced out.I'd also been working with  greys under the impression that when rolled over they  would turn black.
 
 I now wanted to try and incorporate the logo in a repetitive way, I had done this before but the entire background and I think this is necessary as it creates a very busy outcome.

So I decided to create the header bar the width of the logo, also from looking at other websites adding dashed lines help separate the page and didn't mean that the tabs top were so on their own.

 One thing I noticed was that when having a lot of photos on the page there were also a lot of colours this is something that I don't think work that well because it created a website with less impact than if there were only a few colours.


 So therefore on the next page I created colour to be only seen on the most recent blog post. This will also change if the user scrolled over the other pictures then they would also be in colour too.

 I also shifted the control bar to the left rather than at the top which thing worked well however I had left the border of logos at the top which didn't seem to work with the rest of the layout..

                                                         

 I want to continue to experiment with the logo and so enlarged it quite considerably to put behind the page is a constant. Although the legibility of this is not that obvious by now I think I have developed it enough and plan to use it so broadly that just some of the logo scene will be enough to be recognised in context.

 I've also put the title for a blog post in lowercase with each of the photos as to give the viewer some idea as to what each blog post is about as some of the photos aren't that clear.  

 I was still unsure about the navigation bar being top so tried it in a box to be in keeping with the rectangular nature of the website. By keeping me straight lines there will be a juxtaposition against the logo which was  slanted. The serifs on the logo also worked well against straight lines of the rest of the layout.

      I separated the boxes into four separate boxes which the tabs the navigation bar I think this is neater however needs to be aligned with the rest of the columns to comply with the grid prescribed.

 Here I experimented  with pulling the images to the top of the  page to see how worked with further imagesOn the screen, however I think this compromise with the whitespace factor and  how I think this would create a page With perhaps too much on.   Here I have created  a  neater navigation bar which includes the tabs and social media  links in one block. This allows that the more whitespace top and a larger logo to be shown side with more of the logo actually showing too.


Next I wanted to look at interchanging homefront is with multiple images playing through I suggested this with arrows however I'm unsure how relevant this is for this subject matter. I think I may use this in the self sales page to allow the reader to flick through different images.

  I have here reduced the number of images on this page but there is  the play button which could be continuously changing allowing the viewer to see more images than if it was static. However I think the sidings for these images are quite small which leaves a little too much white space and kind of leaves the page  fairly empty and  lacking interest.

 The smaller logo that the straighter angle has been adopted here but I think it separates the page too much and doesn't link between the navigation bar and the photos.

  Here I was worried that the logo was too dark incomplete that and so I change the opacity and also put three images both sides of the interchangeable central image. I like the layout of having images both sides and also like the size of the images however the logo is still dark.

  Here I have reduced the opacity of the larger logo and then placed the straighter logo on top of however but I think this works as it clashes and create a bit too much noise in the top left when there's so much going on with the images.

 Here I have added the search bar and title ' the man repeller' to the website which a thing works well and is dynamic but also allows the reader to browse the page without complications or extra added noise.