9News News Reader Web App by Dingzhou Li |
Home > Winners > #38424 |
 |
|
||||
| DESIGN DETAILS | |||||
| DESIGN NAME: 9News PRIMARY FUNCTION: News Reader Web App INSPIRATION: 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, Interaction and User Experience 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. TAGS: 9news, web design, interaction, svg, web app, interface, ux, ui, responsive RESEARCH ABSTRACT: 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. CHALLENGE: 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. ADDED DATE: 2015-01-26 00:39:53 TEAM MEMBERS (1) : IMAGE CREDITS: Dingzhou Li, 2015. PATENTS/COPYRIGHTS: Copyrights belong to Dingzhou Li, 2016. |
||||
| Visit the following page to learn more: http://bit.ly/1Q7877i | |||||
| CLIENT/STUDIO/BRAND DETAILS | |
 |
NAME: Dingzhou Li PROFILE: 9News is Dingzhou Li's degree project for his bachelor degree of computer graphic design at University of Waikato in 2014. It aims to detect readers' reading preference by basic geometric shapes. Tomás García Ferrari supervised and guided Dingzhou Li through this project as a advisor. |
| AWARD DETAILS | |
 |
9news News Reader Web App by Dingzhou Li is Winner in Interface, Interaction and User Experience Design Category, 2015 - 2016.· Press Members: Login or Register to request an exclusive interview with Dingzhou Li. · Click here to register inorder to view the profile and other works by Dingzhou Li. |
| SOCIAL |
| + Add to Likes / Favorites | Send to My Email | Comment | Testimonials | View Press-Release | Press Kit |
Did you like Dingzhou Li's Interface Design?
You will most likely enjoy other award winning interface design as well.
Click here to view more Award Winning Interface Design.
  |
 |
