Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Using Adobe XD CC (1.0) to Design a Custom UI

By Gary simon - Nov 11, 2017

Adobe XD CC (1.0) just released and it's out of beta -- finally. Therefore, I decided to record a brand new Adobe XD CC tutorial today as I walk users through the process of UI design using this app.

This tutorial is less about Adobe XD tools, and more about UI design fundamentals and how to apply them when designing UI's.

Watch the Tutorial

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Project Preview

Here is a view of the project that I create throughout the above video tutorial:

UI Design Fundamentals

Throughout the tutorial, I did my best to showcase elaborate on the design decisions I was making. Overall, I found myself talking about 3 prominent themes throughout:

  • Whitespace, Margin & Padding
    This is one area that new designers always seem to get wrong. Your UI elements need room to breathe. Of course, the degree to which elements are spread out depends on the project, but more often than not, I see designers cramming everything together. 

    White space is the empty negative space between elements. It helps frame your UI and makes it pleasent to look at and to use. Always make sure you have plenty of white space.

  • Contrast
    Color and contrast obviously play an important role in UI design. It's another area that beginners seem to screw up quite often. You need to ensure that your UI elements have very clear contrast against their background elements.

  • Alignment
    Element alignment is very important in UI design. It's one of the primary factors that gives your UI a sense of structure. An interface, with predefined, consistently applied alignment. Uneven alignment as it pertains to whitespace, margin & padding will always throw the look of a design off.

Of course, there are more fundamentals that go into good UI design, and design in general. I do touch on Visual Hierarchy lightly in this video, which is prioritizing elements and creating a separation through aesthetics (color / contrast, size, location, etc.).

But all-in-all, this tutorial should give you a quick look at one designer's approach at one project.

Enjoy!


Share this post




Say something about this awesome post!