4 ms·
I started doing something similar with the small amount of UI work I do, modeled after [1] (a great watch, BTW). For example, my flow for app icons is like so:
by mcmatterson 10y ago
I started doing something similar with the small amount of UI work I do, modeled after [1] (a great watch, BTW). For example, my flow for app icons is like so:
1. Spend some tiny amount of time building the simplest thing that represents your idea on an artboard. The focus here is to function as a first step, not to strive for perfection.
2. Identify one thing to change (shapes, colours, font, etc).
3. Duplicate the whole artboard, and tweak that one thing on the copy.
4. GOTO 2. Keep looking back at previous artboards and don't be afraid to revert if you notice that you've been off course for the past few iterations. Never delete an artboard, just go back and fork.
5. Stop when there's nothing immediately obvious to tweak.
It's a simple workflow that produces much better results than endlessly tweaking a single artboard, and you can see your evolution over time, so it's easier to identify the things that work / don't work to improve your skills the next time around.
[1] https://vimeo.com/113751583 https://vimeo.com/113751583
- newscracker 10y agoDo you have recommendations for any generic tools that can do this for images, artwork, web pages, etc., and allow one to easily view the evolution like a photographer would look at photos captured in an app like Adobe Lightroom or similar? Preferably something that allows annotations and version control so each change is clearer? It'd be great if there are some free tools too. I work on UI very rarely, if at all, but I see value in a workflow like this.
- mcmatterson 10y agoI just do it in Sketch. For me, any evolutionary insights are secondary to shipping, so I'd rather stay on the golden path of tooling than adapt the flow just to see changes. However, it's generally pretty easy to simply zoom out and see your evolution just by looking at multiple artboards at the same time (the changes I'm interested in are more about feel and aesthetics, so I don't really need any pixel level onion-skinnng or anything to compare revisions). FWIW though, Github's image diff is quite useful in this regard. They have a number of useful comparison interfaces for image files that may fit your needs.