Articles by Topic

👋 Hey there!

This page is an organized archive (articles by topic) of all the articles/blog posts. You could navigate to posts of your liking!

---

UI/UX Design Journal

Design system Chronicles (building Tenet UI)

Phase 1 - Figma Design System

• Post#1 - Why I’m Building Tenet UI

• Post #2 - Setting up colours for Tenet UI with colorbox.io

• Post #3 - Organizing colour variables in Figma

• Post #4 - Designing a Scalable and Accessible Dark Theme

• Post #5 - Semantic tokens (colour) in action

• Post #6 - Establishing a typography system

• Post #7 - Typography variables

• Post #8 - Breaking Down Component Research

• Post #9 - Component Thinking: A recap of my component design workflow

Phase 2 - Designing with AI (Translating Tenet to code)

• Post #10 - From Figma to Code

• Post #11- Designing behavior before code

AI & Design

• A Context-First Design Process for 0→1 Work (With AI)

• How I vibe-coded my 90s-game themed portfolio using ChatGPT + Google AI Studio

• Context > Prompt: A designer’s system for an AI copilot

• Riffing With AI: My ChatGPT → v0 → Figma Workflow

• RedStack: Building a multi-role execution platform using a AI-augmented design workflow - case study

Design DNA (articles on Design Systems)

• Design DNA - A playbook for building systems that scale

• The “invisible” middle layer of colour systems

• How to use a Figma Design System effectively in real projects

Colour

• Designing colour palettes that work for every project

• Colours Revisited: Optimizing Your Design Workflow

• Crafting a semantic colour system: Fixing the colour chaos, one semantic variable at a time

• Plotting matrices to create consistent and scalable colour tokens

Autolayout

• "Auto layout" Chapter 1 - Fundamentals

• "Auto layout" Chapter 2 - Building a responsive card

• Auto-layout isn’t broken. Your mental model is!

Components

• Breaking It Down: The Basics of Component Properties

• Crafting Components with Subcomponents and Nested Instances

• Building for efficiency and usability: A Case Study on Component Design

• The "Icon properties" hack: Manipulating icon component properties

• Creating a simple "Input Text" component set

• Designing flexible data tables - an atomic approach

Miscellaneous

• Where design debt begins (And how to stop it)

• Learning UI design through deliberate practice

• Just starting your UX/UI journey? Start with learning UI/visual design!

Pixels and Process

• Pixels and Process #1 - Geeking over the good stuff

• Pixels and Process #2 - Geeking over the good stuff

Case studies

• The Design System story: Turning design debt into a scalable system - a case study

• Designing a no-code e-learning platform for dentistry - a case study

• Designing a learning platform for busy dental students - a mobile design exploration

• Learning by Deconstructing: Trying to Reverse Engineer a Design System for the Coursera Mobile App - Part 1 (Foundations)

---

Artifacts.png (design comics)

• The Existential Crisis of the 27th Prop

• The Ontology of Colour Tokens

• Assisted Overthinking

---

Productivity/Personal Growth

• Careers Aren’t Found. They’re Compounded.

• Confidently Lost - Navigating growth when you don’t have all the answers

• Life Hacks

• Embracing uncertainty to do great work

• Tolerate boredom

• Sticking to your long term goals

• The meandering path of the Generalist or the "Late Specializer"

• On becoming better than "good enough"

• How to keep going when you feel uncertain

• How to find work you’ll love doing

• Learning how to LEARN

---

Entrepreneurship

• Is Entrepreneurship a "Good Life"? Happiness, Meaning and Psychological Richness

---

Technology

Privacy, Security and Op-Sec

• Prevent scammers from impersonating you on Facebook!

• Tools for improving privacy and security during web browsing

• Why you should use a password manager

• Email hygiene - Compartmentalizing email addresses for better privacy and security

• What you could do if your credentials are breached

• A road-map to basic Internet Privacy & Security

• All you need to know about cookies - Part II (How third-party cookies track you online)

• "Private Browsing" - A high level view of what it does and does not do!

• Let's discuss 2-Factor Authentication

• Using Burner Emails for privacy - Hiding you real email address

• Why everyone should know how a URL is structured - HTTPS, Typosquatting and Open redirects

• So, what’s the big deal with passwords?

The Web

• How the web works!

• All you need to know about cookies - Part I (How cookies work)

Web hacking/Open Source Intelligence

• OSINT: How and why you would want to do a reverse image search - An overview

• The need for note making and an organized methodology in Bug Bounty Hunting

• The fascinating World of Bug Bounty hunting - What it is and how you could get your feet wet

• Teach yourself some online “verification” skills!

---

Curation

• Curation 403 - Issue 3

• Curation 403 - Issue 2

• Curation 403 - Issue 1