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.
Negative Space Logo Design: Clever Examples
Negative space logo design turns empty space into a hidden symbol. Working examples, core principles and practical methods for your own logo.
Typographic Hierarchy: Balancing Heading and Body
Typographic hierarchy guides the reading flow through size and weight; practical ways to balance heading and body text.
Mascot Logo Design: A Guide to Building a Character
How to design a mascot logo that gives a brand personality, from concept to vector, with a practical step-by-step character process.
Game UI Design: Readable HUD and Menu Layouts
Principles and practical examples for game UI design: a readable HUD, tidy inventory and intuitive menu layouts.
Golden Ratio in Design: Practical Use in Logos and Layout
We make golden ratio design concrete: a practical guide to using 1.618 in logo grids, type scale and layout proportions.
Logo Design Process: From Brief to Delivery, Step by Step
How does the logo design process really work? A step-by-step walkthrough of discovery, sketching, digitizing and delivery from a real workflow.
Designer Portfolio: How to Build One That Wins Clients
A practical guide to building a designer portfolio that wins clients through smart work selection, case studies and presentation.
Gradient Design: Visual Balance with Modern Transitions
A complete guide to gradient design principles, color transition types, and practical CSS examples for contemporary, balanced visuals.
Social Media Image Sizes: 2026 Guide
Social media image sizes vary by platform; learn the right dimensions and a template approach for sharp, never-cropped visuals.
What Is a Moodboard and How to Build One: Step by Step
What a moodboard is, why it works, and how to build an inspiration board that clarifies a design project's direction, step by step.
Color Contrast & WCAG: A Guide to Accessible Design
A design guide to color contrast WCAG ratios, the 4.5:1 and 3:1 thresholds, and accessible color choices with practical examples.
Logo File Formats: A Guide to SVG, PNG and PDF
Logo file formats can be confusing: what are SVG, PNG, PDF and EPS for, and which should a client receive? A practical guide.
Icon Design: How to Build a Consistent Icon Set
A practical guide to icon design: build a consistent set using a grid, uniform stroke width, optical balance and clean SVG export.
What Is a Design System? Tokens, Components, Docs
What a design system is, how the token-component-docs layers work, and how a small team can build one that actually scales.
Mobile UI Design: Touch Targets, Navigation, Readability
The core rules of mobile UI design: touch target sizes, thumb-friendly navigation, and readability on small screens.
Button Design: Clickable and Accessible UI
Good button design starts with state, size and contrast. How to build clickable, accessible and consistent buttons, step by step.
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.