Use of Flat Design in Mobile App Interfaces, Best Examples

Emphasis on typography, roomy widgets, muted color palette, one-colored or blurred background, grid or horizontal stripe layout, inornate graphics, 2d illustrations – all these can be easily attributed to flat style, that recently got its second rebirth.

Microsoft’s “Metro” aesthetic has captured the minds of a great deal of designers, pushing them on eschewing shadows, highlights, gradients, various effects and even textures. Such overwhelming infatuation with simplicity and ingenuousness has been reflected not only on web design, but also on mobile design, that traditionally has been known for its skeuomorphism.

Today contemporary mobile app UI is inspired by time-tasted Swiss design that beautifully intersects with modern Windows 8-style, that as a result gives us interface, which is generally focused on typography and huge vibrant monochromatic blocks.

Fresh and Exquisite Flat-style Mobile App Interfaces

National Geographic Re-design looks sophisticated and stylish. Dark and yellow color palette never gets old; it is beautifully accompanied by white font and spectacular nature shots.

National Geographic Re-design

Taasky by Jakub Antalík has a refined appearance. Grey background is nicely brightened by muted color palette and rainbow-like panel on the right side.

Taasky by Jakub Antalik

New Music App by Amit Rai delivers overwhelming first impression, fascinating users by vibrant warm background and exquisite almost transparent circular navigation panel.

New Music App by Amit Rai

PicLab by Roberto Nickson utilizes bright colors in order to make interface inviting, and also provides colorfully executed footer with settings.

PicLab by Roberto Nickson

Samsung Smart Home App Concept by Ali Rahmoun has indiscrete lively tile-based outward. It also depicts colorful grid along with white flat regular icons.

Samsung Smart Home App Concept by Ali Rahmoun

Alarm Clock App by Samuel Bednár has a truly minimalist vibe, leveraging grey color scheme, plane graphics and several vibrant elements.

Alarm Clock App by Samuel Bednar

Time Zone App Concept by GraphicBurger has a brisk color-driven interface that capable of representing data both in lines and as a grid. Both approaches are spiced up with glaring and alluring shades.

Time Zone App Concept by GraphicBurger

Snapseed Redesign by Shiping Toohey features full-screen showy photo background that is supported by vivid flat-style footer with settings.

Snapseed Redesign by Shiping Toohey

SVOY app design by Alexandre Efimov At first sight, interface looks like a colorful mess of colors, plane graphics, images, typography and icons, but in fact it is efficiently organized.

SVOY app design by Alexandre Efimov

Room App by Pavlo Tyshchuk easily provides powerful contrast between photo background and foreground elements due to relatively huge monotonous data blocks and distinctive blue and white colors.

Room App by Pavlo Tyshchuk

iOS App Liga Moche by Duarte Pires strongly relies on three-color scale. Designer wonderfully combines and complements widgets of different colors, keeping things accurate and organized.

iOS App Liga Moche by Duarte Pires

Discovery Channel by Enes Danış uses list-oriented layout to demonstrate as much data as possible. Lack of optional styles and shadows makes application look neat and clean.

Discovery Channel by Enes Danış

Turkish Airlines Redesign by Umut Isbilir leverages white as a core color and sharp foreground elements, thereby readily adding to interface clean and fresh appeal.

Turkish Airlines Redesign by Umut Isbilir

Chamonix Experience iPhone app skillfully utilizes only 2 colors: sky blue and strong white. Intuitive vector icons and ordinary sleek rather small font are ably arranged, so that on the whole application has a lively spacious appearance.

Chamonix Experience iPhone app

Bubble weather app by Pamela Rodriguez represents weather conditions with a help of bicolor scheme, providing owners with highly discernible data.

Bubble weather app by Pamela Rodriguez

Exberliner by Raïssa Lara Fasel has a beautiful neon vibe. Prevailing black colors, huge type and injections of blue make application look a bit glamorous.

Exberliner by Raissa Lara Fasel

FlatPlayer by Ehsan Rahimi has a lively but slightly messy horizontal stripe layout which is supplemented by muted red and blue colors. Nevertheless UI has modern and stylish outward.

FlatPlayer by Ehsan Rahimi

A Productivity App by Megan Holstein is another good example that utilizes stripe layout, which is enlivened by bright colors and ribbon-themed graphics.

A Productivity App by Megan Holstein

TargetBuy by Martin Schurdak plays heavily on 3 color palette: grey, white and red. Huge sleek light icons and smooth lines add a sense of business atmosphere.

TargetBuy by Martin Schurdak

Hunt a Place is a comprehensive exploration in flat style. Interface comprises majority of aspects of it, including blurred background, plain monotonous icons, tiny font and a lot of free space.

Hunt a Place

App | Trekd Concept by Thomas Le Corre exudes simplicity and cleanliness, adding a spacious feeling due to relatively small type and rather huge widget areas.

Trekd Concept by Thomas Le Corre

Lucid Dreaming APP by Michał Sambora immediately states the idea behind an app by means of properly chosen color palette ( which is widely associated with night and dream) and several appropriate graphical elements such as moon icon or photo of darken landscape.

Lucid Dreaming APP by Michal Sambora

Weather App “Outside the window” by Artem Svitelskyi leverages only 2 colors. First one is used for background, and second one is responsible for highlighting rest components, including icons, pagination and type.

Weather App "Outside the window" by Artem Svitelskyi

Music App by eyal zuri takes on minimal style, and showcases elegant flat audio player with neatly placed components.

Music App by eyal zuri

Profile Screen by Zane David gets the feel of refined flat style from circular plane elements, regular icons, shadowless components, one-colored background and comparatively small lettering.

Profile Screen by Zane David

Weatherette by Fabio Basile is another good example of line-inspired layout. Interface is filled with a great deal of weather information that is liberally scattered throughout all strings.

Weatherette by Fabio Basile

Invoice APP by Tomas Zeman has a strong circular vibe. Majority of data enclosed in round shapes that wonderfully complemented by pale color palette.

Invoice APP by Tomas Zeman

HTML5 app by Zach Robinson closes our collection with its polished and clean interface. It ably draws attention by bold colors and sharp neat icons and charts.

HTML5 app by Zach Robinson

Reflection

Flat style is famous for its ability of adding extra flair of sophistication, elegance and neatness to any app interface, making it look more spacious and organized. As a rule, plain graphics and common icons skillfully interact with vivid color scheme, recreating flamboyant touches. Simplicity, absence of styles and effects give the design, at the same time, uncomplicated, and slightly intricate appearance.

Share with us your opinion about utilization of flat style in mobile application design? Which example has earned your admiration? Do you prefer elegance and ease of flat style or realism and complexity of skeuomorphism?

Nataly Birch

I'm an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

Newsletter

8 Comments
  1. Thassio Victor Jun 19, 9:45 pm

    Breathtaking design :O

    Reply
    +13
  2. akash@graaby.com Jun 19, 10:20 pm

    Why are no android apps mention here at all?

    Reply
    +18
    • Niel Jun 20, 4:12 am

      Hidden due to low comment rating. Click here to see.

      Reply
      -22
      • akash@graaby.com Jun 20, 4:58 am

        Well its sad to note that authors and designers both think that iOS is a better platform to design. Fortunately, Holo based apps are by themselves flat in nature, so i can understand why only iOS is being highlighted here. Time to catch up :)

        Reply
        +18
  3. Sarah Bauer Jun 20, 1:20 am

    Flat design + muted color palettes = meant to be together. Taasky is a brilliant case in point. Looks fantastic on mobile!

    Reply
    0
  4. Max Batt Jun 20, 3:44 pm

    Really amazing stuff. However I’m a little sad to see how much of this is portfolio / concept work rather than developed apps. It’s substantially easier to develop a beautiful mockup in photoshop than it is to see it through development and deliver it – many of the design features in place at conception oftentimes turn out to be impossible or improbable to implement. I do feel like the design has been validated only after it has successfully been built. So while these are indeed wonderful it would be nice to see more real-world examples of app design in the future.

    Reply
    +25
  5. Andrew @ Lightroom Love Jun 23, 4:55 pm

    Hey, fantastic round up of flat design. I’m developing a mobile app of my own right now and this is tremendously useful for me.

    One thing that I’ve noticed in exploring flat design is that there’s almost a color palette that is specific to flat design. There are some reds and oranges in the screenshots above that are common to many of the apps showcased.

    I think flat design brings with it some details that we’re hardly even aware of, yet shape the style.

    Thanks again.

    Reply
    +3
  6. Alex Chengalan Jul 2, 9:52 am

    Nice designs by designers and difficult task for developers :(

    Reply
    +5

Leave a Reply

*
* Minimum length: 20 characters