Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Convert Twitter Boostrap to a "flat" design

gist.github.com

Post reply on HN
Print view View original

41–50 of 50 posts

Re: Convert Twitter Boostrap to a "flat" design

#41

Post by joeblau »

mark_integerdsv wrote: post #7

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…

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

Re: Convert Twitter Boostrap to a "flat" design

#42

Post by mark_integerdsv »

tmzt wrote: post #40
mark_integerdsv wrote: post #38

Earlier quoted context omitted.

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…

> 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 u…

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.

Re: Convert Twitter Boostrap to a "flat" design

#43

Post by mark_integerdsv »

josefresco wrote: post #34
mark_integerdsv wrote: post #7

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…

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.

Re: Convert Twitter Boostrap to a "flat" design

#44

Post by mark_integerdsv »

joeblau wrote: post #41
mark_integerdsv wrote: post #7

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…

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 app…

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.

Re: Convert Twitter Boostrap to a "flat" design

#45

Post by NoodleIncident »

esolyt wrote: post #13
mark_integerdsv wrote: post #7

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…

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.

Re: Convert Twitter Boostrap to a "flat" design

#46

Post by anthonyb »

esolyt wrote: post #13
mark_integerdsv wrote: post #7

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…

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.

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

Re: Convert Twitter Boostrap to a "flat" design

#48

Post by esolyt »

NoodleIncident wrote: post #45
esolyt wrote: post #13

Earlier quoted context omitted.

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.

Re: Convert Twitter Boostrap to a "flat" design

#49

Post by tmzt »

mark_integerdsv wrote: post #42
tmzt wrote: post #40

Earlier quoted context omitted.

> 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 u…

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 simila…

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

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.

Re: Convert Twitter Boostrap to a "flat" design

#50

Post by rpicard »

tagliala wrote: post #39
parkrrr wrote: post #3

Earlier quoted context omitted.

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

may be permanent: https://github.com/twitter/bootstrap/issues/8199#issuecommen...

Oh, cool.
Post reply on HN