Intro to UI Design: User Interface Design Principles for UX/UI Designer (+Figma Design Exercise)

1. Promo: Today we're going to learn about the principles of UI design. When looking at other user interface design, we can usually tell which design works better. But when you start working on your own, it's suddenly not that easy anymore. I will show you what makes the difference, and together we will look into the following. Visual hierarchy and why is this key to everything. How to use color, size, and shape to create a system with special attention to typography and sizing. We will learn why simplicity always wins. Why whitespace is a secret superhero, and what grids and spacing systems can do for us. I will show you how to draw attention to where you really need it and why it is so important to add some emotion for success. We will finish off this course by designing our own co-working website from a wireframe using all our new learned skills. This course is for you, if you're a total beginner or an experienced designer, and want to brush up your UI skills. This is a course by moonlearning.io. 2. Demystifying: What is UX/UI Design?: Please note that this is a two part course, so you might either be watching the part about UX principles or the part about UI principles. Ideally, you're combining the two of them. In any case, I want to make sure that you're very clear about the two different terms, and what it means to combine them. Once you start diving deeper into the world of UX, UI, you will notice that there's a lot of noise and discussion around these terms. What exactly they include, whether or not UX, and UI should or should not be combined in one term. Let me shed some light on that from my point of view and experience. No doubt UX design is where you will begin the journey. What does UX design include? In short, you'll try to understand general patterns, behavior, and expectations. All of that to create an overall structure and order of how the product should work. As an outcome, you'd usually have some skeleton, and a form of wireframes, and flowcharts that outlined a product or feature you are suggesting. Another very important job of UX design is testing and iterating throughout the lifecycle of a product. There are no finished online products ever. While user experience, as the name states, tries to improve the overall experience the user has, user interface design deals with the actual layout elements. Now, the flowchart and wireframes previously designed come alive. A good UI designer usually has an excellent idea of what happens during the UX process, and vice versa. During the UI process you will then define style guides, color, typography, components, and the general layout for all responsive design. You'll most likely create a prototype that will be tested, which is where you link back into UX design. Just as we work hand in hand from UX to UI, you'll need to do the same from UI to development. When it comes to development, you'll hear about two major parts. Front-end development, where CSS and HTML, the so called markup is written. This is where the interface that we see is created. This is what interests us as UI designers. Then there's the so called back-end. This is where the code is written. That could be JavaScript, Java, Python, or any other language. It does not really bother us as designers. This is where all the logic behind the scenes happens. We UI designers rarely have much to do with this. Front-end, and back-end are obviously connected, and there might be frameworks in place dealing with front-end like React JS. But all of that can safely be left to the development team. You do not need to code yourself. You should, however, understand technical requirements, and basic principles of front-end design as a UI designer. This will help you in setting up your files and designs the right way. Now, in a large company or busy project, you might just deal with the UI design. You might just set up designs in Figma, and that's it. You will however, still have overlap with UX design as well as with development, and need to know your basics. You might also work as a UX designer only. In that case, you will most likely not do any design work. But you'll be busy with research, strategy, and testing, and defining new features. You will, however, still need to be aware of how interface design decisions will impact and influence user experience. If you're working in deep user research, you might just do that actually, but usually you'll be so lucky and say hi to a designer once in a while. In some cases, however, especially in smaller companies or freelance projects, you might wear many hats. When we talk about UX, UI design, it's usually this area that you see highlighted here. You'll probably start with some research, setting up personas, and setting up your own wireframes. You will then translate those wireframes into design and hand them off to development. Most UX, UI designers tend to lose a bit of the in-depth part of UX design. That is true, but usually not a big deal in straightforward smaller projects. This is also the area that I will be dealing with during those two courses. Please note that in depth, UX research is it not a part of this course. It is true that in some job postings the term UX, and UI are often confused. You might see UX design advertised yet they're asking you to set up anything from wireframes to finish handle files. If ever in doubt, just draw this simple diagram here on a sheet of paper, and show your potential client or employee where you are operating, and make sure this is the area they're also looking for, and not only a buzzword they were using. Also, let's be honest, it's usually not a straightforward process where things get handed down. Also in most company they don't even intend it to be that way. There will always be a lot of back and forth, and a lot of discussion. This is actually a good thing because only when UX, UI, and development work hand in hand, really great products come alive. Don't listen to the gatekeepers, Find your passion, and enjoy the overlap, and learning from different fields of digital design. 3. Hello and a word on Gestalt Theory: Today we'll be looking at the key UI design principles to create hierarchy and harmony in our designs. The principles that I will be introducing to you are mainly based on the famous Gestalt theory plus some relevant extras. But let's start with the core of everything. What is Gestalt theory, and why is it still relevant so many years later? Gestalt psychology was founded in the early 20th century in Germany and Austria by Max Wertheimer, Kurt Koffka, Wolfgang Kohler. Gestalt is a German word and means as much as shape or form. As a verb, gestalten would mean to design. In a nutshell, what Gestalt theory says is that we perceive entire patterns rather than single components. A set of rules was established about how we perceive those patterns. These rules are really static later, for example, in the '90s, some more were added by other psychologists. At the time Gestalt theory was documented UX UI was not really a thing yet. This is really important to understand. Gestalt theory is not a trend, but the foundation about how our minds read and interpret things. Thus, it's the core of UI design. Once we understand those rules on how the human brain interprets patterns, we can play with them to create and structure our design. The principles that I will be presenting you are mainly based on Gestalt, but it also added some other relevant topics and findings specific to UI design. We will be looking at the following aspects to create hierarchy and harmony in our layout. The aesthetic usability effect and why we even bother with design. What actually is visual hierarchy? The law of Pragnanz and why simplicity is key. The law of similarity, color, size, and shape, and the role they play in our UI design. We're going to have a closer look into text and touch target size and how to set that up in design. We're going to talk about the law of proximity. Here we're going to look into spacing systems and grid systems and why is so important to use and how to use them. The law of common region. We're going to create sections and talk a little bit about whitespace and gentle spacing in our layout. The fun rest of effect. This is really important to draw attention in your design to where you actually want and need it. The law of common fate. This is really important when interacting with the user for behavioral prediction. To finish off, we're going to talk about adding some emotion to your design. 4. Aesthetic Usability Effect – Why even bother with design?: The aesthetic-usability effect basically states that when users find an interface visually pleasing, they will assume that the product is more usable. In other words, if it looks better, people think it works better. This is really a decision we make in milliseconds. Now, this is not a free ticket, but it basically is a bonus of trust you can get and then make sure you back it up. This is also the reason why simply coloring in and adding some imagery to well-designed wire-frame is not enough. Here we have an example, the product on the left and right-hand side are exactly the same in content and features, yet they get a very different sense of comfort and trust. The aesthetic-usability effect also shows that people are more tolerant of minor errors and problems when dealing with a design that they find aesthetically pleasing. Note that we're talking about minor issues here only, however you need to be aware what sounds like generally a positive thing for you and your end product can actually be a hurdle doing usability testing and something to be aware of in research and exploration phases. What does that mean for us? Even if usability is our main focus, our UI design still needs to look good to get user started. It is the first impression and it makes them more willing to try our product in more tolerant small difficulties, so UX and UI need to go hand in hand for a truly successful product. How about keep the aesthetic-usability effect in mind when testing and researching? Your test users and yourself are likely to react biased, an opinion that something is easy to use is not the same as that it is actually easy to use. That's why it is so important to first design the information and features you need, like in a wireframe, architecture flows, etc, so basically all your UX work. Then based on that, you go ahead, brush up your design for your target group in appealing and aesthetic way and not the other way around. On top of that you can or rather should then of course test and iterate, but make sure to start with the foundation and not the makeup. The insured aesthetics are means to an end, but not to end goal. Let's summarize. When it looks better, people usually think it works better. Users are more tolerant; stress on minor not major errors, when dealing with an aesthetically pleasing design. This is generally a great thing but can also lead to distorted results during usability testing and research, so be aware of that. 5. What is Visual Hierarchy?: What is it that makes the difference in design? What is the secret behind a perfect distribution of space, size, and contrast that seems so pleasing to us? The core of it all is a working visual hierarchy. Visual hierarchy is a method of organizing design elements to communicate an order of importance. When starting a project, you will most likely be bombarded with important information that needs to be communicated. The brand, a prize, the logo, the product, the copy, the testimonials of happy users, and so on. As you keep on adding them, your page will feel quite cluttered. The problem is that in this way, everything on your page competes for the user's attention. Use a little trick. Just imagine that all the elements on the page talk or scream according to the importance you gave them. In this example, this will probably sound quite unpleasant and be pretty overwhelming. Instead of creating a battle of random attention, visual hierarchy allows you to add all information but in such a way that it creates a peaceful foundation that is easy to digest and draws your attention to the highlights. Let's look at some real-world examples. Here's an example of WIX which is a website builder. As usual, I have no relation to this company at all. I'm just showing you this because I think it has a great hierarchy. Now note how the hierarchy is built here. We're starting with a main large headline, our age 1. There's some copy text which is smaller and you're probably not going to read. Then you have here the Call to action. Note how this sticks out. This is probably the most important element on this page, even though it's small, it's using the highlight color. This is the only point where we're using the highlight color on this first side of the page. This so-called hero section. Of course, we're having some imagery. This is really to get us into the mood to show the product. As we scroll down, you can see that not only the color changes. This shows us really clearly that this is one section and we're entering a new section here. But also look at the topography H1 main headline. Then this is probably H2. You can also see that these are at the same level of importance. Then you can see here I'm adding more information but it goes down in hierarchy. As we scroll further down, you can see that here now they're showing us the templates, and note how none of those templates is sticking out. There's no special offer, nothing that is really sticking out to us. This is all the same. This is a collection of templates. You can really see how this hierarchy is working throughout the full page. For example, if we're further down here, you can still see that this is an H2 copy text and call to action. Even if we go to another subpage here, let's go to just the first one that we find. You can see that again, we have a hero section and you can see main headline, some introduction text, call to action, and imagery. Then as you scroll down, you can see how nicely it works. Again, we're having main headlines, sub-headlines, and it's all really great system that we can browse. Let's summarize. Visual hierarchy helps to organize elements to communicate an order of importance. It guides a user's attention throughout your page. You can really steer that the way you want and need it. It's visually much more pleasing. It helps for easier scanning and understanding. You'll be able to draw the attention to the highlights that you really want to communicate. 6. Law of Prägnanz – Simplicity is key! : The law of Pragnanz or sometimes also called the law of simplicity states that preference is given to forms with a memorable and simple structure in order to avoid overwhelming. Our eyes will break down complex shapes into simple ones. Research also shows that people are better at processing, and thus remembering simple shapes. Your eye is scattered and will be less pleasing because our mind is constantly trying to organize it. Unless you have a good reason for fancy shapes, stick to clear lines and straightforward shapes and layout. As you can see this way it's much easier to process all the information of what's exactly happening on this page. It is a win-win situation because it makes your life so much simpler when it comes to programming, and know simple shapes will not make a design boring. You can bring dynamic with different sizes using those different shapes, color, and spacing. Let's look at an example. This page is pretty much made up of one kind of shape, namely a rectangle with rounded corners. As you can see it's not boring, but it's very clear, very easy to navigate and grasp and there's a lot of opportunity to play with those simple shapes. They're using thighs, they're using color, and they're using certain feelings of images in shadows and playing with the topography to bring this layout alive. As you can see, we can take away a lot of cognitive load from our mind that will be busy otherwise breaking down complex shapes into simple ones. Let's sum up. The human eye simplifies complex shapes into simple unified shapes. Simple forms lead to a lower cognitive load, so try to use forms with a memorable and simple structure to avoid overwhelming the user. 7. Law of Similarity – colour, size, and shape: The law of similarity is one of the original Gestalt principles when it comes to grouping. It basically states that elements that are visually similar will be perceived as related. Your main tools to create this feeling of belonging will be color, size, and shape. Note that the order I am presenting you this is not random. Color is the strongest communicator, followed by size and then shape. You can of course combine them. Let me show you this little example here on how powerful these small changes can really be. As with everything in UX UI, the key to all of this is to have a clear style guide when you set certain rules. For color, for example, you have a set palette and then define colors to use as neutrals or your highlight colors. It is a good practice to use highlight color as a method to communicate to the user what is actionable and clickable. So I would not randomly use my highlight color on a headline just because I think it would look nice. But I would use it for example, on a clickable link or on a button. This shape apply to a button throughout my page will also identify as part of a group and thus, I will expect a certain group behavior, the same for typography. This is a topic that keeps on coming up because it's a very important part of our UI design. You can have set styles for headlines, copy text, and buttons and so on. Also, all the components on my page will have set rules on how they use color, shape, and size. Let's look at a real-life example. Here we are on the Spaces website as usual, absolutely no relation. I'm just showing you this because I like the UI and think it's worth looking at. Now let's go through this strategically and first look at color. What did they do with color? They chosen this mustardy yellow as a highlight color. Now, I need to say one word on contrast and accessibility when looking at this. It is very important that when you choose your colors, that you are checking the contrast and accessibility. You can Google and choose a contrast checker or also try a plug-in, for example, in Figma to check your contrast and the contrast needs to be high enough. These contrast checkers will tell you if it's high enough to make sure that it is readable for everybody. This one, to be honest, is probably not going to pass because this mustardy on white is definitely not readable for everybody. You can see that in my style sheet for my colors, I mark this as on color so what color can go on top of which one. If you want to know more about accessibility in color, I have a full course on color in UI design. However, with this color, what they're doing really well is they're using it only for actionable and clickable elements. So you can see all the buttons. Then, for example, here I can see the offices if they are available, I can see the location. This is a link I can click, and here again, this is a link I can click. This is color. Then the next one would be size. What are they doing with size? We can see that there is a really clear hierarchy from the first headline going down here. Then we can see, let me check this here, smaller headlines happening down here. What's happening with shape? In shape, they're really sticking most of the time to very simple triangular rectangular shapes. But then we also have these little icons, for example, that show us the different offices available. Here you can see here, they used a round icon so I can see somehow these symbols must be related. Also shapes like effects, like if I hover, I have a little shadow. I can see that they are related. Here, for example, we are having shapes as these drawn shapes. So here we also get to different locations are shown in this style so they create a really nice and simple hierarchy. Let's sum up. Visually, similar items will be perceived as related. You can create this feeling of belonging together with color, size, and shape. Also, orientation, behavior, and movement can play an important role. Use a style guide or design system for systematic and consistent approach. 8. A little more on text and button size: Size is a very important element when it comes to creating hierarchy. Larger elements are perceived as more important than smaller elements. This can be used with images, texts, or blocks of information. Let's look at an example. Here we have a homepage where images and texts are in order and styled, but they're relatively similar in size. If we add some hierarchy through sizing, we achieve something like this. You can see that this immediately helps us to scan important information and focus. While this is quite straightforward when it comes to images or blocks of information, typography is really where you need to focus. What does this mean and how can we achieve this? Be very clear about which ones are your headlines, sublines, intro, or kicker text. Also note that the perception of size can be achieved by using something like a bold text over a regular text or uppercase letters. To make sure you're being consistent and strategic with your typography and sizing throughout your design, make sure to use a type scale to set clear rules. To do this, we will start with our base font size. This is the most common text, which is your standard body or copy text. Per default in almost all browsers, this is set to 16. Depending on your typeface, you could theoretically go a little larger or smaller. But 16 is generally a good base size font to work online. I usually try to leave it at that. This way, I know that I will have good readability, and I also know that my base font size corresponds to one rem, which is the root value, the value set in the browser for the root font size. Once we decided on our base font size, we then add the other sizes. The H1-H3 are the headlines, 1-3, and this is what are called an HTML. The H1 is your main headline, your main intro. Generally, you should only have one H1 per page. This is also for search engine optimization reasons. But then you can have as many H2s or H3s as you need and you could even add more. So if you wanted more sub headlines, you could add an H4, or an H5, and so on. The actual size and weight that you assign to that style is really up to you. You could assign them completely randomly to your needs. You could use a ratio scaling system, or like in this example, you could go in steps of eight. This goes really nicely with my eight point spacing system. The important thing is that your H1 is the most prominent one, and it then runs down slowly in importance and hierarchy. You can also add other things like links or buttons, captions, and quotations. How many you need really depends on your design. What you see here would probably be the bare minimum. You can really grow your type scale to your needs. However, try to keep it as simple as possible as it can get quite messy otherwise. When deciding on your sizes, you need to keep in mind that you're designing for different screen sizes. Usually, we design at something called mobile first. That means you set all your sizes for the smallest screen and then work your way up where you need changes, you would add that. There are different strategies on how you can set up scales for responsive design. If you would like to learn more about typography in UI design, then I have a whole separate course on that, going through different units, sizing techniques, and responsiveness. Besides hierarchy, it's also important to remember that sizing plays a major role in usability and accessibility. All of your touch targets, such as buttons, or clickable icons must be large enough for users to click, not only with their mouse, but also with their finger on a tablet, for example. There's a lot of research out there how large this really should be. It can differ a bit, but not significantly. I am using the number given by the human interface guidelines by Apple design, which at the moment states that 44 point should be an ideal target size. Now, note that it's fine if the item itself is a little smaller. The important part is the clickable area, so you see that on the very right here. Just make sure that the area that your item is placed in is large enough. This is especially important when adding clickable elements next to one another, like a row of buttons. Always make sure there's enough space between them in order to not frustrate the user by accidentally activating the wrong button. Now take note that I am talking about point here, and we're designing an UI software at the so-called 1x where 1 pixel equals 1 point. A lot of the time people ask what will be the physical size later on that I see on the screen? Well, it's a little difficult to answer because you cannot translate pixels or points as such into centimeters or millimeters. But it would roughly equal something around one centimeter. That is really a good clickable size. But this is really just something to get your head around and imagine it on a device when you're testing, for example. In your design work, use something between 44 and 48 and you should be on the safe side. Let's sum up. Larger elements are perceived as more important than smaller elements. Be systematic have a clear hierarchy. Generally for everything, but especially when it comes to typography. Remember to consider different screen sizes. Make sure your touch targets are large enough. 9. Law of Proximity – Spacing systems and grids: When placing objects in our layout, we need to consider the law of proximity. It simply means that objects in proximity to one another will be seen as a group rather than individual parts. This effect is one of the original Gestalt principles and it's great to create a sense of grouping and belonging. How can we use this when it comes to UI design? We can use it to group similar items of information intersections and declutter our layout. The law of proximity can be applied pretty much everywhere throughout your design. Like here you can see that even though my text has hierarchy applied in terms of sizing, you will still perceive it as belonging to the upper part of the layout. Whereas now, it becomes part of the picture library below. Just as proximity can create a sense of grouping, you can also achieve the exact opposite by adding negative or whitespace, this can be really handy. For example, between sections in order to create a clear distinction. Pixels don't cost extra, so use them and let it breathe. Negative space or whitespace really makes the difference in a design. As with all design elements, using space should be a systematical approach. A system that only adds consistency to your design but also makes it easier to set up components following the same set of rules later on in your CSS. There are two tools that will determine the positioning and distancing in your design, the grid system and the spacing system. Now, the two of them often get confused and it's important to understand what each of them does and that they work hand in hand most of the time. Grid systems set the horizontal distribution and broader layout. The grade you're using is up to you and your development team. You would place your items within the grid and then use the set gutter as a horizontal distance. However, for your vertical spacing and for the spacing within the items, you would use a spacing system. The spacing system is basically a multiple of your base size that you define. In my case, I like using and highly recommend using an eight-point spacing system. My smallest size and base size is eight as a distance, and then everything else is a multiple of eight. There are many advantages to why you would use an eight-point scaling system, or also a four-point scaling system, by the way, is lately quite popular. These two spacing systems scale amazingly well with the browser font size that is usually per default set to 16 and is a multiple of four and eight as well as icons you usually find in 24 or 48-pixel size. Another aspect is that those numbers scale really well when exporting assets to other resolutions, as you can scale it up, but can also scale it down to, for example, 1.5 when it comes to Android. This way you avoid half pixels and blurriness. I have a separate extensive course on resolution and spacing systems, as well as an in-depth cause on grids. If this is new to you, definitely something to check out to get some greater understanding. Let's sum up. Objects in proximity to one another will be seen as a group. This is great to create a sense of grouping and belonging in your layout. Whitespace is king, use it. Add space between sections. Add consistency with the grid and spacing system. 10. Law of Common Region – Creating sections in your layout: The law of common regions states that elements with defined region tend to be perceived as belonging together. This was not part of the original Gestalt Theory but was added later by Parma in the '90s. Common region is a powerful tool that gives clear structure to the user, to what belongs together. It can seem like a minor layout technique to highlight things, but it makes such a difference. Common region can be anything from an outline to vase, subtle gray tone in the background that devise your page intersections. Creating those sections is a great helper to the user in order to not being overwhelmed. Just play with it and you'll see the difference it makes. Let's look at a real-life example. This is the oatmeal page, as usual, no relation. I just really like the UX and wanted to show you. You can see that they're using very subtle gray background color and then just the white background color in contrast to it. You can see that this creates really nice sections. You get a very, very great structure without even having an element that you're consciously noticing. Now, besides this like full background color and creating sections, Common region is also used in smaller elements, as you can see here, for example, this is giving a Common region and a shadow, and it clearly shows that this is a section belonging together. Also, let's see here if we go on trains. You can see that it creates more cards. Whenever I'm having this region, then this is a topic, having those topics still sit in yet another common region, the background here. You can see that they can overlap, but it's very clear that it belongs together. Further down. For example, we have a table, and here we can also see that this row is highlighted with a common region, making it very clear that this is some information that belongs together and is relevant to us. Now, also note that it doesn't necessarily have to be a block of color. Here, for example, we just have lines, but this also create a common region. This is because of the so-called Law of Closure, which is also a Gestalt Theory law. What it does, it means that our brain will complete, incomplete shapes to create a shape. You can, for example, see down here, that this will create a common region, even though there is some open space in the shape. As you can see, you can really play with it, the only thing you should be a little careful about is not to overuse it and not to nest common regions within one another. If you wanted to create further sections with inner common regions, I would like to show you this example here. You basically need to be aware of some sort of hierarchy, you creating them. Here you can see that they created this common region like this outer box, and they used a shadow and some depth, so that makes it very prominent and very powerful. Then they wanted to create two subsections within that common regions again, and what they did is not reuse that effect used for the main group, but they use something much more subtle, like, for example, a soft change of color. You could also just use whitespace most of the time, that is more than enough. Further down here you can actually see that they didn't use this approach, what it did is they use this same outer common region and an inside, they started dividing with a similar approach of lines. You can see that it just gets a little more cluttered and it's just not as clear and clean as what they did up here. You can see that it's a very straightforward, yet very powerful concept that you can use on pretty much any design. Let's sum up. Elements with a defined region tend to be perceived as belonging together. This simple technique is ideal for structuring your layout. A region can be a full background color or an outline. 11. Von Restorff Effect – Drawing attention where you need it: The Von Restorff effect, also called the Isolation effect states, that within a group of similar items, one that is different will be most remembered. A classic example is one of a pricing table where you want to highlight the offer that you want to stick out most. What happens here is that everything follows the law of similarity to show that we're dealing with the same family, naming pricing choices. Then we just color in one of these cases to highlight. Here we gave it a red border and we highlighted the button. By highlighting this choice, it will be given more attention from the user, stick out and be more likely to be remembered. Let's look at some real-life examples. Here we have a Christmas offer. You can see that even though those boxes are almost the same, you'll give much more attention to the upper green box. This is because of the prominent color. We're also having a pre-selection here and we're having something indicating a very good value. Another area where we use the Isolation effect is if we want to show discounts or anything special about a product we're selling in an online shop. Here, for example, you can see that this is a normal cart selling the item. If we have a discount, we're adding some red here on the prize, and this automatically draws our attention to this product. The Von Restorff effect doesn't have to always be something related to pricing or very flashy offers. It can also be used in a very subtle way like you can see on this page, where the product is very simplified. Then we just add some images where people, for example, wear it or a little more of a mood picture that draws the attention. It can really add some dynamic whenever you have a set of similar items and want to highlight one or a few of them. Let's sum up. In a group of similar items, the one that is different will be most remembered. This is ideal for drawing attention to your main features. Color is very effective, but make sure to consider accessibility issues. For example, color blindness or sufficient contrast. 12. Law of Common Fate – Behavioural prediction: The law of common fate states that two or more elements behaving in the same way, are perceived as part of a unit. It doesn't matter how far apart elements are placed from one another or how different they are in appearance. If they move or change together then they appear as one. This is especially important when we're talking about designing for interaction with the user. A classic example for this are slideshows or FAQ drop-downs. As soon as you click one and see that it opens, you will know that the rest of the group will behave exactly the same. Another nice example is the Headspace website which uses this a lot. As usual, no relation to the product, I am just showing you great UX. Here you can see some quotes, for example, and as I click, they behave and move the same way. Further down, I can see this section here where if I start clicking on one button, it reveals new information. I will know that this is probably going to happen to all of those buttons here as they behave the same way. Let's sum up. Two or more elements behaving in the same way, are perceived as part of a unit. Elements must not necessarily look the same nor must it be in proximity. This can be used as a layout effect or as an enhanced interaction. 13. Visceral reaction – Emotion in your design : It is important to build your product following the common U, Xi principles. It will give you a solid foundation and framework. However, to really make your design stand out, you need to evoke a visceral reaction. Visceral reaction means that you want your design to create a feeling that has nothing to do with logic and is not the result of thought, but rather a gut feeling. As much as you can strictly follow the rules when it comes to design principles, this is just the opposite. It's hard to predict and hard to test, but it's basically the identity of your brand that you're communicating. The heart and the soul. Think of it like a person. It's most likely a combination of the way he or she walks and talks, looks, there's something funny or something cool. It's very individual and also very different if people like it or not. So make sure you know your users and your own brand. It's really about being authentic as a whole. Let's look at some examples and different ways to evoke visceral reaction imagery is the most straightforward and important way to really draw your user into your world. This example shows it really well how you can use imagery in different sizes to really draw them into the experience. Like here we get the adventure and the temperature and just the whole experience feels really close. Also note how they use the color of blue and orange, like warm and cold, complimentary colors, really well in communicating this message. Video is even stronger than image alone. Here you can see that video is used to really communicate a mood rather than simply showing the product. Also noted the colors in the video and how on the whole page these are repeated. It's all about really soft colors, beige like even in head, and a very calm atmosphere. Having a specific person or character that guides you through the product or the experience is also really great for creating a bond with the user. You'll see this a lot around personal development such as sports. It might be the actual person, but it could also be an invented character. Headspace does a really great job on this and invented does little characters that lead you through the meditation. Typography can also be a great way to communicate a feeling. It usually ends up being a little more modern and a graphic look, but it doesn't necessarily have to be that way. It's also about how your text is written. Is it funny? Is it poetic? How does it talk to the user? Even if you're showing a product or software, you can be really creative in the way that you're showing it. The importance is to be consistent and to create a feeling. Let's sum up. The visceral reaction is a gut feeling that sets the mood. What, or who makes your brand use imagery, video, color combinations, typography, and tone of voice to set this mood. This is the cherry on the icing. Make sure it's built upon a solid UxUI experience. 14. Download Material: You may want to work alongside me, so I prepared some files for you to download. In the course you're taking simply navigate to project and resources and there, you'll find all the information and the link where can download the material. Or you can navigate to my profile where you'll also find a direct link to the download page. In this page, you'll find a variety of downloads. You can simply pick the course that you're currently taking and then just click "Download" and it will automatically download the file for you. To open a Figma file to download it, it's important that you have a Figma account. Inside your account, navigate to new, and press "Import." You can then choose a file that you would like to open. It might take a moment as they're quite large, but once you imported them, they will be on your account and you do not need to repeat this process. I am working with Google fonts for most of my designs. If you're working with the Figma app, then you don't need to do anything. All Google fonts are pre-loaded automatically. If you want to work with Figma in the browser, then you just need to search the font that it's showing you as missing. For example, Poppins, I use a lot and then you can directly download this font install it on your computer and you're ready to go. All resources are free for existing students and you do not need to enter any additional information. You can of course also download any of the other files in case you're interested. Under general I always add anything that I think might be useful. There is, for example, a Bootstrap template and then a list with links for inspiration books and blocks that are really great for UX UI design. This list of downloads is steadily growing, so make sure you come back and have a look from time to time. 15. EXERCISE --> Figma co-working website: Let's put all this theory into practice. I prepared a Figma 5 for you. Use the import function to see the file and we can get going. In this file, you find the exercise on the first page. Our exercise is that we will be setting up a design for a small open office co-working space. We're given a brief with all information on available materials such as images and other brand elements. We also had our imaginary UX team working on this and they gave us a basic wire frame to start from. You can now apply the principles that you learned about in this course to set up your first design. I summarize them for you here in the exercise description again. On the second page of the file, you find a suggested solution that I prepared for you. This is only there for you to get inspired and curious about how one might approach this task. There is no such thing as one solution to design. Yours might be just as good or even better than mine. Really make this your own, try to stick to the principles of design, but feel free to rewrite the brief and make a whole new project for your portfolio out of this. You are in charge now. Enjoy. 16. Wanna add some UX? : If you're curious about finding out how that wireframe from our exercise was created in the first place, and what else you could do to improve your UX then I recommend that you take the first part of this UX/UI intro. You can find our UX intercourse right here on Skillshare. Simply search for moon learning and you'll see all courses up to now. Within those courses, you will see the UX course up here. Within that course, you will find all the principles about UX/UI design. In the end, an exercise where we will be talking about how to create this wireframe. 17. Thank You!: Well done for finishing this course. Feel free to reach out to us at moonlearning.io, we're always interested in hearing your feedback. You would also do us a great favor if you could just take a minute and leave a review right here. If you enjoyed this course then also make sure that you have a look at our additional courses. At moonlearning.io, we cover all subjects from the very foundations of UX/UI design through to Figma and even some code basics. Make sure you visit our website at moonlearning.io, where you can also sign up to our newsletter.