0

Recently, I have been seeing more and more examples of some kind of design style consisting only of rudimentary basic shapes, leaving out as much detail as possible. It's been used for many things, but mostly to illustrate UI.

The following examples could be classified as flat design, but I'm feeling it's not just that. Maybe it's a sub-style or kindred style? Can anyone help me put a name to this style? Maybe Flat Design Blocked? Or Flat without details?

Some examples:

Treehouse shows this a lot

Treehouse Flat blocks
Full size

Also Adobe has been using this style as of late in some of their help docs

Illustrator Flat Design Block
Full size

Improve this question
3

6 Answers 6

Reset to default
3

I've heard it referred to as blockframing, as in wireframes with block elements.

Improve this answer
2

The dashes are usually used in wireframe designs and scamps. I would call this a flat design mockup concept.

When I ran a search I came across this http://www.titanui.com/17339-flat-designed-mobile-cooking-app-wireframe-psd/

Hope it answers your doubt

Improve this answer
6
  • thanks for your answer. That's a reasonable name except it can be a misnomer since this design trend is used in production (and not just in wire frames) all over the internet including my examples .
    – Gaurav Ramanan
    Commented Apr 17, 2016 at 21:47
  • Perhaps you can call it low fidelity flat design. Fidelity itself is a photoshop term
    – Sabee
    Commented Apr 17, 2016 at 21:53
  • When I googled low fidelity mockup I ended up with a result which matches the expectation. dribbble.com/shots/1278602-Low-fidelity-wireframes
    – Sabee
    Commented Apr 17, 2016 at 21:57
  • Fidelity isn't a Photoshop term... it is a term used in many many context.
    – Cai
    Commented Apr 17, 2016 at 22:45
  • CAI: Iam pretty sure I came across FIDILITY in my lifetime. I am sure the moderator of this post understood what I meant. It is an option in Photoshop and hence it is okay to use it as a name for this design.
    – Sabee
    Commented Apr 17, 2016 at 23:03
1

It's a concept taken from something called block framing which is simply creating something out of blocks.

Improve this answer
1

You will find similar results when looking for 'Low Fidelity' icons, wireframes etc. The style comes from low fidelity wireframes, used in the early design process to roughly sketch out the flow of a product.

However lately you see a lot of icons in this minimal style and I have found a lot of these icons are labeled as 'minimal flat design' too.

It does indeed fall under flat design as well, and you will find many similar results when looking for flat icons.

Improve this answer
1

As the other answers collectively point out...there is no single term for this.

Adjectives to describe it could include

  • flat
  • simplified
  • iconinc
  • geometric
  • wireframed
  • low-fi(delity)

Like most good branding, it's merely a style that was replicated throughout their branding and that is the key...less so than what the actual style might be called or based on.

Improve this answer
0

if such figures are hand drawn its called "LOW FI PROTOTYPES" ..so i think in your case it might be called "LOW FI PROTOTYPE VECTOR".. but still im not sure about that

But recently i was also in search of such elements and i stumbled upon some such elements in themeforest.
https://themeforest.net/item/madkit-lowfi-prototypes-uxui-kit/15693066

Hope this helps

Improve this answer
1
  • LO-FI just means at it's most basic level, typically being drawn in outlines or looking like a sketch.
    – nblackburn
    Commented Aug 24, 2017 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.