Comment by immibis

6 days ago

Don't create every possible picture. Create a representative set.

Draw each screen at least once. If you have dark mode, you don't have to fully redraw each screen in dark mode, just enough to show how dark mode should look. If it has to work on desktop, you probably do have a completely different desktop version of each screen (from the default mobile) so draw that - but don't redraw every detail of a widget that's identical to mobile.

Testing every combination should be for the testing stage. It's good if you can foresee clashes (like the desktop version of this widget looks bad on this page in dark mode) in the design stage but it's not really an excuse to prolong the design so long that it lasts until you would have been finished with testing anyway.

Having a computer generate all the combinations for you in the design stage isn't that great unless you can pay individual attention to them - there's no point producing artefacts that nobody looks at.

I don't think you got the point. Instead of "pictures" we need a design system - defined sizes, paddings, margins, grids, font-sizes, colors, breakpoints, variants, components, behaviors, transitions, etc. and it should be consistent across the app. How many times have I worked with a design that didn't respect these consistently from page to page...

  • Instead of pictures or a design system, what you need is a way for users to do stuff with your app. Pictures help with this more than a design system does. More important than every margin being the same across the app, is being able to do stuff with the app. The consistent margins can come later, once the app does useful stuff.