Experimenting with a way to reflect the form's completion in the Submit button, whilst using transitions to guide their eyes through the form. Not actually Roger Moore's contact information.
about 1 year ago
Nice piece of work here, loving the colors ;)
This is a really nice idea. Only thing I don't like is how the arrow shifts the circles to the left. Maybe keep the arrow (greyed out) until completion so the indicators don't move? BTW — how did you animate this — is it a GIF or movie?
@Jack Bingham The reason for the left shift was to keep the innards of Submit button centered at all times, and so when the form is complete the movement would trigger the eyes to move down. I do agree as it isn't as nice as something popping out of the dots. Perhaps I should've increased the size of the Submit button?
It's a .gif that I did in CS5 with the Animation panel. Still haven't found a reason it wasn't included in the CS6 beta.
That is super neat. Awesome!
Very interesting solution. I also like the icons that go along with each form field, but wonder if they are entirely necessary.
I don't mind the shifting of the content in the button, I think it does help draw they eye down there once in the "phone" field. The coloring of the dots was subtle enough that I didn't notice it the first time around, which is good.
I love this!
However, a caveat! What happens if I remove the content of the center input field? Will it remove the center dot in the arrow and the arrow head?
Just a thought :-)
@Rob Palmer Arrow head would disappear, SUBMIT would fade out again, and the dots would be (On) (Off) (On).
Will this beauty be released as a css/ html thing or is it just a experiment? :)
@Glenn Hitchcock Thought that would be your solution, cool :-)
Ahh this is brilliant! Love every pixel of it.
@Finn Kraft Purely an experiment.
@Glenn Hitchcock Oh :(
Looks really sweet though!
Oh my, this is great way to subtle way to show actionable process!
Love this idea. The association might be apparent even sooner if the dots also indicated the field in focus (eg. only the active ring/dot is 100% white). Probably overkill, but could be interesting to see.
Really great idea :)
5 months ago
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