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 early work started redefining the Timeline logo, I crafted the brand identity, from colours, proportions.
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.
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.
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.
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.
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.
Baseline scales to multiple of 12pt. Minimum baseline 12pt
Vertical spaces and margins should be multiples of the 12
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.
