How to make Character Styles in Adobe XD

This lesson is exclusive to members

Course contents
SECTION: 12
Working with Illustrator 10:07

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

89 lessons / 10 hours 32 quiz questions 17 projects Certificate of achievement

Overview

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.
 
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
 
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
 
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
 
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
 
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
 
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
 
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
 
It is now time to upgrade yourself & learn Adobe XD. 


What are the requirements?


  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?


  • 87 lectures of well-structured, step by step content.
  • Learn to design websites & mobile phone apps.
  • Work with fonts & colors. 
  • Prototype your designs with interactions. 
  • Test on mobile phones. 
  • Send your designs for feedback & commenting.
  • Export production ready assets. 
  • Create your first UX brief & persona. 
  • Create quick wireframes. 
  • How to use premade UI kits. 
  • Learn professional workflow tricks & shortcuts. 
  • You will get the finished files so you never fall behind
  • Downloadable exercise files
  • Forum support from me and the rest of the BYOL crew
  • All the techniques used by UX professionals

What is the target audience?


  • This course is for beginners. 
  • Aimed at people new to the world of design & user experience. 
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

Hey there, in this video we're going to look at Character Styles. We're going to add them to our Assets panel over here, and then show how awesome they are when you go and edit them. And they change color magically, all connected to this Character Style. Totally essential when you've got lots of pages you've mocked up, and you need to control fonts over a big scale of pages. All right, let's go and check it out. 

So creating Character Styles is super easy. Down the bottom here, make sure you're on your Assets panel. Actually I'm just going to select all of them in one big go using my Black Arrow and click this 'Character Styles'. They're all added, nice, ready to go. Now what makes Character Styles useful is that when I start typing I can just select it all, and then click on any of these guys. So that's, I guess, the nice thing about it. That's once nice thing, at least. Other nice thing is that, say later on, I decide I've used this a bunch of different times throughout the site and then later on I decide, actually, that's not what I wanted to do. Clients come back and say they don't like the font so I can go through in here, and pick Museo. And they all update, and link. 

You can change everything in here, colors, fonts, sizes. Anything you like, and it's all connected to this Character Style. Now if you're a person who comes from say, something like InDesign or Illustrator, the Character Styles are pretty strict. What XD have done here is, they've done some pretty amazing stuff, I think. This is a Wireframe for an app. You can see over here, if I delete all the Styles, there's no Styles at all. And you've gone through and designed this whole thing, you're like "Man, if this is InDesign I want to add this Style", so I'm going to double click him, add it to my Character Styles. Great! This has been used, that size, that's been used hundreds of times already in this app. So what a pain. So what XD have done though they've been super clever. Watch this. If I go and update this, and I say, actually I want this to be pink you'll notice that not only has-- that was obvious. So I've made it to green. You can see, I've updated this, and this one updated, but look all these other guys did as well. So what XD does is, it goes "You probably mean all of the fonts that are the right size, that are the right color, that are Arial" and it reaches through the document, and goes and changes those. It's just super helpful, you can see, all of them have changed. 

So you don't have to be as strict with everything, applying in this Character Style. You can add it to it at the end, and make little changes, and it spreads throughout the document. You can adjust these separately. So in here, I can decide to go in here, and say actually I'd like this one to be-- everyone else has to be green, but I want this to be pink. And you'll see, it gets overridden. I feel it's a really clever way of introducing Character Styles. They're not 100% strict. They're just really usable. And now if I make a change to this guy here, and I make them all, say, Lite or Regular, you can see, all the rest of them-- you might not see it because I picked a hard to see font. You can see now, all of these have changed, but because I made a slight little alteration to this one and he doesn't match his friends he can stay like that, so I think, Character Styles are pretty amazing in XD. Thanks Adobe. Let's move on to the next video.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024