Working on some things. *edit: would love some feedback on this, full shot attached
over 1 year ago
Beautiful work man! Stunning colors.
Stylistically, everything is beautiful. Absolutely gorgeous.
As for critique...
1. I like how you're trying to divide things into two columns instead of the typical one-column layout, but it makes things more confusing. My eyes don't really know which path to take... do I go left to right and then the next line? Or do I fill out one column first and then the next one? Also, that country drop-down is going to be too small for some (most) selected countries.
2. I don't know why the 1-2-3 navigation is at the bottom. It'd make more sense right under the header, and would eliminate the redundancy of having a header AND a hover-state for the step number.
3. The bar at the top says fill in all required fields, but which ones are required? All of them? If so, just say "please fill in all fields". If not, you need to denote the required ones.
4. Assuming this is a quick and easy setup, why is there a need for a save button? It causes more confusion... do I need to save what I've entered before I continue to the next step, or will it save automatically? I also see no need to include "1 of 3" in the next step button. It's already made clear by the 1-2-3 navigation.
You said you wanted feedback, so here you go. ;) As I said, it looks great—these are just a few logistics critiques.
Yes, nice colors!
@Kyle Decker Thank you very much for taking the time to leave feedback :) This is extremely insightful as I'm still relatively new to UI design - I have no problem making it look good but I need to work on UX.
2. I completely agree, I'll try playing around with placement of the progress indicator.
3. I forgot to mention that this shot is illustrating what it would look like if the registration was submitted with some fields missing (so it would only appear if that happened). There are also some other active elements such as the highlighted M and text field.
4. Regarding the save button, I have updated the design to have just the "next step". So the orange button won't appear till step 3 (complete). I'm working to simplify it. Thank you :)
The 'Last name' and 'email' field need a stroke at the bottom. And I am not a fan on the contrast between the blue and orange; it has a Windows 95 feel to it.
Apart from that: flawless.
I just clicked on this shot again, didn't notice the attachment the first time. So now I can give some valuable critique instead of just saying how good it is (it is, really). Other than what already has been mentioned, I feel like the orange border around the text box should be placed on the outside, instead of on the inside as it is now. Makes it feel so narrow
@Cameron Dearsley nice interface design! ++
really like the crispyness of this
1. I would make '1 of 3' dark blue maybe. Because you use orange for a button. '1 of 3' isn't a button I guess? It's confusing at least ;)
2. How do you know if something is a required field? It says at the top you have to fill in all required fields.. but how can you tell?
3. I would put the steps (1-2-3) at the top, and maybe put the title of the step under the circle. By the way, now it's double. You have a title at the top, and bottom.
For the rest, the interace looks very nice and clean :) Good luck!
i like all the individual styles, and I think you had said the larger shot shows some mixed styling, so i'll keep that in mind, but it just seems awfully busy.
once again, maybe in use it isn't but from the shot it is overwhelming and seems to take away from the fields.
I wonder if these buttons and that step shower would look better without the gradients! looks great tho!
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