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)

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.

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.
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

How can ETags be utilized in fetching data?

To prevent mid-air collisions caused by multiple users or processes modifying the same item in the database, I am considering using Etags for validation. Here is my proposed approach: The client will call a RESTful API to obtain an Etag from the header, ...

javascript json header fetch etag

Getting the error message "t is not a function. (In 't(i,c)', 't' is an instance of Object)" while attempting to switch from using createStore to configureStore with React Redux Toolkit

I am attempting to switch from react-redux to its alternative react-redux toolkit but I kept encountering this issue t is not a function. (In 't(i,c)', 't' is an instance of Object) and I am unsure of its meaning. Here is the c ...

javascript reactjs react-native react-redux

Unable to see Primereact styles reflected on components

After some investigation, I've pinpointed the issue to be related to preflight from tailwind. Upon reviewing the documentation, I came across this helpful information: CSS Layer It seems that using Tailwind CSS with styled or unstyled modes of PrimeR ...

css reactjs next.js tailwind-css primereact

What is the best way to assign a return value to a variable in JavaScript?

var robotDeparture = "The robot has set off to buy milk!" var farewellRobot = return robotDeparture; I'm attempting to show the content of the robotLeaves variable using a return statement. Furthermore, I intend to assign this return statement to a v ...

javascript return var

Tips on transferring a value from one JavaScript file to another JavaScript file

Currently, I am able to pass parameters from one JavaScript file to another using the jQuery method "$.getScript". For example, in the "secondJavaScript.js" file, I use a $.getScript call to invoke the function callMemoPage() from "firstJavaScript.js", p ...

javascript ajax

Inject a value sent from response.render directly into the script tag

Below you will find a pug snippet. I am looking for a way to dynamically insert the user value into the chatConfig object. script. var chatConfig = { user : 'foo', pass : 'bar', } When rendering from my Express applicatio ...

javascript node.js express pug

How can I activate the copy function in jQuery?

I'm trying to figure out how to initiate a copy event using JavaScript or jQuery. I need to be able to simulate the copy event by clicking on a button, but I haven't been able to find a solution yet. I want to avoid using ZeroClipboard or any oth ...

javascript jquery

The thickness of an SVG line increases as it is rotated

I am working with multiple straight lines and have specified the stroke-width as 4. However, when I attempt to rotate them, the lines appear thicker than expected. Additionally, setting a negative value, such as <path d="M0 -10 20 0" stroke-width="4" st ...

html css svg

What is the purpose of a form that includes a text input field and a button that triggers a JavaScript function when the enter key is pressed?

<form action=""> <input id="user_input" onKeyDown="if(event.keyCode == 13)document.getElementById('okButton').click()" > <input id="okButton" type="button" onclick="JS_function();" value="OK"> </form> I'm trying to a ...

javascript html forms

Is there a way to transform a fixed parameter into a user input value and display the function's outcome on a different page?

I am in the process of developing a straightforward web application for book searching based on ISBN. The website will feature a text input field for entering an ISBN and a submit button. Essentially, a user can enter an ISBN in the designated box, click s ...

javascript node.js express npm mongoose

Select the Month and Year from the Dropdown Menu

I'm attempting to manage the selection of "Month" and "Year" in a dropdown list. I have two fields, "Start Date" and "End Date". In the "Start Date" field, I am displaying the "Current Month" and "Year", for example, "March 2020". My goal is to restri ...

javascript reactjs

Using the useState Hook: What is the best way to add a new item to the end of an array stored in the state

I'm currently working on a project using Next.js and Tailwind, where I am trying to populate an array using the useState Hook. My intention is to iterate through the array using the map function and add items to the end of the array until there are n ...

javascript reactjs react-hooks next.js use-state

Navigating within a React application using React Router 2.6.0 by triggering a redirection within a click

Currently, I am experiencing an issue while utilizing react-router for constructing a login system with firebase and react. The desired functionality involves redirecting the user to the home page upon successful authentication of their username and passw ...

javascript reactjs react-router

Eliminate the need for require statements in TypeScript-generated JavaScript files

I am working on a website project and utilizing TypeScript for development. While using the tsc compiler, I noticed that all my JavaScript code compiles correctly. However, when I include an import statement in my TypeScript files, it gets compiled into J ...

javascript typescript

Utilize mapping function to merge arrays

Currently facing an issue with no clear solution in sight. When making API calls via a map, I am able to successfully log all results individually. However, my challenge lies in combining these results into a single array. var alpha = ['a', &apo ...

javascript node.js svelte sapper

What measures can I take to restrict Node REPL instances from accessing the global scope?

When setting up a new repl instance in code, it automatically gains access to the global scope. While custom variables can be exposed in the local scope for the repl to utilize, restricting access to the global scope isn't straightforward. It would be ...

javascript node.js scope global-variables read-eval-print-loop

Creating a custom Angular HTTP interceptor to handle authentication headers

Necessity arises for me to insert a token into the 'Authorization' header with every HTTP request. Thus, I created and implemented an HttpInterceptor: @Injectable() export class TokenInterceptor implements HttpInterceptor { constructor(public ...

javascript angular typescript angular-http-interceptors

Warnings about NgZone timeouts are displayed in Chrome DevTools even though the timeouts are actually executing outside of the

Is it common to receive a warning in Chrome DevTools like this? [Violation] 'setTimeout' handler took 103ms zone.js:1894 even when all timeouts are executed outside of ngzone? I personally follow this approach: this.zone.runOutsideAngular(() = ...

javascript angular timeout google-chrome-devtools angular2-changedetection

What steps do I need to take in order to change an HTML div's background to a black

My current project involves dynamically loading HTML content stored on disk into a specific div element. This is achieved by using the following code: $('#FictionContent').load('Content/HuckFinn.html'); Just to provide some background ...

jquery html css visual-studio webmatrix-3

Utilizing React Native to Query, Filter, and Save a Single Document Field Value from Firestore Database into a Variable/Constant

My current task involves setting up a Firebase Firestore Database in order to filter it based on a specific field value within a document. The collection I am working with is named "PRD" and consists of thousands of documents, each sharing the same set of ...

javascript firebase react-native google-cloud-firestore

CSSer Q&A