Toggle Switches
Tags
Tait Brown
Mario Bieh
Jorge Puronkeyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
34,023,864,997 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
26 Responses (page 1 of 2)
Pro
Rok Benedik
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)
about 1 year ago
Pro
Jason Long
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.
about 1 year ago
Pro
Hudson-Peralta
That's some slick switches right there Jason, great job!
about 1 year ago
Pro
Jason Long
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
about 1 year ago
Pro
Joel Jenkins
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?
about 1 year ago
Pro
Gert Jan Lodder
Really nice work, Jason! :)
about 1 year ago
Pro
Jason Long
Thanks everyone.
Joel - they're basically a glorified checkbox. Here's a first pass at wiring up the interaction: http://goo.gl/JydQS
about 1 year ago
This makes for a drop-dead gorgeous UI. Not to mention how fun it is to try out. Great work, Jason.
about 1 year ago
Pro
Jason Long
Thanks Aaron, I appreciate it.
about 1 year ago
Pro
Jason Long
For anyone interested, I've posted these to 365psd: http://365psd.com/day/329/
about 1 year ago
Rebound
Toggle Switches Rebound
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.
about 1 year ago
Pro
Steve Lowtwait
Fantastic design!
about 1 year 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?
about 1 year ago
Pro
Jason Long
Great rebound, Tait - I added my comments to your shot's page.
about 1 year ago
Pro
Sean McCabe
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.
about 1 year ago
Pro
Lail Brown
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 :)
about 1 year ago
Pro
Jake Dugard
Money
about 1 year ago
Really love it! How do you create the metallic button effect?
about 1 year ago
Pro
Edward Sanchez
Very similar to something I did a few months ago
here
But I went for a more subtle metal effect.
Also, smaller version
about 1 year ago
Pro
James Noble
Thats what I'm talking about! Very nice pixel perfect and intuitive UX for touch screen devices.
about 1 year ago
Pro
Jason Long
Thanks again everyone.
Alex - the metallic buttons are just circles with angle gradients (using a mix of various greys at the color stops).
about 1 year ago
Pro
Joel Jenkins
In context = VERY NICE! I'm a fan :)
about 1 year ago
Well, this one is definitely better than the new version i.m.o., it's what immediately pulled my attention. Great job
about 1 year ago
Rebound
Toggle Switch Variations
by Mario Bieh
about 1 year ago
wow the coded version works awesome and really puts it in context.
about 1 year ago