Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Creating Mockups

Well done!

You have completed Creating Mockups!

Sign up for Treehouse Back to Library

Efficiency Tips

3:06 with Hope Armstrong

Learn best practices for making mockups more efficiently.

Resources:

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Now that you know the basics, I'll share a few efficiency tips. 0:00
    Throughout your project, be sure to give assets and artboards meaningful names. 0:04
    As you create mockups, you'll amass several layers, and 0:10
    it quickly gets confusing. 0:13
    When naming artboards, 0:15
    include any important changes, such as the page name or interaction state. 0:16
    With the assets panel open, rearrange styles and components in a logical order. 0:22
    This keeps it organized and tidy. 0:28
    Speaking of components, create components wherever possible. 0:32
    These reusable UI elements are defined in a master version. 0:36
    And then they can be easily be repeated across your art boards in multiple 0:41
    instances. 0:45
    While you could duplicate these elements, 0:46
    they're much easier to maintain as a component. 0:48
    As a component, you can edit in one place and 0:52
    the change gets automatically updated across the other instances. 0:54
    If you ever need to override an aspect of a component, 0:59
    make the changes to an instance. 1:02
    This won't affect the master component. 1:04
    If you decide you don't like your overrides, you can reset it back to 1:07
    the original master component by right-clicking an instance and 1:11
    selecting Reset to Master Component. 1:15
    It's also easy to replace components. 1:17
    With the assets panel open, drag and 1:20
    drop a component onto a component on an artboard. 1:22
    Watch as it magically replaces it. 1:25
    Be sure to use styles wherever possible. 1:29
    Adobe XD has character and color styles. 1:33
    Similar to components, you can define them in one spot and 1:36
    reuse them across your designs. 1:40
    Character styles are listed on the asset tab. 1:43
    To create a new one, first select a text box with the desired style. 1:48
    Then click the plus icon to create a new style. 1:56
    This saves the textbox's properties as a new character style. 2:00
    Double-click the style to give it a descriptive name. 2:04
    Now, that style was just for fun, but my real character styles for 2:13
    this project were titles, subheading, pull quote, and so on. 2:17
    Color styles work in the same way. 2:21
    Select the color, then click the plus icon to add it as a new color style. 2:29
    So in this project, I have brand primary, link, 2:35
    a couple of gradients, and topic colors for lifestyle, environment, and health. 2:38
    Don't sweat it if you don't have your workflow streamlined right away. 2:44
    The more you practice, 2:48
    the more you'll develop these techniques that allow you to work more efficiently. 2:49
    Also, if you're using another design program, Figma or 2:53
    Sketch have similar features. 2:57
    Check out the teacher's notes. 2:59
    In the next video, we'll take a look at how to share these mockups with others. 3:01

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up