Timeline

2014
Role: UX - UI - interaction - animation - front end dev - art

One big complaint about current news coverage is that there’s not enough context — an article or TV report might tell you what happened today, but it gives you no understanding about the history that led up to today’s news. Now Timeline is aiming to change that. The goal was crafting an iOS iPhone App and a mobile-first Web App.

The brand

The early work started redefining the Timeline logo, I crafted the brand identity, from colours, proportions.

Timeline logo

Making the iOS app the most important product, the logo was crafted with a big consideration for the iOS platform. The icon app is the first element that a user sees on his smartphone screen, so we continuously tested the logo on every icon size.

Timeline iOS

The structure

The work started with the IA and UX, the main structure was already done by the UX team. I created very quick mockups and interactive prototypes and the app flow exploring different ideas.

Timeline UX oneTimeline UX two

Start from the most important element

95% of web design is typography, without type everything will lose its purpose. The app design started from the most important and used elements of the whole app, the story text paragraph. Doing this means using a content out approach, from the small element to the big ones.

Timeline typography

I played with the text, choosing the right typeface and exploring also a good fallback typeface. Downloading an external font there’s the risk that the content isn't showed suddenly, an important step was to choose a good font stack from the default device type sets.

Timeline typeface

Contrast

Typography on-screen differs from print in a few ways: the physical space, its lighting and the device. A reader may spend a sunny day at the park reading on their phone. Or perhaps they’re in their house reading subtitles off their TV ten feet away. As designers, we have no control over any of this. It is essential to use a combination of colours with a high contrast that makes everything easy to read.

Timeline type contrast

Typography

Timeline typography two

Structure of Type

Timeline type structure

Baseline

Baseline scales to multiple of 12pt. Minimum baseline 12pt

Vertical spaces and margins should be multiples of the 12

Timeline typography baseline
Timeline typography baseline two

Design system is about commu-nication

Today communication is essential. With a front-end background, I know what’s going on inside the browser. I made the interface as modules, it means to create a strong and intuitive layout, permit to find fast mistakes, imprecisions but also means less and faster CSS code to write. The result was also a Guideline for the developer team for improving communication and build a great product.

Timeline Design system

Iconography

Timeline iconography

Visual design

With everything ready, the last thing to do was to complete the interface and fill the app with some real content and text how it reacts in every situation. The editorial team provided us with some articles for testing the UI interfaces.
Timeline visual one
Timeline visual two
Timeline visual threeTimeline visual four

Someone talked about it!

👍 :thumbsup:
Timeline articles
Timeline featured
Timeline cover

Thanks for watching! 👀