Keeping with our commitment to share our work and be transparent while we experiment, we’re making all of the design assets for our latest experiment, a local restaurant review app, open and available for anyone to reference or re-use.

This style guide includes the app’s color palette, fonts, graphics, and icons. It’s also available on Github. Here is a guide to what you’ll find there.

Color palette and fonts

We started out by taking a look at three potential approaches to the color palette and fonts for the app: one would closely resemble The Philadelphia Inquirer’s existing style; one would combine elements of the Inquirer’s style with some new elements; one would use colors and fonts that were distinct from the Inquirer.

After applying the color and fonts from all three mood boards to a few screens of the app, we asked for feedback and first impressions from our colleagues at the Institute as well as executives and designers at The Inquirer.

Here are the screens with no color applied:

Here are the screens with colors from each of the mood boards applied:

The mood board we chose was the combination, which inherited The Inquirer’s native blue, dark red, light grey, black and white. Since native blue has a high saturation and dark red is bold, they were great accent colors for the app. To balance out the look and feel of the full app interface, we added a light ocean blue and a dark navy as the primary colors. We also added a darker shade of grey to complement the light grey, to be used when a higher contrast was needed. The result is a theme that is calm, relaxing and sophisticated.

The font, Gotham Narrow SSM, is also inherited from the Inquirer’s mobile app. The Inquirer carefully chose that font because it’s clean and easy to read on a phone screen. Between the clean font and the balanced color palette, we were able to achieve our goal of a sophisticated app that reflected the quality of the professional restaurant content that would be searchable within it.

Graphics

Similar to the colors and font, the app graphics are also intended to be clean and sophisticated. Simple outlined shapes and lines with different weights achieve the goal. Because the graphics are simple, they are not only pleasing to look at but also don’t distract people from reading what’s important — the professional reviews and recommendations.

The graphics we included in the welcome screens were borrowed from our previous experimental app, HERE, but we applied the new colors.

We also added an “empty plate” graphic (above, bottom right) that appears when there are no results from a search or when someone hasn’t added a restaurant to their favorites list yet. They were designed to be fun and conversational.

Icons

For the main app icon, we decided to include eating utensils since the goal of the app is to help people to find the best places to eat in the area. With that in mind, I created simple shapes for a fork, spoon and a knife. Then I explored various ways to combine them as outlines or filled shapes. The team chose the filled shapes set on top of a circle background. The circle looked bold and simple on a phone’s lock screen, and at the same time, it can be interpreted as a plate or a rounded table.

The other icons used in the app were also designed to be clear, simple and clean as well. The thinly lined icons used for the settings area, search and filter tabs have less weight, and the simple shapes make the icons look sophisticated.

The filled icons used in the bottom navigation were also intended to be simple, but the solid shapes give them more weight. The result is that they’re more noticeable and the design differentiates their functionality from the icons at the top of the screen.

The icon that lets you ’favorite’ a restaurant and to ‘locate’ you both sit on top of small white circles because we needed them to stand out from the often busy background of restaurant photos or of the map.

If you have any questions about this work and how you might use it please reach out to me at [email protected]. Thank you!

The Lenfest Local Lab is a multidisciplinary product and user experience innovation team located in Philadelphia supported by The Lenfest Institute for Journalism.

The Lenfest Institute for Journalism is a non-profit organization whose mission is to develop and support sustainable business models for great local journalism. The Institute was founded in 2016 by entrepreneur H.F. (Gerry) Lenfest with the goal of helping transform the news industry in the digital age to ensure high-quality local journalism remains a cornerstone of democracy.