News Reader Web App
9News is kind of like a RSS web app without subsribing function, so top news that covers a big range of categories would automitically pushed to readers without any settings. I think the most important thing is to let young people know something is happinging around them, but not let themselves to find out what is important as they do not have such will.
UNIQUE PROPERTIES / PROJECT DESCRIPTION:
9News is basically a news reader app which follows rigorous typography rules, with function to detect reading preference of users via geometric shapes and lines, along with extremely intensive consideration of legibility and usability. The only news of each category would be hand picked from a variety of most popular international recognised news portals each day. The final result keeps consistency of both context and visual design while reading and navigating through the site.
OPERATION / FLOW / INTERACTION:
Click/Tap the black square dot at top right to active 'interest detect mode', which show you 9 dots, and you may move your mouse on them to see the animation.
For touch screen device, 9News would show you a totally different home screen, which directly shows you 9 different symbols with animation. Tap to pick your favourite one, and the corresponding news would be pushed to you.
PROJECT DURATION AND LOCATION:
The project started in August 2014 in Hamilton, NZ and finished in October 2014, and was exhibited in Degree Show of University of Waikato in 2014.
FITS BEST INTO CATEGORY:
Interface and Interaction Design
PRODUCTION / REALIZATION TECHNOLOGY:
The web app is built with HTML5, CSS3, jQuery and SVG animation. CSS Cubic Bezier and 3D transformation technology to improve the web app's performance for low end devices and make the animation more vivid. There are plenty of breakpoints set for external CSS file, so that it could perfectly adapt to various size screen.
SPECIFICATIONS / TECHNICAL PROPERTIES:
9News is a fully responsive web app. HTML5, CSS3, jQuery is the technology used. Plenty of SVG animation is adopted to enrich its interactive feature. 9News works perfectly on desktop, tablet and phone size device.
9news, web design, interaction, svg, web app, interface, ux, ui, responsive
I would like to show how I connect users' reading preference and geometrical shapes. I gained the basic idea from <Understanding Comics>, where shows some great examples of relationship between how basic shapes and lines affects emotions. For the interactive part, I tried to combine what I learnt via the reasearch and keep consistency of design style.
To make the web app work on both desktop and small touch screen should be the hardest part, especially for the 9 dots page. The 9 square dots should be not only design for mouse (desktop) to click, but also need to be friendly to finger on users' smartphones. As a result, the interface design for this specific page is quite different. For small screen, the 9 square dots are replaced with 9 animated symbols that achieved by SVG, which works compatibly on Android and iOS system.
TEAM MEMBERS (1) :
Dingzhou Li, 2015.
Copyrights belong to Dingzhou Li, 2016.