A simple UI for selecting features for your car.
7 months ago
I don't like the check that much, you can make it smaller and a bit stronger.
Also the Titles 'Car features', 'Etiquette' etc could be left aligned with more spacing at the bottom :)
@Andrew Ckor Interesting, I guess I developed a certain taste for thinness ever since I used iOS 7. I need to think about this one.
About the centering, I would have to center the boxes too or it would look strange. Thanks for the feedback! :)
Leather interior's icon could be a leather symbol as opposed to something which looks like a film strip - http://regularrunner.com/wp-content/uploads/2013/04/LeatherSymbol.jpg
@Christopher Downer Hey Chris, I had the hardest time with this icon. Not entirely happy with this one.
Hehe, your icon looks like one of those bear carpets. :)
The red color for selected items look like they're not available, perhaps exagerated by the thinness of the green check.
@Meng To Hehe, I think that's what it's meant to look like, except it's a cow instead. That's the "international" symbol for leather and something that's quite recognisable.
I love the way this is looking, and the icons are great.
this is coming out very inspiring!
@oVan That's a valid point, I think having a different color when it's selected would help. My intention was to not have to deal with 2 different images for each icon, but I guess with font icons and CSS coloring, we can hack this.
@Christopher Downer I see what you mean. I still think it has a negative image to it. Tough one. Great to hear feedback from you. Btw, I never congratulated you for joining the team at Sketch. What a great team!
I'd reconsider making the "check" a bit stronger and maybe try to make the margins exactly the same, it seems a bit more to the right inside the circle, doesn't it? Maybe just a couple o'pixels.
Everything else looks cool and clean, feels easy to use.
@João Ferreira Ty! Good point about the padding. Maybe a tiny bit bolder wouldn't hurt. :D
@Avinash Tripathi Very kind of you, as always!
How about dropping the check. The different background-color does the trick , not ?:)
ps1: Also, how about some inner-bevel for the selected attributes, you are already doing some shadows up there :)
ps2: Great work, of course.
@George Papadakis I had some animations in mind for the check icon. Plus, it makes it even more obvious.
Some inner shadow is tempting of course. I still have much love for realistic UIs, which I am working on for another project. Too bad I can't show it yet. :)
Just some notes on the icon choices really.
Car symbols are very standardised. About 90% of car manufacturers will use the same symbols, so it would be worthwhile using these icons unless you are looking at starting a new trend for car icons.
Air conditioning icons have 6 bars on the flake, instead of 8. 8 looks too heavy and makes the icon in turn look too small. For cars, air conditioning is normally symbolised by capital AC.
Leather interior, as mentioned, would suit the typical leather icon.
Four wheel drive is typically symbolised by with '4WD' or an icon showing transmission or axle lines leading to the 4 wheels.
The 'Tinted Windows' icon looks like a camera lense. Maybe a grey car with dark grey windows would look more resemblant of tinted windows.
I can see reasoning behind wanting to come up with your own set of icons, but there are many established, and instantly recognisable icons out there for what you are trying to describe.
A good place to look would be Volkswagen's Car Configurator. They have some icons there for selecting features on a new car.
Hope the above helps.
@Matt Richardson I love this type of feedback. Not only did you take the time to leave a thoughtful and lengthy comment, but you pointed out where I can start searching. Thanks, I didn't realized that those features already had standardized icons for them. Perhaps, I can use similar symbols and try to elevate them.
For me the leather icon might be a car seat, because we are talking about car, and the only things that get leather option are seats.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.