EWT Blogs k00121609 2017
Blog 4_week 4:
I have been looking at Xtensio templates for the audience analysis of the website. It has been said that when we are making design decisions to refer to the personas and their requirements and that you can get 80% of requirements from personas. This week I created the personas as per template using Xtensio; completed Balsamiq wireframes and Adobe Illustrator designs; finished the moodboards and the navigation map. I created summaries for the main articles which would be used in the mobile and tablet views. The main articles fill most of the desktop page, so I added a scroll bar on this sized browser for the user to view more information.
For the advert’s, I selected 3 of these viewable across all browser sizes. Advert 1: a lotto icon. Purpose is that when a viewer sees this they would link it to the logo ‘LOTTO NEWS’ and between the two they would immediately recognize what the website is about. I then selected the second and third advert images as to what winnings can buy i.e. a holiday in Italy and Christian Louboutin shoes.
 |
| Lotto icon |
 |
| Holiday view in Italy |
 |
| Christian Louboutin shoes |
These above spoken about elements of the news website page have design characteristics that link them together. This is, they have design components with definite lines and edges: the logo, then the two pillars in the second advert links to the silhouette of the shoes. This makes them part of the same design language.
Next, the main article image can be viewed as a perspective image, where the viewers eye is led towards the vanishing point of a perspective image. Also, these definite lines of whose arrangement composes the vanishing point points upwards and links upwards to the adverts above it.
 |
| This is the garage where the €88.5 million EuroMillions ticket was purchased. Motorists queue up for petrol and diesel where in the spirit of celebrations 'Apple green' garage has reduced to 88.5cent /ltr while stocks lasts. In terms of design there is a perspective view and vanishing point created by the alignment of the cars from the foreground to the distance. |
Regarding the wireframes, I kept closely to the original design. There were some things I altered slightly which occurs as a design process proceeds and new things are revealed. I altered the number of news items displayed on the news page from three items to two items. The reasoning for this is that the three smaller containers below the main article which takes the width of the page, made the page look visually unsupported. They also linked too closely to the three adverts which were in a similar layout format and left the main article visually floating in the page, unrelated to the other elements. By changing to 2 news items this gives strength and balance to the page. Also, the visual hierarchy makes more sense.
The second image in the other news items section of the webpage picks up on the white of the two advertisements. In this same image, the stars in blue creates two links: one between the blue of the stars and the blue-grey tones of the main article image and the stars themselves connect to the other new item image beside it and to the above first advert.
I set the stroke of the ‘author’ and ‘date’ to 0.25 to emphasize it as a different but related element in the news stories. I used a transparent purple arrow icon image at the end of each summary article to indicate on-click to read more of the story. I had first thought of using a strong black or red arrow as I had seen in much of the website news research. However, I thought the transparent purple arrow was less intrusive, looked like a design element and functionally is recognizable as a link to continue to read more of the article.
 |
| Mobile Landing Page Layout and Content |
Comments
Post a Comment