Transcripts
1. Introduction: Getting from your first ideas, your first sketches, wireframes, to a fully functional digital prototype is a challenge. This course will guide you through all the steps you need to come up with your own digital interactive prototype designed with a preferred design software. My name is Patricia Reiners. I'm a UX/ UI designer based in Berlin. I'm designing digital interfaces for many companies, a lot of start-ups, agencies, but also some bigger corporates like Google or Adobe for example. I'm sharing knowledge about UX/UI through workshops, public speaking, and teaching at a university and lifestyle to podcast about user experience design. Designing beautiful digital interfaces is actually not that difficult if you know a few rules and guidelines. You will learn the basics of interface design to create better invitation. You will learn how to get from your first sketches to a fully functional digital prototype and just a few simple steps. You will create your own moodboard for your design, choose colors, typography, illustrations, and images for your interface. I'm also going to share a lot of examples, best practices, and resources, which help you to get started and even speed up your design workflow. This course comes with an Adobe Xd UI kit, a resources list, and a lot of templates which help you throughout this course. As a class project, you're going to design your own digital interface for an item in your kitchen, which will be ready to upload either to your portfolio or to social networks after you completed this class. This class is perfect for everyone who wants to learn more about interface design, design principles, and basic rules of interface design. I am really looking forward to welcome you in this class, so let's get started.
2. Class Project: Hello and welcome to this class about interface design. This is the second part of the prototyping for the future course. I hope you already watched the first course, in case you haven't, I will highly recommend to do this first. But even if you haven't and you don't want to learn about prototyping, you can just use the material I'm providing here for you and you can get started here. A little bit about my personal background. My name is Patricia Reiners. I am a UX/UI Designer here in Berlin. I studied communication design some more graphic design, and at some point, I switched fully to UX/UI Design. I started my career in an agency where I worked for many, many different companies and clients and learn a lot. At some point, I switched to freelance design and now I'm running my own business, I started a podcast, I'm doing a lot of workshops, education, working for many different companies and clients all around the world and I think it's really fascinating and super interesting. I want to share the process, a lot of tools, a lot of methods, everything that I learned in the last years with you. I have a lot of material for you already prepared, so you just need to download it and get started. Here are a few recommendations before we get started. First of all, please download a preferred design software. I am going to work with Adobe XD. I also prepared a UI kit with a lot of resources and tips and tricks for you. You can just download it and use this throughout the course if you want to work with another design tool that's completely fine. Feel free to use the tool you are most comfortable with. The second thing is get some posters ready. This is always very helpful, and a pen. You can have papers if you want to take notes, if you want to rewrite something. Other resources I prepared for you with the resource list, the UI kit, everything, all the templates you can find this here in the materials folder, just download it and use it. You can just open it and get started. What are we going to learn in this class? First of all, we will go through all the different steps you need to know when you want to design digital interfaces. We will talk about colors, we will talk about design guidelines, we will talk about how to choose images and illustrations, even where to find them. We will talk about some very basic UX/UI rules which will help you to become a better designer once you've finished this class. I'm also going to guide you step-by-step through my own design process. You can just follow me at designing a digital interface with Adobe XD and learn on the way. This course is ideal for everyone who really wants to dig deeper into UI design, who wants to learn more about design principles, about everything you need to know as a good interface. As a class project, you're going to design your own digital interface for a device or an item in your kitchen. We will go through all the steps in this class. The only thing you need to do first is to download the digital design tool you want to use, and the rest is going to happen throughout this course. Let's get started.
3. Difference Between UX and UI : Welcome to the 3rd chapter of this course. Now we will talk real quick about the difference of UX and UI. What is really the difference between user experience design, user interface design? What does it really mean? We will go through that really quick. When you want to answer what UX, UI really means, we need to have a look at the UX or human-centered design process. When you want to design a digital product, you don't just design it. We already talked about that in the first part of the course, that you go through different phases. Here you can see those phases and they are overlapping. You see the little circles overlapping. First you start with empathize. You really want to understand the user, you do research and try to learn. Your goal is to find out problems that you can solve for them. The next part define, you really analyze what you learned, the research, you came up if you know the problems, and define what you learn and what you want to solve, what you can actually do to solve this problem. Then the next part you have the ideate. This is the most fun part I would say, because there you come up with ideas. If we look at the fridge topic I chose for my project, I realized that there are a lot of problems when it comes to food waste, a lot of food that isn't really found in the fridge. This is a big problem and the idea was that we create a smart fridge interface where you see when things go bad and you can create your own recipes. Then we already created our prototype, but you can also do that digitally and then you can test it, and then implement it. Implement would be like a coded app or you would create like a coded with HTML and CSS interface for your fridge. What is UX now? Generally, we can say UX means user experience design, so user experience. Since the term came about, UX then has grown to be a service with good business. Good business means good UX or good user experience because the user is so important. Only those products and services that provide a seamless user experience will succeed on the market. With that, the demand for UX designers has radically increased. As the technology market continues to evolve, your UX designers are more crucial than ever. If you're deciding to become a UX designer, congratulations, all UX designers have a really good time. The demand for UX or UX designer is reflected in both, the average UX designer salaries which are pretty high, and also the employment market of UX professionals, which is also pretty high. The UX design usually really focuses on the interaction between the human being, the user, this could be me or you, and everyday products and services. This could be websites or apps or even cotton machines. I really like this example here because it shows user experience in real life. Sometimes, designers come up with really awesome solutions, but then when they test the design, when they see that in real life, they realize that the user didn't really appreciate the way how the designer came up with the idea. They used the experience that is the easiest for them. I think this is really interesting. This is a really good example of some failed good user experience. The general definition for UX or user experience is UX is what a user of a particular product experiences when using that product. You can't create anything of value to a user unless you understand what kind of problems they want to solve, and how you can solve those problems so that the user will want or better even still need your solution. I think it's super interesting. Look on your phone and check all the apps that you're having on there and then see what you're using every day. You can just think in your hand, what kind of problems are these apps, or these products, the digital products you're using every day are solving for you? Every morning, for example, I am using the Headspace app. I'm doing a meditation. I am a huge fan of this app. The problem that this app what it solves for me is that doing a meditation on my own is really difficult. I want to start into the day, relax and calm and focused. That's a real problem and I don't really know how to solve that. I think like all the guided meditations even online are hard to find. This guide is super helpful, and it solves a really big problem for many users because a lot of people are actually using this app. UX means user experience. We've already talked about that, and UI means user interface design. I also find it super interesting to have a close look at some bad UX examples because then you already know, what you maybe could do better. It's also a bit easier to understand what UX it really means because we need to differentiate that from UI. Real-life examples, I am a huge fan of this example here. It's an elevator. They really need to look where do you need to push the buttons. You can just think in your hand what might be a little bit confusing here. What's confusing here is that there are number several time, the are a little bit confusing. It's super hard to find and a few of the buttons already disappeared. The reason for that or why this actually happened that away was that they realized at some point that they need the language for the blind people. There wasn't enough space on the buttons so they just place it on the side, which is also really difficult for blind people, because they find it on the side and then they need still to push the button on the right side. Definitely a really horrible example. This is also, I think, an interesting one in real life. You need to pull something but there's no handles. How should you actually pull this door? Another example that I find interesting is from WhatsApp, I guess that many of you probably already have seen it. You can delete messages and the user or everyone in this chat gets this message, you deleted this message. I don't know if you have done this at some point, but I did. The only response is, what did you delete there, tell me what it was. I just want to know. There's a discussion and sometimes you don't want to tell and people get angry. Other platforms like Signal, for example, they're just deleting the message without any notice. I think this is also an interesting one. I don't know if you have ever flied with Ryanair. It's a really cheap airline. Ryanair's booking interface can be considered as an example of dark, UX sneaky, UX design tactics that makes the experience really complicated and confusing enough to trick users into spending more money than they need to. In this case, we've hidden addons. Here we can see that the option of no insurance is banned within a totally unrelated menu making it difficult for users to find it, and this is definitely the opposite of user first, rather than considering the functionality and usability of a platform. Here the users definitely not put first, but yeah how to make more money with insurances. Another painful user always super long drop-downs. If you can't find something, if you need to look for a country and it's really, really difficult, it's super long. This is also I think interesting one, I guess many of us have already experienced it. It's super, super frustrating as we have already a million passwords to remember, and there's nothing more frustrating than unnecessarily complicated password requirements like the one here. Complex passwords are more difficult to remember, meaning your monarchy to waste time constantly creating new passwords to replace the old ones. I think this is also an interesting example. It's a five-star review on fiber. At a glance, users who are used to the nearest standardization of an explicit amount of stars representing the rating may assume that the product in question only receive the one-star rating. Having a star next to a number is anti-intuitive to customers. It might even register as a rating at all. Another really interesting example is this product here. I don't know. It went viral a few years ago. It's the Juicerro. It's a juicer, and this is a really interesting one because the problem here is not really the f of the functionality, and here, like a woman really shows how it works, invented some unnecessarily item to have this juicer, because you can't just squeeze the juice out of this plastic bottles with your bare hands. So you don't really need the juicer. Also really bad user experience, because you feel very frustrated. Since the term came about, user experience has grown a lot and has become super, super important. Although this course is about your design and interfaces, I just wanted to talk a bit about your AKS as well, because it's so important and really goes hand and hand, and if you want to become a successful designer or UI designer, understanding the user and what UX means, and integrating that in your workflow would make you a really awesome designer, and really stand out in the crowd where a lot of people are only focusing on beautiful design. Here's a recommendation and really great book. We're also going to put this in the resources list. It's The Design of Everyday Things from Don Norman. UX actually has been clean since the early 19th from Don Norman and he actually worked at Apple, at a cognitive scientist. Don Norman was super interested in all aspects of a user's experience with a product or service, including industrial design graphics, the interface and physical interaction. To re understand that, he came up with everything that includes this analysis and call this user experience. He show a really interesting example. We already talked about the doors. I showed you the example of the doors. This is another interesting one, because many doors look like that. There's this push and pull and with two handles. What's the problem here? The problem is that people really need to read this to understand what they need to do, if they need to push or if they need to pull. A lot of people can't read. Some people don't know how it read. Their kids don't know how to read at all or even like elderly people who can't read it because they have bad eyes. They actually came up with another solution, or Don Norman recommended another solution so that the user don't need any kind of explanation, they know what they need to do. I think this is a really interesting example here with the door, because if you have these two doors, you know exactly where the handle is on the right side. Of course, you need to pull. On the left side, where there's no handle of course, you need to push. You know this automatically, you don't need any explanation, and your interface, your UX/UI design should be like that, but the user automatically knows what to do. Even if you want to become a UI designers, you always need to keep the user in mind that super, super important. Here is a little explanation about the differences of UX and UI. I think it's is interesting. This is from Korea foundry. Yeah, just have a look here. Here are also the task that you're doing or the differences. If you want to work as a UX designers, you are focusing much more on user research and customer analysis. You do a competitor analysis, content development, product structure. You do testing, wireframing, prototyping, coordination with any kind of visuals on interface designer, coordination of developers, and a lot of iterations. As a UI designer, this is what we're going to talk about, is more design research, it's branding, it's a graphic design development, user guides and storylines, it's UI prototyping, interactivity, and animations, responsiveness, and adaptation to all screen sizes, and even implementation with developers. But also illustration images, any kind of assets.
4. Wireframes: Fell in love with the problem and not [inaudible] solution. In UX/UI design, you really love the problem and you try to understand the problem, you try to find the problem, and then you come up with the solution. But first, you need to understand the problem to really come up with a great solution. This is what we've already done. We came up with a concept. We have some sketches, we have some wireframes. In those first prototypes and those paper prototypes, could also be digital wireframes. You test your idea with users and you are ready to iterate. You're ready to change your designs, your concept, because maybe you realize that the user didn't really get what you wanted to show them or help them with. Most of the times, you need to adjust a few things and change that before you move to digital, and create a super high-fidelity, a super perfect digital prototype. How do you start with finding problems? What have we done so far? The task was to design or redesign an interface for your kitchen even if this item in your kitchen doesn't have an interface now. I focused on the fridge so your item might have been something else like the toaster or the oven for example. Then we started to look for problems. We had different conversations with people. Maybe you've done some user research. We wrote down all the problems on Post-its here. For example, in the fridge, it's very chaotic and you don't know how to storage the food. You can't really remember which food is yours and what may belong to your roommates. You can't really find the things inside because it's messy, etc. Then we focus on one problem which I found the most interesting and this was you don't know what to cook with this things in the fridge. This is definitely a really big problem. Then we were looking for solutions. For example, showing the outside what is inside, organize the fridge so it is easier to see in, get recipe recommendations every day with the ingredients in the fridge, or you make pictures of the ingredients to buy and receive reminders every day. The idea that I like the most is get recipe or recommendations every day with the ingredients in the fridge. This was our task and then we came up with the concept so we designed this paper prototype
5. Create a Moodboard: In this chapter, we will talk about a mood board. How do you start when you want to create a digital interface? Most of the times, people feel really overwhelmed by all the choices and, they're scared of the widescreen or the white paper they don't know how to get started. My recommendation is to start with some analysis where you really think about the target group. Who do you really want to attract here, or who are you're really designing for and then develop a mood board. Feel free to download the mood board and the target group templates. These templates will help you in this chapter. Before we get started, we will have a really quick analysis and think about our target group and also the mood board. When we're thinking about the target group, the target group actually means the people that you are designing for. You came up with a problem, you came up with some ideas how to solve them, and [inaudible] first prototype so who are actually your target group? Who are the people you are designing for? You always define that in the first part of the course. But we're going to do that again in case you haven't already. First of all, you define who you really design for. Who is your target group? In my case, I'm designing a recipe generator for a smart fridge. My target group are families with young kids. They're living in cities and they are more or less tech-savvy that's the reason why they bought this smart fridge. Their goals is actually for most families really save money to reduce their own food waste, and to cook meals without any further shopping required, but which helps them to be spontaneous. The look and feel for the whole design should be of course, user-friendly, should be fresh, should be light and it should be soft, and easy to use. That's really important because even maybe kids want to help or to use the mood board as well and the design as well. We already defined that, so take a few minutes to just fill this out and yourself can either use the template or you can also just use pen and paper. But from my experience, it's really helpful to find this first. Now we can start with the mood board and this is actually one of my favorite parts. I think it's a lot of fun. I'm pretty sure you will really enjoy it. What is a mood board? Generally, you can say that a mood board is an arrangement of images, materials, pieces of texts, etc intend to evoke or project a particular style or concept. It's very much about the look and feel of a project. Here are a few examples that I really liked this is a personal branding that I found on Behance. Really beautiful mood board about different things that are related to this end goal. For example, the color of the topography style of the materials, how it actually fears. I think this is also really interesting one because they can already see some color patterns, different icons. When you see that you automatically understand the look and feel of the end product. How can you get started with your design? From my experience, it's awesome to have some inspiration so I usually like to go through different inspiration sites for designers. I can highly recommend to use dribbble. It's a really awesome platform for any design inspiration, so perfect for mood boards. You can either create an account there or you can just look it up yourself without downloading or uploading anything. You can look for specific term, for example, cooking, and then you have different app design examples. You can just make screenshots and place them in your mood board. I also have an account there and I saved a lot of collections so feel free to check them out or follow me or see what I am saving might be interesting for you. Another platform that I can recommend for mood boards is Behance. Behance has a really awesome social network for creative spray. You can present your work. I also uploaded a few projects there, so feel free to check them out, maybe, this is interesting for you and I also have a few collections there and different mood boards for different projects. Feel free to use them to copy and paste them for your moodboard. The third recommendation is Pinterest. I guess many of you probably already know Pinterest. It's a really cool platform with different images. You have a search, you can search for different things and then in the end, create your own mood board. Here you can see a few of the mood board, a few of the folders I created for different topics, even for like outfits, future home, kitchen so anything that inspires me, even beside this project. I also created a folder which is called app and there I'm saving all the way like at these ones I'm finding on Pinterest that I think are really beautiful and maybe I can use them later on for a mood board. Yeah, again, really highly recommend to create a folder there and save everything that you find inspiring for future projects or even for this one, and then start to create your moodboard. The task here is to redefine your target group, write this down the template I created for you, and also create the mood board. Place, everything you find inspiring or the look and feel of your project in there. That might be app designs, this might be materials, this might be typography, this might be icons, images, everything you can find. You can place it here and check that out. Now you can watch new design my mood board and I'm going to walk you through the process of designing my own mood board. I hope this is inspiring for you and helpful. But this is of queries my own mood board. Yours might look completely different and that's totally fine so don't worry if yours looks a little bit different.
6. Choose Colors: In this chapter we will talk about colors. How to choose the perfect color palette to really transport your mission that really transform the right emotions for your design. My recommendation is choose your color palette for your design wisely. I'm going to talk about a few things that you need to know about colors, when to use them, how to use them, and which color we'll work for, which purpose. I'm also going to share a few really cool tools and websites for coming up with really great color palettes. Focusing on the psychological aspects of colors and essential part of understanding color theory. When you select a UX color palette for your product, your app, your design or whatever, you will usually think about how things will look, but it's equally important to think how they feel too. Color has a powerful psychological influence on the human brain, with each color representing different meanings and emotions for your users. After we've took a close look at the psychology of color. Where to use, which colors to cause which emotion, here are a few recommendations. First of all, limit the total number of colors. When you create a new color scheme, it might be tempting to add dozens of colors to it. But it's better to avoid that temptation. Why? Because it's really hard to achieve a visual balance when you use too many colors. The user feels really overwhelmed by a lot of colors. You can easily overwhelm the user, so it's better to really limit the number of colors. The color wheel includes primary colors, so red, yellow, blue, and secondary colors, which are a mixture of primary colors. Orange, green, and purple and tertiary colors. Colors created by mixing equal parts of one primary color and one secondary color. Citron, russet or buff. You probably already know that from school, I know that we talked about that in school, but this is still way hover for you when you choose your colors. When we're talking about color palettes there are different ways to create those color palettes. For example, monochromatic. Monochromatic schemes use a single color, but with variations of tints, shades, and tones of the color. This schemes is very easy on the eyes since the colors naturally go well together, they create a 3D effect. We also have analogous, analogous color schemes, use a few related colors. The color is the dominant color, while others supported it. The supportive colors enrich the scheme and make it more visually appealing. Then we have complimentary. The most basic form, complimentary schemes consist of only two contrasting colors. For example, a dominant green color and an excellent red color. These schemes works well if you want to attract attention. Talking about complimentary colors, what are complimentary colors? Like, it's green and red, or blue and orange, and yellow and purple. They provoke a really big contrast. They usually look really well together. Here are a few examples. This one example from Andrea Hock. She came up with this three beautiful mood board, and this monochromatic color palette with a lot of different blue shapes are really beautiful. Another example that I find really interesting is the one here from Chipmunk. It's good scalability, is essential for web designer, so that you can scan content easily, and you have an easy focus point. Physicians should be able to find the information they need at a glance. Super easy. The colors you use can support this as they can help guide the user's eye. For example, you can use a contrasting color for a call to action button. For the button here, to give more visual weight and make it more prominent. Here you can see we have a yellow background, we have black topography and little bit of white in the illustration to put some other highlight here. The only other color is the pig a plant's of the culture action that we really want to use it to click on. This is green, so there's really big highlight on this one. The cool thing of colors is that you can really put a focus on highlights. You can also see that, I think in photography, here for example, where everything is black and then you see the yellow in the middle, for huge highlight, you can provoke any contrasts and here are a few examples. This is one of the projects I was working on for life. This and this in a live stream online. What you can see in the examples here that I'm showing us that there is always focus color, main color, and different colors on around that you have a really beautiful color palette, with all the colors that we fit perfectly together. Here, for example, is a banking app. I really like this example because you can see the bluish, grayish colors here, which really stand for trust and security. I can highly recommend to check out a few of these really awesome resources. One that I personally really love is the color called a web application. You can slide through different colors, check them out, and create your own color palette and in the end, even download it. Another recommendation is coolers, really awesome platform where you can create your own color palettes as well. We have a lot of examples, you can generate them, and do a lot of different things with it. Just check it out, it's really beautiful color palette really makes a difference when it comes to your project. Here comes the task now. In case you haven't created a color palette within your mood board, choose a color palette for your own interface. Now maybe already have a few colors in your mood board, you can use them. Use one of the tools that I've recommended. Get started and download the color palette and add this to your design library and Adobe XD or in the Design Program.
7. Accessibility: This chapter is all about accessibility. This topic becomes more and more important only because we define our target group. It doesn't mean that our target group is perfect and they have a perfect side and they know how to do it. There are a lot of people who have some disability and I think this is super interesting and will become more and more important also for us as designers to think about solutions that include everyone and not only the people who are perfect. This is also important for people who are starting their career because we need to think about those people as well. When we think about accessibility or disabled people, we usually think about people who are blind or who are deaf or things, like that. But what really opened my eyes was this graphic I saw a few years ago and I think this is really interesting because thinking about accessibility does not only mean thinking about people who are blind or only have one arm, but also people who are temporarily or a situational some kind of disabled. When we're thinking about people who have problems with sight, they are not only blind people, but maybe people who have problems even in temporal wise or who are distracted drivers, things like that. Even with touch, of course, there're people who might only have one arm and can't use their right arm if they want to use an interface. But there are also people who have some arm injuries, or even people who are thinking about new parents who are carrying their baby. Thinking about this really opened my eyes and I think it's really interesting for us to keep in mind when we are designing. Sometimes we're asked, I found this quote on the Internet, we are asked, what is an example of a accessibility? An example of accessibility would be any content or functionality that is fully available to and usable by people with some disabilities. These might be people who can't use their arm because it's broken, who have one arm who are carrying a baby, people who have ear infections and can't hear that well, or people who have eye problems, people who lost their glasses, etc. This may refer to individual elements, features, or the whole web experience. One example from real life is this thing in many buses. Maybe you have seen that when you used the bus the last time for people who are wanting to access the bus with the wheelchair or even for parents or any people who using wheels at some point have this ramp. What is the easiest for us as designers is to really focus on colors because providing a contrast helps people with eye problems or who have not the best sight at all to receive something. We need to have a really big contrast between the topography at the background or the button in the background. There are a few tools that I can recommend to check out if the color palette you chose works perfectly for people with disability, so if the contrast is big enough. Because this is something you get criticized the most if it doesn't work out. I can highly recommend to check that out. There's also a really awesome plugin for Adobe XD, which is called Stark plugin. There you can check out for a color palette and see how it looks for people who have any sight problems. You can just find this in the plugin folder.
8. Images & Illustrations: Transporting emotions is very important for every design you will create in your design career, and images and illustrations can really help to do that. It's really vital to get this right, to really choose the right images that fit to your design, right illustration that fit to your design. In this chapter, we will talk through different methods, how to find those images, how to really sort out what makes sense, and also a few resources. Where can you actually find images? Where can you find illustrations if you're not an illustrator or a photographer so you can create them yourself? When designers know how to work with imagery, they are better able to manipulate the emotional reactions of an audience. Product designs can rise or fall on the quality of their user experience images, which is why it's vital to get it right. First impressions are very important, especially in web design. According to research, we have as little as 50 milliseconds to make an impressions that determines whether someone will continue or leave your web experience, your app, your service. The look and feel of a website or an app has everything to do with a product's visual identity, but visual identity and user experience go hand-in-hand. Without one, the whole experience suffers. When to use photos, videos, or illustrations now? First of all, to display a specific scenario. Photos are great to use when you have a vision in mind. You can commission a photographer to execute on that vision or use a robust search functionalities on stock photo websites, so try to find the right one. So if you want to show something about cooking, visual storytelling, you can also integrate an image about cooking or where a family is cooking. Also, to showcase a product. If your website or app designers focus on a specific product, you will definitely want to showcase an image of that product. So you can use video or stop motion to showcase how the product is used of still images of multiple angled ride with a slider. Or also for the wow factor. When used appropriately, an image can trigger a strong emotional response that users will remember. I also really like this example by Julie Sandusky. She designed this beautiful app about food sharing where she combined really beautiful illustrations with very natural imageries. So I think a really good combination of both. Another important thing or a tip is if you want to use images or illustrations to test that on various devices, because you never really know what kind of device the user is using. It might be an iPhone, this might be on their iPad, or even the web experience. If you are not a photographer and if you don't have budget to commission a professional photographer, but I can highly recommend some websites with free stock material, for example, Unsplash. You can look for specific words and then you will get a huge selection of different images you can use for your project. When it comes to images or illustrations, I can highly recommend to use unDraw. It's a plug-in for Adobe XD with a lot of different illustrations that you can download, adjust, change colors, and then use for your project. Here is a resources list with all the resource that I can recommend for photos and videos and illustrations, most of them are 100 percent free, so you can just check it out and look how you like it. Here comes the task now. Choose illustrations or images for your own interface design, integrate them in your design library, adjust the color space to your color palette, and then you're ready to go.
9. Fonts & Typography: [NOISE] In this chapter we will talk about ways how to
find the right topography, the right fonts
for your designs. We will talk about resources, ways how to combine them, and a lot of different tips and tricks that will
be helpful for you, not only for digital design, but I would say
for every kind of design you will
create as a designer. Choosing the right font
can be a challenge, but I want to share with you a few tips and tricks
that will be helpful for you to select the perfect
font for your project. The first recommendation is actually around branding because also the font
selection is one part of the branding of
the general design. A font you select should embody the character and
spirit of your brand. Try to match the font style
to your brand's character. Imagine that an end
designer uses Comic Sans for a banking app which
wouldn't fit at all, so it's always important that
these two things really fit together and that the typography really fits to the
general brand. The second recommendation is legibility because
it's generally evident that it's better
for a typeface to be very legible and very clear. Sometimes it's unreadable, although it looks really cool but always keep in mind
that people need to spend extra time to understand what is
written there and maybe they even close the window or delete that because
they just can't read it. It takes too much time. Rather, avoid using fancy fonts
or any uppercase text and super large bodies or texts that forces their reader's eye. It's better to use decorative typefaces only
for titles and headlines. Also make sure that you choose a typeface
that works well in multiple sizes and
weights to maintain readability in every
sites on your phone, on your web page, for larger text,
smaller text, etc. One of the first decisions we actually need to make
when you want to choose a font is should it be a serif font or a sans font? While the decision can be
based on several key points, one of the most important point is the length of your copy. Generally, serif typefaces are easier to read for
lengthy copy than sans. Serif fonts, [inaudible], travel across a line, especially if lines are long. Probably we've seen that
in a lot of newspapers, where they are using
a lot of serif fonts. If it's also important to
consider your target audience, sans is preferably for young children or anyone
learning through it. Sans is also good for readers with certain
visual impairment. Also, it's a safe bet
to use web-safe fonts. There are specific fonts
that are web safe, so fonts that are supported by all major web
browsers by default. Here are some safe sans
typefaces you might start with, for example, Arial,
Tahoma, Verdana. Awesome. Safe Sans
typeface like Georgia, Lucida, Times New Roman. You also need to think
about the font family, so some fonts are members
of bigger font families, you would say, and they come with a really
big selection of different styles and weights that give designers
more freedom. When you look at Helvetica
or Helvetica Neue, they include so many
different sub-fonts. When you choose a
font for your design, rather choose a font with
a really large font family because it helps you actually to come up if you
have different requirements. I will say that for
the most projects, it's enough to have at least
two fonts or three fonts. For many projects, or I would
say from my experience, it's enough to have
three weights, which would be even, bold, and italic, while others might require
additional versions to create good visual hierarchy. Much of the time, one typeface is all you
need to use in your design. However, there are
certain occasions where you will want to
use multiple typefaces. One for your body and one
for the title, for example. The next tip is limit
the number of fonts. I know there's so many
beautiful fonts out there and we would all love to use
as many fonts as possible, but my recommendation is to really limit the
number of fonts. Avoid to use more than
two or three fonts in your design because each time when you think you
need a new font play, rather of different sizes
or different sub fonts, for example, then
integrating a new one. Next tip. Try to use fonts
that are not too similar. The whole idea of using
multiple fonts in a design is creating a visual
hierarchy and diversity. That's why there's no point choosing two fonts
that look identical. In fact, the more
similar fonts look, the more likely they will clash. Contrast is a super
important thing, not only when it
comes to design, but also for
typography in general. When you choose to use
multiple typefaces, make sure the typefaces
you are using have substantial contrasting
differences but remember that the contrast
is not the same as conflict, so the ideal combination of
fonts should create harmony. There's a simple rule. Find two typeface that
have one thing in common but are otherwise
vastly different. Combining serif with sans is a classic move, for example. The key thing when combining
two very different fonts is establishing a clear
hierarchy between the two. One font should be more prominent
than the other and this can be achieved by
writing the size and weight of each typeface. My recommendation is
to choose one font for the headline and
one for the copy. The one for the headline
can be a little bit more fancy and the one for the
copy should be easy to read. How can you find the
perfect font now? Here are a few tools
and recommendation. One is UXPRO, a really cool
tool to combine fonts, find all the different
tools that are helpful, so you can check that out. The other tip is Adobe fonts. I really love that
because you can download fonts to
your Creative Cloud. Here comes the task now. Choose typography
for your project, one, two or three fonts, add it to your design library in your design
software tool you are using and let's get
started. [NOISE]
10. Learn Design Principles: In this chapter, we will talk about basic design principles. If your background is graphic design, some of these principles might be familiar to you because those principle are general principles. Whatever kind of design you're coming up with, this might be a poster, even flyer, business card, or in digital interface, those design principles always work. I think it's really fascinating if you know them and use them because this really makes the difference of a good design or a great design. I'm going to go through four design principles. There are actually more, but I think that those four are the most important ones. You can use them for any kind of design. It could be Instagram post, could be a poster, could be a flyer, could be visual design, but also, interface design. The first principle of design is alignment. Alignment provides cognitive stability and visual relationships. Every element in the UI should be aligned with one or more other elements. Here's really good example. This is a normal webpage, and you see that you have a visual grid where most things are visually aligned. This helps the eye to really focus and don't get any distraction. You see this for any kind of areas. For example, if you have different icons that are neither the middle and also text areas and headlines, everything should be aligned. The same of cards, you see this, and this is the only puzzle. This is possible for vertical, but also for horizontal design elements. Then we have proximity. Elements close to each other are perceived as a single group. Unrelated items are visually separated. Group certain elements contextually to form a perceived whole. This is, I think, a really good tip. If things belong together, you see on the right side, for example, there's an image and those two white blocks. If you place them close to each other, it is perceived as some area that belongs together. Always make sure to really place the areas that belong together closer together. Here's one example from Amazon, and there you see that there are different information. First of all the name of the item, the image, the amount you need to pay, the logo, the stars, everything is really close together. If you just look here on this in one glance, you automatically know what belongs together because all the areas that belongs together are really close together. If you compare those two, I think it's really interesting because one is definitely not perfect because everything is really close, and you can't really see the difference. You can see this one on the right side is the one that is recommended. The areas that belong together are close together, and there is some distance between the single items so that if you close your eyes, you will automatically know what belongs together. On the left side, everything is really close and all the distances from one item to the other, the buttons, everything looks like it belongs to one product. Then we have contrast. A lack of contrast between text and background strains the eye because they don't know which color to focus. Contrast draws attention towards specific elements. This not only is important for topography of headlines, but for everything. Contrast can be almost everything that is different than the rest. Here you have, I guess, a really good example. You have the basic design, the basic color you want to use, the basic topography. Then the one that is darker automatically draws the attention to because the contrast to the background is bigger than the original gray and the subordinate, which is almost like the background. With contrast, I think it's really important to handle this right because what you see there are the insufficient contrast, too much tension, and balance and tension. There's really sweet spot between not too much tension, but also contrast. When we're talking about contrast, it's not only about colors, but this could also be proportion by like if one element is bigger than the others. White space, the distance between different elements could be movement, but also contrast by different colors or sizes, shapes, or alignment. One of the most important things is probably hierarchy because hierarchy provides the user with a roadmap to navigate throughout your design. In an era where attention spans and patience are limited, hierarchy can be the secret weapon that ensures your users find what they need while encouraging them to explore further. Considering the importance of user experience, hierarchy is often critical to the success of an interface. Hierarchy in design is generally a really big topic. Many other design principles like alignment, emphasis, proportion, white space, etc, can help influence a hierarchical structure in your design. This is a really good example because you will read this first, then you will read this, then this one, and then you will read this at the end. By creating a good hierarchy, you can guide the user, and you can already determine what the user reads first, second, and last. Usually, you start the biggest font, you use it usually for the headline. Then you have the sub-headline, and then you have some sub sub-headlines and then the copy. There are really differentiate between different type of faces and different sizes as well. Then we have repetition. Repetition is used to create a visual hierarchy. This can be fonts, colors, textures, and graphical elements. Reusing elements of those visual elements create cohesiveness. Very important, always recycle, reuse of things that you already came up with; different design elements, different patterns. Here we have a headline, a copy text, and the button. Just reuse them if you have a very similar element or maybe the same, you use the same pattern. For this, you can integrate that in your design library and just reuse this every time you use that. Same here. Amazon example, again, all those items look exactly the same. It's really easy for the user to scan this really quick and understand that all these items are items they can buy, so they belong to the same make.
11. Golden Interface Rules: So the golden rules
of interface design. There are ten rules
and I'm going to talk about each of them
with some examples. So I highly recommend
to just get some pen and paper
and make some notes. Because this will be really helpful for everyone
who wants to take it a little bit deeper
and really wants to understand the ground
of interface design. So let's get started
with the first one. Match the system
and the real world. So the system should speak the
users language with words, phrases, and concepts
that are familiar to the user rather than system
or they enter terms. So one example is to really use terms
that the uterus really understand and not words that are very specific and no
one really understands. So use real-world
metaphors, for example, using metaphors and UI design
allows users to create a connection between
the real-world and the digital experience. We are walled metaphors and power users by allowing them to transfer existing
knowledge about how things should
look like or work. Through the interface. Metaphors are often used to make the unfamiliar, familiar. Take the recycle bin
on your desktop, for example, which
holds deleted files. This is something you
know from real life. You put something there because
you want to throw it out, you don't need it anymore. It's not a real trash ban on your on your laptop
or on your computer, but it visually
represents the same way. So the user easily
understand what it means. Visually of system status. Keep users informed
about what is going on through appropriate feedback
within reasonable time. Users are much more forgiving when they have
information about what is going on and are given period feedback about the
status of the process. Visibility of the status
is essentially when users initiate an action that takes some time for
computer to complete, like a loading bar for example, or a loading we're users
don't like to be left see nothing on the device screen while the app is supposed
to be doing something. So the use of progress indicator is one of the subtle
aspect of UI design that has a really big impact on the comfort and
enjoyment of users. So a really simple tip at very helpful when you
want to get started. So number three is user control. Support, undo, and redo, because many users often
choose system functions by mistake and will need to clearly mark exit to leave
the unwanted state. This rule means that the
user should always be able to quickly backtrack
whatever they are doing. This allows users to explore the product without the constant
fear of failure, right? Because if something fails,
if they do something wrong, they can undo it
and can proceed. When a user knows that
errors can be easily undone. This encourages exploration
of unfamiliar option, so the user feels
more comfortable, confident exploring your
app or your website. On the contrary, if
a user has to be extremely careful with
every action they take, the leads to a slower exploration and nerve
racking experience that know what the system, of course, should speak the
users language with words, phrases, concepts familiar to the user rather than
system-oriented trope. Job talked about that. So really avoid jargon and system-oriented terms
when designing a product. It's important to
use language that is easy to read,
easy to understand. And the system should speak the users language
with words, phrases, and concepts familiar
to the loser rather than jargon or
system-oriented terms. So number five is
error prevention. Try to ameliorate arrow prone conditions
in the first place or check for them
and present users with a confirmation option before they commit to
the action, right? So feedback is typically associated with points of
actions for every user action. So the system should show a
meaningful clear reaction. System of feedback for every action hopes users achieve that goal
without friction. Your design should consider
the nature of interaction. For frequent actions,
the user can respond. For example, when
users interact with an interactive objects
such as button, it's essential to provide some indication and action
has been acknowledged, right? So this might be something as
simple as a button changing color when pressed or get out
some kind of interaction. The lack of such
feedback forces users to double-check to see if they're intended action to be performed. So when you design an interface, always make sure that you
have this kind of feedback. So abuser feels
more comfortable. Number six is recognition. Instructions how to use the system should be
visible and of course, easily retrievable
whenever appropriate. The clearer, the better. So promote a visual clarity. Good visual
organization improves usability and legibility, allowing users to quickly
find the information they are looking for and use the
interface more efficiently. So when you design layouts
for your interface, avoid presenting too
much information at one time on the screen. This results in visual clutter. So really focus on only
the things you need, not too much, don't
overwhelm the user. And remember the principle,
form follows function. So make things look
like they work. Apply the general principles
of content organization, such as grouping
similar items together, numbering items, and using
headings and prompt texts. Good visual
organization improves usability and leisure ability, allowing users to quickly
find the information they are looking for and use the
interface more efficiently. Flexibility. Accelerators unseen
by the novice user, may often speed up the
interaction of the expert user, such as the system can cater to both inexperienced and
experienced jeweler. So accommodated users with
different skill levels. Users of different skill
levels should be able to interact with the product
at different levels. Don't sacrifice expert users for an easy-to-use interface for
norovirus or casual users. Instead, try to design for the needs of a
diverse set of users. So it doesn't
matter if your user is an expert or a newbie. Adding features
like tutorials and explanations is
extremely helpful for no rice users just makes sure that experienced users are
able to skip this part. Once users are familiar
with a product, they will look for shortcuts to speed up commonly used actions, you should provide fast path for experienced user by enabling
them to use shortcuts. We actually use this at an app I designed for a fruit startup. We created a digital
cooking book there, integrated different
options for pro users. So for very professional
people who are cooking, right? But also tutorials for people who might need a
little bit more help. Aid, minimum those design. Every extra unit
of information in a dialogue competes with the relevant unit
of information. Eliminate all elements that
are not helping your users. Interfaces shouldn't
contain information that is relevant
or rarely needed. Irrelevant information
introduces noise in your eye. It competes with the
relevant information and ambitious, It's
relative visibility. Simplify interfaces by removing unnecessary elements are content that does not directly
support user tasks. Thrive to design
your eye in a way that all information
presented on the screen, but both valuable and relevant. Every element and evaluated
based on the value, it delivers the user. A good example of
an app that follows the less is more approach by avoiding overloading
the interface of content or features
is AR, writer. Nine documentation on
the user's task list. Concrete steps to be
carried out such as information should be
easy to search and find, create an easy to
navigate interface. Navigation should always be
very clear and self-evident. Users should be able to enjoy exploring the interface
and any software product. Even complex, be
like business to business products that are for features like
dashboards for example, if a lot of
information shouldn't intimidate users so that they are afraid to press
a button right? Because there's
so much going on. Good UI, good user interface puts users
in their comfort zone by providing some context of where they are and
where they've been, and where they are,
what they can do next. Provide visual cues. Visual cues serve as
reminders for users. Allow users to navigate easily
through the interface by providing points of reference as they move through a
product interface. Might be page titles, highlights for currently
selected navigation options or other visual aids give users and immediate view of where
they are in the interface. Users should never be
wondering Where am I actually, how did I get to the screen? So provide an icon, reflect a little back arrow, for example, a
pretty big headlines so that users understand
where they are. Users should be provided with cues that help them predict
the result of an action. A user should never
be wondering, what do I need to press in order to do this or to lose that? Recover from errors. Error messages should
be expressed in plain language because our
arrows can always occur. And this is not a problem. But you need to
engineered virus as well. The arrows will always happen, so you need to get ready
for that and design them. A well-crafted error message is really important and on the, on the other hand, can turn a moment of frustration into a moment of conversion. And effective error message
is a combination of explicit arrow
notification together with hints for
solving the problem. So maybe you have seen those kind of error
messages were like, oh, something, something
not so good happened. But about what can I do now? So I stretch it, include something that the
user knows what to do. I hope this was helpful for you. I hope you took some notes. Let me know if you have
questions and feel free to use these information
in your interface design, you're going to come up with.
12. Design Tools: Now, we will talk about different design tools that I can recommend. I'm going to use Adobe XD throughout this quiz. This is my favorite design tool, but there are many other design tools that you are going to talk about real quick. Feel free to use the tool you feel most comfortable with, you like the most. That's completely fine so you don't need to use Adobe XD, you're free to use the tool you want. But let's talk about the different options real quick. There are three main design tools on the market right now. The first successful design true was Sketch. A few years everyone, every designer used Sketch because it was the first very professional interface tool with a lot of plugins, recall tool, it's around, I would say like $100 per year. Then we have Adobe XD, which is part of the Adobe Creative Cloud. If you have a Creative Cloud subscription, you can use Adobe XD. This is actually my favorite tool because you have a super nice combination with After Effects and all the other tools with your libraries. It works really simple and you have a lot of really cool prototyping features. It's also free. You can just download Adobe XD and no need to pay for it, the same with Figma. This is another really common and super popular tool right now. It's also free as web-based and the collaboration work super well. Also, really good tool to just try out and check it out. Choose one of the tools. If you don't know which one, use Adobe XD because I created the kit in Adobe XD and download it, get ready and we see each other in the next lesson where we're going to start with the UI design.
13. Intro to Adobe XD: So in this chapter, I'm going to guide you through Adobe XD, we will have basic introduction about the interface of Adobe XD, what you can do, and how to get started with your interface. So if you're already familiar with Adobe XD or if you want to use another design tool and not interested in learning more about this tool, that's completely fine. Just skip this lesson, and we will see each hour in the next one where I'm talking about the interface and gadgets for my design process. But in case you want to learn about Adobe XD and how to use them, I highly recommend to just stay here because I'm going to guide you through the basic interface, what you can do, and about the three interesting things you need to know, which is design, prototype, and share. So I would say let's dive right in. At the end of this video. I'm also going to share a few resources which are probably really helpful for you so stay until the end. But before I'm talking about the resources, I want to give you a super quick overview of the tools who you are ready to get started. When you download Adobe XD and when you open it, you will see something like that, where you have different options here. First here you have this tutorial area where you can look for tutorials or learn something more, so here if you click on Learn. Then you get guided to the tutorial area with a lot of information about components. So make sure to check that out if you want to learn more, there are a lot of really cool resources, a lot of really cool tutorials and everything you need to know. But we will get started, and in our case, we will start with a basic starting point and here you can choose the size of the artboard so the device you are designing for. This could be an iPhone, a web experience, Instagram story, or also custom. You can change that in the end so it's not that important, we will get started with the iPhone. Sounds good. Now Adobe XD opens and we already have an artboard, those things are called artboards, with the perfect size for an iPhone. I always recommend to get started with the phone side that you have because you can also download in the App Store, the Adobe XD app, and test everything on your device. That is super-helpful and something I would highly recommend. So now you see the interface and you can already see that it's very, very minimalistic, especially compared to other design tools like Photoshop, for example. The area where we are going to begin is the one at the top left corner because here you have all the tools like the rectangle tool so you can draw a rectangle or you can also draw a circle. Then by clicking on this little arrow here or clicking on V on your keyboard, you can select, for example, the rectangle. Then you have the inspector panel on the right side and you can do changes for example, you can change the color to red, you can add some kind of a border, a bit bigger, for example, you can add some kind of shadows in our shadows, background blur, opacity, so everything you know from normal design tools. Kind of the same for any other forums. I think what is just really interesting if you place on above each other, select both, you can also combine them to run to one area, for example, and then change them so they are one, or the tools probably from Illustrator. Another really cool thing here is like the pen tool, so you can also draw something if you want to draw an icon, for example, and then fill it all the things you know from your design tools. We're going to delete that again. Then we have the text tools where we're going to go a bit closer and we draw a text area, we will just write interface design here, and then you already see, I'm going to click on the arrow again to select the whole text area and that we can change the typography here. I'm going to choose the poppins, this is also the font I'm going to work with. We are going to choose another font size, it's bold, and then we can also change the color here on the side. A lot of different functions, you know, probably everything already from InDesign, etc, so now we have the topography here. What I think is really interesting for you as well is that when we come up with certain kinds of designs that we really like, for example, certain kind of topography style if we choose, this is the headline and then clicking just an option and dragging and dropping it below, this is our copy text, and this would be a little bit smaller and we choose Regular, something like that. We can also add specific character styles here on the side so we can reuse them, but I'm going to talk about that in a second. We can add different other artboards if we want to add another one, for example, if we want to do another design on the iPad Pro, we can just click here on the pre-selected, under options, we have another artboard here. But we could also click on Options and then placing it next to it. This is really helpful, I would say. Here at the bottom we also have three kinds of functions, the first is the library, I'm going to talk about that in a second, then we have the layers. When we click on one artboard, we can also rename this, for example, home screen. Then we see it here on the side this is the iPad home screen. If we select the artboard here, we see what's on this artboard and we have three items, the Lorem Ipsum copy text, we have the headline, and then we have our element here from the ellipse and the rectangle. So there you have a really good overview what is on each artboard, and so it helps you to keep track. Then we have here, this is the last icon at the bottom, different kind of plug-ins and plug-ins are really, really cool. You can just download them, you go here and then go to Browse plugins and you have a huge list of different plugins you can download there for free. You can use them and really speeds up your workflow. These are super helpful from my experience. So if this would be our interface and we will need, for example, an icon, I can recommend the icons for design plugin. This is a really good icon library for example, we are looking for, I don't know, lock something like that, we can just click on it and it's automatically here and then we can also change the also the size because it's recto- base, and now we have a little lock here, for example, if we need this. There are a lot of icons, so in case you need icons, feel free to just use them. They are super-helpful. Another plugin that I also really love is undrawn. There are a lot of really cool illustrations you can use and use them, for example, for different kind of occasions. Eating together could be a nice thing so whatever you need here. You can choose something the same with the humans illustrations, this is also really cool. So feel free to just use this if you're not an illustrator, if you don't want to do with this yourself. Then here at the top we have the library, which I think is really cool. If we have specific colors here, we have two kinds of colors we can add this to our library just by clicking on the plus sign and the two colors are added to the library. Really helpful for my experience because in case you need to design something or design a button, for example, somewhere, you can just reuse that. So imagine that this is our on-boarding, our interface, we have some kind of an illustration here, but for lock, then we have like some kind of copy text and now we want a button. So we are going to draw a rectangle, something like that and we will choose a color, this, for example, can also with these little handles here, we can round the edges a bit we don't want a border, but we can also copy and paste this Command+C, command+V. Next, we will center that white and then we will replace that here in the button, smaller and also here. Nice. Then we will group this, either click on the right side and make group, or we click on Command+G. Now I'm also going to show you something really cool because you can create those kind of components. You can either click on Command K, or also right-click and then make a component, and make component at this element here as a component here on your little Design Library. If you want to design the same thing on your iPhone, iPad, or on any other screen, you can just drag and drop this and you place it here so you don't need to redesign this. The really cool thing is that when you change something here, for example, you decide, no, I need a lighter color for example, or I just want another font, for example, Helvetica, or I don't know, something a little bit more crazy and the changes in all components or wherever you place that on your screen, so this is really helpful. Cool. So we will put that on the side. Another thing I want to show you because I think that's really cool, so I'm just going to add another artboard here another- this was not their own. So now I want to design different kinds of elements, this could be, for example, like different kind of food elements. So I have a circle and there I want to place a photo of the food and then I want to add some carrot for example. Should be a bit smaller, like 20 or so. Center that, cool. I'm going to group that. Then you can click on the right side. Here's the repeat grid. Click on it and then you get these little handles. You can just pull it down. Something like that. You have some kind of a grid. You can also change the distances here. I already prepared a few fruits and vegetables here, which we can just, if you have them in a folder, select all you want to integrate and place them here in one of the circles. They are sort automatically to the other ones because it's still a repeat grid and this also works for a type. You select the carrot where the type is. I prepared a text document with all the names of the fruits in the same order as here. It's a normal text document. Then I'm going to drag and drop this and place this here in the text field. Yeah, it sorts automatically, sometimes maybe I need to adjust a little bit to get the size. This should be centered. If I change something it changes on all areas here. Really cool. Then I'm going to integrate the button here as well. Now, if the word selects while the typography is probably not what we want, we're going to change it here. If you want to change something, always make sure that you're changing in the master component and you see this with the little green circle here. It's just white in the middle. If you can't find it, you can just right-click and then click on, ''Edit main component''. Then you will add the main component. Darker, for example, and we also going to change the typography here again. To the pop-ins. Nice. Then in the next artboard, I'm just going to copy and paste it and delete everything. Also, we're going to ungroup this area because we don't need this group anymore. I'm going to add red apple here and maybe also make this a little bit bigger because I want to show you the next stage now. Another thing that I haven't really talked about are the areas here at the top. We are still in design mode, we're designing elements we're creating our libraries and we are designing the screens. But we also have prototype and share. Let's go to prototype. Not so much has actually changed, but now we can make this whole thing interactive. How does that work? If we click on an element, we get the sale, our signs here. We can drag and drop this to the artboard where the destination is. When we click on something, when we click on this button, for example, where do we want to get and this is the screen. Next would be the screen. Then we click on the trigger which would be tapped. Could also be drag or a keynote or even voice. Then we can also do like auto animate, overlay, scroll through, just need to try this out. I would recommend to start with dissolve. I'm going to click on, ''Select'', and this would be the same. Let's try this out. We're going to go on the preview mode. This is the little Play button here. Click on ''Next''. Select, cool, this works. You can just play around with it, try it out and if you're working in a group, I can also recommend to just first, you can save this as a Cloud document. When you say that, you can also see that with the Cloud. If it's saved in the Cloud, you can add more people here. What saves? Then you can add more people here on the side. Feel free to get started and try it out. If you need more help, you find a lot of cool tutorials online. Here are a few people that I can recommend to check out. Yeah, now I'm going to talk real quick about some really cool resources that are awesome. You also have excel through this resources by clicking here at the top bar on file, and then on Get UI Kits. Then you can, for example, download the Apple iOS Kit or the Material Design Kit or Microsoft Windows. How does it look? For example, you click here on the Material Design. Another window opens in your browser and you can download the material design guidelines, which are really cool product design sounds. Here are a lot of really cool things just to test and to learn more. Here is the Adobe XD design Kit. We are going to download this, allow. This will probably take a minute. We will click on it and then we have to click on the dark theme. Then it opens. We get the whole design kit, I'm in Adobe XD. It's really helpful to learn about design, about different interface elements. Just play around with it and understand how they structure interface design. Because the smartest designers are actually working at Google, they're working at Facebook. They're coming up with this UI Kit, it's the best free resource you can get. Download it, check it out. If you're not using Adobe XD, it's also available for, I think for Figma as well and also for Sketch. This is how it looks. All the design elements. Really cool for you to learn about design, about how they structure, how they build interface elements. Yeah, highly recommend to check this out. Super helpful and valuable. Also, another thing that I find really cool and interesting, and not only the UI Kits, but also the websites. Because they're explaining, they're talking about what works well and what doesn't work well, when it comes to interface design. Especially Google at their website and Material Design shares a lot of knowledge about interface designs, about how to structure, how to do certain things. As you can see, there are a lot of elements you need to think of. This could be like a menu. This could be some kind of navigation structures. This could be icon. They're documenting everything super well. It's a lot of fun and I was really helpful to just go through it and they also share this little gifs where they show, okay, this works well and this is not working so well. This is not recommended. A really awesome resource. A lot of companies, also, Microsoft for example, or Apple as well, shares those kind of knowledge. Make sure to have a look, go through it, and go through a few examples. This will be more helpful to you than I'm probably anything you can buy online or think. Now it's time to get started. Get served with your design tool. Use the sketches you came up with and come up with your design workflow. Start by designing your first screens and always make sure to really think about a one flow that you can click through, that you have an interactive prototype in the end.
14. UI Design: As you know, I came up with a concept for a smart fridge, some recipe generator, we already created the concept in the last quiz. But here are the paper prototypes of sketches again, and I created a digital interface for that. Let me walk you through the process, the screen, and how I got started using the UI Kit I shared with. Here can you see other screens that I designed for the workflow, and if you remember, the idea was to create a smart recipe generated with all the things you have in the fridge. I went through the sketches and the idea was that, that you can already see from the outside of the fridge when things go bad. For how long can you keep them in the fridge, you need to use those here in the next two days, in the next week, and in then in the next month, and here you can generate a recipe with these ingredients here. I created different screens, now first, where I'm integrating the first ingredient, the second one, the third one, then I'm going to do some adjustments, maybe the difficulty the time as well, and also the categories. I'm gluten intolerant, so I definitely want a gluten-free recipe. Then, we have the third page, which is the recommended recipes where I'm going to choose one, and here is the detail page with all the information and I can just click on "Start cooking." They're actually just three screens with a few variations. I'm already in the prototype mode because now I need to create a digital prototype, and first things first, I'm going to click on the tomato, and then I'm going to get this little handle here, and I'm going to get to this page. Then I'm going to select the Cheese here and I'm going to get to this page. Then I'm going to select the onion, it's here, and I'm going to get to this page, I have three ingredients here. Then I'm going to click on the "Categories", which is Gluten-free, awesome. Then I'm going to click here on this thing I'm going to get to this page, and then I will click on this hear and get to this page. Cool. Then I can also click on this. Let's try this out how it works, I want to go on the home screen and select this one, click on the "Play button". Then I want to click on the tomato, the cheese, and the onion. Cool. Gluten-free and 15 minutes and easy. Create recipe. Nice, awesome. Now on the next step, we will test this design on an iPad on our fridge, or have a little bit more realistic background. For that, we have slaying the prototype mode. We are selecting the first screen and we're clicking on this little arrow. There we see the flow in all the things that are connected and it's easier for us to find this. Also make sure to Save this in the cloud. You see this with the little cloud icon here and download the Adobe XD app for the iPad or for your iPhone or whatever device you want to test it. Just download the Adobe XD app for the iPad or iPhone, it's for free. Open it and open the file you saved in the cloud. This is pretty cool because you already have access to the workflow we just created [inaudible] the home screen and you can just click through, through all areas that touch areas work here as well. It's super nice for user testing. You can just click through the whole user flow and see everything works out. This looks pretty nice, Awesome. In the next step, we will test this out on the fridge. This is the item we chose for this interface and I really love to just test that out. Place the iPad here. If I'm doing user testing with free users, and it always makes sense to also place this in front of the fridge so it's as realistic as possible. The task, now, make your own design interactive and build a digital prototype by integrating those trigger areas. Use the design tool you want, and then test the design on your phone, on your iPad, or even the Adobe XD software. What works best for you, but make sure that your test is that you test out the interactive user flow before you test out the interactive user flow.
15. BONUS: Watch me work: This chapter is a bonus chapter. You can just watch me work. You can just watch me, I'm designing my own interface. You know that I designed a recipe generator for a smart fridge in my kitchen. Get a drink, lean back, and just watch me work, and so you can follow my work process and how it looks when I'm designing interface that might be helpful for you.
16. Share & Export: In this lesson, we will talk about the ways how you can actually share your design and upload it to your preferred social network, how you can do user testing and also how you can share that with clients. Here's the flow we created and there's one thing I just want to change. We combined all the screens together, but I want to change the interaction to auto animate. This works much better in the end. We want to change this on all screens before I'm going to record the final project. I'm going to click on "Plate". Then I see on the screen here, and I have different options. For example, I have notification, I have microphone, and there you can already record what you're saying. We're not going to do that. We're going to click on the little "Error Play" icon here. Then we will start with the prototype. I do tomatoes the cheese, the onions, gluten-free, and then you do the other adjustments, and the whole thing is recorded it recipe. Click on the "Recipe", and then we're going to stop the recording and save it on our screen. In the next step we will need one of the backgrounds I created for you, click "Export" and then export to after effects. We will switch to After Effects now if you don't have After Effects on your computer, feel free to download it, even the test burn. It opens automatically the image I created for you on the same approach, we're going to insert the video we just created. I'm going to place this here below in the little area of our composition, and then we will do some adjustments. First, the video should be a little bit smaller. We click on "S" for scale and then scale it a little bit down. Then we'll click on "P" for the position and also change the position a little bit because you want to place this on our fridge. Now we will do another change. We will click on the "Modi" below and then we will here, insert the 3D transformation. Then we have the option to re-transform something in three-dimensions. First, we will put this little bit in font and then we will change it. Transform it little bit to the side, tilt a little bit to the right side. This is a little bit like adjustment work. So it takes a few minutes sometimes to just find the perfect position to the left, to the right of that for fun, that it looks realistic on the first. So just try different things out. You have three axes, so the x, Epsilon and the z axis. So just try it out. You can also click on your "Alt" and then it plays the animation. Awesome. So you see the whole movie. Another thing we still going to click on the "Modi" again and then we will change from normal to multiply, and then it really looks like it's on the fridge, on the front. We will zoom a little bit in and then see how it looks. Maybe do a few changes again, change the position a bit. This is always a lot of work that it looks perfect and very realistic. So it definitely take some times, but feel free to take the much time you need and integrated to create a very realistic three-dimensional prototype. Then we're going to create another composition for Instagram. Choose the size you need, and then we're going to place the other composition in just maybe a little bit, and how we want that. Also just of the length. A little bit longer, not everything. We click on "Export" and then "Render". Then it looks like that and you can share that in your video. You can share that everywhere where you want and then we have the final video. You can share that on social media in your case study or also to the final project to this course. Now, export your prototype and share it on a social network or on the course final project area. I can't wait to see it. I'm really looking forward to see your results and I'm really excited to check on what came up for it.
17. Last Tips: Congratulations for arriving at the very last chapter here of this course. You can be super proud of yourself because you went through all the steps, you probably learned a lot about interface design, and now you're ready to design your own digital interface. Well done, and I'm super proud of you. Now, I am going to share a few last tips and tricks that hopefully will be helpful for you even after this class or once you've finished. First of all, consistency is key. Once you design a design library, makes sure that it's consistent. Consistency means reusing the same colors, the same topography, the same patterns, and not coming up with totally different ideas for any interfaces, for every sites or app screens. Be very, very consistent. Reuse the elements you already designed. I think this is one of the most important things to know and a lot of people or a lot of design certainly don't do that, which is a problem and really, really confusing for the user. The second tip for you is it's all about the process, so don't be scared to iterate to change your design once you realize that it's not working out or after you tested it with real users, and realize that they don't really understand certain things, or that design elements you created like patterns, or typography, or colors are not really working out. Of course, test your design with users, with colleagues, with anyone, and send them the prototype, and let them click through their prototype where we helpful to watch and to understand their process and what you might adjust. Once you want to design your portfolio or you want to integrate this project, you can approve in your portfolio. I also have a few tips for you. Really make sure that if you create anything for your portfolio, don't be scared to really show the process, the iterations, everything you learned, and any iterations, the testing, what worked out, what didn't work out, really show the process. Don't forget to tell a story. The story of user-centered design, you may be served with research, you came up with the concept, then you created your first prototypes, you tested it. What about your learnings, and maybe you need to go back at some point, and do some other research as well. Maybe it's just a prototype and that's a very interesting story to tell. If you want to dig deeper on how to design your portfolio, how to design case studies, how to come up with a really great website, I can also recommend you to watch my other class about the portfolio masterclass. Also here on this platform, where you can find more information about case studies, about the different processes, a lot of resources. I can highly recommend to watch this course even afterwards or rewatch it if you already watched it, and if you want to build your portfolio now, that will be really helpful for you. Thank you so much for taking this class. I honestly can't wait to see your results, so feel free to connect with me and say hi on social network, share your final project here. I'm super happy to give you some feedback and I guess the other students as well. I'm really looking forward to see your results, your process, and also see you grow as the designer. Wish you a lot of luck and success, and can't wait to see you in my next course.
Patricia Reiners, UX/UI Designer // Innovation //
