UI Design

  • Material Design Lite
    Learning Material Design Lite: CardsMdl cards
    Cards are quickly becoming a “goto” UI pattern, particularly on the mobile web. In this tutorial, we are going to look into the cards component in Material Design Lite (MDL).Read More…
  • Material Design Lite
    Learning Material Design Lite: ButtonsMdl button
    Buttons form an integral part of any functional website (plus designers love them!) In this part of our Learning Material Design Lite (MDL) series, we’ll look into the Buttons component.Read More…
  • Sketch
    Faster UI Design with “Symbols” and “Shared Styles” in SketchCart
    In this tutorial you’ll design a mobile shopping cart solution in Sketch. We’ll be paying close attention to two features within Sketch which will speed up our workflow: “Symbols” and “Shared styles”.Read More…
  • Form Design
    Learn the Rules of Great Form Design in Our New Short CourseWebforms
    In this course you’ll learn the key rules for great form design. From how to organize form elements, to input lengths and types, to forms on mobile devices, this short course will set you on the right path to awesome forms and happy users.Read More…
  • Sketch
    Designing an API-Driven Web App in SketchPre 5
    Now that we’ve accounted for all the elements of our little app, including its different states, we can confidently begin creating visual mockups for each element and its corresponding state.Read More…
  • UI Design
    Making Your Web Designs More Effective With the Golden RatioPreview
    The Golden Ratio is used within graphic layouts of all kinds, especially to balance content that is text heavy. It can help designers create hierarchy and draw users’ eyes to specific areas. Check out the following website examples and see how designers are making use of it! Read More…
  • Flickity
    Building a Slider with Metafizzy’s FlickityFlickity
    Flickity is a JavaScript slider library, built by David DeSandro of Metafizzy fame. It’s optimized for touch gestures, performance, and includes things like physics-based animation. In this tutorial we’ll get it up and running, then examine some extra features it brings to the table. Let’s go!Read More…
  • Adobe Photoshop
    Design a Shopify Theme for Handcrafted Goods in PhotoshopEshop thumb
    In this tutorial we’ll be creating a layout for a handcrafted goods shop. I won’t talk too much about specific font sizes or color codes, but will instead focus on explaining the font choices, colors, proportions and so on.Read More…
  • CSS3
    How to Create an “Anything” Slider With Just CSSCss3 ui%20(1)
    It used to be unthinkable to deploy a slider without JavaScript, but in this project you’ll learn how to create an “anything” slider with just CSS, to present any type of content you need.Read More…
  • CSS3
    Two New Courses, 20 Projects to Help You Learn CSS3Css3 ui
    In our two latest courses, you’ll be creating ten UI and layout projects and ten branding and presentation projects. In the process, you'll learn some of the awesome new design techniques that CSS3 brings to the table.Read More…
  • WordPress
    How to Customize Your WordPress Site Without Having to Understand CSSCss
    We’re going to show you how you can make serious visual changes to your WordPress websites with absolutely no prior experience of CSS. But first, let’s take a minute for a little WordPress appreciation.Read More…
  • Prototyping
    Prototyping a Fitness Application with PixatePixate fitnessapp preview
    In this tutorial, I’ll teach you how to create an animated prototype of your mobile application design. The prototype will look and feel like a real application on your phone; you’ll be able to navigate and scroll through your design, using gestures and custom animations.Read More…