Skip to content

37 Easy Ways to Spice Up Your UI Designs

Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques

Identifying Fonts: the Complete Guide

How to identify fonts in websites · in PDFs · in mobile apps · in images

15 Tips for Better Signup / Login UX

Mobile patterns · Form field validation · Autofocus · Microcopy · Error messages · Error prevention

Free Font Alternatives: The Ultimate Guide

Free, high-quality alternatives to: Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman

The Step-by-Step Guide for Pairing Fonts

Typeface & brand · The power of subtlety · Letterforms & legibility · Rules of usage

100 Things a UX/UI Designer Should Know

The craft, the tools, the relationships, the ethics, the psychology.

The iOS 16 Design Guidelines: An Illustrated Guide

iPhone design guidelines for UI elements, typography, navigation, design patterns, and more · Downloadable resources · iPhone Figma template

The 3 Most Common Logo Design Mistakes (and How to Fix Them)

What symbol to pick · On colors · Size and detail

iOS vs. Android App UI Design: The Complete Guide

Overview of main differences · Navigation & organization · Controls and paradigms · Typography · Other platform standards

4 Rules for Intuitive UX

Obey the Law of Locality · ABD: Anything But Dropdowns · Pass the Squint Test · Teach by example

The 3 Laws of Locality

Where to put controls in your UI designs · Conceptual and physical areas of the interface · Styling controls that are distant from what they control

The #1 Way to Spice Up Your Designs (And Create a More Cohesive Brand)

How to make a design look professional · Tying a UI design together · Shapes vs. colors as motifs

How to Create Your UX/UI Portfolio (Without Much Experience)

How to find projects · Tell the story · What not to include · The best portfolio inspiration

Why Beginning Designers Don't Need to Learn Grids, Type Scales, or Color Theory (and other “Designer Dogma”)

Grids in a world where no screen ever stays the same size · The golden ratio is not the answer · Adjusting colors like facebook · Pick-a-number fatigue

3 Pro Tips on Alignment

The right edge of left-aligned text · Centering is still aligning · Hanging punctuation and friends

5 Practical Exercises to Learn UI Design (For Free)

Designing vs. reading about design · Building your gut instinct · Learning from the pros · Developing a working knowledge of fonts · Style tiles · Putting it all together

UI Tutorial: Scheduling App Redesign (in under 10 Minutes)

The squint test · Don't make a good design on accident · The CRUD strategy · The law of locality

The King vs. Pawn Game of UI Design

Using a chess exercise to create better UI · Matching typography and color · Principles of lighting and shadows · Matching icons and typography

UI Tutorial: Redesigning a Mobile Login Screen in 4 Steps

A step-by-step redesign of a login screen · Covers a handful of design tips and tricks for you to use in your own redesigns

Font Sizes in UI Design: The Complete Guide

Font size guidelines for iOS (iPhone and iPad), Material Design, and web (mobile and desktop) · Principles of choosing font sizes · Further reading

Picking Colors for Your Data Visualizations

Multi-hue palettes · Single-hue color scales · Divergent (two-hue) color scales

The HSB Color System: A Practitioner's Primer

Hue, saturation, and brightness, explained · Color variations with hue · Adjusting visibility with saturation · Black vs. white · HSL vs HSB

6 Ways to Justify Font Choices in Your Designs

Branding and adjectives · Historical usage and inspiration · Fonts have features too · Superfamilies and workhorses

UI vs. UX: A Concise Explanation

You would think there's a clear, accessible definition of this somewhere. Unfortunately, I couldn't find it.

The Reframe Technique

Analyzing your process to beat tricky interface problems · Local vs. global maxima of design solutions

Color in UI Design: A (Practical) Framework

The importance of color variations · Darker vs. lighter variations · Analyzing the real world · The Rules (in HSB) · Luminosity · The Way of Color

Copywork: The Ultimate Way to Rapidly Improve Your Design Skills

Getting inspiration from top designs · Adding to your UI bag of techniques · What I've learned from copywork · Frequently asked questions

7 Rules for Creating Gorgeous UI – Part 2 (Updated for 2022)

How to safely overlay text on images · Making text pop – and un-pop · Only use good fonts · Steal like an artist

7 Rules for Creating Gorgeous UI (Updated for 2022)

Light comes from the sky · Black and white first · Double your whitespace