CNN redesign | website
website redesign 


CNN website concept

Many people nowadays using news portals to be aware of what's happening around the world. And not only actuality of news content important for the user but also how is simple and friendly will looks and feels the interface of news portal. Really important had a perfect mobile version in nowadays because more and more people watching and reading content from their phones and this's also about news content.

I tried to rethink news portal, correct user journey, user flow and create a fresh vision of it. Also, I create a fresh view of layout pages design, concentrate attention on 3 main sections and hide filters by buttons.


Solution

I developed a homepage concept CNN news channel and special attention to the system of video content. More people prefer video content to text and there for priority tasks were - design useful solution for video content and stay opportunity. The video started playing when a user opened the home page. The idea of a seamless transition between the video on the homepage and news article is the main idea of this project. A user can start watching video on the page. 

On the home page located 3 main sections with news content, a user can choose which topic is more interesting for them of each section. When a user hovers on one of the section appears a video player that has stop/play, going to the full article, change volume, and details about this video.




Mood board

Design based on worldwide trends newspaper editions in graphics and imposition of content and also on news channels.
Grid system

The grid-based on 8 columns structure for the desktop version and easily transformed to 6 columns for the mobile version. Also, this grid system allows place content on a page.



Typography and colors

For this project was chosen 2 typefaces, - Roboto for titles and some important information and second is a classical typeface Tahoma for article text and both of them clearly understandable and looks graphical. 

The color scheme was chosen close to branding colors of CNN, but I make little changes to refresh them (red color) and I choose light grey and white colors to make the concept more graphical and easy to read. Also, I made a small icon set for this concept. These icons are simple and geometric.



Video widjet solution

Video content starts playing when the user load homepage and when page scrolling down launched video minimized at “video line” minimalistic version of the video player. Most of the functions of this player user can see when he/she hover on video (standard functions – pause, play, next video, full screen) and other functions on “video line” are a small description of the video, “read more” button, time of publication.
 
When a user press “read more” opens pop up full article window, without reloading page.

This is the main menu of the website (shot version). User can find here most popular of the sections and some useful information like a temperature of city and social network links. But if this information not enough, the user can click on the “full menu” button and see the detailed menu. ​​​​​​​


​​​​​​​This is main menu of website (shot version). User can find here most popular of the sections and some useful information like a temperature of city and social network links. But if this information not enough, user can click on “full menu” button and see detailed menu. 




Mobile

Mobile version also based on the main idea - using video content how a prioritize type of content. A lot of attention given to the user interface in mobile devices, it needs to be simple and understandable.  In the filters section, we got many details that help the user choose an interesting topic and find a useful article.

CNN redesign | website
54
519
3
Published:

CNN redesign | website

54
519
3
Published:

Tools

Creative Fields