Hello, in this video, we will take a closer look at the concept of icons. The heart shape in front represents various expressions such as love, likes, and interest, all encapsulated in a graphic. There probably aren't any people on Earth who would use this icon to express anger or sadness. These icons are a sort of agreement and convey information in place of text. Each graphic contains information that corresponds to it. 

Next, we have the emergency exit icon, which you have probably seen often. In an emergency situation, we have learned to simply follow this symbol to find our way out. Then there is the restroom icon; no matter where you go abroad, you can recognize the restroom just by looking at that icon, even if the word restroom is not written on it. The graphic style used for these icons may differ, but they serve the same purpose. In this way, while we are trying to design apps, we are actually already...

Our daily lives are filled with familiar symbols. One of the world's leading design critics, Steven Heller, once said, Icons are a language. What we learn is that icons are not fundamentally different; they just apply to different environments in UI. Let's take a look at the four key considerations when designing icons for UI. The first is intuitive icons, which I personally believe is the most important aspect, and I will elaborate on this later. The second is a unified style for icons. The third is simplicity in icon design. Lastly, the fourth is icon specifications and visual adjustments. Let's quickly review these four core elements of icons. Do any of you have trouble understanding what these three icons represent or what functions they serve? For example, there are icons for a heart, a lock, or deleting a password, which are quite clear in their meanings. It's obvious that this one is for search.

You know, there are icons that indicate notifications or the shopping cart, right? It's essential to understand these things. However, beginners in design often overlook this aspect. Using icons that are overly simplistic or known only to oneself is a big no-no. When summarizing the icon guidelines from both Android and iOS, we can say they should be simple, friendly, and focused on essential characteristics. If we delve deeper into semiotics, it can get complicated, but the key takeaway is to use familiar and standardized icons. It's also important to maintain a unified style for icons. This means that simply downloading free icons from various places and creating designs without your own style or specifications results in poor design.

Although I created an extreme example for the lecture, I believe you will understand it. I included this because I used to see such apps frequently in the past. I think a good design is one that unifies aspects like thickness, rounding, size, and style, as shown on the right. There are various styles of icons; specifically, there are five icon styles: outline, solid, filled, flat, and glassmorphism. It is essential to use the icon style that aligns with your intent. However, there is no definitive answer as to which style is better or worse. The goal should be to avoid anything that hinders the acquisition of information. Icons should provide contextual information; they should never take center stage. Icons used in UI should not just be simple graphics but should primarily be either outline or solid styles.

I tend to use styles other than type. Even with icons of the same style, the thickness can change the overall feel. The icon currently displayed is a size that is three times enlarged from the standard 24 by 24. The feeling is quite different depending on whether the thickness is 1 pixel, 1.5 pixels, or 2 pixels. A thickness of 1 pixel gives a completely thin impression, while 1.5 pixels feels a bit thicker. Nowadays, with improved resolution and technology, using 1.5 pixels doesn’t result in the misalignment issues of the past, where icons would appear distorted. Therefore, I've seen quite a few designers using 1.5 pixels for lines in practice. It might be helpful for you to consider these thicknesses according to your intentions. Additionally, I believe simplifying icons is very important. For those who have just started learning design or for beginners...

If you think about it, the right side may appear to have a higher level of completion because it looks more detailed. However, you need to consider where and how this icon will be used. If I show you the actual size, you might be surprised. It's 24 by 24, but when you look at it at that size, it’s really tiny. Reducing that complex icon to a 24 size results in a messy icon where it's hard to tell what anything is. There are advantages to both large and small views, but in apps, most icons are small, so they need to be designed with the minimum elements necessary to identify their shape. We also need to look into the icon size. When you actually work on it, you should basically work within the standard size of 24 by 24. However, just because it’s 24 by 24 doesn’t mean you should fill it up completely; it’s about maintaining a safe area.

There is a safe area of 20 by 20 pixels. We need to ensure that the work fits within that space to prevent awkward cropping of icons when saving in a PNG environment. We also need to consider visual correction regarding the size of the icons. It's important to verify whether the perceived volume area is uniform visually. For example, even though both the left and right sides are created with the same dimensions, the left side appears larger due to an optical illusion. Unlike computers, the human eye is more sensitive and perceives size based on the surrounding space and the volume of the objects rather than just their height and width. When you study visual design, you will learn about basic adjustments. Even if both shapes are of the same height, say 100 pixels, to perceive them as having similar areas, you would need to adjust one to 112%. The formula for calculating the area of a circle is π times the radius squared.

When we talk about pi, it's roughly 3.14, and to get an approximate value, you need to multiply by 112%. However, you don't need to memorize this precise formula. We provide guidelines for visual correction called keylines. There are quite a few icons that look like cubes, circles, and rectangular prisms, right? Depending on the style of the icon, we offer area guides to provide a sense of balance. 

To explain with exact figures, if you look at the specifications for icons that fit within a 24 by 24 area, you'll see that a cube is 18 by 18, a circle is 20 by 20, and a rectangular prism can be 20 by 16 or 16 by 20. When you design, if you create your icons according to these guidelines, you will be able to use a set of around 20 to 30 UI icons that are balanced and visually appealing. Let me summarize that once more.

Let's move on. You need to use intuitive icons that anyone can recognize, and check if they are easily readable even in a small size of 24. You will be using dozens of icons, so it's important to ensure that the overall style of the icons appears unified. Lastly, it would be good to check if they are produced according to the OS guidelines and specifications. In the next video, we will learn in detail about typography.

앱 UI 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인 - UXUI 디자인 강좌 2-4

디자인 첫걸음은 디자인베이스와 함께
새로운 분야에 첫발을 내디딜 때 누구나 막연하게 두렵죠.
디자인베이스를 디딤돌 삼아 디자인을 시작해보세요.
