My initial junior UI/UX assignment: Can you confirm whether this form modal dialog is pixel-perfect, and offer any suggestions for improvements

Currently diving into my first project as a Junior UX/UI Designer. Coming from a background in software engineering, I decided to challenge myself by focusing on design.

I'm seeking feedback on the pixel perfection of this modal window, which my senior has described as being precise down to every pixel.

Although I am new to using Photoshop, I've been utilizing the info tool to ensure accurate pixel measurements. I feel fairly confident in the calculations I have made so far.

As a beginner in this field, I am open to providing any additional information such as pixel measurements that could be helpful in assessing the work.

If anyone has suggestions for improvements or enhancements, I would greatly appreciate it if you shared them.

Thank you!

Default Rendering (picture link)

Basic Rendering (picture link)

The Modal Form (picture link)

javascriptcssmodal-dialogpixelphotoshop

Answer №1

Enhance your design accuracy by using this chrome extension to compare it with the picture mockup.

Get Pixel Perfect Extension

Have questions about UI/UX? Visit for expert recommendations.

Answer №2

Unfortunately, my reputation isn't high enough to leave a comment yet.. :(

I must say, your design is quite impressive! I really enjoyed it!

However, here are some suggestions you could consider trying out:

  • When inputting text, the field label tends to disappear. It might be beneficial to include labels for each field, even when text is typed.
  • You can extend the separator all the way down to the bottom of the height and weight, with a blank space at the bottom containing just the buttons (in this case, only one button).
  • Similarly, starting the line between the fields and leaving the title clear could be more visually appealing.
  • If possible, adding icons for social media platforms like Facebook and Twitter would be a nice touch! :)
  • Consider aligning the "Height" label to the left and aligning the value to the right. This may enhance the visual appeal, especially since "Weight" is a different size.

Answer №3

In my opinion, providing authoritative answers in the field of UX is rare. It's important to consider both graphic design and HTML implementation when creating mockups. Accessibility should not be forgotten in coding forms, such as including hidden labels for screen readers even if you want them aesthetically hidden. Using placeholders as labels is not ideal - labels should serve their intended purpose while placeholders can provide example values or instructions.

  1. For shorter lists with common choices, radio buttons or checkboxes are preferable. This includes the gender selection list, where using two radio buttons for Male and Female may be more user-friendly.

  2. Short sliders with fine-grained values can be challenging, especially when considering accessibility. It's important to ensure smooth sliding for each value change to avoid frustrating users.

The minimalist look of the design is appealing overall. It's essential to prioritize what will benefit the client and end-users the most in terms of positive user experience, despite potential differing opinions from others.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to transfer user information to MongoDB using AngularJS and Node.js

Greetings everyone! I am currently working on a template and trying to develop a backend for it, starting with the registration form. Despite having some kind of connection between my mongodb and my app, data is not being sent to the database. Here is the ...

javascriptangularjsnode.jsmongodbexpress

Rephrase the ajax call and the data retrieved

I'm struggling to find a solution for writing this code snippet without using async: false,. var imageX; var groupX; $.ajax({ type:'GET', url:'php/myphp.php', dataType:'json', async: false, success: ...

javascriptphpjqueryajax

Developing a versatile Angular2 component that has the potential to be utilized across various sections of a website

Use Case: I need to display a processing screen during asynchronous calls to keep end users informed about ongoing activities across multiple sections of the website. To achieve this, I decided to create a reusable component at the global level. Issue: As ...

javascriptangulartypescript

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

phphtmlcss

Guide on defining keyframes in a CSS animation based on a specific property value

In CSS animations, keyframes are defined using percentages to determine their position: @keyframes foo { 0% { ... } 50% { ... } 100% { ... } } I'm working on a basic animation where an object smoothly moves across the screen. However, I ...

htmlcssanimationcss-animationskeyframe

Sending Paypal IPN Data to Node.JS: A Step-by-Step Guide

I'm looking to implement a real-time donation system on my website that can update all users simultaneously. The challenge I'm facing is that the IPN (Instant Payment Notification) page, responsible for verifying payments, is written in PHP. Unf ...

javascriptphppythonnode.jspaypal

The distance separating the top navigation bar from the sub-navigation menu

I have designed a navigation menu with a subnavigation section, view it on JSFiddle with subnavigation. My challenge is to create a 1px solid white separation between the top navigation (with yellow background) and the subnavigation (with red-colored backg ...

htmlcssnavigationbar

Link the selector and assign it with its specific value

Greetings, I am a newcomer to React Native and I am currently using Native Base to develop a mobile application. I am in the process of creating a reservation page where I need to implement two Picker components displaying the current day and the next one ...

javascriptreactjsreact-nativebindingnative-base

unable to receive the data transmitted by the socket.io client

I hit a roadblock while trying to follow the tutorial on socket.io. I'm currently stuck on emitting events. Previously, I successfully received the console logs for user connected and user disconnected. However, when it comes to emitting messages, I a ...

javascripthtmlnode.jssocket.io

Modifying HTML elements with JavaScript - a practical guide

I'm trying to dynamically add the variable x to an existing HTML tag. The goal is to update the image tag <img id="Img" src="IMG/.jpg"/> by appending the variable x at the end of its id and source: <script> var images ...

javascripthtml

Using Material UI Autocomplete for Categorical Selections in a ReactJS Application

Using MUI Autocomplete and Formik, I'm looking to organize items into categories. If an item doesn't have any sub_accounts, then it should not display a header label. Check out the example here: https://mui.com/material-ui/react-autocomplete/#gro ...

javascriptreactjsecmascript-6material-uiformik

Angular JavaScript does not take effect on elements inserted into ui-view

When transferring the code from main.html to index.html, the javascript functions smoothly. The click function successfully triggers the ripple effect. Link: Ripple Click Effect Google Material Design However, upon extracting the code to main.html and in ...

javascriptjqueryangularjsuiview

Firefox has various problems, but it functions flawlessly in Chrome without any problems

I seem to be encountering various issues in Firefox that do not occur in Chrome. 1) I am facing a TypeError: response.body is null. 2) Another issue arises when uploading images, resulting in a TypeError: Argument 1 of FormData.constructor does not imple ...

javascriptajaxreactjsform-datasuperagent

Draggable vue includes a Textarea HTML element that allows users to easily

The issue lies in implementing the draggable functionality on a textarea element. While the textarea allows text input and deletion, trying to select the text using pointer events triggers the dragging function instead, as shown in the image below: https ...

javascripthtmlvue.jstextareadraggable

Best practices for displaying a Multidimensional JSON Object using JavaScript

Within my current project, I have a JSON object structured as follows: { "face": [ { "attribute": { "age": { "range": 5, "value": 35 }, "gender": { "confidence ...

javascriptjson

Using jQuery AJAX to Redirect to a 404 Page in Case the Load Method Encounters Failure

My website utilizes AJAX to load all pages using the jQuery load method. I modified this tutorial to work with Wordpress. The issue I am facing now is that when the load method encounters an error (such as a 404 due to a broken link), the AJAX transition ...

javascriptphpjqueryajaxwordpress

Is it normal for e.target.result to only work after two or three tries?

Attempting to resize an image on the client side before sending it to the server has been challenging for me. Sometimes, the image does not align correctly with the canvas used for resizing. I have noticed that I need to send the resized image at least tw ...

javascripthtml

Guide on transforming UTC time from the server to the local time of users during a GET request

I am currently facing a challenge where I need to verify if the date of the last time an element was clicked matches the current date. Due to my server generating the current date which is 5 hours ahead of my local time, there is a discrepancy causing the ...

javascriptmongodbexpressdate

Inject CSS values dynamically

I am currently working on dynamically setting the color of a div. To provide some context, let's examine the following: <!doctype html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div clas ...

jqueryhtmlcssdynamicless

CSS: Troubles with Element Widths

I'm dealing with a list item that contains an image, like so: <ul> <li> <img></img> </li> </ul> The image is not filling the entire width of the list item. Is there a way to make the list item shr ...

csswidth