Paper to Pixels

The Livrada Live Reader started with a set of sketches. Using a lo-fidelity pen-and-paper approach allowed me to experiment with the app’s main features without a high degree of commitment. I really like the idea of increasing fidelity only when it’s justified, so sketching provided the base for the Live Reader design.

I moved on to digital wireframes once a strong direction had been accomplished in the sketches. Moving from paper to pixels forced me to define a workable layout grid that holds the interface together seamlessly.

Creating a Design System

Livrada had an existing style guide for its brand when I started, but it was admittedly sparse and incomplete. The team gave me free reign to establish a system that complemented the existing brand, but extended it into new territories.

We landed on a direction that focused on minimalism. By identifying legibility as the most important quality, we let the design get out of the way by creating intentional white space and letting the bright color palette and book cover images add emphasis and pop.

Flat design is especially popular, but we didn’t want to fall into the trap of a fad or do something just because everyone else is using it. We used a frosted glass technique to add a subtle texture where depth was needed, which gave the overall design a unique touch of personality.

Responsive Layout

The biggest challenge I faced was not just finding a way to convey a huge amount of information into a small screen size, but how to scale it up to a nice desktop experience as well. For example, the library screen alone required:

Book cover images

Book title

Author name

Reading status

Completed status

Sort by category and type

Search

I was able to find a way to display these components cleanly in a layout that scaled from mobile to desktop and everything in between. The challenge is making all that information not look overwhelming on small screens and underwhelming on larger ones.