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.
112,801,523,060 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
22 Responses
Hi Dribbblers! It has been some time ago I posted something on dribbble.
Mainly because I'm busy with a big project which soon I'm going to show more off. Anyways.
I made some buttons to record your voice for a contact page. Once the top button is pressed it will show up the time line, going around the circle, which indicates the time you have left. Once your time is up, the check icon will pop up, and let's you know it's recorded.
Any critiques are very welcome, I'm always open for some new ideas! Or adjustments.
Cheers!
12 months ago
Pro
Afraz
I think spinning circle was good here. Because how you will know that he is going to record 15 mins or 1 hour?
12 months ago
@Afraz You only have a certain time to record your message, so once your time is up the circle is full. There will also be a function that allows you to redo your recording. Before you send it out.
If however your message is shorter then the time given, you press the button again that says "stop recording" and the circle will animate into the check icon.
12 months ago
Pro
Nuruzzaman Sheikh
nice design and lovely work also feeling a little tempting about your huge product and design share. God Bless :) And this is awesome + clean.
12 months ago
Pro
Ondrej Lechan
The "Recorded!" button will show up after on the same position as "Record voice" button is? Because then the length of the second button is fine. It will not be looking very good, if the first button will switch to shorter one after record is complete:)
And I can imagine some nice fade effect between two stages of the buttons
12 months ago
@Nuruzzaman Sheikh thanks m8! Stay tuned!
@Ondrej Lechan You make me consider not to shorten it :)
As for the fade effect, I was thinking of making a fade out animation when the recording is done, and letting the check mark pop in and the text "recorded!" fade in.
12 months ago
Pro
Kartik Mahant
Just a thought bro, when a user clicks to start the recording the mic icon can be replaced with the timer, see my point ?
12 months ago
@Kartik Mahant ✦✦✦ Might take it in consideration. Not sure about it. =]
12 months ago
Pro
Marco Moreno
I agree with @Kartik Mahant ✦✦✦ - Maybe the word could get replaced by a counter, depends on what feels better. Love the idea, so simple! =)
12 months ago
great buttons!
12 months ago
@Marco Moreno Yep, considering it! Thanks!
@Andrey S. Rodrigues Thanks mate!
12 months ago
Pro
Tanveer Junayed
Nice one.
12 months ago
@Tanveer Junayed Thanks dude :)
12 months ago
Why not change the colour of the second button to a green colour? That way the user gets visual confirmation of a succesful recording (imagine if you're illiterate).
12 months ago
Pro
Vaclav Bedrich
Its so sexy
12 months ago
@Dennis Flinsenberg I might give that a try! Thanks
12 months ago
Pro
Aleksandar Djuric
It'so fresh, like it a lot! GJ
12 months ago
@Aleksandar Djuric thanks!
12 months ago
Pro
Hüseyin Yilmaz ☺
Crisp!!!! Love button color.
11 months ago
Hey here’s a similar stuff that I had posted sometime back. http://drbl.in/eaqe
They look pretty alike!
9 months ago
Hey @Subash Dharel if you mean in like shape and colors they do indeed :) Alto they both have a very different function.
9 months ago
Pro
Samuel Couto
Super sleek!
8 months ago