UI Libraries - 100 Days of Design, Writing & Emotions

Design:

Today, I continued with the Figma efficiency skillshare class. Have I got a complete grasp on components? No. Do I feel powerful? Yes. My work flow has become more streamlined. Somebody say, 'faster design!'



Using a combination of wireframing and UI libraries is the dream I never knew I had. Here are my notes from the class & screenshots of how I've been applying them to my SafeShop case study.



Wireframing + UI Libraries

Build a UI library using components while wireframing

1] Create text components, H1-H3 plus normal and small text. No styles need to be applied at this stage. Create a UI library frame for all of this





2] Create the grid for your main frame:

• a] create a 900 px rectangle if you want to work in a 900px grid → rules (shift + R) → guides snapped at the ends of the 900px rectangle → delete rectangle and wala

• b] use custom grid: for the below design I'm using a 6 column, 16px margin and 8px gutter grid combined with a 4px baseline grid.





Results so far:



Aside: I'm designing the above app for Android so I spent some time reading about Google's material design handling of buttons. The above buttons have a 4px radius and 16px minimum padding.

Emotions:

Today has been one of the best design days in terms of both emotional well-being and productivity. I'm sure they're intrinsically linked.



The change is a result of two questions and a change in attitude:

1] Asking myself firstly, 'what‘s the smallest, biggest thing I can do right now?'

2] once I have an answer in the form of a short list of tasks, I ask, 'what do I feel like doing?'



Here, smallest = can't fail and biggest = meaningful to my body i.e. I want to do it.

I pick the most interesting next task and spend 5-10 minutes working on it. After the time, I check in on my attention and energy levels.



I've also sat for far too long today. Now, it's time to give my body a well-deserved break. Stretch, eat and sleep. Ciao and catch you tomorrow.