The Flat Design Era
layervault.tumblr.com
The Flat Design Era
1–10 of 99 posts
Re: The Flat Design Era
#2If your audience is developers and designers, a pure flat design is great and will likely work well.
But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland.
On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic.
Re: The Flat Design Era
#3If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.…
Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear.
As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface.
That said, we probably will end up throwing it out when redesign our rather outdated external site :)
Re: The Flat Design Era
#4Very interesting. I'm pulling a lot of interface design inspiration from Layervault right now and saving it in the back of my head for later.
Re: The Flat Design Era
#5If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.…
We were also talking when writing the blog post that it depends on what the interface is for. When designing a site that accepts user-generated content (whether it be LayerVault or Facebook), the interface—is in many respects—only there to get out of the way. A flat design is often best at showcasing others' content.
When the interface is to facilitate a straight-forward task, one could make the argument for a more embellished interface.
Re: The Flat Design Era
#6I agree with people arguing that flat design's run the risk of not giving users enough information to know what are buttons and what aren't. That is one of the biggest challenges to using a flat aesthetic. It's easy to take for granted how much information gradients and drop shadows provide to the user. Which is why I've appropriated your style of combining flat UI with drop shadows for depth. The drop shadows add just enough dimension that they can be used to express hierarchy without making the interface dishonest.
What I love most about flat design is that it forces you to simplify, since you aren't giving the user as much visual information. The flat aesthetic magnifies any clutter, because objects and shapes don't communicate their "possession" as much, so having too many pieces on the page at once doesn't work. Remove a line here or a drop shadow there. Make your text more succinct. It's awesome. It might even be a good challenge for startups, just because it forces you to focus your product more.
A huge bonus for me to flat design is that I'm not constrained by my earlier true-to-life decisions like gradients and drop shadows. Before I started using a flat aesthetic, I'd often run into situations where I couldn't place a button or a plane right where I wanted it, because it would contradict the other dimensionality that my gradients and drop shadows were creating. I'm glad to be rid of those constraints now (or almost).
Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one.
---
It might depend on who the interface is for. But it also depends on what the interface is for. LayerVault is a perfect example of an interface that needs to recede when a user is viewing their own work. You don't want your flashy buttons competing for their attention. Similarly, with Segment.io, I don't want all of our UI to be competing with the data we show in graphs.
Re: The Flat Design Era
#7If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.…
> But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland.
I disagree. Go to http://google.com. How many of the items in the bar at the top have gradients? Is there any confusion about whether they're clickable? Now go to Google+. Is there any confusion about whether the icons on the left are clickable, despite being flat (and even grayed out)? I'm looking at Chrome right now and none of the buttons in the toolbar look 3D. All of these examples do have a rollover effect, but even without that, the design informs you what's clickable. And mind you, these are all examples from a company that is not embracing flat design as its major aesthetic.
Users have plenty of experience with clickable items that don't look like buttons. There are a ton of ways to convey that something is clickable without trying to make it look like a physical button.
> On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic.
Agreed. It seems quite out of place to me.
The spinning background is also really rough. It's completely gratuitous and actually makes me queasy.
Re: The Flat Design Era
#8Flat design certainly has it's place in the world but it's important to keep in mind that ultimately it's just another aesthetic. Distressed, Glossy, Flat, Matte, Woodsy, etc, these are all just styles that lay on top of what is good information architecture and interaction design.
It's not about flat design being right or wrong, it's more about whether it's appropriate for the job/task and audience/market.
There are good movies with special effects and good movies without special effects -- it's just a one element of the entire experience and by no means the most important.
Re: The Flat Design Era
#9If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.…
Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear. As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface. That said, we probably will end up throwing it…
You are in good company:
"According to various reports, when someone suggested to include a touch-typing tutorial in this intro as well, since many people did not know how to use a keyboard, steve Jobs simply said not to bother as those people would die out eventually."
* http://orangejuiceliberationfront.com/theyll-die-out-eventua...
Re: The Flat Design Era
#10Can't make a post like that without giving a demo. Example please!
It'll also help blank slates like me adopt this "flat design" faster.