Learn UI Design

Dive into the art of UI design. Read these tutorials to master color theory, layout, typography, and more. Create stunning user interfaces that delight users.

All UI Design content:

  1. A Tale of Two Platforms: Designing for Both Android and iOS

    A Tale of Two Platforms: Designing for Both Android and iOS

    Tutorial Beginner

    Android and iOS apps aren't always designed in isolation. Sometimes you need a quick way to design an app for both platforms. If you're new to designing...

  2. Designing an iOS Fitness Application with Apple Watch Compatibility

    Designing an iOS Fitness Application with Apple Watch Compatibility

    Tutorial Beginner

    In this tutorial, I’ll teach you how to design a simple and easy-to-use iOS fitness application for tracking outdoor running and cycling. Besides the iOS...

  3. CodePen Challenge #1: Results!

    CodePen Challenge #1: Results!

    Tutorial Beginner

    Last week we asked you to take part in our first CodePen Challenge (oh, there will be more)–here’s what you all cooked up!

  4. CodePen Challenge #1: Style Section Links with CSS

    CodePen Challenge #1: Style Section Links with CSS

    Tutorial Beginner

    What better way to run a web design Community Project than on CodePen? In this, the first of such challenges, I want you to check out our example pen, fork...

  5. Let’s Make Some Dynamic, Animated Section Links

    Let’s Make Some Dynamic, Animated Section Links

    Tutorial Intermediate

    In this tutorial, we'll discuss a technique for dynamically generating section links with JavaScript, and then animating them using CSS. Let’s dive in!

  6. Designing a VSCO-Inspired Web Journal in Sketch

    Designing a VSCO-Inspired Web Journal in Sketch

    Tutorial Beginner

    In this tutorial, I’ll teach you how to design a simple and sophisticated VSCO-inspired web journal application in Sketch, for both mobile and desktop.

  7. How to Make Your Own Button UI Kit with Super-Clean Syntax

    How to Make Your Own Button UI Kit with Super-Clean Syntax

    Tutorial Intermediate

    No designer fits in a box. We all have our own wants and needs out of a button framework. We all want to see certain types of buttons, and maybe we’ve become...

  8. How to Create an Interactive Prototype With Marvel

    How to Create an Interactive Prototype With Marvel

    Tutorial Beginner

    Marvel is an excellent online tool which allow designers to create prototypes of mobile applications and web projects. In this tutorial we'll see how we can...

  9. What Everybody Ought to Know About App Design for Windows 8

    What Everybody Ought to Know About App Design for Windows 8

    Tutorial Beginner

    Windows 8 apps are an exciting User Interface challenge for designers and developers alike. The out of the box framework is constantly evolving and rationale...

  10. How to Use Susy: Superpowered Sass Grids

    How to Use Susy: Superpowered Sass Grids

    Tutorial Intermediate

    Susy is a powerful set of Sass mixins for building grid-based layouts. We’ll show you the basics of working with Susy in this tutorial.

  11. Prototyping an Interactive iOS Product Tour With Framer.js

    Prototyping an Interactive iOS Product Tour With Framer.js

    Tutorial Intermediate

    Framer.js and its accompanying ecosystem Framer Studio are great tools for composing, presenting and iterating upon interaction design. In this post, you'll...

  12. A Sneak Peek at the Next Foundation for Apps

    A Sneak Peek at the Next Foundation for Apps

    Tutorial Beginner

    ZURB is always working on the next big tool to help web designers and developers alike. They make our programming days a little easier and a lot more fun....