The wireframe had been finialised and been through feedback, it was now time to mock the wireframes up in Photoshop. Both me and Lo split the work between us and Lo mocked up half and I mocked up the other half. My analysis of these visuals will be based around how I would animate the mock ups in preparation for the video.
Overall design aesthetic
The overall design aesthetic and style is catered towards a easy reading experience while expressing modern and intelligent attributes. White backgrounds are legible and readable ensuring the user can read the articles without any issue. White background portray a modern, minimal and professional aesthetic aimed toward new and old readers. The typeface has been change from Georgia to Helvetica to maximise on the modern style. All categories have been colour coded with bright colours to retain and keep the users attention, taking influence from Buzzfeed and Mashable. It also become a great way to navigate around the site efficiently as all they would need to do is click the category.
Category/landing page
The first page the user will see. Using the stack of cards theme, the user can flick through categories and save which ones they like and reject ones they don't. All categories are colour coded so the visual in the background are intended to excite and engage the user from the onset. First impression are important when their are so many other options for news.
Animation wise the background will fade in and out when different categories appear. Lastly, highlighted colours will appear on either the tick or cross depending on which was they swipe, this is just a visual indication of the action they're about the perform.
Home Page
The home page created by Lo is minimal and modern. Removing all unnecessary content and focussing on what the user wants to see. The user would then flick through the stack which reveals related news from that category underneath. They can also use the category bar at the top to skip categories.
Users will be in full control of the interactive feature of the stack. Moving the card from left to right to reveal newer stories but also moving backwards through the stack to skipped articles. The category bar at the top would be animated, the user would flick through the bar which reveals other category sections.
Article teaser can be accessed by holding and swiping down the finger to reveal a short teaser of the article.
Responce
Lo produce the visuals for the response. The style and aesthetic works in a similar style to the Facebook messenger chat feature. The aesthetics has been kept modern and sophisticated with white and soft greys to cater for the intended user. Highlighting important area by using the brand colours of purple.
The user would press the red response button and the dialog box would animate open, while giving flexibility by allowing them to clock the response whenever they want. The functionality would work very similar to Facebook messenger chat.
 |
| Green tick would pop up to alert the reader that the response has been submitted. |
Article Page
Article page will be split into card section and all section are available for swiping or removing. Ensuring the user is receiving a personalise experience. The functionality of the card will work the same at the home page and start page.
Customisable option
Custom button is evident in the mock up. The icon will expand revealing the available widget. Card section can be move and removed. Removed card will be relocated into the drop dox widget box and moved cards can be moved in the available slots indicated by the dashed boxes.
Profile Page
Similar to the article page the profile page is fully customisable allowing the user to express who they are as a writer or personality. other Telegraph readers can follow the profile and what responses or appreciated article the user has liked.
No comments:
Post a Comment