Bummer! You have been redirected as the page you requested could not be found.

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