Information Page

These are the concept designs that I did for our information page for the Andrew Grant digital magazine.

Wireframes:

The wireframes I have created for this page are all very imagery based, as this page will hold a lot of different information and we don't want there to be too much text on the page. Therefore we wanted to balance out the text with images, which I have done in these wireframes. All of them have a very structured layout which makes the site look organised and more professional. Also I have included a navigation bar on this page, which will be consistent across all of the other pages other than the cover page, in order for the user to be able to navigate between the pages from whichever page they are on easily. I think it is also important to have the title of the page at the top so you know you have clicked the correct link. As you can see below each of these wireframes has a slightly different format, I experimented on ways on which the content can be displayed on the page and which would be the most effective for the user. The first one I think its too basic and could become boring, the second and third are better options as they showcase what is the most important of the first bit of information we want the user to focus on with the different sizes of the content. Although the third design is the only one with a footer, which is an important element I think we should include as a red footer will bring the site back to the brand at the bottom of the page as the title does at the top of the page.

Digital Mock Ups

The first digital mock up I did you can see below, this was using the first wireframe on the page, this is a very simplistic design and it only gives the user information on the pages of the digital magazine and not any information about Andrew Grant themselves. However I like the structure of the top of the page, with the navigation bar on the top of the page so that it is easy to use as it is found in the generic area of a navigation bar, so those who use the internet would already know its function. I also like the winter themed image I have used behind the title as links with the theme of the winter issue and it makes for a create design that can be followed through on the rest of the pages. It also makes the site visually pleasing to look at straight away. However the text was not very clear to see on this image, and there would be a variation of different images used across the site and we do not want to change the colour of the text for each one as that would be inconsistent, therefore I have positioned a mid opacity black box behind the text to make the text pop and been clear to read. I also linked this with the cover page designs I had done on the pervious page. Under this there is a small paragraph of text explaining the idea behind the magazine and why Andrew Grant created it in order for the user to decipher wether this is something they may be interested in. The next section of the page is about the pages within the magazine itself. I chose these pages to be represented by images theme-selves as it will give the user an incite on the content they may see on that page and it also is more visually pleasing than just page titles would be. Therefore these would also work as links to the other pages when clicked, I also wanted the image to have an overlay with text on with a brief content of the page written in when it is hover over, this is shown in the second image. This will give the user more information if they choose to read it. There is also a red footer on the page with the logo on to link the magazine to the brand, this will also be consistent across all the pages.

This second digital mock up has a different format to the last, with the title and the navigation bar still being at the top, but this would have a drop down navigation bar that would drop down and reveal a list of the pages. However this design has the Andrew Grant logo at the top of the page so that it can be seen who created the magazine and it blends with the red header. At the top of the page I used the design idea of the last digital mock up with the images to represent the pages with the however options with the titles, to give the user a more visual representation on what they will find on the other pages, this also allows for more content on the page itself as it does not take up as much room as the pervious design. There then would be text down the page that gives information on the magazine, about Andrew Grant and a summary of the pages in the magazine, such as an introduction. Although I think this design may be too text heavy and therefore it may be the best option to take parts of each design forward to my team.