UI/UX: You already know more than you think | Cyndy Patrick | Skillshare

UI/UX: You already know more than you think

Cyndy Patrick, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (13m)
    • 1. Introduction

      1:53
    • 2. What's all this buzz about Design Thinking? And what exactly is UX?

      1:41
    • 3. Tell me about empathy maps, personas, wireframes, etc.

      3:38
    • 4. What tools can I use for wireframes and prototypes?

      1:25
    • 5. How do I create a great UI?

      1:23
    • 6. What exactly do I need to do for the class project?

      1:47
    • 7. Final thoughts

      1:35
16 students are watching this class

About This Class

Have you ever given thought to who your audience is for a specific project? Tried to make your piece as user-friendly as possible? Done a dry run on how someone interacts with your book/brochure/website? Tried to establish the most effective hierarchy for the information you’re conveying? Then you’ve already done interface and experience design.

This class is an introductory class for anyone who has done at least a bit of graphic design. You’ll be introduced to UI/UX design, as well as design thinking and human-centered design. Then you’ll get your feet wet with a blog design project.



Transcripts

1. Introduction: Hi, My name is Cindy Patrick. I first became a graphic designer because of my love of images and storytelling, and that has not changed. I still primarily describe myself as a visual slash you, I designer, but the field of design has expanded greatly and I think focusing more on user experience and user interface design. We'll enhance all of your projects, maybe even your print projects as well. I think the concept of you I, that is user interface, which is the things that the user season interacts with on the website, is pretty easy for the traditional graphic designer to grasp. But I think the concept of UX user experience design can be more daunting. And I think that's partly because it is practiced on so many different levels, from corporate style to guerrilla style. And also there are so many tools at the UX designers disposal. The reality, though, is that it's up to you to select what approach and what tools serve you and your client best. I'm aiming to give you the broadest overview of you I ux design, and also I want to give you some confidence that having a background as a traditional graphic designer is a great asset for being a u i. Slash ux designer. Our class project is going to be to design a blogger for either either a coffee blogged or a travel blogged. And because these are just being launched your in the driver's seat as faras, establishing the look in the feel and the branding of these blocks. So I hope one of them interests you. I'll tell you more about the project later, but let's get started. 2. What's all this buzz about Design Thinking? And what exactly is UX?: you may be asking yourself, What's all this buzz about design thinking and what exactly is you? X? Let's start with design thinking. Design thinking is usually summarised as empathize. Define I D eight prototype. What special is that? It puts the user at the heart of the project. Ideo has a great pre course and materials on human centered design. I've included a link. In the last lesson, Don Norman coined the term user experience in 1995 to describe how the user interacts with a product or service user. Experience is essential for creating users satisfaction and loyalty, its key that the designer fully understands exactly what the user is trying to achieve with the product or service and what she needs to be successful of it. A huge part of the UX Designers job is to always challenge assumptions. This is why user research and testing is so important, so the decisions are based on data instead of hunches. As a traditional graphic designer, perhaps you've heard the phrase is new your demographic and help the client define the problem he wants to solve. Also, when a client has questioned some of your design decisions, perhaps you've responded that your approach is perfect for the targeted demographic. As you learn more about you X research, you'll be able to provide him with data to back up your decisions. 3. Tell me about empathy maps, personas, wireframes, etc.: At this point, you might be thinking, Tell me about empathy, maps, personas, wire frames, etcetera. There are so many terms that are used in you. I and UX design that it really can be confusing, so I'll try to do my best to walk you through some of the steps in terms that are used. The first steps in the U X research phase include defining what goals you're trying to achieve doing user research, and that could be through interviews. Surveys focus groups there many ways to do it. The creation of empathy maps, which helped the designer understand the user's needs. The creation of personas, which are profiles of typical users. Site maps, which are high level breakdowns of the pages on a site. User Journey maps, which focused on the emotional experience of how user interacts with your product. User flow, which is a more specific outline of the steps the user takes to achieve the desired goal. Wire frames, which are low to medium. Fidelity sketches of what your product will look like. Prototypes. Which arm or defined versions of your product with the addition of you I elements and finally user testing shoe. Um there. It's a lot there. Many subspecialties within UX, including U X research strategy and user testing. It's a huge field. Each business will have a unique process, depending on the resource is and priorities, and that is natural also. And this is a lot like traditional graphic design. Different companies sometimes use these terms to mean somewhat different things, so it's always a good idea to clarify terms. So everybody's on the same page. A simple but key concept is, to be sure, to research and test on the right individuals who will actually use your product. So, uh, using our graphic design lens to to regard this whole UX process, I'm sure that you probably tapped created book maps or brochure dummies to work out the flow of a project. And that is very much like, um, wire frames, prototypes, even site maps, which are very high level dummies. And one point I wanted to make is that ah, for a class project. In the interest of making this a manageable project for beginners, we're going to work with The intended audience is defined by the blog's author without doing additional research. This is not ideal, but I feel like this field is so complex that I didn't want overwhelm you completely completely. And I hope you're still with me and we'll move on together to the next topic. Thanks for hanging in there. 4. What tools can I use for wireframes and prototypes?: you may be wondering what tools you can use for wire frames and prototypes in the class project. You'll be asked to create wire frames and prototypes for both mobile and desktop versions of the block of your choice. I'll tell you more about that later. For wire frames, use the softer of your choice that could be sketch illustrator, affinity designer, and there are loads of others. We're feel free to use pencil and paper. I'm showing some examples to give you a sense of the possibilities. Try Googling wire frame image is to get a sense of what's out there for the prototypes, which are higher fidelity than the wire frames. Use the Digital Chul tool of your choice and hero mentioned Photoshopped as well. I'm showing some prototypes I did a few years back in photo shop. In this case, we had actual copy. But for the class project, please feel free to use Laura Ipsen that is mock or dummy text for the non heading and subheading text. As a traditional graphic designer, you're probably very familiar with illustrator and photo shop. Through creating prototypes, I discovered affinity designer, which I found works great for print projects as well 5. How do I create a great UI?: How do I create a great you? I remember that your goal is to guide your user through the website or app. With minimal friction and maximum delight, Be sure to establish a clear hierarchy so the user knows what's important. Use consistent design pattern so that the user can reliably predict the functionality of various elements. Maintain brand consistency, create engagement and interest. So the user mix repeated visits to the site. This last point relates directly to our class project. Please be sure to create something interesting and compelling enough so the user can't wait to return to see the next post. So traditional graphic design is all about structuring content to make it more understandable, Engaging and delightful graphic designers air experts at using scale and contrast to direct the user's attention through a piece. Also color and white space or concepts that you're very familiar with and deploy every day . If you've created a style guide, you can create a pattern library and you realize how key a style guide slash pattern library is to brand consistency 6. What exactly do I need to do for the class project?: My intention for this course is to give you a taste of you. I ux design without overwhelming you with too many details. You'll see the particulars of the class project below. But your first step is to decide whether you'd like to design a travel blogger or coffee blawg both initiatives or brand new. So it's up to you to establish branding. This project will not require any user research. We're just going with the intended audience the author envisioned. Think about what are the most important elements and how they should be organized. You'll be creating wire frames and prototypes of desktop and mobile sizes for the home page and the article page, Feel free to really dive into the branding and visual design. If that's your thing, remember that when designing for the Web, we need to be aware of how our designs will work on various devices. I'm asking you to create wire frames and prototypes at a typical smartphone size in a typical desktop size. Please use Google funds for this project. This is a free service which accesses the funds used on a website through HTML and CSS. The funds actually live on the website and are displayed through this sites. Markup and style sheets. Go to Fahnestock google dot com, and you can download funds to use on your computer for your prototypes. It's not part of the class project, but it's a good practice to document the steps you go through. You can use these to create a case study and these air frequently helpful to potential clients or employers, to give them a sense as to how you solve problems. Enjoy the project and I'll give you my final thoughts in the next video. 7. Final thoughts: will wrap up now with some final thoughts. I hope this class has given you confidence that your heightened sense of empathy, problem solving, structuring, content, establishing hierarchy, applying, branding and delighting customers is of great value in the world of you aux. It's a huge field with many subspecialties. Every U Y ux designer will bring her own unique combination of skill sets to the table. It's just a matter of finding the niche that works for you. If you've worked in design for any length of time, this is yet another concept you're familiar with. I'll leave you with some resource is that I've found valuable over the years. My favorite, You aux Block is from the Nelson Norman Group. And yes, it's that same Donald Norman who coined the term experience design. If you do want to check out, Ideo owes human centered design offerings. You Congar oh, to this website and posting here. And if you start to get interested in behavioral design, then near I'll is your man. You can sign up for his blogged on his website for a high level examination of how we think in shoes. Daniel Kahn amens book thinking fast and slow is fascinating and eye opening. So I hope you feel inspired to get your feet wet in uru X with the project have given you please be sure to post your work and I can't wait to see what you come up with.