Cards (design pattern for modern web apps)

Started by Darren Dirt, March 02, 2015, 09:28:53 AM

Previous topic - Next topic

Darren Dirt

Due to the ubiquitousness of mobile devices, responsive designs are a non-negotiable nowadays.

http://wallblog.co.uk/2015/02/02/the-future-of-native-is-in-the-cards/

However I don't know, somehow I find this gallery of 15 well-done examples of "card-based web design" leave me feeling... idk, "off".
https://econsultancy.com/blog/64646-15-delicious-examples-of-card-based-web-design/


It's like, maybe an over-compensation from a "too much not-very-skimmable text contents" to a far degree of "too visual, not enough useful info without clicking to get more details". But maybe I'm just a more detail-oriented person so I can not IMAGINE using an email interface* as visual as the one given in these examples. Maybe the mass audience has become more accustomed to Windows 8 tiling metaphor and these just match what they are now expecting (or maybe it's "dumbing down" presentation of even low-level detailed info, and I'm opposed to this trend for good reason... (?) )





* https://assets.econsultancy.com/images/resized/0004/6445/screen_shot_2014-04-02_at_11.54.33-blog-full.png (I pretty much immediately start searching for the "list/details view" button when I see things like that for an interface that presents me data in a mostly-visual way even though the data that is most useful (imo) is textual, not graphical :sigh: am I just stuck in my ways? I mean, even in ST:TNG the rather "visual" UI still had a lot less "pictures" and was still mostly text, just in a "prettier" package than a DOS console window ;)

_____________________

Strive for progress. Not perfection.
_____________________

Lazybones

Not a fan of the forced cards but responsive design is very important.

Atomic design is one approach that helps.

Tools like pattern lab have been adopted by our web team
http://patternlab.io

Mr. Analog

Quote from: Darren Dirt on March 02, 2015, 09:28:53 AM
Due to the ubiquitousness of mobile devices, responsive designs are a non-negotiable nowadays.

Agreed, responsive design is more or less a requirement because as many of have learnt there's no one screen size and there's no one screen size ratio. Older design trips over this a lot when it comes to non-standard screen resolutions (either looking barren or getting cut off, etc) and the dev then has to custom tailor the UI for every different OS+resolution permutation out there

You can blame globalization for the move away from text toward iconography, there are VAST mobile markets in other countries, every piece of text in your app can be the make-or-break-it for your app (unless you have a localization expert on board who is up to date on the rapidly evolving world of dirty euphemisms). Iconography only makes the devs live easier, it does nothing for readability OR accessibility.

I think now that the apps market has matured we're seeing certain design metaphors "win" over others (navigation gestures, menu consistency, etc) but you still find plenty of odd ducks out there
By Grabthar's Hammer

Tom

What bugs me about modern web design is the tendency towards parallax full screen images, videos, and max one sentence per full screen.
<Zapata Prime> I smell Stanley... And he smells good!!!

Mr. Analog

That's where devs are lazy, navigation seems to be hard but modal dialogs are easy yaaay

lol
By Grabthar's Hammer

Darren Dirt

Quote from: Tom on March 02, 2015, 10:09:57 AM
What bugs me about modern web design is the tendency towards parallax full screen images, videos, and max one sentence per full screen.

Short attention spans. Likely the reason. Bugs me too. Ditto for so much weirdness in the scrolling rate, different parts of page scrolling different speed = wtf, devs just found a "cool piece of code" and looking for excuse to use it? "I have a new hammer, hey look, nails everywhere!" :(

I guess it's either this kind of trend, or moving towards the Futurama "eyePhone" or even that Outer Limits "brain internet" that ends up being our dooooom ( http://www.tv.com/shows/the-outer-limits/stream-of-consciousness-21470/ )
_____________________

Strive for progress. Not perfection.
_____________________

Tom

Quote from: Darren Dirt on March 02, 2015, 10:43:50 AM
Quote from: Tom on March 02, 2015, 10:09:57 AM
What bugs me about modern web design is the tendency towards parallax full screen images, videos, and max one sentence per full screen.

Short attention spans. Likely the reason. Bugs me too. Ditto for so much weirdness in the scrolling rate, different parts of page scrolling different speed = wtf, devs just found a "cool piece of code" and looking for excuse to use it? "I have a new hammer, hey look, nails everywhere!" :(

I guess it's either this kind of trend, or moving towards the Futurama "eyePhone" or even that Outer Limits "brain internet" that ends up being our dooooom ( http://www.tv.com/shows/the-outer-limits/stream-of-consciousness-21470/ )

I don't blame devs on that one. It belongs wholy in the designer's box. it's a fad.
<Zapata Prime> I smell Stanley... And he smells good!!!

Thorin

So how come this thread is in the Tech Chat (Private) thread?  Something we don't want others to know about, or just a mistake?

As for usefulness of the iconography, I can tell you that I consider myself fairly tech-savvy but that stupid menu button with the three lines?  I still have to think about that button and what it does.  And yet it has become the de rigueur menu button on small screens.
Prayin' for a 20!

gcc thorin.c -pedantic -o Thorin
compile successful

Lazybones

My guess is the OP picked the wrong forum. I can move it up if requested.

Darren Dirt

Quote from: Lazybones on March 02, 2015, 01:34:15 PM
My guess is the OP picked the wrong forum. I can move it up if requested.

Yup. Move it to public please. TBH i forgot there is a "private" one, fortunately this is the only thread that is here by mistake.
_____________________

Strive for progress. Not perfection.
_____________________

Lazybones