Prismatic is a smart news reader app that gets to know you through your reading habits and social activity to help you discover the most interesting stories.
The app is all about reading and the discovery experience, so we felt that the visuals needed a refresh. We updated the layout, typography and colors to help get better readability, scannability and a simpler and friendlier interface.
The newly redesigned Prismatic news feed
A look at the full view of an article
The 8px baseline grid
To make articles easier to parse and read, we increased the type size and leading across the board. We started with an 8 pixel baseline grid to help us achieve a nice typographic rhythm, along with establishing a strong sense of vertical rhythm. We stuck with Unit, Unit Slab and Meta Serif for this update, to stay consistent with the current web product and branding. They have high legibility and just needed to be typeset properly.
The new action bar
We largely kept the current UX intact for this update (although this will be changing soon enough!), but we did make a few interaction changes. The most major one is the removal of the radial action menu and trading that in for a simpler and more direct action bar. The old behavior used a press and hold action in order to surface the actions you could take on an article. We decided that, although quirky and novel, this interaction was also unintuitive. Instead, we went for a more direct approach and attached a persistent action bar to every story.
In order to get a friendlier look and feel, we tweaked the icons (including the logo) to have rounder edges and a more playful attitude.
We wanted to continue this friendlier vibe into the color palette as well. The previous colors felt a little harsh on the eye, so we adjusted the palette to be less saturated and have warmer tones all around. The old orange color #ff8000 evolved towards a warm red color #ff5959. We also added a matching green to our color palette for any positive or confirmed actions.
If you don’t have it yet, download Prismatic on the App Store!
