I am working on my first project as a Junior UX/UI Designer
. I’m actually a seasoned software engineer but I wanted to expand my design skills so I took a position doing design work.
I’d like to know if this modal window is as my senior puts it pixel-perfect.
I’m a beginner at photoshop. Ive been using the info
tool and measuring the pixels. I’m fairly confident that my calculations are correct for pixel measurements.
Like I said I’m a beginner at this sort of work so if there’s anything you need like pixel measurements I’ve calculated I will gladly provide the information.
Also, I’d like to know if anyone has any enhancements they could share.
Thanks!
Default Rendering (picture link)
Basic Rendering (picture link)
The Modal Form (picture link)
3
Answers
Use this chrome extension to match your design with the picture mockup.
Pixel Perfect Extension
For UI/UX recommendations, Please post the questions on http://ux.stackexchange.com
Argh, sorry! not enough reputation yet to comment.. 🙁
Your design looks really cool! I liked that!
But somethings I think you could try to see how it fits are:
height
andweight
, and in the bottom would be a blank space with only the buttons.. (in this case only one)These comments are not authoritative answers — IMO there’s rarely such a thing in UX. Also, I do realize that my answers float between directly addressing your mockup as graphic design and it’s implications on subsequent HTML implementation. I think both efforts must consider the other.
I cannot see what you’re planning in actually coding the form, but do not forget accessibility. For example, provide <label>s for your fields. Even if you want to hide the labels for a certain aesthetic, they should exist as hidden for screen readers, etc. If you do not want visible labels in general, I would at least consider having them on the two righthand side fields. Immerse yourself in the user’s experience. If you return to edit your profile, the only way you’ll know the purpose of a field is to delete the value. Yuck. I believe that using placeholders as labels is a mistake. Consider using labels as labels and using placeholders as example values or very simple instructions for the expected format.
Where lists are not overly long and the choice is a common one, I prefer radio buttons or checkboxes. I’m specifically referring to the gender select list. If you’re planning on using only two items in that select list, consider
a () Male () Female set of radios.
Short sliders with a lot of fine-grained values can be difficult, especially with accessibility in mind. You want a good breadth of pixel sliding for each value change, otherwise that suave slider becomes a point of frustration for any user.
Over all, I like the minimalist look.
I’m sure subsequent comments and answers will disagree with mine. The question to always ask is: what will serve your client and/or end-users the best? What will give them the most positive UX?