Flat Design and Color Trends
designmodo.com
When it comes to color, flat design works with a variety of colors, but most commonly designers are choosing to go bold and bright.
designmodo.com
As someone with practically no design skills, how would I accomplish this? For example, let's say I had two or three colors in mind or already picked out. What are the steps I could take to line up their tones and saturation? Is there a formula or algorithm that applies?
I realize design skills are developed through practice, but I very often find myself with something I've put together that looks just OK and just sort of aimlessly tinkering around with it until I've inevitably made it look washed out. So obviously my feel isn't working yet--where else can I turn?
Agreed that one of the discoveries I made is that HSB feel like the more "technical" way to design a color palette, and it felt more right from an engineering perspective. You define your colors as pure hues -- that's a top-level decision ("I want my colors for this project to be black, gray, yellow and white"). Those are your base H values. Saturation and Brightness are then your derivatives on the base colors -- lighter in some places, darker in others.
This is all self-taught, so my color theory could be way off here, but I also found that you can generate fairly pleasing schemes through regular intervals along the spectrum. Pick a hue, for example, and then look at variations in saturation in steps of 10, 20, 30, etc. It's not an exact harmonic scale (or is it?) but that was enough to give me a good base.
Check out the app "Spectrum" if you have a Mac -- I played with a bunch if similar apps and really loved this one the most -- still use it all the time for color exploring:
You would need to use something like the Munsell system to achieve this.
It shows a color profile for a specific web site you search for. Obviously, taking a web site's entire color scheme wouldn't be wise. I just use it for getting color scheme ideas - not using the exact color scheme and color hex rip offs.
Sigh. I like the aesthetic but fad-monkeys overwhelmingly fail at the engineering part of design. You can be simple and elegant without going backwards on other usability principles.
It's possible to have a nice, useable flat design. However, great care must be taken to use visual cues and be consistent in the UI. It's also possible to have high contrast. Low contrast is not flat design, it's a poor implementations of colors with a flat aesthetic.
Buttons on windows have always had 3D effects.
http://www.guidebookgallery.org/pics/gui/desktop/full/win31....
Note the 24 instances of shadows cast from a north-west light source, as if the buttons were objects with depth.
If you start a project and wonder, "Hmm... should I use Flat Design for this?", you're doing it wrong.
"Flat design" and "responsive design" (probably better named "responsive functionality") are specifically different in numerous ways than other design trends and consistent within the trend itself. Naming the trends doesn't have to equate to a 'movement'. However, it does provide a much easier way to refer to and discuss them.
So I'm really conflicted with this retina trend and how designers are (not) utilizing it. I don't think information density should increase, but certainly more complex artifacts could be used rather than these simplistic ones.
Subtle texture and animation on a retina display can recreate the latter effect to some extent.
Now i'm being cynical. ;)
So this is digital flat design. With digital there are different metaphors to consider, like user interaction, boundaries, display capabilities etc. This is the web adopting some of the best things about established design aesthetics in the real world (minimalism) and integrating them in an entirely new way to incorporate those considerations.
I agree that it is inevitable there will be some new design trend in a few years time (please hopefully not one that involves monstrous glossy buttons and gradients), however this current flat design feels like it is laying the groundwork, especially in how a design should be technically achieved. The flat design is naturally more vector, which makes it inherently more native to web technology (CSS, HTML). This is very different from previous web design trends I can remember which were essentially hacks, initially involving tables, and later divs compiled from static bitmapped assets exported from Photoshop. This I believe is a new chapter in the evolution of design on the web.
-- Edited for clarity.
Zeldman wrote this in 1999 and it's still true today:
"The web used to look like a phone book. Now much of it looks like a design portfolio. In fact, it looks like the design portfolio of 20 well-known designers, whose style gets copied again and again by young designers who consider themselves disciples. Distinctions between graphic design and communication design are lost on these designers. As is the distinction between true style, which evolves from the nature of the project, and derivative pastiche, which is grafted onto many projects like a third arm."
http://www.adobe.com/motiondesign/content/en/Dialog_Box/Styl...
Much of the flat aesthetic is rooted in swiss graphic poster design, however that doesn't translate so well to pages where dense text actually matters, especially with poor color choices. Much of designmodo's color scheme actually fails the contrast algorithm for small text, except at larger text it's generally okay. Bootstrap itself is pretty abysmal as far as this goes as well.
The flat aesthetic is nice, but those who continue on with it with disregard to contrast will not succeed. Accessibility and the flat aesthetic is possible, it takes more work and compromise, however.
I happen to think it looks ugly and I find it difficult to use (seriously I find using Windows Server 2012 incredibly difficult to navigate visually). I think these flat UI sites look unsophisticated and badly designed. They remind me of 1990-era user interfaces, and not in a good way.
But that's just my opinion.
What's great about the Metro style is it makes responsive layouts dead-simple and it cuts the design process down considerably. Sure it looks boring, but that's okay for now because I spent years hearing about wet floors and jelly buttons and skeuomorphism and...
It's refreshing to be able to pick a few colors, pick a few fonts, put it on a grid and be done. To me it almost feels like laziness, but it's a nice change of pace from the days when a single button took hours to design/build.
Miracle of TV being broadcast invisible over air, then we start putting cables everywhere. Terminals and servers evolved to desktops, and now we go back to servers, or "Cloud". We had a Space Shuttle which was reusable and was plane like, now we ditch that and go back to olde skool rockets. Now this web design style, which to me throws out everything we were taught about usability, etc in the past.
No, not precise exact parallels, not with out good reason either, but to me its a broad, vague pattern. We seem to eventually loop everything backwards eventually.
Not saying this is wrong or bad, it just seems like what "we" do. Its sort of like music revivals, fashion revivals, or TV show remakes.
Look out for building block sized phones and black and white TVs in the future!!!
Oh, hang on. Phones... Used to get smaller and smaller, now smart phones are huge. There you go, another one!!!!
I notice that these are not in contradiction with adjectives that come to my mind first.. such as sterile, pretentious, mediocre, repetetive, heartless. Though now I think I'm kinda projecting properties into "flat design" it might not have, based on the properties I see becoming real hip in people.
I'm really curious what the general public's perception is (not that it really matters) and if there are really any functional implications for the way some of the interfaces have been designed.
What's missing? What other more appealing, and non-gratuitous/extraneous, forms may follow the function?
Gradients, drop shadows, bevels and other 3D effects function as visual cues, and can help a user figure out the hierarchy, order and function of elements in a 2D design. They're not extraneous, at least not when used properly.
When you make something flat, you make it more aesthetically pleasing, but at the same time, you take away many visual cues that alert the user as to what exactly a specific widget does.
I think the Windows XP interface (Bear with me on this) demonstrates how you can be "matte," so to speak, but still usable. You could tone it down a bit more, but to eliminate gradients completely out of a UI is ugly and a gigantic hit to usability.
I think OS X has a great balance between flat and dynamic. They've toned down the ridiculous levels of gimmicky glossiness, but they've kept in the stuff that is important to the design. For example, the lightening of a shadow behind a window is a visual cue that the window is inactive. The pulsating and glowing water-filled Aqua push-button is an invitation to click on it, while the matte de-focused button is less significant. The Traffic Lights are smaller but the click-point remains the same.
Progress-bars slowly pulsate to indicate activity, and if they've stopped pulsating you know that something is wrong. Borders are clearly defined through shadows and solid lines.
Overall, it's a great UI. Ditto for iOS. Android also puts the flat design to use properly.
Can't say the same about Windows 8, and I also can't say the same about designmodo's flat toolkit either.
Not ‘a good idea’ or ‘usable’ or ‘accessible’, just different.
EDIT: Just to take the snarky edge off, I want to mention that whilst this might have been quite a good blog post if you've already decided to use Flat Design™, I'd have appreciated a discussion of the merits. But of course not all blog posts about anything are required to go into such a discussion.
Of course, you're still left with the question of whether choosing a flat design improves or detracts from the aesthetics of site. Here we're venturing into the realm of the subjective, but I'd venture to say that, given the current trends, it hardly seems like the worst thing you could do.
Other things being equal, that is true, but in the case of flat design other things are usually far from equal. The loss of affordance with flat design can be crippling.
http://en.wikipedia.org/wiki/List_of_8-bit_computer_hardware...