About UX/UI

UX/UI has become the most popular job position in IT in 2023 and still remains the most popular one. People love this job for its flexibility, and it opens new horizons after working in design and web development.

We can compare UX/UI with the profession of an architect because, like an architect who designs buildings and communications, the person working in the web industry does the same. They strive to create a convenient experience for users and make it visually appealing.

This article will reveal all secrets on the subject and will provide you with the most common insights and practical advice. Moreover, since you are reading this article, it means you are interested in the web industry, and you have a great chance to get closer to your dream.

Well, let’s dive into the world of digital art!

Why Figma?

There are a plethora of alternatives. A long time ago, Figma wasn’t as well-developed. Today, it’s the best solution for UX/UI. It includes many convenient features, plugins, and its own community where you can find ideas, download elements, and use them in your projects.

This platform isn't only for websites; it's also used for graphics, design, and as a tool for collaborative work with your comrades remotely.

The most important thing is that Figma is free! They do offer paid subscriptions, but you still have all the necessary tools to be able to create what you need conveniently and without any compromises. It’s not like you have just a limited version; the full version is available, and most people don’t purchase additional subscriptions to work there.

Soon, we will tell you everything about UX/UI.

Screen resolutions for UX/UI

Well, let’s start with some basic knowledge. Before we begin, we need to understand the standards for website sizes.

Figma is a versatile tool that allows you to create different canvases with no size limits, except for the memory on your computer if you work offline through the installed app on your laptop, which is impossible. Just an interesting fact about Figma 😀.

Standard website frame sizes are 1920 x 1080 and 1366 x 768. These dimensions represent 40% of all ratios used today. However, new MacBooks have different screen sizes because Apple has launched a new era of 14-inch laptops, which changes the standards slightly. Once again, it's important to emphasize that we are currently discussing the desktop version.

Figma offers frames for all possible devices, but we will discuss this feature in the next section of this article.

Don’t forget about adjusting your website for various screen sizes. 

We’ve prepared one cool tool: it allows you to check updates about screen resolutions. This website where you can track trend's over the years and across different browsers in the side menu W3Schools. 

Don’t worry, the website may not look fancy, but it contains very practical and valuable information.

Well, it’s easy to predict the latest trend that we are going towards big screens again, and it relates to phones, tablets, laptops, TV, etc.

Responsiveness

Is it necessary for my project? We're referring to everything mentioned at the end of the previous section. Look, we have some options to consider with this shit.

Mostly, it depends on your goal. If it's just a simple website portfolio, you should consider adjusting it for both desktop and mobile versions. With a likelihood of 99%, we can assume that people will never view it on TV.

Figma offers frames in various sizes, and they are👇

• • Phones, covering all iOS devices and Android devices of varying sizes
• • Tablets
• • Desktops, tailored to different Apple devices due to the company's introduction of new resolutions
• • TVs
• • Presentations in 16:9 and 4:3 ratios
• • Apple Watch
• • Paper sizes like A4, A5, etc.
• • Social media dimensions
• • Special sizes for Figma Community
• • Customizable archive with different resolutions, allowing you to add even non-existing ones, but always keeping them in mind.

These are the most common ones, and you should always be sure about the non-existing models. It’s easy; just check resolutions on the Internet.

Sometimes, you will need to use all of them, depending on the convenience that your project requires. Most people use mobile and desktop versions because you can easily adapt your project, even for TV sometimes, with just a few elements and utilize the auto-layout feature in Figma.

Remember the rule ☝️ always aim to create at least two versions – desktop and mobile.

What about banners and other design projects?

There are no limits. Create 10, 20, 30 of them, and use all possible and necessary tools of the platform as you wish. Figma is perfect for creating all design projects. 

The difference UX/UI

UX – User Experience. This refers to how a visitor feels while scrolling through your website and their satisfaction. It encompasses the relationship between a user and a product.

UI – User Interface. This pertains to how the design is perceived by an utilizer, including aspects such as accessibility, usability, information architecture, and user reach.

Don’t confuse these things! 

A great user experience is one that allows customers to easily and efficiently accomplish their goals while engaging with a product or service. This involves understanding their needs, preferences, behaviors, and context of use through research and testing. UIX designers strive to create intuitive interfaces, clear navigation, and enjoyable interactions to ensure that people have a positive experience.

UX design is interdisciplinary, drawing from fields such as psychology, human-computer interaction, graphic design, and industrial design. It's also iterative, involving continuous testing and refinement to address user feedback and improve the overall experience. 

Prioritize UX, and it will lead to increased viewer satisfaction, loyalty, and ultimately, business success. 

Sometimes people create a website, and they think only about how to make it look good. Well, they think only about UI. They should think about both. 

One fact ☝️Did you know that if you create an app or even a website for iOS devices, Apple provides special instructions on how to improve your web experience and bring your digital work to common standards? 

We still have more flexibility when crafting websites, but there are some common rules for elements like navigation bars, side menus, and content grids, etc

Let’s take a look at the example below 👇

Simple example that shows you have a blog with some text and pictures on the right side, you may say that it sounds interesting and usual. Perhaps, without our article you could have chosen this one, but this example shows how UX UI can’t live without each other because already on the left side it looks common. 

‍Why do people love Good design?

We read, and our brain prefers a well-structured and coherent text. This preference is supported by scientific experiments. The perception of information is better, meaning that people remember better, and they are able to find their last point of reading 👍.

When all elements are considered together, they should resemble a logical system. Perhaps, at first glance, it may not seem so, but as you start scrolling, you understand that the main menu at the top of the website forms one group of logically placed elements. Right after that, you encounter the main content with text and other content, organized into groups and subgroups of logically placed elements. Finally, there's the footer, following the same approach.

The digital world thrives on orderliness. It's the golden rule for every designer and programmer.

Fonts

One of the most important things that we have to discuss in this article. Many people choose fonts they like and forget about readability. Yes, there are also some rules. 

Readability: the primary function of text in UX/UI design is to convey information. Typography that is easy to read enhances the user experience by ensuring that users can quickly comprehend the content without strain. Proper text style choice, size, spacing, and contrast contribute to improved readability. 

First of all, we suggest using 2 fonts, rarely 3. One for titles, another for the main text content, and, if necessary, a third one for specific technical features.

– Let’s introduce 2 types of text faces

Serif Fonts

This group of text styles feature small lines or strokes (serifs) attached to the ends of characters’ strokes. They are often perceived as traditional, formal, and authoritative. Also, they help guide the eye along the text, improving readability in printed materials.

Common examples include Times New Roman, Georgia, and Garamond. The first one is widely used in official documents in all European countries and North America.  

Serif fonts are commonly used in body text for print materials such as books, newspapers, and magazines. If you want to create a banner, use these styles for captivating titles. 

Sans-serif Fonts

Such fonts lack the decorative strokes (serifs) found in serif fonts. They are characterized by clean, modern, and minimalistic designs, and are often perceived as more casual, informal, and contemporary. Such text styles referred to digital interfaces due to their readability on screens and simplicity.

Common examples include Arial, Helvetica, and Verdana.

Sans-serif typography is widely used in digital media, including websites, mobile apps, and user interfaces. 

We know how painful it is to find a style you like for free. Most of them are custom and paid. If you're a newbie, check out this website where you can download font styles for free 👉 Google Fonts

Visual Hierarchy

Typeface design helps establish a visual hierarchy within the interface, guiding users’ attention and emphasizing important information. By using different font sizes, weights, and styles, designers can prioritize content and make it easier for guests to scan and navigate through the interface.

AND 

Writing style have the power to evoke emotions and set the tone of the user experience. Whether it's through serif fonts conveying tradition and sophistication or sans-serif fonts representing modernity and simplicity, font choice can influence how visitors perceive and interact with the interface. Try to create your own brand association. 

Final UX/UI

You see, UX/UI is a whole industry that encompasses many important aspects. It could be considered a whole science. Some people have an innate vision of their final look, while others need to read and study hard to elevate their vision to that level. It's something that we can't explain. Let's leave it to biology.

Let’s summarize everything we've learned from this article 👍

• - We understand why Figma is the best for design!
• - We've explored various screen resolutions and their applications.
• - We've gained insight into the main concepts and understanding of UX/UI.
• - We've learned how fonts play a crucial role.

Well, stay with us and learn more. Click the link to check out the Digital Hero blog 👉 Digital Butlers Blog.

– Got questions about UX/UI? 

Our team of 27 Digital Butlers is here to serve 💪! You can be a new hero of web development! 

Our name reflects our dedication to serving our employers. We serve their goals, much like Alfred serves Batman, which is why we use the term “employer” instead of “client”. Our expertise will definitely benefit both you and your developers!

Reach out to us anytime for expert assistance and let us be your digital concierge! 

Learn more