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.
Read moreRead less
All content
Courses
Tutorials

All UI Design tutorials:

  1. Quick Tip: Sticky Navigation, Without the Awkward Jump

    Quick Tip: Sticky Navigation, Without the Awkward Jump

    Tutorial • Intermediate

    In this quick tutorial we're going to use jQuery and make a simple sticky navigation. With that done, we'll improve on our efforts by using jQuery Waypoints...

  2. Filament: Website “Plugins” That Work Everywhere

    Filament: Website “Plugins” That Work Everywhere

    Tutorial • Beginner

    Filament gives you “apps” which allow you to add social sharing buttons, Google Analytics, newsletter subscriptions and other extra functionality to your...

  3. Designing a Simple Instagram-Based Portfolio in Photoshop

    Designing a Simple Instagram-Based Portfolio in Photoshop

    Tutorial • Intermediate

    In this tutorial I'll guide you through the process of creating a simple and clean Instagram-based portfolio. We'll use some striking imagery, a clean color...

  4. How to Use After Effects for Web Animation Prototypes

    How to Use After Effects for Web Animation Prototypes

    Tutorial • Beginner

    In this screencast tutorial we're going to prototype an app UI animation. We'll take a Photoshop layout, then bring it to life using Adobe After Effects.

  5. Create a Masked Background Effect With CSS

    Create a Masked Background Effect With CSS

    Tutorial • Beginner

    Today we're going to be stepping through a really cool technique you can use to create an effect that's a little bit like parallax scrolling, yet doesn't...

  6. How to Build a Shrinking Fixed Top Bar With Foundation

    How to Build a Shrinking Fixed Top Bar With Foundation

    Tutorial • Intermediate

    A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial,...

  7. Designing an Elegant Blog Layout in Photoshop

    Designing an Elegant Blog Layout in Photoshop

    Tutorial • Intermediate

    In this tutorial I am going to show you how to create a simple, elegant blog layout in Photoshop. We'll use a strong image above the fold (wherever that may...

  8. How Macaw Helps You Build Responsive Websites

    How Macaw Helps You Build Responsive Websites

    Tutorial • Beginner

    Fluid layouts have been the biggest challenge for design application developers in recent times, but Team Macaw have done it right. With a small collection...

  9. Getting to Know Macaw's Tools

    Getting to Know Macaw's Tools

    Tutorial • Beginner

    In this video we're going to look at the tools, made available on the left hand side of Macaw's interface. Each tool is very intuitive, especially if you're...

  10. An Introduction to the Macaw Interface

    An Introduction to the Macaw Interface

    Tutorial • Beginner

    Today I'd like to introduce you to an awesome new web design tool. "Macaw" is the brainchild of Tom Giannattasio, Adam Christ, Daniel Kleinman and Brandon...

  11. How They Did It: Apple’s “Elevating the Expedition”

    How They Did It: Apple’s “Elevating the Expedition”

    Tutorial • Beginner

    We're tackling a big one today: Apple’s "Elevating the expedition" iPad marketing page. Apple have taken the concept of target audience very seriously in...

  12. Design a Stylish Timeline Portfolio Page Using Photoshop

    Design a Stylish Timeline Portfolio Page Using Photoshop

    Tutorial • Beginner

    In this tutorial I’ll be using Photoshop CS6 to design a simple, clean, three-column portfolio page, with a trending timeline. During this process we’ll look...

Related Categories

CSS
HTML/CSS
Sketch
Design Theory
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.