Design
The design category covers the visual side: logos and brand identity, typography, colour systems, and Figma workflows. Coming at design as someone who also writes the code gives it a particular slant — a logo being beautiful isn't enough if it doesn't survive as a 16-pixel favicon or hold up in single-colour print. The writing here deals with those practical constraints: how to build a brand palette that still passes accessible contrast ratios, what should actually drive your typographic scale, and which piece of missing information doubles the work when a design is handed to a developer. I try to explain the reasoning behind aesthetic choices as much as the choices themselves.
UI vs UX Difference: A Clear Guide for Designers
What is the UI vs UX difference exactly? We explain the boundaries, tasks and how the two disciplines work together with clear examples.
HEX, RGB, CMYK: Brand Color Consistency
Understand HEX, RGB and CMYK, how screen and print differ, and how to keep your brand color identical everywhere it appears.
Grid System Design: Columns and Baseline Guide
Learn grid system design through columns, gutters and the baseline grid to build tidy, balanced and scalable compositions.
Illustrator Logo Design: Pen Tool and Pathfinder Guide
The basics of an Illustrator logo: clean paths with the Pen tool, combining shapes with Pathfinder and exporting scalable vectors.
Vector vs Raster Difference: Which to Use and When
Once the vector vs raster difference is clear, choosing the right format gets easy: from logos to photos, where each one works and why quality changes.
Logo Design Mistakes: 10 Errors That Scream Amateur
The most common logo design mistakes and how to avoid each one: typography, color, scalability and more for a logo that lasts.
Visual Hierarchy: The Art of Guiding Attention
What is visual hierarchy and how do you build it? Practical rules for using size, contrast, position and space to guide the user's attention.
UI White Space: Readability and Hierarchy by Design
How does UI white space use negative space deliberately to boost readability and visual hierarchy? A practical, example-driven guide.
Figma Component and Variant: Reusable UI Systems
Learn step by step how to build a reusable UI library with state variants using the Figma component and variant system.
Figma Auto Layout for Flexible, Responsive Design
Learn Figma Auto Layout step by step: build responsive components, master padding, gap and resizing, with a real button and card example.
How to Use Figma: Your First Design
How to use Figma? Learn to build your first design from scratch with the interface, frames and core tools, step by step.
Color Palette Creation: Balance With the 60-30-10 Rule
Build a balanced design through color palette creation using the 60-30-10 ratio rule, the right tools and accessible contrast.
Logo Types: Wordmark, Icon and Combination Marks
What are the main logo types? I break down wordmarks, lettermarks, icons and combination marks with examples and when to use each one.
Font Pairing: Typography Basics and Balance
The rules of font pairing: serif/sans combinations, contrast, hierarchy and readability balance for typography that actually works.
Brand Identity: A Practical Guide From Scratch
How to build a brand identity: practical steps to unite logo, color palette, typography and tone of voice into one consistent system.
A Guide to Color Psychology in Logo Design
How does color psychology shape brand perception in a logo? A balanced guide to color-emotion links, industry fit, contrast, accessibility and cultural differences.
Professional Logo Design: 7 Steps From Idea to Brand Identity
Brief, research, sketching, vector and variations: the 7-step process that takes a memorable, scalable logo from idea to delivery.