Gulf News Website Revamp
In 2017 we revamped the Gulf News website. This was one of the biggest projects of the Digital Media Unit. It was a project spanning almost 3 years and is continuously being built. It was also a transition from a third-party developer into the in-house team.
PROJECT SCOPE
The website was moved to a new CMS. All modules, components, static pages where to be moved.
Key objectives: Make the look and feel almost the same as print, increase readable space, increase advertising slot sizes.
DIRECT CONTRIBUTION
I was the lead designer for the project. I researched and gathered references from news sites that we modeled our new look and approach from - and studied what works for us. I created the wireframes, and made sure that the editorial requirements are met (as in number of stories) as well as the sales requirements for good placement of advertising slots.
DESIGN RATIONALE
TYPEFACE
For the typeface we chose Glosa and Montserrat. Glosa is a paid typeface, alsoused by the print newspaper. I only needed to test from its different fonts what works. Finally we settled on Glosa Text, and Glosa Title.
For our sans serif option, we were using Salvo Sans on print, but I proposed Montserrat - a free Google font - to save up on cost.
COLORS
I gathered the existing colors for Print, and reduced them to the minimum possible. We used to have color coded all our different sections but now we reduced the color coding only to select main sections. The idea of the website is Black / White and with hints of colors in select areas.
LAYOUT AND SPACING
I proposed to move the website from an old 960px width website to a 1140px width. This gave us more editorial space inside as well as advertising slot spaces. Considering a 1280px device - a "wallpaper" advertising type (horizontal top, with 2 side advertising) was still accommodated.
OVERALL IDEA
My overall idea for the website was for the interface to hold the content and be unobtrusive. This makes the headline/title of the story and the images as the main hero of the site. I have removed previous component designs where the borders was thick and dark/colorful, or where the backgrounds was solid and colorful. I however reserved a dark blue color for the background of multimedia elements or some content that we want to highlight.
