4

I really like the look of this screenshot on Dribbble:

enter image description here

And I'd like to employ a similar navigation for both desktop and mobile devices.

  1. I’m looking for a similar UI set – large (X) to close out a pop up box, for example –. Is this a current trend or is it custom?

  2. In the same project I really like the glassy/blurred out backgrounds that they are using for the mockups. My application is different, but the look and feel would apply to my project. Is there a certain search term that I could use for that background style and super-thin icon UI?

enter image description here

Improve this question
6
  • Flat is the only term being used I've seen.
    – Scott
    Commented Oct 20, 2013 at 21:37
  • do you have any suggestions on where to look for superthin but large UI components? Also, the background over elements in the bottom photograph, is that simply an overlay of a solid color with a lowered opacity… Or something a little bit more complex.
    – Charles
    Commented Oct 21, 2013 at 1:40
  • I'd call it minimalist flat (flat design isn't always minimalist, but this variant is). But that's just a description, not a name. It reminds me a bit of a print design style that was popular in 2011-12, all about thin lines, circles, diagonals & colour fields, though that style (for some reason) was almost exclusively bright yellow, white and black. Not sure about names for that style either (closest I can find to a reference to it I can find is this observation that doesn't know how to name it either).
    – user56reinstatemonica8
    Commented Oct 21, 2013 at 9:01
  • Thanks for the link. Very interesting, I'm seeing this style used on larger hosting companies such as media temple (mt) and some interactive web development agencies (builtbybuffalo.com). I like it because it follows the aesthetic of the new Apple iOS7, but have yet to find a unique but somewhat similar user interface kit to tweak.
    – Charles
    Commented Oct 21, 2013 at 12:43
  • [pedantry] I'd say the new Apple iOS7 follows the aesthetic of this style, rather than this style following the aesthetic of iOS7... it's a style that's been growing on web/mobile since at least 2011, and earlier than that in print design... [/pedantry]
    – user56reinstatemonica8
    Commented Oct 22, 2013 at 16:32

1 Answer 1

Reset to default
4

1) Yes, "Flat" should be the universally-understood umbrella term that you use to search on - but not sure of a term to describe the "oversized" nature of some of the components.

(The "Flat" term basically just says: "Hey this is not skeuomorphic." [Skeuomorphic trend uses gradients, shadows, textures and other details to try to mimic real-world objects and popularized by Apple pre-iOS7.])

  • Flat ui inspiration on Dribbble & Behance: search for "flat ui"

  • Flat ui freebie psds on Dribbble & Behance: search "flat ui psd"

  • Microsoft's "Metro" design language is known for it's large, thin elements and flatness.

2) Re: a "flat" UI set: try the Bootstrap html/css/js "responsive" framework (http://getbootstrap.com/). It is one source for flat website components including:

  • the collapsable navigation (using the "hamburger" when screen size is small as in your image above)
  • modals (the boxes that pop up in-screen) and their "X" close buttons

While their "x" close button is smaller, a simple bit of css tweaks can quickly make it larger, darker etc.

3) Re: a "flat" UI set part II: Design Modo's "Flat UI" is a "flat" design framework based on Bootstrap and includes a Photoshop file of the ui elements: http://designmodo.com/flat-free/

4) Re: glassy/blurred backgrounds. The image above looks more like it is tinted than overly blurred.

  • "Tinted backgrounds": In Photoshop: take any photo, add a layer above it and color it any color you like. Add a "multiply" blend mode on that color layer. Adjust the opacity of that color layer. You may want to desaturate (possibly to black and white) the image below it. If you want it glassy: give the photo some small amount of Gaussian Blur.

  • "Blurred Backgrounds": you if want a wash of indecipherable colors then "blurred backgrounds" are what you want. You can find some free versions on Dribble (search on "blurred background") or you can create your own: A) In Photoshop blur the heck out of an image. B) Use radial gradients that are 1 part color and 1 part transparent and layer them up and play with their opacity and blend modes. C) Combine A and B above.

Improve this answer
5
  • Thanks for the comprehensive and well detailed answer. Truly grateful.
    – Charles
    Commented Oct 22, 2013 at 16:21
  • No problem Charles. Glad to help. Good luck.
    – TheHarbor
    Commented Oct 22, 2013 at 16:23
  • The tinted background style is very easy to keep uniform across time and space and designers. Pick a photo, make it b&w, pick a solid color, done. This is one reason (aside from looking good) that this is popular.
    – horatio
    Commented Oct 22, 2013 at 16:52
  • Horatio, so after desaturation, just pick a color and overlay it as a separate layer?
    – Charles
    Commented Oct 22, 2013 at 17:10
  • Yes. And you can either reduce the color layer's opacity AND/OR set it's blend mode to 'multiply.' Try both and see the differences.
    – TheHarbor
    Commented Oct 22, 2013 at 17:15

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.