Production Day - Trashion Online Presence

In this week's Production Day, we were given the task of developing "mock-up" concept designs of our fashion magazine, Trashion.

We had to do:

1. Web pages: home page and indicative article pages (you may want to develop more than one mock up for internal pages - think about how the different article types might need different layouts)
2. iPad and iPhone mock ups

This is my first design of my Trashion website. I decided to base mine off of Vogue's website as I felt that this would ensure that I had a good stereotypical layout for a fashion website. This is why my layout is very plain and simple with not a lot of colour in it (mainly black and white). 

The layout of my links and stories is again copied from Vogue's design as after doing research into different fashion magazine's online profiles, I felt that this was the most eye catching layout.

I then decided to change this slightly as I wanted to incorporate the main colour palette of Trashion (yellow, CMYK (C= 0, M= 0, Y=100, K= 0)). I originally put a black box behind the title but felt that this was too dark and too large a contrast from the white of the rest of my page, so decided to go for a dark grey. 

This is the article layout for my website. Once again I have copied the layout from Vogue as I felt that it is an effective design and is interesting to look at. 

This is the phone app version of my magazine. I decided to set it up slightly differently from Vogue's app version as I wanted to have the stories still laid out how they were on the website but with links to click onto them so that you could read them (hence the outlines square around the stories).

Here is how the layout would look when reading the article.

I then did the iPad version of my website, incorporating the same layout as the phone version, however using the space more effectively by shifting the positioning of the links so that they didn't look boring and ineffective in a simple straight line. I felt that this made the page look fuller and more intriguing to look at.

Finally (as a little extra to our task) I decided to show what the article layout would look like on an Apple Watch, again transferring the phone layout but fitting it suitably to a smaller screen.