Today I had a 2 hours long review session with our client stakeholders, and their UX/UI engineers. And I thought...this is something that may be interesting to many beginners.
Part of my accountabilities as a Frontend Technical Lead is reviewing designs and wireframes in order to find potential issues before the implementation phase begins.
But, what kind of issues?
When we implement a digital solution, a website, an application, we want it to be performant. We want it to load fast. We want it to score well when tested with the Page Insights tool or Lighthouse (or any other similar tool).
Screening designs for potential render-blocking features, so you can implement them in an optimal way, is crucial. Some of those issues could be around media. If you have many media assets on a page, you know you have to suggest compression/optimization tools for authors, lazyloading and intersection observers for async loading and immediate loading above the fold. You need to have the right configuration for video players, to load the actual videos on demand.
Another source of performance issues is fonts. If there are too many custom fonts in the design, make sure to handle potential FOUT, FOIT or FOFT correctly.
If you're implementing the frontend, you have a certain part of the responsibility of ensuring the UI passes a certain level (usually determined by the business stakeholders), of compliance.
You can catch some accessibility issues by reviewing designs for non-passing contrast ratios (foreground/background), for example with the tool provided by WebAIM
While reviewing designs, you may also want to ask about animations. Heavily animated navigation items, auto-playing elements, and resetting of browser indicators, like focus, could end up in a non-compliant UI.
The most significant layout issues usually come at localization times. When localizing the UI, you may realize that fixed widths and heights may suppose a problem: while in English (the most used language for design representation) a string may fit well, in other languages like German, it is unlikely to fit.
Always ask the designer/UX/UI engineer, how they would solve the problem if the word is too long, or if the lines wrap, or if there are more lines than the ones represented in the design. Should you truncate? Should you hide the overflow? Will the authors take care of it?
What does the design look like if elements like teasers, for example, have different amounts of content?
Also question designs that feature fixed-width columns with text inside, or that split into a second column after a certain amount of items, for example in the case of lists. That's very difficult to achieve.
There are of course more issues that you can come across, but these are some of the problems I've seen the most over time.
Stay safe, and have fun!