Home > User Experience > UI/UX Design: Practicality. Striking a balance between innovative… | by Nick Lawrence | Jan, 2021

UI/UX Design: Practicality. Striking a balance between innovative… | by Nick Lawrence | Jan, 2021

UI/UX Design: Practicality. Striking a balance between innovative… | by Nick Lawrence | Jan, 2021


There are a multitude of technical factors that must be considered when designing for a production environment where your design(s) are intended to be reproduced in code and delivered to thousands of people across multiple platforms.

Layout specification

You can spec a layout with whatever tools you like, but know that CSS flexbox and grid are what will be used in code to reproduce your layout, period.

Absolute positioning does not happen in the real world as there are millions of devices with thousands of sizes. Set your margins, padding, media breakpoints, and let the rest go.

Type specification

Typography has come a long way on the web and native platforms, but its still nowhere near where it probably should be for absolute 100% reproduction of fancy typographical tricks.

You can get away with a lot now but know that if you’re trying to spec type on the web for super artistic purposes, there is a high likelihood that you’re going to have a bad time, so keep it simple.

Component specification

Here’s the rub: when we design for the web/native, we are designing relationships for and between constituent components that make up our application and influence our users’ experience.

The fact of the matter is that you want uniform, precise, and reproducible components that operate the same way across multiple device types for better overall usability.

Interaction specification

This one is a doozy. I see so many key-framed fancy after effects animations that (while cool) are insanely time-consuming and monetarily expensive to reproduce on web and native platforms.

Yeah, that transition between components with interdependent states looks SUPER great and professional, maybe let’s NOT do that for the MVP so that your devs don’t loose their sanity trying to recreate it in CSS, JS, GSAP, and WebGL/Three.js.



Source link