Redesigning Nextjournal, Part 1 - Typography, Colours & Illustrations
Hello! My name is Ashley and in Autumn of 2018, I joined the Nextjournal team as their new brand & product designer.
Over the next few weeks, I want to take you on a journey of how I approached the redesign of Nextjournal, my thoughts, my process and the struggles along the way.
This week we'll take a closer look at fonts, colours and illustrations.
Living our own Philosophy
Nextjournal is continuously in movement. We are always improving, adapting and evolving our product to keep up with our users' needs. Thus it became pretty clear early on that we wouldn't be able to adopt a linear rebranding process. Instead, we opted for improving the website and its parts first before diving headfirst into a long and lengthy rebranding and adapting the design as along the way.
The Typography of Data
Choosing the right fonts is never an easy task. Nextjournal is working with three different typefaces: serif, sans-serif and monospaced.
The requirements for each font were as followed:
- comes in various weights and styles
- legible in 10-point size and below
- similar x-height
- easily readable on screen
- highly legible for paragraph text
After trying out various font combinations, we settled on keep working with Fira Sans and Fira Mono as well as PT Serif for the meantime. They're all open source and have a very similar x-height. PT Serif does lack a larger variety of weights and styles but it still has a good legibility.
Colouring and Illustrating Data Science
Nextjournal's new colour palette is muted yet friendly and bright. We went with a medium teal and dark grey as the primary brand colours, with a handful of accent colours to loosen up the monochrome palette.
For illustrations we went with two different styles: scene illustration and spot illustration, accompanied by an extensive collection of icons.
The illustration style is kept rather minimal with a hand-drawn look to it. As much as I adore elaborate illustrations, I wanted to make sure that new illustrations can be created in under two hours to keep up with the fast-moving environment of Nextjournal.
Scene Illustrations
Scene illustrations are a crucial part of complementing a product and its message. Though they are kept vague and interpretable, they explain how something works and showcase the use of the product. The central part of each illustration is kept mostly in the primary brand colours, while the background is kept in light teal tones.
Spot Illustrations
Spot illustrations serve the purpose of showing features and quickly explaining the content that follows.
Iconography
For icons, we quickly decided to work with a premade icon set rather than creating one ourselves. Evericons is a collection of over 400 outlined icons and was exactly what we were looking for. The icons are minimal and easy to edit as well as extendable if adjustments or additions are needed.
Next week
Next week we'll dive into all the fun parts of creating sitemaps, redesigning a website and bugging people about shorting their content!