Hacker News new | past | comments | ask | show | jobs | submit login
Convert Twitter Boostrap to a "flat" design (gist.github.com)
92 points by nodesocket on June 23, 2013 | hide | past | favorite | 46 comments



How long until this flat fad fades?

It seems (to me at least) like very little thought goes into these designs apart from 'it must be flat.'

There also seems to be very little variation in the final products. The examples linked in the OP are indistinguishable from say, Microsoft's Technet : http://social.technet.microsoft.com/wiki

...I dont want everything to look the same. It's confusing and boring... Am I alone in this?


Well, there's flip side to this "fad" - with its simplicity, it is nudging us further towards content-oriented design. Or at least that's the general sentiment I'm perceiving.

The flat design movement is kind of a Überdesign, in Nietzschean terms. Tear it up, and build it properly from ground up. Or, that is the positivist view on the "fad".

Of course, I'm here ignoring hundreds of years of advancements in design, as a broad category. :) But we talk web/apps, so that's ok.


How do you say 'content-oriented design' with a straight face? What's the alternative? 'Helpful interactive design'? 'Clearly indicate where things are clickable design'?

I get that flat is meant to strip away unnecessary ornamentation, but depth has a purpose. We aren't living in a 2 dimensional universe. Our screens may be 2 dimensional right now, but that doesn't invalidate the use of depth to provide helpful hints to the user. Abandoning a tool in your toolbox because of misguided principles. You'd rather hit your nail with a wrench than use a hammer, you don't want to be seen using a hammer, that's not fashionable. Flat design is what happens when designers over-think problems at the expense of usability. Flat design is frustratingly naive. It's a revolution of the unexperienced who through desire to leave a mark, only left the impression that they wanted to make one. All at the expense of unhappy users.


> How do you say 'content-oriented design' with a straight face? What's the alternative?

Many graphic designers who have become 'web designers' will simply colour in wireframes rather than working with actual content. Therefore you end up with a design full of gradients, curved corners and shadows because that's all they have to work with.

Which is odd considering the core of graphic design relies on understanding the content and message, in essence the form follows the function.


I say it with a straight face because I've attended a fashion show or two.

To be clear, I just think flat is a solid stepping stone in right direction, nothing more.


> What's the alternative?

Design-oriented design.


First of all, we're talking about a design alteration to a framework! If you're tired of everything looking the same, cry foul on the use of frameworks not mods to frameworks.

I know your criticism is about flat design but really, I think the widespread use of of any boilerplate/framework contributes more to stale design than concepts like "flat".


I think you are right to point out what could be a small hypocrisy in my post, I see it too.

In my defense: I tend to see the established frameworks more as best practice design patterns than odious threats to originality.

Maybe that's just a rationalization but we need to work on what's come before us, what's been built us for us. We can't still be running round with piles of punch-cards if you get my meaning.

The work of our predecessors in both science and technology is a valuable gift and the digitisation thereof has ensured that this gift will constantly accumulate and be available (as long as good humans will risk their own liberty for a principled stance on digital freedom) so there is a point at which we take the title 'developer' literally and literally develop further on what has been achieved so far.

Innovation and originality are precious things and we should certainly value their rarity and value but you don't just stop at the wheel. You build a car.

It is very important to be thoughtful but we must also be cunning with our directions.

Focusing releases of energy on variations of the 'top menu; hero section; columns of content' layout might be less efficient than focusing on how better to interface to these things via those patterns, solutions that are transferable between contexts, adding more affordance across devices, etc.


It's not a fad. The reason we are moving towards flat design is high resolution displays. Flat design emphasizes typography which isn't ugly anymore.


Hmm. Interesting.

I've heard a lot of reasons for this trend, but that's a new one to me.


Typography is now beautiful and something to show off. There is no need for glossy UI elements or textures to hide it. If you look at iOS and early Android, everything they did was to hide the ugliness resulting from low-res screen.

Today, the content itself is beautiful.


I'm not sure that high res displays would have much to do with it. Webfonts might though.


Well seeing as how they are using it in Star Trek and that takes place in ~2265, we've got a few hundred more years.

As far as "confusing and boring" I think that depends on the implementation. I've been using WinMo8 for the last 6+ months and there have been a few gotchas but for the most part, the interface is a lot easier to use than iOS6. Although I think that has more to do with the UX and not the UI. I love apps that TapBots make but I don't have the patience and artistic talent to create interfaces like that. My developer hat says it's definitely a lot easier to program apps Flat, but it's very easy to do it incorrectly. You're not alone, but now that Apple opened fire on Skeuomorphic design [1][2] and lots of people look to Apple as design leaders, I feel like you're going to se a lot more flat.

[1] - http://www.youtube.com/watch?v=ZIQ5zGOo6qE#t=2611s [2] - http://www.youtube.com/watch?v=ZIQ5zGOo6qE#t=4950s


You may be right.

Personally I don't like the 'bubblegum' of the iOS7 previews I have seen so far. I'm sure my daughter will love it but as a William Gibson loving tech nut it leaves me feeling a little left out in the cold... Be that as it may, this is what I wanted to say to you: people seem to think of jeweled buttons and gradients as skeumorphism but I find that to be something of a narrow view.

Example: my favorite skeumorph in OSX - type in an incorrect password at the lock screen and the little thing 'shakes it head' as if to say: "uh-uh, try again" such a light touch and so playful and benign at just that moment that the user is feeling a tad aggravated. How much better is that than a giant red 'X' an an ominous warning gong?

Skeumorphism in today's design circles is pretty much the definition of the phrase: don't throw out the baby with the bath water.


It's not a fad, it's a return to Swiss design: http://en.wikipedia.org/wiki/International_Typographic_Style


You have sort of defined "fad".


it's a fad , like any other web design trend.


   I dont want everything to look the same. 
   It's confusing and boring... 
   Am I alone in this?
Keep in mind that having all apps using Bootstrap or jQueriUI also make them all looks the same at some extent... So flat is not the reason the the similarity.


Bootstrap or jQueryUI make all apps looks the same, but within each app, it doesn't make header, button, link and non-clickable content look the same.


I agree.

My feeling is that flat works for small touch screens, but not so well on big screen computers. I think you need the simplicity on a small screen so that navigation is clear in a small space, but it looks just dumb and silly on a big screen. Might be why people hate Windows 8.


I assume designs will eventually begin to be more complex, but flat design forces one to focus on the basics instead of bevels and gradients. So I doubt we'll always have completely flat design, but I think design has changed permanently as a result of it.


You are not alone. Successful flat design requires intelligent colour choices and good typography. The referenced hack simply removes some decorative features. The end result looks boring and unfinished.


Until designers wake up and realize that the interactive portions of your design need affordance.


Yea, this is a large part of the issue for me.

It really is not clear what is content and what is interface.

I like to imagine that we'll see a time when there is a tighter integration, that the future of interface is essentially data visualisation but intil that time it remains a challenge to explain to users (and even sometimes technical folk) the distinction between data and interface and flat design really feels like a step backwards in this regard.


> that the future of interface is essentially data visualisation

Does that imply that ideal framework would be a data visualization layer? Something that transforms a generic representation of data into markup with style? Could we build an interface out a descriptive layout of domains with associated actions? (Here's some photos, here's an action to create a new one, now build an interface. These actions apply to a user account.)


Maybe something along those lines but what I envisage is more like (CAVEAT: what follows is highly conceptual, I am describing things I have seen in my imagination...) a reduction in the distance between an interface and the data generated by it or that it manipulates.

Just like we've seen layers of metaphor removed in the journey from mouse and pointer to touch of the finger - I imagine interfaces that leap a similar gap, interfaces that more directly represent the underlying data structures they are built upon.

Imagine a volume control for instance, but without a silly virtual silver knob controlling it, instead of that: a visual representation of the value the volume is set to much like a graphic equalizer but you directly control the graphic, without a proxy like a pointer and mouse or a proxy on top of a proxy like a pointer and a mouse controlling a virtual knob that then controls the volume.

That's what I mean about layers of metaphor. It's built up like cruft around the modern interface. That's why it's correct to look at skeumorphism with renewed skepticism but wrong to simply ape off into the opposite direction.

A lot of time is spent taking the data resultant of great number of interfaces, quantifying them and then presenting them in some way, often visually... I am saying that those visualisations and those interfaces needn't live on either side of an invisible fence, that they should commune to form something intuitive and elegant and modern.


Right, in your EQ example it may be an envelope displayed as an appropriate graph with a particle engine (or 2d representation) which when manipulated modifies the audio output. The analog version is gone, which is just a bad mapping of "bands" of frequency anyway, when we can more closer approximate a continuous system.

As for the general case, I see something like the shadow DOM and web components growing into a set of observers implemented at the native level, instead of built on top like Ember.js. HTML gets the ability to do spreadsheet like formulas where the value of one element can be dependent on another element, express in javascript or a CSS-like "data markup" language. It would support databindings directly to JSON/plain-old objects.

Maybe there could still be a symbolic design language that approximates real-world objects, but that would be crafted on top of a more pure data layer, without CSS hiding of components, or custom display values to turn one thing into another.

Example:

  * video

  * playbackControl

  * audioShaper -> GL/ES CL waveform processing -> audioOutput
<c:slider c:boundTo="playbackControl1" c:dataRole="seek" /> <c:volume id="v1" c:boundTo="audioShaper1" c:dataRole="gain" />

<span observes="jsval:percentage([#audioShaper1].gain/[#audioShaper1].maxGain)"></span>

dss: #v1 {volume-maximum: 90%}

css: /* turn red if we reach 70% of maximum */ #v1 [volume::=jsval:percent(audioShaper1.gain/audioShaper1.maxGain)>=0.7] {color: red}

Or something like that.


I think the next iteration of Bootstrap (3.0) is largely flat. I could be mistaken though.


The previews were all flat but I seem to recall that it was a temporary thing: https://github.com/twitter/bootstrap/pull/6342#issuecomment-...



Oh, cool.


Thanks for the link. I was kind of excited about the change, too. :/


If you're looking for a flat Bootstrap design, there are more than enough themes out there. (such as http://bootswatch.com/flatly/ )


I guess I was just looking forward to seeing something different in all of those sites that just use the default bootstrap theme.


Then whatever the new 3.0 default would be would become the "default bootstrap theme." That battle can't be won. :P


Don't take away my temporary relief!


This doesn't really make bootstrap "flat". Removing rounded corners doesn't make it flat. Removing shadows (and depth) is the main issue. You should be removing borders too, right?

Even still, "flat" design isn't right for everything. Design should be evaluated for the specific application. The design of bootstrap now is safer than a "flat"-er option, IMO.


"Sometimes a new project doesn't need rounded corners or gradients. So we decided to get rid of them. We <3 Bootstrap." http://www.littlesparkvt.com/flatstrap/


Flatstrap doesn't work for me (mainly, "download flatstrap" just.... downloads the website... with standard Bootstrap.)


Isn't this what bootstrap 3 is trying to achieve? I haven't visited the bootstrap 3 release candidate docs in a while but the last time I did it seemed like it's going towards the flat direction.


I stumbled up on this while looking for Bootstrap 3.0 demo. http://bs3.codersgrid.com/ And the design does follow flat design principles


Already exists: http://bootswatch.com/cosmo/.

I really like the theme for mobile devices, especially if it's very button-based.



This is what something i was waiting for. Flat UI is completely into trends this days.


!important, bad !dea


Advanced.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: