100 Days of Visual UI Design

As of May 2023, this journey is still in-progress and early days.

In April 2023, having just finished watching all the course material in both Figma Academy and Shift Nudge, I decided that I wanted to approach visual UI design systematically and methodically. Drawing on other examples of a 100 day challenge, I’ve decided to do 100 days.

Goals

My goal was this:

1. Draft one high-fidelity mobile / web UI design daily
2. Write a short reflection on it

Tools

My initial tool is confined to Figma, and any associated plug-ins. A side-goal of all of this is to master Figma shortcuts (more than I already have).

My Creative Process

My creative process is simple:

1. Find a prompt / inspiration (10-15 minutes). I’m looking, here, for ideas I can draw on for deciding the parameters for the day’s work, or beyond. Some ideas:
   1. Copywork
   2. Coursework
   3. A novel challenge
   4. A design system or style
2. Setup my environment (5-10 minutes). If it’s copywork, I’d make a “mini-design-system”: ID fonts, colors, and icons being used that I can set to the side. For others, I’d set the prompt (as a brief, job story, or flow) at the top.
3. Draw the thing (30-60 minutes). Depending on the complexity, I would take anywhere from 30 to 60 minutes drawing the thing. SaaS interfaces on the web take the longest for me, since they have the most components and details.
4. Publish to my Portfolio (20-30 minutes, once a week). I’ll share the idea out to my UI Design Gallery with a few nicely showcased screenshots and a short reflection.

Days 1-14: Copywork

My goal for the first week? Copywork. An unglorified form of work, but as Erik Kennedy notes, an old tradition¹.

Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill. In our case, this means recreating a user interface (UI) design pixel for pixel.

I intentionally tried to jump around to different styles and systems (web, iOS, and Android) and do them quickly, noting how my workflow changed.

This is where I’m at so far, in the middle of more intentional copywork.