Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
Flat is the only term being used I've seen. –  Scott Oct 20 '13 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 Oct 21 '13 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). –  user568458 Oct 21 '13 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 Oct 21 '13 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] –  user568458 Oct 22 '13 at 16:32

1 Answer 1

up vote 3 down vote accepted

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.

share|improve this answer
    
Thanks for the comprehensive and well detailed answer. Truly grateful. –  Charles Oct 22 '13 at 16:21
    
No problem Charles. Glad to help. Good luck. –  TheHarbor Oct 22 '13 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 Oct 22 '13 at 16:52
    
Horatio, so after desaturation, just pick a color and overlay it as a separate layer? –  Charles Oct 22 '13 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 Oct 22 '13 at 17:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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