For my mock web design, I decided to create a fashion website. My target audience is young women aged 14-25 who like fashion because they will need prior knowledge to understand some of the events and designers. I provide for this audience by using that colour pink to make the website seem feminine. I also include the title of the page so that the audience knows which page they are looking at. A navigation panel at the top and bottom of each page so that the audience can easily move between pages.
My layout was influenced by flat design, which is ‘characterized by a really minimalist look, focused on removing all extra elements’ (Pratas, 2014, p.1), because fashion websites tend to use lots of white space to look clean and basic in order to appear professional. I was also influenced by the graphic design principle of balance. On my home page I used large images and then balanced them out with smaller images in order to create stability and structure for my images.
My intent for this website is to use HTML5 to create the basic design before using CSS to add a hover effect which will show a description when the user hovers their mouse pointer over an image and to create the load more option. I will also use social media integration to show a Twitter timeline for London Fashion Week to encourage participation. One of my website pages will be an article about London Fashion weeks where I will include videos as well as pictures of some of the runway models.
My design takes into account the principle of proximity. On the home page of my website the website name ‘Envie’ is placed close to the tagline underneath with a gap between the tagline and the first photographs. This shows that the title and the tagline go together. Also, on the news page containment is used to achieve proximity. Lines are used between each news story to separate the stories from each other so that the audience only associates to image with that particular story.
The principle of alignment is also considered. For the news page I used an F-Pattern (Cao, 2015) layout to mimic audience behaviours. To do this I worked from the left side and left the right side of the website mainly empty because we read left to right so the audience always starts at the left. I placed a topic bar at the top of the screen which includes the most popular topics because audiences will be drawn to this first. After that I listed news articles but kept pictures to the left of the screen because audiences scan the left of the screen first so the images can be used to grab their attention.
I also used repetition throughout my design to create a theme for the website. The logo and header with the logo and the footer remain the same throughout so that the audience can always easily navigate the website. I also used a colour scheme of grey, black, white and pink so that the website remained consistent and therefore more professional and the pink contrasts with the rest of the design so that it stands out.
As a part of the interaction design, the home page will include an embedded Twitter timeline which will display tweets with #londonfashionweek. This is relevant for the website genre as it is an important fashion event. It also allows the audience to interact with the website by tweeting making it an effective way for the audience to get involved and feel included. Furthermore, on the home page a description will appear when the audience hovers their mouse pointer over an image which will allow them to understand where each image will take them on the website so that they can find what they want to easily.
Overall I think that my mock web design is effective. The website matches the subject by using mostly image because fashion is about what you can see. Also the minimalist design and the light background makes the website appear clean and simple which appeals to an audience because it is easier to use and navigate. By using only three different fonts, the web design remains consistent and therefore more professional. By including interactive features, such as the embedded Twitter timeline, the website appears more user friendly and it allows the audience to feel like they can be a part of creating content for the website by tweeting using the hashtag. Also I used the bright colour pink and red for the topics to contrast the basic colours of the website. This allows me to draw the audiences eye to particular things that I want them to see such as the ‘view more’ button so that they carry on viewing the website.
However, I think that weaknesses of my website include the lack of the website title on every page. Due to the layout design that I created, the title will only appear at the top of the home page because it would look out of place on other pages. Although the logo remains at the top of every page, the use of the title would have reminded the audience of the website they were browsing regardless of which page they were viewing. Also, the font used for the website title appears to be too basic and it doesn’t stand out because it doesn’t contrast with the font for the other page. In that respect, I have opted to place the consistency of three fonts over creative contrast of fonts.
CAO, J. (2015) How to create websites that mirror how our eyes work. [online] The Next Web. Available from: https://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/ [Accessed 06/02/17]
PRATAS, A. (2014) Creating flat design websites. Birmingham: Packt Publishing. p.1