UX Fundamentals For Graphic Designers: Build Your First App With Adobe XD | Cynthia Salgado | Skillshare

UX Fundamentals For Graphic Designers: Build Your First App With Adobe XD

Cynthia Salgado, Visual Designer

UX Fundamentals For Graphic Designers: Build Your First App With Adobe XD

Cynthia Salgado, Visual Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (29m)
    • 1. Intro

      1:34
    • 2. Class Project

      1:08
    • 3. Ideation Methods

      1:46
    • 4. Finding Inspiration

      2:13
    • 5. XD Interface

      3:11
    • 6. Fittss Law

      2:02
    • 7. Color

      1:08
    • 8. Padding and Stacking

      3:57
    • 9. Creating Components

      3:31
    • 10. Prototyping 1

      1:32
    • 11. Prototyping 2

      1:49
    • 12. Prototyping 3

      2:46
    • 13. Sharing

      1:30
    • 14. Thank You

      0:51
66 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

229

Students

--

Projects

About This Class

Learn how to design and prototype a portfolio app from scratch using Adobe XD. Discover UX essentials while having fun with this amazing app!

Are you a graphic designer switching to UX? A creative person interested in building new digital experiences? Then this class is for you!

In this class we will build a portfolio app as an exercise and inspiration to create our own portfolio. We will learn techniques to keep you inspired and productive,  how to navigate XD’s interface and get familiar with the assets panel to maximize your productivity, all while learning the basic aspects of creating your own portfolio.

In this class you will:

  • Learn how to start a project using AdobeXD
  • Get practical knowledge of how XD’s interface works.
  • Familiarize with the assets panel
  • Work with artboards
  • Create components
  • Use padding and stacking to simplify the creation of components
  • How to prototype
  • How to create a simple style guide
  • How to share your final product

Take this knowledge with you! Even though this lesson covers basic principles you will be able to apply them in any type of project, including websites and even social media posts.

This class is made for beginners, so no prior experience is needed, but a working knowledge on other Adobe apps, such as Illustrator or Photoshop is useful!

To get started, you will need Adobe XD (which you can download for free), and a stable internet connection.



Meet Your Teacher

Teacher Profile Image

Cynthia Salgado

Visual Designer

Teacher

 

Nice to meet you! I'm a designer from Costa Rica and I am here to share my love for design, colors, and creativity with you!

I am currently based in sunny Costa Rica, from where I am from originally, after spending 10 years in South Africa, where my beautiful baby was born. Living and experienced such a different culture influenced my design style and my wish to work with positive organizations. I have a cat named Mozart and trying to grow my plant collection :)

I currently work with my own design studio supporting creative people with innovative ideas and also working on my own personal projects.

I am a graphic designer in transition, in love with UX, and an eternal student.

 

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Intro: Hi, everyone. Thanks for joining me today. My name is Cynthia, I am a Visual Designer from Costa Rica. In this class, we will learn UX fundamentals that you will use to design your 1st app using my favorite Adobe app, Adobe XD. I've been a designer for close to 20 years. I started advertising design and started working as a graphic designer, since I was a student. Thanks to a working opportunity, I moved to South Africa in 2010 and had a chance to study professional photography there. When I returned to my country, I started my own design studio, MapMyIdea. In 2020, I was elected to receive a grant from Adobe in their Adobe Residency Community Fund to work on a personal project. You do not need any previous knowledge to take this class, but a working understanding of other Adobe apps, such as llustrator and Photoshop is very useful. This class is great for aspiring graphic designers and creative people looking to switch from graphic design to UI design and even UX. You can use the skills from this class to design apps, websites, and even social media posts. By the end of this class, you will be able to create prototype and share projects using Adobe XD. See you in the next lesson. 2. Class Project: Hi, everyone. Welcome back. The project we will be building in this class is a portfolio app. I chose a portfolio because it is something, we, designers, always have in mind. But instead of building our portfolio, we will design an app where we can showcase our portfolio, such as Dribbble or Behance. The most important thing to be with you during this course is an interest in learning, be patient and kind with yourself, and you will get to master all of these wonderful tools. To get started, you will need a camera, a notebook or some paper, pencils, a computer with a reliable Internet connection, and Adobe XD, which you can download for free. Make sure to share your working progress with us. See you in the next lesson. 3. Ideation Methods: Hi everyone. Welcome to Lesson 2. A good habit that I acquired when I was a student and kept with me until this day, is to draw my ideas. Your drawing shouldn't be elaborate masterpieces, as long as you're able to communicate the idea to yourself. Many designers use this stage to start testing and validating their ideas. In the resources, you will find a template that you can print and use to start ideating your designs. Sketching is an excellent tool to let the creativity flow and also helps to unblock your mind. All the ideation methods that I love because they are ideal for introverts are brainwriting, brainwalking, braindump, and worst possible idea. For the purpose of this class, let's stick with sketching and worst possible idea. Since those two methods can be used individually. These are some worst possible ideas I had while designing this course. What if there is an app that lets people create a portfolio in an intuitive manner? What if there were clear instructions about what to include in your portfolio? What if instead of using PDFs, you could send recruiters an app that is yours? What if you could design an app with the same ease you design a website? Don't forget to share your work in progress with us. 4. Finding Inspiration: Once you are comfortable with your ideas, it's time to start looking for inspiration. There are many sources, but we will review three of them that I used plus three awesome portfolios that I like. Dribble is great for concept design. If you're not a pro user, you can only upload images and GIFs. So it doesn't have a lot of possibilities when it comes to showing your thought process, but it is a great source to find wild concepts and out-of-the-box ideas. Behance is by far my favorite source of inspiration as it not only has loads of creative work but also, gives you the possibility to elaborate and present your ideas in a beautiful manner. My third source of inspiration is Mobbin Design because there, you can find real-life examples of the apps you use every single day. Now, let's review some portfolios of actual real-life designers that I love. Heck House has a homepage that is beautiful and super interactive. Look how the type forms like gradient leading you to the end of the page. On top of that, the case studies are presented in a very beautiful manner. Owlstatic.com is a website with loads of personality. Just in the homepage, you can find all the informations you might need, including links to articles in social media. Finally, erikbue.com. This one seems more than the traditional site. However, it is great because it shows you how much you can achieve with the tools you have available. Speaking of the design systems, make sure to download Spectrum, a visual system developed by Adobe, and that is the one we are going to use in this class. See you next time. 5. XD Interface: Hi everyone, welcome back. Now it's time to get comfortable with Adobe XD. When you open the software, the first thing you will see is a welcome screen where you can select the type of project you wish to work on. To the left you can see a summary of the content of the welcome screen; Cloud documents, Shared with you, Deleted and links that you can create within Adobe XD. To the right, you will see an invitation to keep learning. I encourage you to take on as many challenges and tutorials you're able, because practice makes you a better designer. In the center panel, you can choose the type of project you are going to work on. Here we have several popular mobile screen sizes, the most used website sizes, social media posts, and if your project is very specific, you can customize the size. For the purpose of this class, let's use Apple's XR mobile size. This is how your design interface looks like. To the left you can see a toolbar where you might recognize tools used in other Adobe apps. To the bottom you will see three icons, little book, that is where your visual design will live, plugins and layers. In the document assets you can add colors, character styles, and create components. Now you have the option to use your libraries across all the Adobe apps. Isn't that handy? On the right panel we can see all the editing features such as alignment, pathfinders, an option to create components, how to transform and how to modify the appearance. When you click on the name of the file at the top, you are able to save it. By default, it will be saved as a Cloud document, but fear not, it is also possible to save it as a local document from the following. These three tabs are where the heart and soul of Adobe XD lives. Design, Prototype, and Share. The screen we're currently working in is the design screen. When you are ready to prototype, you press the Prototype tab to start adding amazing interaction. When you are ready to share with guy and stakeholders or other designers, you click the Share tab where you get to choose if you want to share for review, development, testing, and even create passwords. In the next lesson, we will start designing our app. See you then. 6. Fittss Law: Hi everyone. Welcome back. We finally get to start designing. By the time you take this lesson, you should have some sketches of your desired design interface, some terrible ideas that you need to filter and convert into good ideas. Let's start our design journey with three on-boarding screens, and let's use Adobe Spectrum to guide our design. We will duplicate our screens and we'll start adding elements according to our sketches. So now we have these three screens with some way of framing elements, and now we should talk about Fitt's law. Fitt's law is an interesting equation that is mostly used in ergonomics and human-computer interaction. What this law says, basically, is that the smaller the target, the longer it will take the user to process an action. How is this law useful while designing our apps? By making buttons that are big enough to press them without making mistakes, by leaving enough whitespace between elements so there are little possibility of mistakes, by using fonts large enough so our extreme users can see them easily. Now, we have our wireframe done, which we built with the help of Adobe Spectrum. It's time to add color. Please, share your work in progress with us and let us know if you have any questions. See you in the next lesson. 7. Color: Before we continue, let's talk briefly about color, because we need a color palette. I like to have a color palette that is no more than five colors. To choose a color palette, let's go to Adobe Color. Here we can explore trends, we can visit other designers' work. To start creating our color palette, let's go to Create, which you can play around with your libraries, with color rules, and once you are happy with your color palette, have to check for accessibility. Here we can see we have a warning telling us that there are colors in conflict. Let's fix it by moving the slider slightly. Now in this color blindness simulation, you can see that we have an accessible color palette. Now let's go back to XD and paint our design. 8. Padding and Stacking: Hi everyone. In this lesson we're going to talk about padding and stacking. To create a padding, the first thing we need to do is to create an element such as a button that we're going to draw. We're going to use constantly. Let's make round corners because it's friendlier. Now let's make this a skip button. Here in the field, we can change the color. Now let's make a group. Let's go to the layers panel to name our layers. Let's name it skip button. There we go. Now, we have to go to the interactions panel and click "Padding". There you can see that XD already determine the distance of the paddings. That is the whitespace around the skip word. Now next time that we need to create a button, what's going to happen is, that when you click and change the wording, the button is going to change its length according to the word. Isn't that nice? Before we continue, let's talk a bit about our visual style guide. Let's draw some circles and duplicate it four times. Let's remove the border. Then we are going to call the eyedropper with the I and change these colors. Then we're going to select them with the V, right click add color to assets. Here we go. We have the colors we just created in our document assets. Now let's make sure that everything is aligned in the way we wanted, that all the elements are in the position that we want. You can see that XD is helping you achieve this. Now let's group all the elements in the artboard. Command G or Control G if you are in a PC. Let's name our layer immediately so we don't forget. Let's call it Onboarding Screen 1. Now let's go to the interactions panel and lets hit "Stack". There you can see XD already determined this is a vertical stack. Now if you change your mind in the future and you want to change the arrangement of the elements, you can do it and they will keep the proportions you gave them originally. In the next lesson, we are going to learn how to make components. See you then. 9. Creating Components: In this lesson, we are going to talk about creating our design system, plus we are going to learn how to make components states. As you can see, I have finished my screens that you can find as a guide in the resources. I have now assigning sign-up page with social media buttons. We need to start creating our visual style guide. We have this heading here. Right-click, Add Character Style to Assets, and now we have a heading here, Adrianna Extended, regular, 30 points. Let's do the same with this body text, Add Character Style to Assets. Now we have Poppins, regular, 16 points. Every time we want to use this character style, all we have to do is come here. Let's create the first component, Make Component, easy-peasy. We want it to be grouped and we want to use the padding. Now we can make it a component. There we go. Now, let's do something interesting and let's create our first component's state. A hover state. Click on that. Select the button. Make sure your position here in the hover state. Double-click. Now you can decide what do you want to happen when people hover over this button. I want these to move slightly up and I want the background to have a very soft shadow. In our classes, you will learn that to make shadows, you need to use a contrast color. We have this mustard color here. The contrasting color is probably going to be very dark. Let's use a very, very, very dark blue. Here, we can change the axis. Let's change the y-axis to six, and B, let's make it 12. It's barely there, but you can see it. Let's go back and let's see if it worked. Let's press the "Play" button to see your app in action. There you have it. It looks great. That's how you create a component state. 10. Prototyping 1: We are almost finished with this class, and now it's time to learn how to prototype. We will review two types of triggers; tap and drag, and three types of actions; transition, overlay and auto-animate. We are going to start by adding some interaction to the onboarding screens. Let's connect the Skip part. Select the button and make sure that you are adding interaction to the Hover State. Then drag the little cable to the sign-up screen, and then go back to the Default State. Now let's work with the navigation dots and connect them to the respective screens. Now let's connect the "Let's get started" button to the Home Screen. That is what the users will see when they just signed up. Let's see how it looks like. That's great. I'm happy. Are you happy? Now let's go into our next trigger, the drag trigger. 11. Prototyping 2: Hi everyone and welcome back. In this lesson, we will learn how to interact with the Drag Trigger. First, let's create several screens that will have the same information but arranged in a different manner. As you see, we have three blocks that are going to be the ones we will target with a Drag Trigger. Let's connect the first element with the second screen. Make sure drag is selected in interaction panel. In Action, you will see different types of actions that are available for the current type of trigger. In this case, let's use auto-animate. In destination, check that it is pointing to the correct output. Now these two elements are going to swap positions. There you go. That is how you use the Drag Trigger. Next step, overlays. 12. Prototyping 3: Hi everyone. In the last couple of lessons, we'll learn how to start our interactivity to our prototypes. In this lesson, we will add a sliding keyboard using overlays. The overlay is a type of action that can be used either with the top or the drag triggers. We have our first screen that contains the basic information you will need to add to your portfolio, and under that, we have a keyboard that needs to leave in its own artboard. Now, let's go to the Interactions panel and select "Drag", then let's go to the Actions and select "Overlay". You'll see that a little green box appear. Click on the green circle with a cross to select it and position it where you would like the keyboard to appear. Let's test it. There it is. We can add more interactivity by going to the animation section. I will use Slide Up and leave it at 0.3 seconds. Now, onto our next action and one of the most interesting features in Adobe XD; auto-animate. We are going to animate the tabs in our public profile. Let's connect the projects there with the project screen. As you can see, XD remembered what was the last trigger I used, but in this case, we are going to use the tap trigger. Now, let's add this interaction to the rest of the taps. Easy, right? In the next lesson, we will see how to share our prototype. 13. Sharing: Hi everyone. This is our last lesson and today we are going to learn about sharing our prototype and our project with stakeholders, clients, and other designers. Once you have your designer and your prototype ready, click on the ''Share" tab. You will notice that the Interactions panel is now called Link settings. In this panel, you can create or manage your existing links for sharing. In the view settings, you can choose to send your project for design review, development, presentation, user testing, or you can customize the view and experience by mixing any of the previous settings. In link access, you can decide who is going to see your project; either only people with the link or just invited people. Side note, XD will create a design guide and downloadable assets when you choose Development Mode. You need to make sure all your assets are marked for export. Finally, you can see your link that you can update anytime you make changes. That's how easy it is to collaborate within Adobe XD. 14. Thank You: Hi, everyone. Thank you so much for taking this class with me. During this class, you'll learn about color, basics of human interaction design, how to create prototype and share projects, and how to move like an expert within Adobe XD. I hope the knowledge you get in this class is going to serve you well in your professional life. I encourage you to keep learning, keep studying, believing yourself, never stop your pursuit for good design. Remember to share your projects so we can all be inspired and learn from each other. See you next time.