So the designer shared with you beautiful UI designs on Figma/Invision and you goofed it up when coding. You spent a lot of coding the UI with HTML & CSS, React Native or insert your frontend stack but the result did not meet the designer’s expectations. Something about the final UI(and UX) you created doesn’t seem right.
Does this sound like a common occurrence? Here are a few things to note or a checklist that you can follow when translating design to code.
Table of contents
Open Table of contents
Checklist
TL;DR? Here is a quick checklist for developers before raising a PR
- I have inspected the developed screen top to bottom, left to right, pixel by pixel.
- The alignment and layout are precise and I have followed a standard grid.
- All the sections I developed have consistent margins and padding.
- All the colours used are as per the variables provided in the design.
- The fonts have the correct family, weight, line height, and spacing.
- The images used are clear, aligned perfectly and not skewed.
- The UI developed has different states (success, failure, loading, disabled) taken care of.
- I have taken care of all micro-interactions accurately.
White space and layout
The negative spaces and the alignment of the sections in the UI plays a very important role in showcasing quality. Overlapping elements, different border radiuses across cards, encroaching shadows and such inconsistencies are a big no-no.
Standardize a grid system for your product. Work with the designers to ensure that designs always follow a consistent grid layout.
An 8x8px grid is commonly used. The margins and padding used will always follow multiples of 8px.
This ensures consistency across different developers too.
There are various ways in which you can align the sections of the UI. Master the fundamentals of flexbox, grid and box model. I have found changing the background colour or adding a solid border to bounding boxes as an excellent way to debug the layout.
Typography
Do you know the difference between serif and sans-serif fonts? Unless you know such subtle differences, it is very easy for your eyes to miss the details when developing the UI.
Your eyes cannot see what the mind does not know.
Multiple such subtle differences add up and the final UI you develop will be way off from the original design.
A few key points to note when it comes to fonts are
- What is the font family used?
- What is the weight of the font?
- What is the line height used?
- Check if the font file is actually loaded.
- Ensure the font style matches too.
And finally don’t just copy-paste text from the mockup. Ensure the spelling is right and grammar matches the context.
Images
The common pitfalls I have encountered with junior developers are:
-
Skewed images
Every time you embed an image into your UI, watch out for the aspect ratio of the image. Don’t try to cram the image into the available space. Read about various
object-fitproperties. -
Pixelated images
Images that are of small size when scaled to large dimensions will show jagged edges and are not going to look good. Always ensure you get the right-sized images from the designers.
-
Huge images
Web optimize your images!
Don’t add that 5MB image that the designer shared with you. It will take an eternity to load on production.
Consistency
Different screens of your product might be developed by different UI developers. However, the information hierarchy and grid must be consistent across screens. There must be a common standard for the product. UI must not be developed as per the personal preference of an engineer. For example, if one developer adds 5 px margin to one screen and another one adds 8 px margin, the UI of the final product is bound to be a mess.
Colour
The colours and branding are what gives life to your UI.
As a frontend developer, understand the basics of colour theory, and different ways in which colours can be represented (hex, rgba, hsla).
The branding of most products might have primary, secondary and accent colours.
These colours are best added to the root of the project in a theme file so that it can be reused by every developer.
In addition, ensure that you get the colour codes for disabled states, success and error messages and selection state from the designer.
Most of the UI tools like Figma, Invision and Adobe XD provide you with ways to pick the right colour.
These tools also come with design-to-code snippets that provide exact variables.
Always ensure that pick the colour from the original design.
Strive for pixel perfection
“Can you spot 5 differences between these images?”
It’s a game we all played when we were young. Developing UI is very similar. The only difference is that the level of detail you must have is enormously high. Evaluate the screen you created top to bottom and right to left, pixel by pixel. Check for subtle differences that you might encounter between the UI developed and the prototype/mockup from the designer.
Observe everyday
Most of the apps and services that have millions of users pour in tons of money for user research and identifying the best UI/UX. You use a handful of such apps daily. Open your favourite food delivery app (seriously, do it right now). Observe the precision in layout, the typography of headings and body text, how precise the shadows are and how the app behaves when content is loading.
When you sign up for a new service, observe how easy/difficult the onboarding process is. As a full-stack/frontend engineer, instead of just consuming content, always observe. Your experience of using everyday apps can become good learning for developing great UI/UX.
Learn by doing
Let us all be honest, we still Google how to centre a div. Some of these UI development skills are difficult to master, but you can make great progress learning by doing. Open Dribbble, Behance or Awwwards and:
- Be inspired by the designs.
- Choose one of the designs and try to replicate the same with HTML and CSS or in React Native.
- Get feedback
- Rinse and repeat
A few other great options for learning are:
- Build a personal website from scratch
- Does your friend own a coffee shop? Offer him/her to build a website.
Such side projects can be good guinea pigs to learn UI development and get better at it.
Watch out for UX and micro-interactions
All hell breaks loose once your product hits production and real users.
If something has to fail, it will definitely fail in production.
A button that you have added to submit data will respond in 200ms when developing locally. Once it goes to production, it might depend on the user’s network and several other factors increasing the response time to a few seconds. For every UI, ask these 3 questions:
- What is the success state?
- If there is a failure, what feedback will you provide to the user?
- When the user is waiting for a response, have you taken care of a loading state for the UI?
A good developer is NOT someone who completes a development task because you have been told to do so. A good developer is someone who understands and puts the user’s needs first. You might create jaw-dropping screens but still have very bad UX. The success of any product depends on having a solid UX.
One of the easiest ways to delight users is to use small functional animations and introduce a subtle motion in the UI. Such micro-interactions take out the boredom of bland UI and give users clues and visual feedback.
As a developer:
- Firstly, understand the theory of motion. Unless you understand terms like easing and duration, it will be difficult to code the animations.
- Secondly, replicate the animations “pixel-perfectly”.
- Thirdly, don’t forget about performance. Animations are notorious to affect framerate and performance. Ensure that the interactions are smooth and not clunky.
Work as a team
Recently, I saw a reel on Instagram (embedded below). Once the designers have finalized a prototype, and when the developer reverts with “No, it’s not technically feasible”, it reflects two things:
- Your product development process is a mess.
- It also reflects poor teamwork.
Designers and developers and subsequent downstream functions (like QA) must work together to finalize product screens. As a good developer, you must identify potential technical hurdles in developing certain UI and UX.
Conclusion
Building pixel-perfect UI needs good attention to detail. It is always good to abstract the variables like grid sizes, colours, typography etc. into one common place. Focus on reusing these instead of using inline styles. If possible, choose a design system rather than building a standard in-house.
Mastering UI development requires practice. Strive to become a perfectionist when it comes to UI and UX.