8 ms·
'Flat design'-inspired Google Maps using the API
- zalew 13y agofeatureType: "road.local" stylers: [visibility: "on"] otherwise this map is useless. and that marker shadow looks weird.
- lloeki 13y ago> that marker shadow looks weird. Cognitive dissonance with the UI control shadows (light source, blur radius)
- afandian 13y agoI 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 13y agoThis is hacker news. People hack to hack. I don't understand your question.
- afandian 13y agoWell, it could be a clever parody. I initially thought it was, as this is also the place people post that kind of material. It could be a hack just for fun. People post that kind of thing here too. It could be a proof of concept statement about how amazing flat UI colours are. People post that kind of thing here. Either way it would be nice to have a sentence of commentary.
- muratmutlu 13y agoI posted it after I found it on Dribbble and thought it was interesting. It looks like it was made in response to a shot someone posted on Dribbble http://dribbble.com/shots/1044275-Flat-Map http://dribbble.com/shots/1044275-Flat-Map It was rebounded and coded up, that happens quite a lot on Dribbble when devs see a design they like and have a go at putting it into css/html etc
- mkoble11 13y agoThis is hacker news. People hack to hack. I don't understand your question. Thank you sir....I wish I could upvote this 1000x.
- afandian 13y agoThat's no reason stop thinking critically. There's a serious and interesting conversation to be had here.
- eric_bullington 13y agoThank you for summing up my feelings on this matter so much more eloquently and succinctly than I would have.
- deleted 13y ago[deleted]
- hkmurakami 13y agoPerhaps 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.
- mtgx 13y agoYes, 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?
- mkoble11 13y agoIt 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 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....
- afandian 13y agoI 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.
- avel 13y agoI 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.
- famousactress 13y ago@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.
- alan_cx 13y agoIt made you, and others, think. So at the very least I would argue that it is art.
- elo 13y agoI like it. A nice use case would be a quiz, for example. "What place does this map show?"
- tomphoolery 13y agoI 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!
- ancarda 13y agoI 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.
- 6d0debc071 13y agoThat'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
- Swizec 13y agoWell that sure is pretty! If I zoom out long enough I can even realize that's New York! Amazing. Brilliant. Bravo good sir. applause
- caoimhin 13y agoIt's a flat design and yet you still have to make it 3d (the shadow for the pin).
- handelaar 13y agoNeat, but speaking as someone who does not have blue-green colourblindness, it's hard to distinguish that greeny-blue from that bluey-green.
- jes5199 13y agoas someone who does have blue-green colorblindness - I can't tell whether or not there are colors I'm not seeing.
- Evbn 13y ago"Flat" means "no text"?
- habosa 13y agoHow 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.
- joemaller1 13y agoThere's a lot you can do: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/...
- sergiotapia 13y agoFeel 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! :)
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- jcoder 13y agoCool idea & implementation. Ignore the haters.
- Stratoscope 13y agoFor anyone who wants to experiment with styled Google maps, a good place to start is the Styled Map Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html 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/styling https://developers.google.com/maps/documentation/javascript/... https://developers.google.com/maps/documentation/javascript/reference#StyledMapType 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 http://www.google.com/elections/ed/it/results
- edouard1234567 13y agoWhen it comes to map styling I think cloudmade did a much better job than google http://maps.cloudmade.com/editor http://maps.cloudmade.com/editor . I use them along with leaflet.
- Stratoscope 13y agoNice! Those CloudMade maps are very impressive. Thanks for pointing them out.
- milliams 13y agoI personally find that MapBox's TileMill (http://mapbox.com/tilemill/ http://mapbox.com/tilemill/) is much better. The massive dataset of OpenStreetMap with complete flexibility.
- fudged71 13y ago
- tzury 13y agoThat's very much like Google+ design for Google Maps. I love this design. Wish one will do such quality job for bootstrap (there are some attempts but non are yet high quality IMHT)
- lallysingh 13y agoWow. 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.
- apunic 13y agoJust great
- _pmf_ 13y agoOf all the great and awesome demos today, this is not one of those.
- hung 13y agoThis looks cool and reminds me of the Stamen maps project. http://maps.stamen.com/#toner/12/37.7706/-122.3782 http://maps.stamen.com/#toner/12/37.7706/-122.3782
- MRSallee 13y agoWatch out, you just made maps for the next Grand Theft Auto.
- randall 13y agoNice experiment!
- cddotdotslash 13y agoPretty cool - although you may want to host your images somewhere other than Dropbox - I think they put a limit on it after x number of hits.
- seanlinehan 13y agoI dropped a pin and wound up in an art gallery. Cool project and a pleasant surprise.
- vikram360 13y agoI 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.
- lnanek2 13y agoIt 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).
- ryanmerket 13y agoThis. 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.
- vikram360 13y agoThanks :) I'd love to hear more about your user studies.
- polymathist 13y agoGoogle 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?
- ok_craig 13y agoThe 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.
- b3b0p 13y agoI like it and think it's beautiful. Poster, do you mind if we borrow this and the marker images? I'd like to play around with it.
- ldad 13y agoI 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?