This course will introduce you to one of the most important UX design methods: wireframing. You'll develop an understanding of basic concepts, and be able to confidently make decisions around what to include in wireframes and how to create them.
Wireframes are one of the most important methods in UX design, yet they're commonly misunderstood and underutilized. In this course, UX Design Creating Wireframes, you’ll go from having a basic understanding of wireframes to learning some of the most important concepts in wireframing. First, you’ll explore the purpose of wireframing in the UX design process. Next, you’ll delve into different types of wireframes, what fidelity is, and how to decide what type of wireframe to create. Finally, you’ll discover how to create wireframes for a website and an application. When you’re finished with this course, you'll have the skills and knowledge needed to create effective wireframes that put usability first for websites and applications. Software required: Adobe XD.
Susan is a web design author for Pluralsight. Growing up, Susan was both a passionate artist as well as a computer tech aficionado. When she discovered the world of web development, she found that she could meld those two passions together into something amazing. Soon after, Susan began devoting herself to building beautiful and functional web content for businesses and nonprofits. It was through those experiences Susan developed a fluency for web coding languages.
Course Overview Hi everyone. My name is Susan Simkins, and welcome to my course, UX Design Creating Wireframes. I'm a senior UX developer at BigWing. Wireframing is one of the most important yet oversimplified and underutilized parts of the UX design process. This course will help you quickly get up and running creating your own wireframes. Some of the major topics we'll cover are the role of wireframes in the UX design process, the concept of fidelity, types and tools for creating wireframes, and how to create wireframes for websites and applications in Adobe XD. By the end of this course, you'll be able to determine what type of wireframe to create and how to create them. Before beginning this course, you should have a basic understanding of UX design. I hope you'll join me on this journey to learn how to create wireframes with the UX Design Creating Wireframes course at Pluralsight.
Wireframing Fundamentals In this course, we're going to start by covering some fundamental concepts related to wireframing, like its role in the UX design process, types of wireframes, and the tools you can use to create them, the concept of fidelity, adding annotations, and what to do when you need to sit down and create a wireframe. So let's get started in our next clip, Wireframing in the UX Design Process.
Wireframing a Website In this module, we're going to talk about how to wireframe a website for a fictional brand. We'll start by talking about the information we need to start planning our wireframe and the importance of sketching and brainstorming before you jump into any software. Then we'll take a brief tour or Adobe XD so we can get start creating our mobile and desktop wireframes, and we'll finish up by talking about different ways to add annotation and how to export a wireframe out of Adobe XD.
Wireframing a Mobile App In this module, we're going to talk about wireframing a mobile app for our fictional company. We'll start by talking about our needs for planning and sketching and brainstorming. We'll then dive into Adobe XD and wireframe a screen or mobile app, and we'll finish out by talking about different methods for annotating and final notes about creating wireframes.