FREE UX Course: The Fundamentals of UX/UI Design

User experience, or UX, is a phrase used to refer to a user’s total experience when engaging within a specific scenario with a product or service. The experience might range from outstanding to irritating, depending on the design.

Even though UX design is usually connected to digital platforms, the term is also relevant for the design of physical products, basically anything the user can interact with. Anything that is designed should provide a convenient experience for the user.

UI stands for a user interface, which refers to the interface the user interacts with. These two areas are very intertwined and usually, go together as one topic.

UX/UI is a very exciting field, and you must have heard of it somewhere. However, you probably never thought that there was such a complex process behind those buttons you click on your smartphone every day. The truth is, if the designers didn’t go through the UX/UI design process before creating them, they probably wouldn’t attract you as much today.

This process combines different disciplines, like research, marketing, psychology, design, and tech. The first person to implement UX design was Donald Norman, who had served at Apple as a cognitive scientist. He explored all facets of the customer’s experience with a particular product or service, such as design, aesthetics, setting, and physical touch. To encapsulate all elements of the relationship between the customer and the product, he coined the term “user experience.”

Robust UX/UI design doesn’t mean having an appealing website. It means having a website that answers the needs of the customer. All the giants like Google, Amazon, Airbnb, or Facebook have easy-to-navigate websites and applications, and that’s why they still triumph over their rivals.

Before diving deep into UX/UI design. It’s essential to learn how to distinguish these terms. Although they usually go together as they are both inevitable parts of the product design process, there are some crucial differences.

Basically, UI refers to all the elements that allow users to interact with a product or service. UX, on the other hand, is the process that evokes the feelings of the user that interacts with the product. User experience is what the user takes away from the interaction.

This example by Donald Norman and Jakob Nielsen helps understand the difference more profoundly:

“It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.”

So, UX is the problem-oriented part of the process that defines the user journey and provokes feelings during and after the interaction. UI, on the other hand, focuses on the surface of the product and its functions. The UI takes the user to the UX.

Working in UX/UI is very dynamic and fun. The most important characteristic of the job that makes it so appealing is definitely the level of creativity you get to achieve every day. UX/UI designers have the task of solving problems and provide a better experience for other people. Through their designs, they can accomplish a tremendous impact on other people’s feelings.

This is the perfect job for tech-savvy people. They work with top-notch technologies and continuously get opportunities to try out new things. They usually work in fast-growing tech companies or marketing agencies with other creative heads.

Another thing that makes UX/UI so exciting is the psychological aspect of the job. UX/UI designers get to learn a lot about human behaviour, how people think, what makes them happy, and what attracts them.

One obvious reason why this profession is one of the most popular ones is that it’s a part of the highest-paying industry. UX/UI designers are in high demand, and companies know how to compensate for a well-designed digital product.

When you get a brief on the work you’re about to do, the design process begins. Your manager or your client elaborates on their vision of what they want to achieve with the product you’re designing. It could be an app, a website, a new feature, or even product packaging. They list their requirements and then it’s your job to incorporate them into a seamless user experience.

Once you get the brief, the research phase has started. Usually, UX designers start by researching the competition and identifying similar products that are already on the market. What is essential here is to also be aware of who you’re designing for.

If they already have a product you need to redesign, what improvements are there to be made? How are users using it? What are their pain points? Now, we’re obviously moving to the interviewing of existing and potential users. Next, you also have to talk to all other stakeholders and see what they need from your design.

During the research phase, you need to identify the problem you’re going to solve with your design. It helps you recognize pain points and problems, affirm or invalidate your conclusions, find trends and similarities through your focus categories of users, and shed lots of light on the desires and priorities of your users. Essentially, the research guarantees that you design a product that revolves around the user, which is what UX is all about.

• User personas

After you’re done with comprehensive research, it’s time to evaluate the results and turn them into concrete observations. This means that you have to analyze the information you collected to get real insights about your users. You need to organize your data in a way that will identify patterns and trends in user behavior.

You will decide the vital characteristics of the Minimum Viable Product (MVP) of the app thanks to the knowledge you have obtained during the research. Also, you will be able to build user personas or empathy maps that will describe your target profiles.

The user persona represents a fictional portrayal of your actual user. These serve to identify patterns in your users’ behaviour. They help you get the feeling that you’re designing for actual people instead of just groups of target users that will end up like numbers in your app database.

You’ll be designing for Robert, a 29-year-old tech enthusiast who likes camping and makes his own craft beer. Here’s how his user persona would look like:

Robert Johnson
Age: 29
A single tech enthusiast living in Vienna.
Collects beer bottles and makes his own craft beer.
Education: BA in Software Engineering
Behaviours: Uses social media extensively, likes to try new gadgets and apps that can make his life easier.
Needs: To become more organized so he can have more time for camping and making his own beer. He would like to open his own brewery one day.

Once you have created your user personas, you can write scenarios. The scenarios should refer to different user interactions with your user interface. They should provide you with a good picture of how your users interact with your app and what their pain points are.

This is where navigation, hierarchies, and categories of the app or website are decided. They should revolve around the user flow.

The user flow is the path a typical consumer takes on a website or app to complete a goal. The user interface leads them toward a meaningful outcome and an ultimate action, such as subscribing or purchasing a product, through a sequence of steps that start from their entry point.

You will use different software that will provide you with flowcharts to build user flows. They should represent a step-by-step journey the user should go through when getting the first touch with your interface.

The primary representation of the design is the wireframe. You have to create a wireframe for any screen that the user can see when communicating with your app. When the software moves into its development stages, the wireframes serve as a reference for developers.

Next, you’ll also be able to create a prototype. The prototype is the simulation of the final product that should allow you to test your ideas before going into production. Wireframes and prototypes start as very simple, basic drawings, and then develop into complex mockups that closely resemble the final design, depending on the input and initial testing.

However, let’s not mix up these terms. There are clear differences between wireframes, prototypes, and mockups.

Wireframes provide a simple overview of the configuration of the website, arrangement, design of content, and overall course. Usually, the wireframe only has black, white, and gray colors, and doesn’t even have to be in a digital form—it can be drawn by hand.

The prototype should be a functioning model of your app. Prototyping helps designers to test the user journey, to focus on how the user will travel to accomplish certain goals through various activities and to recognize any possible interface flow challenges.

Visual example:  shorturl.at/sFOR8

Finally, the mockups focus on the brand’s visual identity, providing a static image of the final product. They include typography, colours, iconography, and everything that should be included in the app’s overall style.

Before the finished product is delivered, validating the concepts for specific customers helps recognize certain design pressure points. There may be multiple stages of experimentation before the concept is finalized.

Testing is a vital aspect of the work of the UX designer, and a central component of the overall cycle of UX design. It’s important to test your prototypes on real customers, much like user research. This way, you get genuine input from people who will actually use the app. Testing is also very important for the business aspect. Namely, before entering the production process, you can catch some big design defects, which saves the company substantial time and resources.

In-person usage tests to evaluate the behavior of the user are one of the most common approaches a UX designer uses to perform usability assessment. UX designers can create a greater user experience by combining verbal and nonverbal user feedback.

This testing is conducted in several rounds called iterations. Iterations help you collect feedback and improve the prototype based on user input. And then, you test again. And again. Until you are certain you’ve created a good customer experience.

Now, it’s time for the UI designer to take over.

When the UX designer has the information architecture ready, the UI designer comes in. They have the task to execute what the UX designer has created through the previous steps we talked about. The main focus of the UI designer is the visual experience of the user.

They design all the aesthetic elements of the product interface, such as color, typography, and spacing, as well as all the points the user interacts with, like buttons and menus. They perform this based on the wireframes, prototypes, and mockups the UX designer has developed.

Once the UI designer creates the entire interface, the app is ready for development.

This is the most important thing to know when starting with UX design. This is the basis of everything you’re going to do during the design process.

This idea is at the heart of UX design and it aims to solve a very common problem encountered in website design: as designers get more experienced at dealing with complicated web design systems, they might end up developing websites or apps that are more interested in trying to impress other designers than giving a fantastic experience to real-life customers.

Good design combines both visual and functional aspects. Thinking about user experience since the very beginning of the design process will result in building a site or an app that really revolves around the user.

Incorporating this theory means carefully thinking about the way the users are engaging with the website and the most important activities through which they are going to use it, as well as having these activities in mind during the design process.

The screener survey is one of the most essential parts of the user research process. As this is a complex and expensive process, you need to conduct insightful user research that will result in input from your ideal users. When you know the characteristics of the users that you want to survey, it’s time to write the survey you are going to use. Your screener survey should bring you the ideal users aboard.

The ideal screener survey should contain a question for each criterion you’ve determined for your target audience. For example, if one of the characteristics is that they use Uber or similar apps, ask how many times per week they use these kinds of apps. Make sure you’re precise and ask for a number instead of more broad answers like “rarely”.

Be careful with demographic characteristics. Don’t include them unless you have to. On the other hand, you should focus on psychographic characteristics that can reveal you more about user behaviours. Don’t ask leading questions and avoid adding hints.

The order of the questions is also very important. Start with more broad questions and then get into niches. For example, before asking people how often they use a certain type of app, you should first find out if they use this kind of app at all. Then, continue with the problems that dig into individual attitudes, desires, and expectations. The questions about demographic characteristics should come at the end.

Make sure you always provide open alternative options because you can’t always provide all possibilities in your answer. “None of the above” or “other” should also be options.

Your questions should always be clear and concise. The more precise you are, the less likely it would be for participants to get puzzled and answer a question entirely opposite of what you wanted to get. Don’t leave any space for misreading.

Finally, add some open questions that will highlight the people who are “lazy” to communicate about their experience. In your screener survey, inserting an open question will give you hints about how much feedback a subject can have in your actual analysis. One word responses or absurd blabbering may mean a poor return on investment.

Remember when we mentioned that everything is about the user? Usability is also very important when it comes to creating a user-centric design. This means that you use your users’ input from the very beginning of your design process. To create a design that seriously revolves around the user, you have to constantly conduct usability testing.

Usability testing is the most common method used to verify how functional the design is. The beauty of this qualitative approach is that it relies on what the user is doing and not what the user is telling. This is the key concept to bear in mind here: after you release your product, the design process does not end. Design is instead an iterative process in which you are continuously trying to learn how people really use your product and use this knowledge to optimize it.

This is especially important for growing enterprises, whose products can easily become unusable when new features are introduced, with designs that can easily begin to fail from reduced loading when new content is added.

During the testing process, you need to have in mind that you’re not supposed to get a confirmation that what you’ve created is beautiful. Instead, you should learn how the users perceive your product and identify the changes you need to make to create a more user-centric product.

Usability testing is performed in four steps:

1. Make a plan
2. Conduct the test
3. Analyze collected data
4. Generate a report

Step 1: Make a plan

Making a plan of your testing is key to conducting successful usability testing. There are several tasks you need to cover before you start the actual testing.

Firstly, you have to make a list of the variables you want to test, not exceeding the number of 12 testing variables. Next, you need to have users that are going to test your variables. When collecting users, you should consider different characteristics, like age, country, professional background, and even psychographic characteristics. Ideally, you should have five users for each user persona you’ve created.

The next step is to set the goals of your testing. They should reflect on what it is that you want to prove with your testing. Here, you also want to decide which metrics you’re going to measure, like time spent on a task, speed, etc.. This way, all your decisions will be based on facts instead of just intuition.

Step 2: Conduct the test

For the test, you should create a realistic test environment where your users will have a natural feeling. Record users’ reactions and take notes, without alluding to what they should do. Leave the conclusions for after you review the recordings. Remember, you need to listen to your users and determine what their perception of a good user experience is.

What you should focus on here is the time the user needs to complete a certain action, the effort it takes, their happiness after completing the action, and other variables you defined previously. You should be able to determine this by showing them the wireframes or prototype you have designed.

Step 3: Analyze collected data

When the testing sessions are completed, it’s time to calm down, evaluate the details, and draw conclusions. There aren’t any guidelines you can follow during this process, so you need to watch at the patterns that arise while you have all the knowledge in front of you and try to predict the problems that could arise as well as decide on their solutions.

Step 4: Generate a report

You need to create a report each time you conduct usability testing. This report should be placed together with all your product documentation. Your report should include an introduction to the testing process, together with the variables and goals you tested. Next, you should describe the testing sessions together with the scenarios and the metrics you were following. Finally, you should display the results and generate recommendations for further actions based on them.

Consistency is a fundamental UX concept that is incredibly relevant when it comes to designing a good app or website. This ensures at the broadest level that all the pages and features, the design, and functions remain the same. What is more, many famous brands use similar templates for their UX to ensure the same user journey on all channels.

When visiting your website from a particular channel, users will expect to go through the same experience on other channels as well. That’s why you should be careful with the consistency of all the experiences your product has to offer.

From a visual perspective, you shouldn’t copy the interfaces of your competitors. However, it’s useful to provide an experience similar to the best ones of your segment, because those that are successful have probably created seamless user experiences.

When it comes to consistency, you need to have in mind all interactions the user has with your product. If your app is your main product, you should then adjust the experience of your website to correspond with the one you have on your app. You should also use the same UX across all channels your brand is using.

What are more, users expect the same experience with similar apps or products they’ve already used. This makes it easier for them to learn how to use it and creates a better experience. This also means that designers don’t have to do everything from scratch every time they have to make a new design. Instead, they need to adapt an already existing template to stay consistent with industry standards.

For example, both Viber and WhatsApp have the “new message” button in the right down corner of their app interfaces.

Next, as a designer, you’ll probably always be tempted to try new things and implement new ideas. However, think twice before doing that. Don’t let your desire to make crazy designs disrupt the entire usability of your digital product.

Finally, to remain consistent, it’s essential to have a design guide that will serve as a reference for all future designs you or your designer colleagues will use. This way, you’ll have unified elements on everything that comes out of your designer oven. Google’s Material Design Guidelines are a great example of these kinds of guides.

Hierarchy is also one UX principle that mustn’t be left out. The hierarchical approach means considering every information and feature that your website or app has and then creating a tree-like structure that contains all these pieces put in a natural flow your user is expected to go through.

If you do it right, the flow should guide users smoothly through the process. This means that users will find it very easy to move through your product.

When it comes to hierarchy, information architecture is an important term that we should mention.

This term refers to the way the content is structured throughout the app or website. A primary navigation menu that contains the major pages is normally the highest level of the hierarchy. This is usually the menu that you encounter when opening an app for the first time or landing on a web. You will see secondary menus that allow you to get more detailed, taking you down the knowledge hierarchy as you click on or hover on each object in the menu.

Near the bottom of the hierarchy will be specific pieces of information, like a picture or a card. As consumers, since it appears so normal, we always take this hierarchy for granted, but it is vital for a seamless navigation experience.

Aside from informational architecture, visual hierarchy is also one very important term we can’t leave behind. Visual architecture should help users go through a section or page more easily. For example, make headings bigger than paragraphs or highlight the important parts. Another example is making buttons or other elements the user should interact with stand out with a more bold design.

Adopting this method at the earliest point of design offers you many benefits. Firstly, it would make it easy for the customers to browse the site and find what they are searching for. It is also valuable because, as a designer, it helps you to see precisely how the site functions. This will dramatically simplify your job as a designer, which means that you may not be tempted to constantly add fresh plugins and templates to your website to do what can be achieved with a rational design method more effectively.

Context means having in mind which devices may be used to access your app or website and paying careful attention to the fact that the main source of online traffic are now smartphones.

When it comes to contextual design, you have to consider a variety of factors. This is where your previous research should come in handy. For example, in what setting should your users be when browsing your website? Designing for an office setting and for the one of a techno club isn’t the same thing. To discover this, you can use user surveys or focus groups during the research phase of your product design process.

When talking about context, the term emotional design appears very often. Introduced by Nielsen’s Donald Dorman, the emotional design should provide a positive user experience. The emotion should shape the user’s perspective of the product.

“Everything has a personality: everything sends an emotional signal. Even where this was not the intention of the designer, the people who view the website infer personalities and experience emotions.” — Donald Norman.

Emotions play an essential part in a person’s capacity to understand and think. Pleasant experiences cause interest and affection, while negative memories shield us from repeating the same mistakes. Emotional design has an important impact on providing a more delightful UX of websites or apps.

According to Norman, there are three levels of emotional design. The first one is visceral design, which causes immediate subconscious reactions provoked by looks. The next one is behavioral design, which involves product usability, functionality, and performance, which form the user’s perception of the product. Finally, the third one is reflective design, which involves the meaning and impact of the product that defines the user’s ability to predict how this product is going to affect their lives.

When you combine these three levels of emotional design, users will like your product. The visceral design makes the product good-looking, behavioral design refers to functionality, and reflective design defines the product’s long-term impact on the user’s life. Together, they result in great design.

Your design shouldn’t limit and suffocate users. Instead, it should give them freedom and some level of control over your website or app. A very recent example of this is adding a dark mode to almost all the apps we are using. Some users just find dark mode more appealing, and tech giants listened to their needs. They should have the power to choose and personalize their own experience.

Helping users quickly backpedal or rebound from mistakes is an integral aspect of user experience. For example, they should have a button that will take them back up if a user has reached more than one step down in the hierarchy.

Next, a Cancel button can allow them to quit the action when a user initiates a new object such as an email or a message. The Undo button is also important when it comes to reverse a behavior that is accidental or unwelcome.

However, it’s important to note that users shouldn’t have too much freedom or control over your product. Too much detail will confuse new users, and, regardless of how many advanced features you have, your product should remain simple to use.

When it comes to advanced options, they should always have the option to quit immediately. Don’t let them wander into your app. Include confirmation questions to make sure the user hasn’t accidentally wandered off to an advanced feature. Also, always offer an emergency exit so they can go back to the default layout or home page in case they don’t want to continue with their session.

Accessibility usually involves designing products to be convenient to use by people with disabilities. Because we create products for people, it is important that as many individuals as possible may have access to them. What is more, many regulations demand brands to provide equal access to everyone, so accessibility is mandatory for all UX designers.

The emphasis on eliminating barriers for individuals when using the app, regardless of whether those barriers are temporary or perhaps more permanent, is a specific aspect of the role of the UX designer. A big benefit is that the experience for all consumers is always enhanced by following accessibility rules, as it directs the designer into the most accessible style.

One good example of accessible design is adding high contrast between text and background to enable all users to read them, no matter the setting they are in at that particular moment.

Having all of your designs fully-accessible may seem like a challenging mission. However, there are many resources out there that provide guidelines that can help you triumph.

These guidelines include using descriptive and informative page titles, adding multiple ways to locate a web page in many web pages, avoiding instructions that rely solely on sensory characteristics as people with low vision might not understand them, adding keyboard shortcuts for keyboard-only users, including alternate text for images, etc.

Focusing on making digital products available to everyone may appear to consume a lot of effort that may be better used in enhancing the simple design of the products. However, these two aren’t actually independent from each other. For example, creating a website that is easy to use for people with low vision can actually result in a site with a simple design, making it more appealing to all users.

A vast volume of rich qualitative data is generated by user interviews, ethnography, and field research. Using an affinity map means performing thematic analysis to identify trends, create themes, and clear out what you have discovered from your qualitative research by easily sorting data and effectively and accurately identifying correlations between these categories.

An affinity diagram is an instrument that is frequently used to coordinate data and concepts. Affinity diagrams help you organize data and then interpret contextual evidence or findings into categories of related items.

How do you create an affinity diagram? There are five steps:

1. Document all statements and observations on individual cards or sticky notes
2. Check for similar trends or findings
3. For each pattern or trend, form a group
4. Name each group
5. Offer a statement about what you have discovered about each category

This part is tightly connected to the user control principle we previously elaborated on. One of our main objectives as designers is to avoid mistakes. All their effort falls apart when users mistakenly uninstall an app or make an unintentional purchase. One of the safest ways to eliminate these mistakes is to seek confirmation for some major or irreversible steps.

A confirmation screen that confirms all the details of the order is a typical example of seeking confirmation. Or, when uninstalling or deleting an item, they should get a message that asks them “Do you want to delete this permanently?” However, these screens should only be used for meaningful actions that have a great impact because they add an extra effort to the user’s actions.

Facebook asks users to confirm whether they want to close their chat window because once they do it, their unfinished message will be lost forever.

If you want to make your confirmation box more effective, you should be concrete and inform users about the consequences they’re going to face when pursuing the specific action. Furthermore, you can provide more descriptive options instead of just Yes and No, like Delete an item, or Keep item.

For even more information, you can offer a description of the consequences that are going to occur if they commit the action. However, keep the text brief and easily readable. For some more complex actions, ask for nonstandard actions that will confirm their desire to complete the action. Many websites have the Are you a robot check before they allow the user to complete a certain step.

Storytelling is a medium of communication we all use, independent of our backgrounds. It has been there since humans exist, making their communication easier through stone age rock paintings. Now, storytelling is all around us. All the movies we watch, the Netflix series we binge, the books we read, and the conversations we have every day.

Stories are what make us understand and remember information. In fact, a Microsoft study revealed that people usually lose attention after eight seconds. Considering that the attention span of a goldfish is nine seconds, this means that we can’t really use them as a reference for poor attention anymore.

That’s why we need stories—to make people stay focused for more than eight seconds. This skill is essential in every segment that has any kind of connection with users, including UX. When you’re presenting a certain product, you can’t just write a list of the features or the benefits of this product.

Instead, you should create a story that revolves around this product. A catchy story with a flow that will capture users’ attention and create an emotional connection between them and our product. In addition to engaging, the story should also simplify the idea of the product, making it more digestible and understandable to users.

To make people remember our product, our stories have to be relevant to them, telling something that really matters for that particular group of users. Next, they should have a structure and be as simple as possible. You should also be aware of why you’re writing this, and be original. You can’t always be unique as there are so many products out there, but you should at least try not to be your competitor’s obvious copy.

Your sentences should be conversational and not too complex, using the language people use in their everyday lives. More importantly, they should reflect the identity of your brand. Depending on your target audience, you should also determine the tone of voice you’ll be using. It could be friendly, formal, casual, educational, etc.

In infographics, advertisements, and social media, we see visual storytelling daily. But it is not that easy to define the definition of visual storytelling for digital products. The expression “visual storytelling” can sound a little ambiguous and subject to many meanings, correlated with “visual narration,” particularly if we do not know the context of the industry.

Visual storytelling doesn’t mean that you should only use imagery and graphics while completely excluding words and language. Instead, visual storytelling should support your copy and bring it closer to users.

Visual storytelling should boost the UX efforts, regardless of the intent, and transfer an understandable message to the user in a visual way. It can be complicated or simple, but we all know the best way is to always go simple. Visual storytelling can include videos, a gallery of images, graphics, animations, and anything else that includes visual messages. Whatever you choose, your visual storytelling solution should evoke emotions.

Using this method makes your brand communication more memorable. Next, when you have a lot of data points to display, visual storytelling simplifies them and presents them more conveniently.

What is more, people learn much more easily when there are visual elements involved simply because their brains are designed this way. Namely, MIT research has shown that humans need 13 milliseconds to identify an image and that 90% of the information the human brain receives is visual.

Where to place the most important information? Alex Bigman of 99Designs says that the human eye scans a website in two patterns: the F-pattern and the Z-pattern.

Source: https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28

Source: https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28

Both examples show that the eye starts from the left two right and then continues down the page. That’s why organizing your content in a way that adapts to how your user’s scan is critical. To achieve this, keep your text central or left, with a maximum of 75 characters per line. Also, don’t make text boxes too long. Always make sure you include images to make the story more memorable.

A grid contains a set of lines that separate a page into rows or sections. This system enables designers to coordinate the website’s content. These lines usually aren’t visible. However, the UI designer uses them to make page elements aligned and visually organized. Basically, the grid defines the frames within which the content is placed in a way that the users will find easy to scan.

Grids contain several elements:

– Format, like the size of a page or a window.
– Margins are the negative area between the format’s edge and the content’s outer edge.
– Columns are the blocks that contain pieces of content.
– Alleys are the space between the columns.

– Modules are separate segments of space generated by column and row collisions.

There are several types of grids:

• Manuscript grids are used in papers, books, ebooks, pdfs, and other pieces of content with large amounts of text.
• Column grids organize the content in pieces like magazines to make it easily readable for the user.
• Hierarchical grids place the content according to its importance.
• Modular grids provide an even deeper division of the page both vertically and horizontally, creating a matrix of cells.

• Baseline grids are defined by the line where the text is placed, directing the vertical spacing.

Source: http://thinkingwithtype.com/grid/

The framework that maintains the graphic elements of an interface is the layout. It makes the content function together as a group, in a logical way. What is more, it puts focus on the most important content and provides a good user experience. The user shouldn’t be aware of the layout and the easy navigation it provides.

There are several things we need to mention when it comes to layout.

First, the size. Size is very important as it should highlight the most important content, such as titles and subtitles. Designers do this to influence the decision of the user, directing their attention to the most important information. This is why homepages have hierarchical blocks with different sizes.

Asymmetry is an important element of the layout that gives the website elements more dynamics. One part shouldn’t weigh more than another, but this shouldn’t be so clear as in the case of symmetric designs. Asymmetry should start with the main element and continue to the secondary elements, reflecting a certain conflict among them and a variety of experiences that will reflect the design’s style and type.

Space is very important as it provides the connection between the elements. The distance between the elements guides the user’s attention, helping them decide which elements are related to each other.

Break means disrupting the usual flow of the website to capture the user’s attention. Repeating the same elements over and over again kind of puts the user in a comfort zone, so disrupting this flow attracts their attention, making them expect more information.

The visual journey is very important as it guides the user through the website or app. This means that you’re prioritizing elements in a logical order, instead of expecting the user to focus on everything equally. To achieve this, you need to understand the content and its importance and prioritize it. Moreover, you also need to review the way your users interact with the website to make sure you’re prioritizing the right content.

Having consistency means making all elements on the UI standardized. They should have consistent looks and behaviors, helping the user get familiarized with the brand and its product. This also makes the user feel more comfortable with the brand’s interfaces.

Consistency depends on several aspects. First, you should always consider fundamental UI guidelines during the design process. For example, if you’re designing for iOS, you should follow Apple’s Human Interface Guidelines.

Then, you should also look at how competitors’ apps and websites have solved the problems you’re trying to solve. A perfect way to improve usability is to take this into consideration and model your work with competitors in mind. This means that you’ll present users with an interface they already have knowledge about, without having to worry that an unknown user interface could frustrate them.

Finally, you should be consistent with your own design and the visual identity of the brand. Your style, the layout, the colors, and the interactions should all be consistent, without any big surprises for the user.

Have you chosen a beautiful font for your digital product? Great! But, typography doesn’t end here. In fact, you haven’t even started.

Typography consists of the form, shape, and structure of fonts, aimed at eliciting feelings and articulating unique messages to the end-user. It is the UI designer’s task to maximize the functionality of the website by making the typography easily understandable, as well as guaranteeing the typeface contributes to the overall visual identity of the product. Typography should support the design in delivering the right message to the user.

These are the elements of typography:

• Font and typeface, where the font is part of a particular design of type called typeface. Basic typefaces include serif, sans-serif, and decorative.
• Font weight, height, and size to determine the style of the font.
• Mean line, which determines the top and the bottom of the letter.
• A baseline is an imaginary line upon which a line of the text rests.
• Consistency, referring to the standardization of the typefaces. Keeping a consistent typeface eliminates user confusion.
• White space or negative space is the space that surrounds elements like visuals or text. It should be balanced to keep a clean interface.
• Color and contrast. When it comes to color, you need to create a balance between value, hue, and saturation. Try rendering body text dark gray on-screen instead of black. Screens contrast more severely than paper, making it difficult for users to read in full contrast.
• Hierarchy, to emphasize the text you want your users to read first.
• Tracking represents the space between the font characters.
• Ascender and descender, where the ascender is a part of the letter that goes above the mean line, while the descender goes below it. For example, ‘d’ has an ascender.
• Alignment means having the entire text standardized with equal spaces and sizes.
• Kerning applies to isolated cases in modifying the space between font characters, unlike tracking, which applies to all.
• Line height is the amount of space between the top and bottom lines of the text.

In the modern age, typography is a discipline that any designer has to learn. Mastering typography skills, though, takes time. The best way to become a master is to practice often. In fact, this is the only way to understand anything. Trying out a large number of fonts and styles will get you a sense of how they feel and function for your apps.

Color theory is a concept that teaches the use of color in design. It provides guidelines on the use of color palettes, considering psychological and visual elements. The color theory relies on the color wheel.

When it comes to color, you should consider these elements:

• Hue is the natural state of the color without any variations.
• Value refers to how much lightness or darkness the color contains.
• Saturation reflects the color’s intensity.
• The shade is the amount of black the hue contains.
• The tint is the amount of white the hue contains.
• Temperature can be warm, cool, and neutral.

Here, it’s also important to mention the two color models: additive and subtractive. Red, blue, and green are the main colors of the additive color scheme, also regarded as the RGB color system. All the colors used on the screen are based on this model. The subtractive model, also referred to as CMYK, consists of cyan, magenta, yellow, and black.

Source: https://printaura.com/wp-content/uploads/2015/03/difference-between-RGB-and-CMYK.jpg

For your digital product, you’ll have to choose a color palette, or also referred to as color harmony. Here are the options:

Monochromatic colors are based on one color, reflecting its different tones and shades.

The analogous palette consists of colors that are next to each other on the color wheel.

Complementary colors are placed in front of each other on the color wheel. Their combination results in high contrast that attracts a lot of attention.

Split-complementary color schemes include more colors, working the same as the complementary palette.

The triadic palette contains three colors that are equidistant on the color wheel. Using one color as a dominant and the other as accents are advised to maintain balance.

A tetradic color scheme contains four colors from the color wheel that represent two complementary pairs. This is a scheme usually used by more experienced designers that know how to balance and harmonize colors.

The choice of your color palette should be based on the user input you receive.

Icons are simple pictures used for expressing things in context. They are memorable and easy to identify. They can be clarifying, interactive, decorative, etc.

To make them effective, icons have to be understandable and provide informative value. Next, they should be simple instead of overloaded with unnecessary additions. However, they should also capture attention and stand out among other elements. They should have the ability to scale in different sizes and be consistent with the general style of the layout.

Sketch is one of the most popular design tools out there. This vector-based app has become a very popular Photoshop alternative thanks to its simplicity that saves a lot of time. It eliminates the need to produce consistent prototypes giving designers the possibility to make uniform improvements throughout the library of symbols, styles, resizing, etc. It basically removes all boring work and lets designers focus on the design.

InVision offers designers all of the UI modeling techniques they need to build completely formed and usable designs that consist of dynamic components and animations, resulting in great apps.

They also make connectivity simple, with communication features that allow designers to communicate their work on-the-go, gain input, and make recorded improvements at each stage. The interactive whiteboard that helps team members to showcase their work, connect, and get the feedback they need before executing is another helpful feature of InVision.

Craft is an InVision plugin that can upgrade your Sketch work. It provides what you need for prototyping and teamwork along with this time-saving function. Styling updates, edits, and other adjustments are made through the tool’s board. This way, every team member can always use the newest version of the project.

Craft provides you with access to iStock and Getty images, which means you can get high-quality visuals for your digital products. It also lets you fill mockups with data from different sources, allowing you to provide high-quality content and design mockups that are as close as possible to the final product.

No design tool list can go without Adobe. They simply create the best design software. Everyone who’s already used any Adobe software can use AdobeXD to create mockups and prototypes in no-time and collaborate with other designers in real-time.

For UI designers, Adobe XD offers technical resources. Moreover, it provides everything that designers need to craft interactions and other complex components that can be implemented into designs. It’s one of the few design tools that really provide designers with everything they need to deliver sophisticated results.

Figma helps designers create prototypes and mockups, test them, and synchronize all the developments. More designers can work on the same project at the same time. Everyone can see who has it open and what they are working on.

One very big advantage of this tool is that it’s a web platform and you can open it through your browser. No downloads and slow loading times. And, the best thing is that it’s free for individuals. What are you waiting for? Go check it out!