Long-time Maps API developers may remember that using styled maps cut your free usage limit to 10% of what unstyled maps allowed. This is no longer the case; styled and unstyled maps have the same quota.
I found a more practical use for styled maps in the election results maps I made for Google, turning off borders and country names, fading out parks to a very pale green so they don't interfere with the result map colors, and keeping highways visible but faint so there's a sense of place without the distractions of a normal map. Example:
Google Maps is already "flat" in the sense that it doesn't use gradients or shadows. (The exception would be the controls in the corner which have a shadow, but that still exists in this example). The only thing someone did was switch up the color scheme and remove all the text, i.e. everything that actually makes a map useful. I fail to see the point of this. Could someone explain?
The other thing that is different is that the subtle borders around city blocks and things like that are gone. Those borders help increase contrast, making things easier to distinguish.
I genuinely wonder why this was done. To showcase why flat UI doesn't work? Do show that it does? To parody the way people blindly use it for everything without giving it much thought? Because the creator thought it was a good idea and looked nice?
@cleverjake is right. It's a hack. Who cares why? It's play! It's fun. It looks cool, and I wouldn't underestimate the ability for "useless toys" to inspire really compelling and useful projects.
Hell, I'll even go ahead and play devils advocate and pitch a potential commercial usage for this in the friendly spirit of attacking your cynicism on two fronts :) -- I could imagine an app/site that uses this as a basic to create simple and stylized maps that are suitable for poster-hanging. I see lots of simplified stylized maps that do things like list all of the beach towns or surf breaks along the coast in my area. This could be used to create maps of everywhere in the neighborhood that might be compelling to a child (parks, their friend's houses, the beach, etc).. You could choose icons for the map points, tweak the color palette with a fun drag-tool and order a print... Or make a treasure map for a kid's birthday party. (Obvious potential legal issues using gmaps for this which I won't bother to look into withstanding).
At any rate, I think it's an awesome project, whether or not it has obvious and immediately convertible value... and if someone did a good job building a site as described above, I'd be an immediate customer.
Perhaps the tone could be a bit friendlier, but I think the questions themselves are justified, since I sometimes don't immediately "get" Show:HN projects. My first reaction might be that something is "just cool", but I'm not sure if I'm just not getting some useful practical aspect of a website, so imo (if the tone is chosen correctly) confirming whether a site actually has a practical motivation seems okay to me.
Yes, I have to wonder if this was done as sarcasm, too. It makes all those comments that flat design doesn't convey enough information, and makes everything indistinguishable, so true. It makes it very hard to understand what I'm seeing.
I think there should be a new term being coined, such as "flat design extremism", and it should be used as an example of how not to do things. Surely not everything perfectly flat is a good thing?
It makes all those comments that flat design doesn't convey enough information, and makes everything indistinguishable, so true. It makes it very hard to understand what I'm seeing.
I took screenshot of same location with the original map and put it next to a screenshot of the "flat" map. http://imgur.com/TdFqpmw
Honestly, aside from some of the missing overlays & text on the "flat" side - I can't see too much of a difference between the two....
I think it's a really interesting comparison. (I think we can ignore the loss of POI as being irrelevant in this case).
The lack of a stroke around the shapes make it difficult to tell the edges of the roads (try counting the number of white roads between bounding yellow roads). Where roads get tangled it's hard to know what's going on.
I personally find the colour palate a bit juvenile and less trustworthy. That might be because I've got used to the more demure extant colours. But I've noticed a trend with 'flat' colour palates being differentiated primarily by hue rather than, for example, brightness. I don't think that's natural for the human eye (I have no data to back that up).
And yes, Google maps is already part of the way to 'flat'. But it's kept the level of detail required to actually be useful. I'm aware that the LHS was a quick hack vs Google having spent a certain amount of time planning their layout.
I guess for inspiration, be it of design or anything else.
For me, this deconstruction of a busy map normally filled with labels and places, colored with flat UI style colors that contrast each other and without the visual noise of borders, invites me to build upon it and perhaps start displaying a new layer of data on it.
I would actually not be surprised if Google Maps looked like this someday.
Except, you know...more useful. Like street names? :)
I truly believe that this was made to satisfy some requirement of a project, or it might have been just for fun. Either way, it's not a bad way to embed a map in a site designed using the "flat" aesthetic.
...But you probably should link to the real Google Maps so people can see where in the hell they are!
How does one use the Maps API to change the appearance of the Map? I always thought Google maps served somewhat static tiled images and we (developers) could just place markers and other things at (x,y) coordinates.
Feel free to click the edit button on the upper right corner of this JSBin link and see for yourself. It's easy peasy and will amaze you in how simple it is to modify Google Maps! :)
Wow. I saw this and thought "that's what's wrong with flat UI."
From this, I now gather that flat UI is a reduction tool. That's effective when you want to show something simple, and make that simplicity clear. But when you have something more complex, like a map, the bandwidth lost to the reduction is substantial and painful.
I haven't been able to wrap my mind around the whole 'flat' concept. Could someone please explain what 'flat' really means. The only thing that I really notice about flat design that stands out is the color scheme and the don't-care-about-layers philosophy.
It used to be popular to make buttons 3D with gradient effects, gloss, and borders, both windows and buttons to have drop shadows, and also to use real world textures like leather and paper, and text labels and calls to action. This stems from a lot of research into user efficiency that showed users completed tasks easier and quicker and with higher satisfaction if the buttons looked like they stuck out and were pressable, had good labeling, etc..
Flat design basically gets rid of all this. It hasn't fared well in my own user studies. Users tend not to hit a button if it is just a flat icon tucked in a corner with nothing to clue them in that they should be hitting it or what it does. You are generally stuck in the first revision to put a tutorial overlay with a big arrow and text the first time the user comes to the screen.
The lack of text in this so you can't tell what any street is? That's very flat UI style. They hate text that clutters up their designs and tells people what things actually do. Proponents of flat design generally base their decision on the fact that it looks better to graphics designers looking at the app (instead of using it).
This. Flat design may look 'cleaner' but that doesn't mean 'easier to use'. I echo your usability findings -- usability tests are showing flat design is much harder to use.
I can use maps that convey significantly less information. Just what I wanted. I know everybody hates skeuomorphism, but I'd take it any day over a map like this.
That's a little harsh for someone sharing their playing around. If you were going to do it as a thing, I suspect you'd make it more like Bing maps. Which is a really nice site and gets used when I'm on a computer - Just a pity they don't have an android app :p
I had a lot of fun styling google maps for this project - voya.ge (still beta). Early versions were very minimal like the example posted, but as the project progressed the necessity for labels (street names, etc) became pretty obvious.
also, not to be a hater, but isn't this conversation about flat design getting kind of old?
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/...
(The UI is a bit odd; be sure to read the help panel before jumping in.)
Here's the documentation:
https://developers.google.com/maps/documentation/javascript/...
https://developers.google.com/maps/documentation/javascript/...
Long-time Maps API developers may remember that using styled maps cut your free usage limit to 10% of what unstyled maps allowed. This is no longer the case; styled and unstyled maps have the same quota.
I found a more practical use for styled maps in the election results maps I made for Google, turning off borders and country names, fading out parks to a very pale green so they don't interfere with the result map colors, and keeping highways visible but faint so there's a sense of place without the distractions of a normal map. Example:
http://www.google.com/elections/ed/it/results