The final completed design of my website is shown below. It features the various design trends that were identified in previous blog posts.
The header image is a looped video so that it can grab the audience’s attention immediately after they enter the site. All of the large images flip when you hover over them. This will reveal an opposite side that features an article title and a ‘read’ button so that audiences know to click to reach the article (see image 5 in the design below). On the other hand, smaller images have text below them to give more information and the opacity reduces when they are hovered over.
The design demonstrates a variety of photographs, gifs and cinemagraphs using a mix of original photography and stock images/video. This aims to maintain audience interest. The design is heavy on visual components in order to keep the design clean. It gives the audience freedom to scroll through the website and stop on visuals that interest them to find out more.
The other pages shown in the navigation bar will follow a similar pattern. A heading of ‘popular’ will lead the page followed by a grid of four images (see images 2-5). Below that will be a video, followed by four additional images in the grid format. On the fashion, beauty and celebs pages, the text ‘Envie’ in the header video will be replaced with the page title.
All article pages will follow a set format in order to maintain consistency. A cinemagraph will take the position of the lead article on the design below. Below this will be the article headline, author, and author social media links. At the bottom of the article, an embedded Twitter hashtag search will be included in order to encourage the audience to give their views and see other people’s opinions. At the bottom of the page will be a more section which will be in the style of images 6-9.
Overall, the website design aims to offer visually stimulating and interesting content without massed of text. White space is used to give the website a clean look and special emphasis is placed on social media so that audiences are encouraged to engage with the magazine. Drop shadows are used to give the website depth as opposed to flat design and to make the audience aware that specific components will make an action if you interact with them.
Lipstick & Life 