Nice details! What about making the "off" switch in same style as "on" is? (with red background and a dark red cross on top of it)
almost 3 years ago
Yeah, that was my initial direction actually. I felt that it was a little overpowering and seemed more like an error state than an off state. I also tried making the off icon a muted grey, but it seemed too subtle.
That's some slick switches right there Jason, great job!
A UI friend pointed out the classic problem of "label shows state" vs. "label shows possibility" with these sorts of elements. Totally agreed and I should have pointed out that these are clearer when viewed in context: http://d.pr/Tj05
Love the look. So, these are separate? Not an on/off state of the same switch? Are they more of a yes/no button in this use?
Really nice work, Jason! :)
Joel - they're basically a glorified checkbox. Here's a first pass at wiring up the interaction: http://goo.gl/JydQS
This makes for a drop-dead gorgeous UI. Not to mention how fun it is to try out. Great work, Jason.
Thanks Aaron, I appreciate it.
For anyone interested, I've posted these to 365psd: http://365psd.com/day/329/
by Tait Brown
I can see what you mean about it looking somewhat like an error, but the two different element styles were not really doing it for me.
almost 3 years ago
Love the style, but I'd like to see how the switch background transitions from green to silver during a slide. In the demo it sort of 'flicks' from one to the other, so I don't get the impression it's the same switch in either state?
Great rebound, Tait - I added my comments to your shot's page.
For the record Jason, I agree with your conclusion and concur that it works more effectively for what you were wanting to accomplish when viewed in context.
Yeah, I'm going to agree with Jason. Tait's version is lovely, but in context I think Jason's works. To me, Jason's negative state says "not enabled", while Tait's say "disabled"... if that makes sense to anyone :)
Really love it! How do you create the metallic button effect?
Very similar to something I did a few months ago
But I went for a more subtle metal effect.
Also, smaller version
Thats what I'm talking about! Very nice pixel perfect and intuitive UX for touch screen devices.
Thanks again everyone.
Alex - the metallic buttons are just circles with angle gradients (using a mix of various greys at the color stops).
In context = VERY NICE! I'm a fan :)
Well, this one is definitely better than the new version i.m.o., it's what immediately pulled my attention. Great job
by Mario Bieh
wow the coded version works awesome and really puts it in context.
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–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter