UI Design

  • Sketch
    Designing an eCommerce Portfolio: Support Section and Footer Portfolio 5
    Support is an important aspect of our selling themes. The people who buy your products will expect you to provide assistance if something goes wrong. That’s why we’re making room for it on the homepage. The same goes for the team; we’ll create a reference that will take the visitors to the about us page.Read More…
  • Sketch
    Designing an eCommerce Portfolio: Store Front and TestimonialsPortfolio 4
    Our theme preview section will give visitors a glimpse of some of the other themes available for purchase. The testimonials will show quotes from people who have bought and used our themes. Let’s begin designing them!Read More…
  • Sketch
    Designing an eCommerce Portfolio: Header and HeroPortfolio 3
    Our site header should provide the navigation, that’s pretty much its main purpose. Of course, we do have the logo in there as well, and since we’re implementing shop components, we’ll also add a reference to the cart.Read More…
  • eCommerce
    Designing an eCommerce Portfolio: Project OverviewPortfolio 2
    When designing our eCommerce Portfolio, the first step we have to take is to plan the website. What will it do? What’s its purpose? We’ll cover the initial planning stages in this first tutorial.Read More…
  • eCommerce
    Designing an eCommerce Portfolio: IntroductionPortfolio 1
    In this tutorial series you’ll learn how to design a minimal eCommerce theme in Sketch. You’ll not only learn the proper structure of an eCommerce website, but you’ll also get some cool Sketch tips and tricks to improve your workflow.Read More…
  • UI Design
    Building a Draggable Off-Canvas Menu with GreenSock1gsap 6
    This tutorial is a final two-parter as we end our GreenSock journey. We’ll begin by learning Draggable’s syntax, setup, and ending in the next tutorial with the creation of an off-canvas menu that works with mouse and touch enabled devices!Read More…
  • 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…
Suggested Envato Tuts+ Course

Next lesson playing in 5 seconds

Web Design Basics: Rules of Great Form DesignFree