7

Are there names or guides to classify similarities or reoccurring style patterns within UI? For example, Retro, Legal, etc.

Example of UI patterns used in login forms:

Indented outlines

Flat, no effects

Indented, soft-polished form elements

Natural, stone, iOS-looking

Fabric, woven

Retro

Improve this question
1
  • 1
    Your description terms are as good as any, IMHO.
    – DA01
    Mar 17, 2013 at 5:16

3 Answers 3

Reset to default
2

I know I'll probably get into a lot of trouble for this, but I think if you look at this from the most generic to the most specific range of UI 'styles', then right at the top of the chain you have the flat/simplistic style that seems to be what people associate with the Bauhaus/Windows 8/Metro, and then there's the semi-skeuomorphic/rich style that people associate with Apple. In other words (and this may be over simplifying it too much), it is the distinction between 2D and 3D style of UI design (having said that, the behaviour can also make something look 2D/3D, so I'll qualify it by saying visual design).

I think from this top structure you are looking at a flat hierarchy, or perhaps a matrix (which relates back to the top level distinctions) that combines elements like texture, colour patterns, use of icons/text, and interaction/behaviour. I would be interested to see what some of the opinions are, and I definitely think this is an interesting question for a bounty.

Improve this answer
3
  • I completely see your point, and don't entirely disagree, but it still pains me to see "Bauhaus/Windows 8" used together. ;)
    – DA01
    Mar 17, 2013 at 23:34
  • Sorry, that's just my perception of the general public perception. Besides, some people also complain about putting skeuomorphism and Apple used together as well...
    – Michael Lai ♦
    Mar 17, 2013 at 23:48
  • whats about neo-, hyper-, semi-realistic interface as you see in many games like monkey islands, sim city, counterstrike, ... I think its a triangle rather than a line.
    – FrankL
    Mar 19, 2013 at 20:30
1

I would classify your examples as UI trends rather than UI patterns. I do understand your question though. At the moment, these designs seem like UI patterns as they crop up everywhere. But they don’t last. They have no function really — they are just styles to make the UI pretty. They don’t really make the interface more intuitive. If I was to give an example of a UI pattern then I would cite breadcrumbs.

Improve this answer
2
  • That's a good point. But I would argue that it is important for a UI pattern to have a certain look and feel to try and support the particular task for the user. I am not a particular advocate of making the UI look pretty. A way to distinguish/classify how a UI pattern is implemented (i.e. its styling) is quite useful.
    – Michael Lai ♦
    Mar 17, 2013 at 23:52
  • Sorry, the question was somewhat confusing. I've clarified it. It was referring to the pattern of styles in UI.
    – Timofey Drozhzhin
    Mar 18, 2013 at 23:42
0

You wouldn't find such "named patterns" anywhere as these styles could be described in more than one ways. For example

  • Indented Outlines may also be called Minimalistic, 2 Colors, Gray, Soft, Circular, Rounded Edges

  • Flat, No effects may also be called Minimalistic, Metro Style, Google Colors, Pestle Colors etc. Look at your own name to describe this category, you had to use two names to describe them.

Art is diverse and it is difficult to give some art form a literal name unless it is starkly different, unique and adopted by thousands. When you say "Flat", it may only mean "Bevel-less" which has been ruling 1990s but strikes, shadows, gradients etc may still find their space within "Flat" definition.

Concluding: Art which you just shared is varying and similar in so many ways. If somebody names these design styles, it wouldn't be globally accepted one and as of I know, there are no accepted names either. We will eventually have name for this art but probably this would be "Minimalism of the decade 2010" etc but not down to every stroke style or embossed/engraved background.

Improve this answer
1
  • Theoretically, it can be divided by most used, distinct styles; just like the videos are grouped into categories on YouTube, while the possibility for video styles are endless.
    – Timofey Drozhzhin
    Mar 18, 2013 at 4:07

Your Answer

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

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