Transcripts
1. Introduction: Gestalt Principles & UI Sketching: welcome. And thank you for taking this course. I am Christina. Set away feeling. See? Wise designer and online teacher. I am passionate about what you are thinking and I scheduled during my UX work. The main goal of this course is to practice and develops catching skiers by going through the different national principles. I invite you to draw along with me throughout the course. After it will warm up and talking about our tourists. I'm gonna introduce you each guest, our principal bomb by one and then creates catches represent each off them. I've you include men user interface examples I chose guest our principles to create a framework for this little sketching practice activity. Because knowing these principles is really useful for you X or the Y designers. Now you talk a bit about guest, all CRE then we're gonna start the warmer phase. So if your family are with this theory, just jump to the next lecture. Guess start is a German word for shape and figure the series about how different elements are perceived by our brains when combining them in a certain way or order one off the first guest, a psychologist famous sentence sums up the Serie Pretty well, the whole is other than the sum off the part. This idea can be applied to you. I design as well. The elements off a user interface together determine how user can interact with the system . Guest of principles are rules off human perception. Our brain is butte to see patterns, structure, form and logic in the world around us. You can think off it as a vision optimization. The unconsciously perceive our word in a way off. Constructing meaningful things object by combining the individual part. When humans perceive the word, there are so many inputs coming in. Instead of analyzing these signers as individual parts, our brains start to organize the inputs to form unitary groups. The guest, all principles help us to understand how we do these grouping. How the human eyes see. It's like when you see one off your friends or family members. You don't only see his or her nose or eyes. You perceive and recognize the face as a whore. So to sum up in the following lectures, we will go through the most important national principles for two reasons. One. Use this approach toe practice, sketching we're going to sketch a lot during this course, and the second reason is that knowing these principles, well, we'll help you design better digital products, since the guest outlaws influence the user experience as well. I would like to know that the principles included in this course are not the originalist off gas style principles. The list has changed over time. These are device I found useful for practicing, sketching, and at the same time, the vans that are good Toby ever off as a UX designer by these glacial series of perception are criticized for being redundant or too descriptive. In my opinion, thinking about how human beings perceive what they see can improve our mindset as you X or a Y designers. And one more thing. If you want to further develop your sketching skills after discourse, please check out my newsletter on my website dedicated to sketching for us as designers. The USA rallies sketching for you eggs dot com before I talk about each principal, for I would quickly show you what to assume you need, and we're gonna do a little warm up as well
2. Tools and Warm-up: So what does we you need? The simple answer is that any kind of material you do the job, for example. Then Room used the napkin to sketch out his ideas, then wrote a book about it off course quality tools. We and make your sketches more organized and present able. But for the purposes of this course, any kind off paper and then we'll do the job. So these are my advice is you should use blank plain paper copy paper is fine. I found that route or square papers can limit your creativity and imagination. White boards are also great surfaces for sketchy, as for depends again, any pain you do. But I recommend using two different and sickness for the purposes off this catching activity seen for the smaller the tests and the normal middle sized pen. For most of the things we're gonna do, it's nice to have one plan for shading, but it's really not necessary. It is also good for emphasizing and to add deaths and dimension to your sketches. I also recommend using one color. I have used his blue. You should not choose the red because usually it indicates a roars and green is not the best choice either, since it's usually sign us a successful interaction and you don't want to create confusing sketches. Now that we have our tools, we can dive into sketching. So it's time for you to warm up fearfully to draw along with me from now on. So what would the whore course? We're gonna start with the easier thing, I thought. Then pull out race From the starting point like this, you will notice that some directions are harder to manage. Try to keep your lines straight. You should have a trace now. Then throw circles around the race, starting with a smaller one than making slightly bigger and bigger ones. As you can see, the race serve as guidelines so you can check how perfect your circles are. Let's just do one more round now a little bit quicker. Now we're going to continue with part of their allies. Throwing part of our lives will improve your hand control, and it's a very useful skill to master, since you will include a lot off bottle allies in your your eyes. Sketches. First we started vertical lines. Our goal is to make the distance between them even you will not is that it gets easier, thanks to the so called muscle memory. Then roll horizontal paralyze. Now try to grow longer lines. It's much harder to keep them straight and do it in a dynamic way. Don't slow down. Making part of the Allies improves your coordination skills as well. Finally, we gonna throw some dire gonna paralyze. This technique is actually used for shading, and it's called hatching, and if you draw a second set off lines, it is the so called cross hatching. So, as I said in a previous lecture, it's nice if you have a pen for shading, but it's not a must. You can always apply hatching or cross hatching after dots and lines. Now we're going to quickly sketch out some basic shapes. First circles started smaller circles. These are almost like points. Then you can skill up gradually. If you are still uncomfortable with throwing your circles, start making circular moves with your hand. But don't touch the paper with your pen during the 1st 5 or 10 moves. If you think that now your hand got the right move. Lower your pen so do something like this Now it's time for triangles. First we throw actual literal triangles, so all three sides should be somebody equal in size. Then you can experiment with different sizes. Try to end your line where you started it. If you find it too hard, you can always start with three points. Finally, we're gonna draw some rectangles and squares. When you sketch user interfaces, you drew a lot off rectangles to represent buttons. Ahead are pieces off content and so on. First through a set off squares, then some rectangles again. Try to end your line where you started it. It's also important to create somewhat part of our allies. Otherwise it won't look clean. After the squeak warm up, we're gonna start with the law off simply City.
3. Gestalt Principles: Simplicity: the Basic Law of Gas Start is simply city. So many things are competing for attention in our surroundings and we have limited capacity for processing the incoming input. Therefore, our mind interprets the things we see in the simplest way possible. It also means that we perceive things as a whole. What is a collection of different parts? Just think about the face. Example. For instance, Drew on object this way first drew a triangle, then create a 2nd 1 by adding these two lies. So what do you see now? You don't see one horizontal and four diagonal lines you see appear meat or a tetra hydro on, then through a sore crew and little triangles around it. Now you see a son with the race off sunlight, not the circle and many try angers. It also works with letters. This is the letter a not too dire. Ghana and one horizontal line simply cities about offering easily recognizable figures for the human perception. Our mind is searching for the simplest, but also the most relevant way to interpret what we see. This is how your eyes and websites work. When we see a logging form, we recognized the pattern. We don't see just three rectangles. In some marks we see the input fields, the field, labourers and the bottom. Another example is a slide there or cardosa. We'll see you there. Knows this you I pattern. It wouldn't be interpreted as to try Angers see circles and direct anger our next principal disclosure.
4. Gestalt Principles: Closure: the second national principal recover disclosure. This law states that our brain feels the missing part to get a complete figure, and it also creates a combination off part to establish a whole closure is applied in the right way if there are enough pieces to create a whole. So when we see incomplete or not close shapes, we're gonna try to perceive them as complete objects. If there are enough information. Obviously we need to have prior knowledge and experience about the given object so we can feel in the missing element. We can interpret blank or empty our US as shapes as well. This is how negative space works. For example, this is a rectangle or a container. It's not complete, but our mind fears the missing part. There are many logo designs that applied the idea off negative space. For example, just throw two arrows and then two rectangles like this. You can see the letter age emerge. Obviously, we can use these for icons or any graphics. We perceive these objects as a stack off rectangles or documents, even if the objects behind the 1st 1 are incomplete, for example, it is a basket icon next to logo and icon design. Recai was this principle when we won the users to stop for a moment to stimulate their creativity and thinking so that we can grab their attention better. And at the same time, we can include Ah, little interesting, clever solution to possibly create a more delightful user experience. We also use disclosure, maybe show notifications on the phones or tablets. You I by the circle and the number. Hi. It's one part off the icon. Our brain has enough information to create a four, my overlapping the element. We not only use the available space in a clever way, but we also apply the law off proximity. We're gonna talk about it in a later lecture. So whenever you overlap to element on a u I, I always ask the question. Are there enough information to recognize the objects in the back? Our next spring support to cover his figure ground
5. Gestalt Principles: Figure-ground: the figure ground principle states that our mind tries to separate the figure from the background. The figure is the element we focus on, and the background is the figures surrounding this way we can drive, Do you? There's attention. Seeing things as figure and ground helps to separate the most important inputs from the vans that can be ignored when I use the encounter. So user interface, the mind immediately starts the separation process. If we compare the size off these two components, the smaller is going to be perceived as a figure and the bigger one as the ground. As you can see here, the star is the figure directing girl is the background. However, in this example, the smaller rectangle is a figure, and the other one is perceived as the ground. This low applies for icon design as well. Traffic science also work this way. Now let's look at some you examples. This is how a court action button on the landing page works. Pop up or model windows are another example. In this case, the previous figure temporarily becomes the ground we use for perhaps armadas instead off completely replacing the content tohave the users in the orientation. It communicates that the user is still on the same page. The context hasn't changed or look at this example. We immediately know which parts are the messages, so we can focus on the important content by the figure is the content we wonder users to focus on. The background also has an important role. It can communicate the brand, said the mood, or contain some additional information. The figure ground status is not necessarily stable. Some clever illustrations use this aspect. For example, look at this mark chat logo. You can take a look at other negative space logo designs. You see how the figure and the ground changes, the next principal, its proximity.
6. Gestalt Principles: Proximity: the law of proximity is very important in user interface design. It states that the objects that are closer to each other are perceived us more related or connected, then the objects that are not positioned near them. The elements that are placed closer are seen a sparked off the same group or category, and not as individual objects. This principle also applies when the elements don't share other characteristics like size or color. The relative distance is enough to make this rule work. An example for the stool is the way we compose words from our letters and sentences. From the words, We put spaces between two words. So it's easier for our brain to perceive them as this thing groups off letters. So it haps comprehends ability. Obviously we carry them get the meaning off a sentence which doesn't contain any word spacing. But proper spacing certainly improves readability. Here we can see three comes off rectangles and here three rows, creating categories and grouping is a significant aspect off you X and the Y, designed by applying differently stances and using invites space. Appropriately, we can make the rule off proximity working away that supports our content connected controls shouldn't be placed too far from each other. We've under user toe perceive them as related. Another example is the Y off instagram. The items that are placed close together specially are perceived as related or think about how high temps on Amazon are displayed. The image, the price, the description and the ratings belonging to a certain item are pleased In a way to show relationships, we use the low off proximity. When we place the labours near to the form fields the next principal I gonna talk about this similarity.
7. Gestalt Principles: Similarity: The principle of similarity suggests that if two objects have similar characteristics, these objects are perceived more related than the Vance that don't have these same qualities. There is a wide range of characteristics we can think about. It can be size, color, texture, shape, funds, orientation, transparency, drop shadows and so on. We not only group the similar objects together, the also think that they might have the same function and rule, for example, a consistent typographic. Higher are he really supports the comprehends ability off a website or an application. It's clear which elements are the headlines, which are the body copy. Which ones are the tags, the links and so on. Similarity is a great way to show the different relationships in the content. This rule also explains by consistency is so important, for instance, was the user knows how link is designed. It can support the whole navigation process since the other links will be easily recognizable, making prominent what parts off the content are more related. You make the whore content more comprehensible, so you're gonna end up with a better use That experience, for example, it's easy to distinguish the block posts from the other U Y component in this example, If you watch a video on YouTube, you perceive the videos on the right as belonging together because of their similar size. And maybe you already noticed that these guesthouses principles often worked together. The combination off two or more was have a bigger effect. For example, similarity is often combined with proximity. These related videos are not only similar. They are also pleased close together. Another example is a message application. There are different icons on the bottom left, which are similar their size and their color is the same, and these suggests that they have similar functions. They can be used to add things or to modify your message. The similar characteristics off icons can also communicate certain five types the next principal we gonna talk about its continuation.
8. Gestalt Principles: Continuation: the law of continuation or good continuation means that the elements placed on a line or on a curve are perceived us more related, then the elements that are not aligned in that way. The principal also suggests that our perception of shapes is continued in the implied direction. So we follow the line or the curve even beyond the last parts off the composition. Maybe the easiest example is a dotted or dashed line. We perceive these lines as unified shapes if the parts are not too far from each other. For instance, Google Maps he was thes dotted lines to show the past. The other, very basic example is the very brittle languages work and the parts off the suit bubbles also outlined on a curved line. So we perceive it as a whole you need. Another example is the least off bestselling books on book depository dot com. They are earning, judged on the same horizontal line, and the least continues beyond the end point we currently see we can easily follow elements that are aligned in a way. Look at this example, these two graphs shows to whom I sent the most Facebook messages last week The graph on the right is easier to interpret because direct angles form a. Some but continuous line. Progress bars or timeline components are also great examples for continuation. Great systems are also great representation. Zoff. This principle creating a consistent structure for a website or an application is a foundation of part off a good user experience. A consistent and I'm layout is easier to navigate and understand. Continuation also appears on slider components. We perceived a slider as the range represented by the horizontal line and the rectangle as the handle. We don't see it as two separated lines and the handle our next principle to discuss his enclosure or camera region.
9. Gestalt Principles: Enclosure / Common Region: the law enclosure or camera region suggests that the objects that have a border around them are perceived. It's more related or s a group. The boundaries or borders establish a closed region which can be used to highlight the relationship between certain parts off the user interface or the content. Each element that is placed inside the border is perceived as belonging together and in the same way. Everything outside the given aria is seen as separated. From these elements. You can establish camera region by putting the elements into a box or apply separator lines . It is also possible to use different background colors for the elements belonging together . This principle is used in the card business. Why designs, for example, on Pinterest each being separated this way? Dribble. Also use this card on your Facebook timeline. The posts are separated in the same way, and a trail aboard is also a great example. - The options and controls inside the dialogue books also belong together and inside the dialogue books. More separate regions can be established by using separator lines. What example. Think about the front dialog box inside Microsoft Word. The next principle is come on, faith
10. Gestalt Principles: Common Fate: the principal off common faith or sink runny is increasing the import on nowadays, since you animations are becoming more and more popular, this law states that the objects that are moving in the same direction are perceived as being more related, then the airman's that don't move or moving in a different direction. Similarity or proximity doesn't matter. In this case. If the elements are moving together simultaneously, our brain perceives them as one group. Actual movement is not necessary. Arrows can also indicate which elements have a common faith. A great example for common faith is a drop down menu. All elements inside a category move together, indicating that they be wrong toe the same group. Another example is a slide out my new When you apply you why animations? You can suggest what elements have similar functional purpose on the interface. For example, in the case off the slug inform, the two form fields are moving together and the button is a bit delayed, suggesting that this element has a different function than the fields. Similarly, if elements are moving in different directions with different timing, these elements perceived as being separate just think about in there moving to the right and moving to the left means to really be friend outcomes. One more common example is a tool tip. When do use their hovers over a certain part of the Y, a new element appears, and this element is somewhat connected to the element that was being covered over elements inside, then awkwardly on also move together. The next principle to cover is connected elements.
11. Gestalt Principles: Connected Elements: So now we're gonna discuss connected elements. This principle is also called uniform connectedness or the lof unity. Actually, it has a really straight forward definition. The objects that are somehow connected visually are perceived as more related, then the vans without these connections. Additionally, the elements that are connected by similar connect or lines are connected in a similar way are also perceived as being related. Tulips are great examples. These are visually connected to the element being hovered over. Another good example are flow charts or side maps. Speech, Babeu's or so suggest connection arrows and other connector lines. Or so sure what elements belong together. Think about the mind map, for example. We only have four principles left. Our next principle is Seema three.
12. Gestalt Principles: Symmetry: the law of symmetry states that symmetrical elements are perceived us more related and as belonging to the same unified group or saw on object that is, a combination off to mirror elements are perceived as a single object. Another interpretation off this rule is that we tend to perceive objects as being symmetrical around the center point. So our brain separate subjects into symmetrical pieces, and if we see symmetrical elements next to each other, we perceived them as belonging. Together. Here we see three sets off bracket. Interestingly, in most cases, symmetry has a stronger effect than proximity. Probably the most frequently used symmetrical layout is the Google Home page. It's not perfectly symmetrical, but it doesn't have to be to trigger the effect of this principle. It should also be noted that a symmetrical design creates the sense off stability and consistency. Vile and a symmetrical layout creates tension, symmetric and also promote reducing complexity and it chemically out easier to comprehend. You can also drive the user's attention by using one asymmetrical element next to the other symmetrical vans and UK. Was this principle in icon design as well? For example, here is this bottle, the law, off closure or so works here, the next principal Isparta terrorism
13. Gestalt Principles: Parellelism: the law off parallelism is related to seem a three. In this case, the similar lines are perceived as being more related than the objects that are not parallel. What other ism also connected to the low off common fate lies that seem to move or point into one direction are perceived as a group. They just quickly practice throwing some popular lines like we did during the warm up phase . These lines seem to be more related. You can spot terrorism in almost every way out. There are blocks off content that are either horizontally or vertically parallel to each other. The trick is that when you combine these two type off arrangement, it makes it easier to distinguish between the different groups off elements. Devices that are horizontally aligned belong to one group, and the objects that are vertically aligned belong to another. This is the home screen for a game called Clash Royal. Similar functions are aligned in a similar way, and as a more specific example, re bones and other over late elements are also great representations off this principle, we have to Morelos to cover four cup wins and past experiences
14. Gestalt Principles: Focal Points & Past Experiences: the rule of focal points is extremely important in you X and the Y design. The interface should communicate what functions Options are the most important that they given step for the user. This law states that by applying contrast, we're making an element different or unique, gets the user's attention. There are different ways to emphasize the U element by size. My color, by contrast, by different and typography by alignment and so on, as I mentioned before, by making an element a symmetrical or by breaking the greed. So by making an element somewhat stand out or unlike the other elements, can also drew attention. Defining focal points helps to establish hierarchy inside the user in their face. A great example for focal points, Our call to action buttons and the last principal we're gonna discuss is the law off past experiences. It simply states that the elements are perceived business users past experiences. This principle is really significant in new accent. Do I design? Do I designed patterns? Work? Thanks, tow this principle. Obviously the collection off past experiences is different for each human being. But there are common patterns we can use to improve the learn ability off a product or service. That is the reason why we shouldn't train when the beer, when we create the most common Ike wants, like a home icon or a save icon. The same goes for road signs and traffic lights. The doors work this way as well. We perceive these lines as the word taxi, not individualize. And as you may remember, the law off simply City also applies here. And it doesn't matter that the letter A is unfinished. We still recognize it. And as another example, this rectangles and circles are perceived as an exclamation mark. You white patterns work the same day. For example, For someone who has never seen tax before, it can be confusing. What are these words optionally inside direct anger next to each other. The same goes for other patterns like pagination. At first glance, this is just a sequence off numbers from 1 to 10. In the next lecture, I'm gonna give you an exciting exercise
15. Exercises to Practice Sketching: in this lecture, I'm gonna give you an exercise to practise sketching and at the same time, Tomi Guest out principles more family are to yourself. Now just get the sheet off paper and quickly sketch out a bomb pager website for a photographer which showcases some off the photos and also contains a possible way for the user toe. Contact the photograph there Don't spend too much time with it. You have sleep for five minutes, so don't make that too complex. Just include the most important part. And think about the desktop version so you can pose the video now and then I will assure you my solution. And I gonna explain why I asked you to do this. So this is my solution for the one pager website. - Now , just step back and try to think about why we have applied certain US solutions and what the guest stars principles are behind the wear patterns we have used try to spot at least six principles. Now you can post the video again. So these are some of the guests as principles behind the elements on this page. I hope you enjoy this little exercise and now I will tell you some more ways to practice, so these are the additional practice activities. I'd equipment open the websites you visit each day. Now try to spot as many guest all principles as you can. If you want to practice catching user interfaces, it's also a great idea toe copy these websites or applications structure. The second exercise is to go to a U I Pattern Collection website, Pick up pattern and start to identify the gestalt principles behind that pattern. For example, think about by and how five star rating mechanism work. You can also copy these patterns in order to develop your sketching Scheer's and finally, you can create and sketch out your own gashed Ulchi cheat. Use your favorite you examples for each principal and you don't even need to stick to get start principles. There are many other otters in visual and UX design, so create summary sketches off the things you are reading or studying about. It has a two in one advantage. You really remember better the knowledge you are gaining and your sketches case will develop. See you in the last closing lecture
16. Closing: How to Participate in the Community: So congratulations on completing the sketching practice activity. Good luck with developing your sketching skiers. And if you are interested in sketching for you, ex or you why designers in more details, check out my course on the sketching for you eggs dot com website and please consider joining the sketching for you ex community. I have a Facebook group dedicated to this topic, and I also on the newsletter, which has two main parts. One is a 100 day long you X created icon growing challenge. This can really help Toby a habit around sketching, and the other part is a weekly UX knowledge base. Catch, and it's also agreed, form off participation in the U X catcher community toe. Share your sketches. Share your work with fellow U X or the Y designers. So thank you for being my student and let me know if you have any questions or suggestions would like with your sketching journey. And don't forget to download the guesthouse principles. Cheat, cheat
Krisztina Szerovay, UX Designer & Visual Thinker
