Advertisement

UI Design

  • Sketch
    Faster UI Design with “Symbols” and “Shared Styles” in SketchCart
    295 shares
    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
    93 shares
    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
    146 shares
    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
    348 shares
    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
    270 shares
    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
    193 shares
    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)
    166 shares
    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
    87 shares
    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
    924 shares
    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
    114 shares
    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…
  • User Experience
    UX Tip: Consider the Empty StatesEm
    170 shares
    The following article is not comprehensive, or a “must do” by any means. Instead, it outlines three common types of empty state.Read More…
  • Glossary
    Web Design Glossary: What is “Affordance”?Affordance
    283 shares
    The term “affordance” is one you’ll hear often in the world of web design. It regularly appears in tutorials on Tuts+ too, so this article will serve as a definition just to clear up any doubts.Read More…