Website Pages

To design and produce a consistent appearance and navigation each of the pages have been designed to a 960x560 RGB 72ppi format, with the use of a 12 column grid system. This grid meant that there could be a separation between the individual pages however still maintaining certain features in a fixed position. Each of these format decisions have been made with the consideration of designing for screen and the research into this that has been made. 

Taking into consideration the feedback comments made by the target audience and through a discussion with peers, it was chosen that using the wording 'MENU' for the drop down menu would be the most appropriate choice for the website, rather than using the hamburger symbol. To summarize the conversation, many of the comments were based around the older generation being less likely to know the purpose of the icon. However by clearly stating that it is a menu through wording, this would overcome the issue. Some were concerned that this would add a more 'dated feel to the website' however through researching design studios for PPP2, I have picked up on a number of website designs that use a worded icon rather than a symbol. An example of this is Catalogue. 

Through feedback discussions with the target audience and peers it was decided that using an icon would be most appropriate for the first page of contact after logging in. This format keeps the page simple and clear to understand with only two options of where to navigate to next. The introduction of the line underneath the title also adds an element of separation to the page which was lacking previously. This is a feature that many websites have in the form of a menu bar at the top, however with the limited aspects that the website would have this is more appropriate in the form of a singular line that works with the title and the menu bar to the right. The menu icons are also larger than you would typically see on a website. This decision was informed by the older average age of the readers of the magazine. Without looking oversized, this icon is made to be clear and obvious to the target audience. 

Although each design of the magazine pages will be different, 4 examples have been designed to demonstrate how the magazine will work through being shown on the website.

As you can see between the two contents pages, subtle adjustments to colour have been made throughout the design process through suggestions and feedback made from members of the target audience and through referring back to the research.

A coloured background was selected so that there would be some distinction between the magazine pages and the white space around it. Through small feedback discussions that were had throughout the design process, it was also mentioned that having all white on a screen can mean that the user experience is not as positive due to the glare of the screen. From this comment experiments were made with variations around #9ea583 as this is a colour scale used by ISSUU. However, this moved away from the colour palette selected and from feedback from the target audience, was said to be 'disengaging' and 'dull'. Using the #444444 provides a flow of colour throughout the website and the Country Living brand as well as being a neutral background for the magazine to be viewed against.  

The above two images demonstrate how the interactive text changes colour when the mouse is hovered over it. This shows that there is a link behind the text and that if you click on it it will take you to the appropriate page. This is a feature that enhances the user experience and explores the abilities of reading a magazine through screen. 

Experimentation of the menu drop down was also important as this is a feature that needs to be clearly read on a range of devices due to the website being adjustable from laptop to tablet screen size. Although the other text on the website is in white, it became obvious that using white text for this feature would not be appropriate due to the reduced legibility. If the text were to be bigger this would be less of an issue however due to the nature of the menu, having overly large text would not be appropriate.