Basic UI/UX concepts for beginner Front-End developers
Hi😉. My name is Volodymyr and I am a junior Front-End developer
I would like to tell you about problems that I encountered at the beginning of my career because I wasn’t familiar with the basic UI/UX concepts.
Why do front-end developers need to know some basic UI/UX concepts? When you start your career, you can’t know all and everything that you will need in your work, especially if you work in the IT industry. If you are starting your Front-End journey, you need to know not only your main tools like HTML, CSS, JS, and many other frameworks and different additional tools, you also need to have some knowledge about UI and UX design. Of course, you don’t need to draw mockups, but when you need to create some new UI element or component you should know basic UI/UX concepts. This knowledge can help you avoid a lot of mistakes in design and avoid unnecessary work, also you will understand the designer’s solutions better, and you will be able to give some feedback to your designer. Besides, you will probably understand how people think.
So, what is UI? UI — is the user interface, in other words, it is anything a user may interact with to use a digital product or service. This includes everything from screens and touchscreens to keyboards, sounds, and even lights. In web development, the user interface is the graphical layout of an application. It consists of the buttons, text, images, sliders, input fields, and all the rest of the items users can interact with.
What is UX? UX — is user experience, it is how users interact and experience a product, system, or service. User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. UX best practices promote improving the quality of the user’s interaction with, and perceptions of your product and any related services.
How do they work together? So a UX designer decides how the user interface works while the UI designer decides how it looks. This is a very collaborative process, and the two design teams tend to work closely together. As the UX team is working out the flow of the app, how all of the buttons navigate you through your tasks, and how the interface efficiently serves up the information users may need, the UI team is working on how all of these interface elements will appear on the screen.
Main UI/UX concepts. The main purpose of design is to solve people’s problems. The design has to motivate people to action, also design should give people information about products. Design should be unique for unique products.
Don’t follow all designer trends, because maybe you don’t need it for your application. For example, a lot of cartoon animation for banking applications can bring more negative than profit. Also, different modern designers trends can confuse your users. So, that means that you need your design developed specifically for solving your problem. There is no one-size-fits-all design that solves all the problems.
When we create the new design we focus on the user’s experience, we have to predict what they want, how they will interact with our application. When UI is easy to use, we buy, download, share and promote the product.
Five rules for you to follow for mobile
1. Focus on the context of use. When are people using this app or site? Whether they can easily find and use the functions they need at this moment.
2. Simplify. Each screen should contain one primary action. That means every screen should provide something useful, meaningful, and valuable that makes the product easier to learn and use.
When people see something like that. It confuses them, and they don’t know, where do they click, how to interact with this app.
3. You have to design for thumbs, not fingers. The majority of people use one or both thumbs to interact with their phones. That means you have to place menu items, frequently use controls and common actions where it’s easy to reach with a thumb. That’s the reason you’re now seeing a lot of menus at the bottom of the apps and mobile sites.
4. Design for big fingers. Controls and their associated tap target should be a minimum of 40px (minimum sizes in the different sources are different) in diameter. Anything smaller than that is really difficult to tap. If users tap the button once, it would not do anything because they missed the target, but their immediate assumption would be “the thing does not work”.
5. Minimize the need to type. Typing on a phone is a pain, even on a larger screen. That means you need to keep your input forms short and simple and use autocomplete.
Main principle organizing visual information
Balancing any layout means that you’re arranging the positive elements and the negative space so that no area of the design overpowers the other. When a design is unbalanced, it means the individual elements are competing with the whole composition, they attract too much attention to themselves.
The job of balance is to create order and relationships in layouts. It is the first principle of good design and the one you should always pay attention to.
The next principle is rhythm. Rhythm occurs when intervals between elements are predictable when they’re similar in size, shape, length. When elements repeat at regular intervals, the visual rhythm that’s created speeds up and the user’s ability to quickly infer what those elements are and what they do.
The next is harmony. Harmony happens when visual elements relate to and complement each other. Harmony is a big part of what holds individual elements together. Harmony is directional left to right, top to bottom, and it connects the elements. Harmony is the sense of cohesiveness between the elements in a composition. The elements shouldn’t be the same or completely different but they should be related in some way. Color palettes or similar textures can create a sense of unity between different components. Using similarly shaped items will create harmony because they will seem related. Harmony creates a clear meaningful flow.
The next principle is dominance, which means privilege over all others, powerful words, the certain highlighted elements above others. Dominance is achieved by emphasizing one or more visual elements. When there’s no clear dominance between elements, they compete with each other and when they do, we have a hard time focusing on things. Another way to get dominance is size. Now, greater size equals greater dominance, but it is not the only way to create dominance. Contrast is another way to achieve greater dominance.
More than one dominant element on a single screen may confuse users.
Alignment is the most important visual design principle. If you change only alignment, you can improve usability and the user experience.
Proximity is the distance between every visual element on the screen, we use it to signal relationships between those elements. Creating relationships, establishing meaning elements that are visually close to each other are perceived as a single group. They’re related by the context of use. Proximity makes cognition a lot faster. So the main task of proximity is to separate elements by logical groups, which help people find and recognize convenient elements much faster, and makes browsing easier.
Colors
Color gets attention. Color stirs emotional response and suggests associated meaning. To get the desired emotional response, color has to be used appropriately. Color can also maximize readability and minimize optical fatigue. Color is subjective, and our perceptions and our biases affect what it says and what it does to us. We all have different reactions to color based on our upbringing, our culture, our language, and the things we’ve been exposed to. Our color is used sparingly. Do your colors reinforce or interfere with hierarchy and content? Do they help me understand how things are organized or are they obstructing my ability to understand what’s going on? Is the color scheme used consistently? Is color use functional or is it just decorative? You should be using color to communicate and influence interaction. It has to do much more than just look pretty.
How to choose a color correctly? Every color has certain universal associations for the most part. White is usually used to signify innocence and purity, its cleanliness, its sterility, its surrender, its peace. Red is an alarm and urgency. It’s attention. It’s intensity, a warning of danger. And that intensity is also used often to communicate love, these three colors in particular provoke. Pink usually signifies romance, gratitude, grace, admiration, harmony, compassion. Blue is thought to be peaceful, tranquil because it’s reminiscent of the sky or the ocean. It’s often used in business to suggest technology and innovation. Green is often used to suggest nature. It’s an organic color. It’s calming. It’s relaxing. Yellow usually suggests optimism, happiness, warmth, and that’s because of its association with sunlight. We associate it with positivity, joy, and hope. Purple is often associated with royalty, with wealth, with luxury, with sophistication. Brown is usually also like Green thought to be reminiscent of nature of the earth, soil or richness, home, friendship, genuine. This solidity. Brown is calming in a lot of the same ways that green is.
For good UI design, four-color variations are required. It is — shadows, mid-tones, highlights, and accents. We could use one color for the navigation bar. Another color is a callout inside the text, and then we could use the accent color for all hyperlinks or buttons. When you choose the color scheme for your design, think about saturation. If you would choose a saturated color It’s would vibrate at the edges where you don’t see a clean line.
Relationship between color and contrast, specifically the power of contrast. Color may get your attention. But the contrast is what keeps you there and what makes sure you notice those things that are important. When we use the right contrast it is easy to read. Black on white, instantly readable, and white in black is also easy to read. If we have a lack of contrast between the text in the background, that causes eye strain because our eyes don’t know which color to focus on. Contrast is also used to draw attention. Color and contrast depend entirely on context.
Typography
The typography task is to divide up and organize and interpret the mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. Typography has one plain duty before it, and that is to convey information in writing. A printed work that cannot be read becomes a product without purpose. Typography creates an emotional impact.
Typography also serves a functional purpose, appropriate typography, choices, create readability, accessibility, usability, and visual balance, all of which work together to form effective, understandable visual communication. Good typography also starts with good alignment, and why that’s important. Which text do you feel like you can read through quicker? And in most cases, that’s going to be the one on the left, and here’s why there is a common starting point. Every single line begins in the same place and people read from left to right. So once we figure out the pattern, once we read from left to right on the top line, we get in the eye and the brain goes, this is where the line starts. And it automatically goes there at the end of each line. We don’t have to think about that. By contrast, when you have a center, a line text like this where you have a ragged outline on both sides, the starting points are all over the place. Your brain has to do work at the beginning of every single line. You’re making people work to understand what’s in front of them. There is nothing good about this. Paragraphs should never be center-aligned or right-aligned. The space between letters should be filled with the same volume of space.
Also, important typography things are placed between lines of text in terms of UI design. Normally in access increasing letting makes text easier to scan and easier to read, which makes comprehension a lot faster as well. This is infinitely easier, it’s a lot less cognitive effort, and that’s because it serves to visually group related chunks of information. Don’t use a lot of different fonts on the page, it confuses people.
Try limit line width, the common standard is 60 characters per line and for mobile devices 30–40 characters. It is very difficult to read anything this wide, quickly, easily, efficiently, accurately.
Icons
Icons can help us save space, and also they help us to quickly identify the action. Icon choice starts largely with the environment that they’re going to be used in. App icons should be based on commonly used Android icons or iOS icons, things that we recognize, things that we’ve seen before. Laptops, software icons should be based on commonly used Windows icons or Mac OS icons, or uncommonly used software on platforms like Microsoft Office. We base our understanding on what we’ve seen and experienced already. How to choose an icon. If you spend more than 15 minutes trying to choose an icon to represent something, an icon probably will not work in that instance. If you have to think that hard about it, you’re probably better off with a label and then think about labels that label plus.
How to choose the right icons. You need to keep the visually perceived size consistent. Chek optical sizes with shapes. Extra visual elements only make that icon more difficult to perceive, even if it’s composed of recognizable objects. Eliminate unnecessary details. Don’t mix and match styles. For example, don’t mix outline and Phil Styles in the same app or the same site. If we have an edit icon that is essentially a black fill or a color filled with some white highlights, you don’t want to combine it with two other images that are sort of the exact opposite. Try to choose commonly used icons for your UI, it will be easier to recognize an action for users.
Try to remember and use these basic UI/UX concepts. It can help you to avoid bad design, and help you to improve your components, be more understanding and more friendly for users.
Resources :
