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 tutorials:

  1. Build a Dynamic Dashboard With ChartJS

    Build a Dynamic Dashboard With ChartJS

    Tutorial Intermediate

    Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which...

  2. How They Did It: Flickr Redesign

    How They Did It: Flickr Redesign

    Tutorial Beginner

    Fresh on the heels of Yahoo!'s acquisition of Tumblr, Yahoo! has implemented a complete redesign of Flickr.com. This was met with some strong criticism as...

  3. Jazz up a Static Webpage with Subtle Parallax

    Jazz up a Static Webpage with Subtle Parallax

    Tutorial Intermediate

    It's been one of the biggest web design buzz words for a while now, so today we're going to try our hand at a bit of Parallax. We're going to put together a...

  4. The What, Why and How of Textures in Web Design

    The What, Why and How of Textures in Web Design

    Tutorial Beginner

    The use of textures and patterns in webdesign has come a long way in only a short amount of time. From cliche grunge and gaudy vintage textures, today's best...

  5. Quick Tip: Rounded Corners Done Right

    Quick Tip: Rounded Corners Done Right

    Tutorial Beginner

    This is going to seem like a no-brainer to many of you, but I see it happening so often I figured it was worth bringing up. We'll call this issue improperly...

  6. Modal and Modeless Boxes in Web Design

    Modal and Modeless Boxes in Web Design

    Tutorial Beginner

    Modal boxes are among the most effective "bang for your buck" design elements that a web designer can employ. Today, we're going to define a modal box is......

  7. The State of Web Design Trends: 2012 Annual Edition

    The State of Web Design Trends: 2012 Annual Edition

    Tutorial Beginner

    As Ferris Bueller famously said "Life moves pretty fast; if you don't stop and look around once in a while, you could miss it". Let's heed his sage advice...

  8. Twitter Bootstrap 101: Introduction

    Twitter Bootstrap 101: Introduction

    Tutorial Beginner

    Twitter's Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web...

  9. Add a Touch of Realism to Your Google Maps

    Add a Touch of Realism to Your Google Maps

    Tutorial Beginner

    Using the Google Maps API is one of the most popular (if not the most popular) way to show geo-locations on today's websites. In this tutorial I'll...

  10. Vintage Modernism: A Quick Examination

    Vintage Modernism: A Quick Examination

    Tutorial Beginner

    Vintage Modernism in web design has been around a while now, and is one of those definitions which you'll perhaps hear, but doesn't seem to have gained any...

  11. 60 Clean and Minimal Websites for Inspiration

    60 Clean and Minimal Websites for Inspiration

    Tutorial Beginner

    During the last few months we have looked at using negative space and minimalist design. Today we bring you 60 of the best-looking minimalistic sites...

  12. Create A Simple User Interface Kit From Scratch (Themeroller + FW Phase!)

    Create A Simple User Interface Kit From Scratch (Themeroller + FW Phase!)

    Tutorial Beginner

    Last week, we took a look at how to create a simple user interface kit in Photoshop as a way to expedite work in some of your web design projects. We got a...