Stylogeny combining Flat Design × Skeuomorphic UI

Try

Style combination · Contrasts

Flat Design × Skeuomorphic UI

It is the style flat design was defined against; toggling between them is the clearest way to show an interface's evolution.

From the research on Skeuomorphic UI

Its direct predecessor and foil: one realistic, textured object on an otherwise flat screen becomes an instant focal point.

From the research on Flat Design

Mix them and make something Flat Design Skeuomorphic UI

HelloFlat Design × Skeuomorphic UI2010 · 2000
A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from Skeuomorphic UI, the finish from Skeuomorphic UI. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Flat Design Skeuomorphic UI

Type from Flat Design
Colour from Flat Design

Skeuomorphic UI avoids flat fields: this is where the two pull against each other, which is the point of the contrast.

Form from Flat Design
Composition from Skeuomorphic UI

Flat Design avoids illusion of depth: this is where the two pull against each other, which is the point of the contrast.

Surface from Skeuomorphic UI

Flat Design avoids skeuomorphic material and gloss & highlights: this is where the two pull against each other, which is the point of the contrast.

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Flat Design

Hello

Inter, standing in for Segoe UI

Text · Flat Design

An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.

Inter; Flat Design used Segoe UI and Helvetica Neue

03

The colours

The ground and leading colours come from Flat Design, with a counter-accent from Skeuomorphic UI. The ink reads on the ground at 4.5:1 or more.

Flat Design Skeuomorphic UI

  • #ecf0f1 ground · 36%
  • #2c3e50 ink · 14%
  • #f1c40f accent · 18%
  • #4a87c9 accent · 14%
  • #e74c3c accent · 10%
  • #2f6b3a accent · 8%

As CSS

:root {
  --ground: #ecf0f1;
  --ink: #2c3e50;
  --accent-1: #f1c40f;
  --accent-2: #4a87c9;
  --accent-3: #e74c3c;
  --accent-4: #2f6b3a;
  --font-display: "Inter", sans-serif;
  --font-text: "Inter", sans-serif;
}

04

The two styles

A bright planning-service homepage features a large “Plan Brighter” headline, an illustration of a woman using a laptop, and four colourful feature tiles. Below, a second illustrated person points at a planning board beside introductory text and a Get Started button. 2010–2016 · North America, Global / networked Flat Design An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens. An outdoors-themed homepage places a green leather journal and pen beside layered paper, a mountain lake photograph, a brass compass, pine sprigs and a topographic map on a wooden surface. A stitched leather navigation bar tops the page, and five illustrated shortcuts sit beneath a blue “Start Exploring” button. 2000–2013 · Global / networked Skeuomorphic UI Interface design that imitates physical materials and objects (stitched leather, linen, wooden shelves, brushed aluminium, felt, paper and glass) so that digital tools look and behave like their real-world counterparts. Extending the GUI's desktop metaphor into photorealism, it ran from Apple's Aqua and brushed-metal interfaces around 2000 to its peak in iOS 1–6 and Mac OS X Lion, and was abandoned for flat design with iOS 7 in 2013.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Skeuomorphic UI

Every style combination