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.
Follow me on Twitter
almost 2 years ago
I think spinning circle was good here. Because how you will know that he is going to record 15 mins or 1 hour?
@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.
nice design and lovely work also feeling a little tempting about your huge product and design share. God Bless :) And this is awesome + clean.
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
@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.
Just a thought bro, when a user clicks to start the recording the mic icon can be replaced with the timer, see my point ?
@Kartik Mahant ✦✦✦ Might take it in consideration. Not sure about it. =]
I agree with @Kartik Mahant ✦✦✦ - Maybe the word could get replaced by a counter, depends on what feels better. Love the idea, so simple! =)
@Marco Moreno Yep, considering it! Thanks!
@Andrey S. Rodrigues Thanks mate!
@Tanveer Junayed Thanks dude :)
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).
Its so sexy
@Dennis Flinsenberg I might give that a try! Thanks
It'so fresh, like it a lot! GJ
@Aleksandar Djuric thanks!
Crisp!!!! Love button color.
over 1 year ago
Hey here’s a similar stuff that I had posted sometime back. http://drbl.in/eaqe
They look pretty alike!
Hey @Subash Dharel if you mean in like shape and colors they do indeed :) Alto they both have a very different function.
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.