Fortnightly

Fortnightly is a news app that uses Material Design components and Material Theming to create an on-brand, content-focused experience.


About Fortnightly

Fortnightly is an app that covers the news on a variety of topics. The app’s focus is on content, specifically article copy and photography.

Fortnightly’s brand is designed to provide a variety of content in a way that puts the content itself at the forefront of the user experience. Branding is expressed through the Fortnightly logo, typographic system, and appearances of purple (the app’s secondary color) in an otherwise grayscale app. This subtle approach ensures that when brand is expressed, either through an appearance of color or typography, it will be noticable.

Content-focused

Fortnightly’s aesthetic puts focus on content by using a grayscale color palette to allow photography to stand out, and by using a typographic scale that...

Read More

Fortnightly’s aesthetic puts focus on content by using a grayscale color palette to allow photography to stand out, and by using a typographic scale that makes headlines bold, and long body copy easy to read.

The app’s layout grid draws inspiration from newspapers to give the app a traditional, intuitive structure, while delivering a dense amount of content.


Product architecture

Fortnightly’s information architecture is organized into a catalog structure. A catalog contains categorized, hierarchical information, with a top level consisting of peers that may contain subordinate information. Fortnightly’s content is separated into main sections and subsections that are similar to those found in a newspaper, such as front page, world, US, politics, and business sections.

A catalog structure allows users to quickly navigate to an area of interest. Navigation drawers are ideal for navigating through catalog structures, which is why Fortnightly uses this component.

Navigation drawer

Fortnightly uses a standard navigation drawer on tablet and desktop, and a modal navigation drawer on mobile. The affordance to open the navigation drawer is...

Read More

Fortnightly uses a standard navigation drawer on tablet and desktop, and a modal navigation drawer on mobile. The affordance to open the navigation drawer is a navigation icon found in the top app bar.

Navigation sections

Navigation sections are represented by text only, and sections with subsections are given an arrow to indicate they can be opened.

Branding moment

Fortnightly also uses the navigation drawer as a branding moment, placing the logo inside the drawer.

Navigation drawers are used on mobile, tablet, and desktop.

Top app bar and chips

Fortnightly’s top app bar contains a navigation icon, logo, search capability, and chips are used to present trending hashtags. When a chip is tapped, articles...

Read More

Fortnightly’s top app bar contains a navigation icon, logo, search capability, and chips are used to present trending hashtags.

When a chip is tapped, articles related to the hashtag populate the page. Compared to the traditional navigation experience found in the navigation drawer, this allows a different type of content exploration.

Fortnightly’s top app bar and chips

Short top app bar

On scroll, the top app bar collapses to become a short top app bar, allowing more space for content. The short top app bar contains...

Read More

Search

Fortnightly has a robust search capability to quickly get readers to their desired content. After the search icon is tapped, a full-screen dialog appears with...

Read More

Fortnightly has a robust search capability to quickly get readers to their desired content. After the search icon is tapped, a full-screen dialog appears with a search entry field and trending hashtags. After a search term is entered, the results are shown in the full screen dialog.

The dialog closes when a search result is selected, or the dialog close button is selected.

Searching Fortnightly


Layout

Grid system

Fortnightly packs a variety of information together, particularly in places like its landing page. In other places, such as an individual article, it provides generous...

Read More

Fortnightly packs a variety of information together, particularly in places like its landing page. In other places, such as an individual article, it provides generous whitespace for content. All pages use the same responsive grid, allowing content to reflow into the screen space available, after certain breakpoints are reached.

Layout grid across breakpoints, scaled down to 50%

Elevation

Fortnightly uses shadows to indicate elevation. Shadows are used sparingly, and for certain key moments. For example, the elevation of a top app bar isn’t...

Read More

Fortnightly uses shadows to indicate elevation.

Shadows are used sparingly, and for certain key moments. For example, the elevation of a top app bar isn’t expressed until a page is scrolling, when it transforms into a short top app bar. When articles are hovered over or tapped on, a subtle shadow treatment is applied, giving the appearance of lifting the article up. Navigation drawers always use shadows, as not to confuse the reader where the drawer begins or ends.

1. Selected article with shadow
2. Short top app bar with shadow
3. Navigation drawer with shadow


Color

Color theme

Fortnightly’s primary color is white. It uses a grayscale color palette so that photography stands out and copy is easy to read without distraction. Fortnightly’s...

Read More

Primary color

Fortnightly’s primary color is white. It uses a grayscale color palette so that photography stands out and copy is easy to read without distraction.

Secondary color

Fortnightly’s secondary color is purple. It’s used sparingly to ensure it has a high impact in the places that it appears.

Color theme

Color and image

Image treatments are a subtle way of providing branded opportunities.

Read More

Image treatments are a subtle way of providing branded opportunities.

1. When an article is hovered over on desktop, a semi-transparent purple fill is applied to the corresponding image, revealing a share function.
2. The pressed state of an article on mobile is expressed by applying a semi-transparent purple fill over the corresponding photo.

(Scaled down to 62.5%)

Scrim color

When navigation drawers and bottom sheets appear, Fortnightly displays a white scrim in front of the rest of app content. The scrim is opaque enough...

Read More

When navigation drawers and bottom sheets appear, Fortnightly displays a white scrim in front of the rest of app content. The scrim is opaque enough to ensure the user can distinguish between what is functional, and what is disabled.

Navigation drawer with white scrim


Typography

Typefaces

Fornightly uses the Libre Franklin and Merriweather fonts.

Read More

Fornightly uses the Libre Franklin and Merriweather fonts.

1. Libre Franklin

2. Merriweather

Type scale

Fortnightly’s type scale provides typographic variety through the use of two typefaces: Merriweather and Libre Franklin. Merriweather is used as a display font and body...

Read More

Fortnightly’s type scale provides typographic variety through the use of two typefaces: Merriweather and Libre Franklin. Merriweather is used as a display font and body copy typeface, when reading is the main user focus. Libre Franklin is used on screens where scanning and browsing content is the main focus.

Fortnightly’s type scale

Merriweather

Merriweather was designed to be a text face that is pleasant-to-read on screen. It has a large x-height, slightly condensed letterforms, a mild diagonal stress,...

Read More

Merriweather was designed to be a text face that is pleasant-to-read on screen. It has a large x-height, slightly condensed letterforms, a mild diagonal stress, and sturdy serifs.

Merriweather’s letterforms

Merriweather compared to Roboto

Libre Franklin

This sans serif typeface is an interpretation and expansion of Franklin Gothic. Although Franklin Gothic was originally cut to be used as a display face,...

Read More

This sans serif typeface is an interpretation and expansion of Franklin Gothic. Although Franklin Gothic was originally cut to be used as a display face, it’s also legible when used at small sizes. It’s various weights make it easy to establish a typographic hierarchy.

Libre Franklin’s letterforms

Libe Frankin compared to Roboto


Iconography

Instead of infusing brand or personality into iconography, Fortnightly takes the approach of using recognizable, functional icons that have no customized characteristics or ornament that make them distinct. This lack of character in Fortnightly icons ensures they can be paired with any content of any tone and not clash.

1. Fortnightly’s icons were designed using the same grid structure, 2. A collection of Fortnightly’s icons


Components

Dialogs

Certain content, when hovered over or tapped on, launches a dialog window to provide further information. Fortnightly uses this often to provide biographical information, allowing...

Read More

Certain content, when hovered over or tapped on, launches a dialog window to provide further information. Fortnightly uses this often to provide biographical information, allowing users to educate themselves further about people mentioned in articles.

Fortnightly uses a white scrim to indicate all app functionality is disabled while the content is on screen. On desktop, the dialog and scrim remain until the user hovers off the name; on tablet, they remain until the user taps outside of the dialog.

Further biographical information is available when the user hovers over or taps certain names.

While a dialog is used on desktop and tablet, a sheet is better suited to mobile.

Text fields

When searching is the primary action on a screen, Fortnightly uses scale to add emphasis to the search text field. Dialogs inform users about a...

Read More

When searching is the primary action on a screen, Fortnightly uses scale to add emphasis to the search text field.

Text field

A baseline filled text field without customization.

Text fields are easy to identify in Fortnighly’s layout, so the baseline fill is removed and the container stroke becomes the primary identifier.

After a search query is sent, a loading motion is used on the text field’s container stroke to indicate a search is underway.

Chips

Fortnightly uses customized choice chips for a theme-based search experience.

Read More

Fortnightly uses customized choice chips for a theme-based search experience.

Fortnightly’s customized choice chips

A baseline choice chip without customization

Fortnightly adjusts the baseline choice chip shape, stroke, typography and color to create a custom filter chip.

Lists

Fortnightly uses a customized list for its search results. This customized list provides generous white space around each list item and the variety of information...

Read More

Fortnightly uses a customized list for its search results. This customized list provides generous white space around each list item and the variety of information each contains (such as section, date, article title, brief description, and photo). The white space allows the user to quickly scan results according to whichever information is most useful.

Search return list on tablet

Steppers

Fortnightly uses a linear stepper in its subscription process. Each step acts as an expandable drawer, with vertical lines establishing areas of focus. The Fortnightly...

Read More

Fortnightly uses a linear stepper in its subscription process. Each step acts as an expandable drawer, with vertical lines establishing areas of focus. The Fortnightly purple accent color highlights the active step.

Fortnightly’s linear stepper


Motion

Product icon

Fortnightly’s logo animation reflects the calligraphic nature of its letterforms. Motion can be customized to express a distinct style and personality. Related Article arrow_downward Product...

Read More

Navigation transitions

Fortnightly uses simple fade through and condensed transitions to complement its reserved approach to branding. The simple transition style helps balance the dense amount of...

Read More

Fortnightly uses simple fade through and condensed transitions to complement its reserved approach to branding. The simple transition style helps balance the dense amount of content displayed.

A parent-child transition uses a condensed transition to maintain a clean and simple style.

Navigation drawer transitions use a subtle fade through animation.

Loading

Fortnightly uses subtle stagger animation on placeholder elements to indicate loading without distracting from the content.

Read More

Fortnightly uses subtle stagger animation on placeholder elements to indicate loading without distracting from the content.

Placeholder elements have a subtle downard stagger animation that indicates loading.