My first junior ui/ux task - Is this form modal dialog pixel-perfect and any enhancement recommendations - Photoshop

somejkuser
October 31, 2015
222 views
2 votes
3 Answers

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)

Answers

- aarjithn
- October 31, 2015 at 8:02 pm
- 0 votes
0
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

Login or Signup to reply.

- FelipeS
- October 31, 2015 at 8:04 pm
- 0 votes
0
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:
- When you type the text, you kinda lose the label of the field.. It’s cool when you don’t have anything typed, but I guess having labels for each field would be better
- I would strectch the separator to go until the bottom of the height and weight, and in the bottom would be a blank space with only the buttons.. (in this case only one)
- Similarly, the line in the between, I’d put to start only on the fields and let the title clear..
- Not sure if you can do that, but putting some icons for facebook, twitter would be nice! 🙂
- Not sure if it will look better, but maybe if you align left the label “Height” and the value itself align right, it might look better with “Weight” as they have different size..
Login or Signup to reply.

- JasonGabler
- October 31, 2015 at 8:23 pm
- 0 votes
0
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.
1. 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.
2. 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.
3. 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?
Login or Signup to reply.