I recently had a good friend reach out to me who he asked me the following question:
Hi Hassan. A question for you: what are some things you think front-end engineers should watch out for and maybe call out when getting the first mock-up from a design team?
I'm currently working on creating a checklist of things that our team should always consider and I don't want to miss any subtle but foundational points.
This is a great question and something I consider often when working closely with the designer and product manager on my team. Almost all front-end engineers and designers have a baseline checklist of things to keep in mind when moving from mock-up to code, which can include things like:
Depending on the technologies you work with and the app you may be building, there also could be other important concepts you need to consider.
Outside of the above foundational checklist of things to keep in mind, here’s what I also shared with my friend on some other important things I like to consider and think about when receiving a new design mock-up.
First, I always explore if a design mockup involves building new UI elements within existing pages of our app or if it involves structuring and creating new routes and pages.
If the latter, I investigate the following points:
/app/{:id}
)?When receiving a design mockup, one of the first questions that I also often have is “are there any large components or elements being shown that are not part of the design library being used in our team”?
A design system or library is a collection of reusable components, guidelines, and assets that help teams build cohesive products. Many popular design systems exist today such as Material by Google, Human Interface Guidelines by Apple, Fluent Design System by Microsoft, and more.
If the design mockup contains custom UI elements that are not part of the design library, I would ask: do we have a similar existing component in the design library we can use instead? Alternatively, do we want to go ahead and build this custom element/component?
If we do build this custom component or element, should we consider pushing this new component back into the design library such that others can use it later in the future?
When querying information from an API, we always need to consider how to handle the loading behavior of API requests as well as surface any UI that dictates to the user when an error occurs. When receiving a design mock-up, I always think of how best to handle:
Poor loading or error behavior can frustrate users and lead to a negative impression of the product. Handling loading and error states is important since it provides users with feedback that their request is either being processed or something unexpected has occurred.
The last thing I tend to look for when working with a design mockup is if the design encompasses any behavior that can be constituted as an edge case. An “edge case” refers to a scenario or situation that is rare or unusual, and may not be accounted for in normal usage of the app.
This sometimes can be harder to find but depending on the app being worked on, it can be critical to consider edge cases in the design mock-up to ensure that the app can handle unexpected scenarios.
Till next time! 🙂
— Hassan (@djirdehh)