Amy Snow: MED4110 Visual Design | Week 7

Last week we worked through the process of developing a magazine, and this week we are developing that further by thinking about how the magazine would look in digital formats. We are planning the look and feel for the digital versions of the magazine. Graphic designers usually develop a concept look as part of an overall branding project and for that to be given to the web production team.

Magazine website research

The two images above show Look and Glamour's homepage for on a PC device. Look's homage has a lot of images. They have an image slideshow with recent articles accompanying that. They also have advisements and a section to subscribe to Look. They have a menu bar under the logo and social media icons a the top of the page.

Glamour magazine's layout spreads across the whole screen. They have a menu bar under the logo and a subtraction section. They have a large horizontal advertisement that takes up a lot of space, and a vertical one. Under this they have recent articles, and photos of celebrities in squares.

The two images above show the article pages for Look and Glamour magazine on a PC device. Look has two columns, with the article in one and advertisements in the other. Glamour has images on their right hand side column, and the article text in the left. Glamours social media icons appear under the article heading.

The two images above show Look and Glamour's website homepage on a mobile device. Look has the menu symbol and then their logo. Under this they have an image from a recent article with the heading, followed by a square advertisement and then a floating advertisement. Under the square advertisement are recent articles.

Glamour has a menu at the top with a search icon, and then their logo under this. They then have an "advertisement" for the viewer to subscribe to/download a device version of the magazine. This is then followed with a floating advertisement. Under the download button, there is recent articles.

The two images above show Look and Glamours magazine article page. Look has the heading for the article, and then social media buttons. This is followed by the feature image and then the article. There is also still a floating advertisement.

Glamour's logo turns grey and the subscribe box minimises. The heading is large and is then followed by a photo and the article text. There is a floating bar that allows the user to flick between articles or favourite them.

Process

Basic idea of what I wanted the webpage to look like

At first I designed the web page for Macbook size at 1280x800 with a footer, but decided against it. I went with a design at iMac size 1920x1080, which could also be used for Macbook.

This shows my design at iMac size 1920x1080, with the guidelines for the Macbook display.

Mock-ups

Below I have made mock ups of Trashion's website homepage and article page on different devices. This includes iMac, Macbook, iPhone 5 and an iPad. Each device has a different resolution, so it required different designs for each one. However, I designed the same webpage for the iMac and the Macbook. This is because the screen will change size, but the actual webpage will stay the same.

I used the same type faces and the pink rectangle behind the Trashion logo. I added a leaderboard advertisement for the webpages, and a square advertisement on the right hand side. The leaderboard advertisement is one I made in photoshop using an image from Judy Berger's vintage fair, to advertise her event. The square advertisement is a smaller version of the "Visit Birmingham" advertisement from my magazine.

For every format I had the Trashion logo with the pink rectangle behind, and then a menu bar that has news, how to, vintage, people and craft tabs. I thought that these were suitable for the magazine and the content that it produces.

Website homepage showing responsive design

iMac/Macbook

For the homepage, I have two columns, with one taking up 2/3 of the space and the other 1/3.

In the left hand side column I put in an image slideshow, that had a heading and then a description accompanying the image. Under this, there will be a heading of most recent articles, which then starts off with some of the article and then has a "read more" button.

On the right hand side column I put in social media icons so that readers can connect with and follow the magazine. Under this placed the square advertisement, followed by a live Instagram feed.

iPad

For the iPad homepage, I wanted to use square images of recent articles. I did this so that there wasn't too much text on the homepage which could be difficult to read. I think that when users want to use an iPad, images are much easier to look at. It also looks like Instagram's style, which is popular amongst Trashion's target audience.

For the iPad design I got rid of the advertisement at the top and moved the social media icons to above the pink line.

iPhone

The reasoning behind my iPhone design is the same as for the iPad. The only thing different is that the social media icons are centred beneath the pink line, and that there is just one column of images, instead of like the iPad's 3.

Article page showing responsive design

iMac/Macbook

For the article pages, I kept the same top half and right hand side column, but changed the left hand side column. In the left hand side column I placed the article title and an image on the right hand side, with the article text to the left.

iPad

For the article page, I put in an advertisement and the Instagram feed on the right hand side, and then the article on the left. I placed the article title, and then an image on the left and then another a little lower on the right. The article text is wrapped around the images.