It is very helpful to create a component-based design when we are designing our screens. As it allows us to work faster and in an efficient way.
See you, in the next article. And do not forget to like, share and subscribe for more amazing content.
What is UX Design?
UI vs UX
Understand the fundamentals of UX
Look for your areas of interest within the UX
Get some experience
Upskill yourself
Put out yourself
The term UX Design was first coined by a cognitive scientist from Apple named Don Norman. And before defining UX Design, let us understand that there is no commonly accepted definition for UX. Different design experts have their own way of defining UX.
“UX Design can be defined as a concept or a process followed by designers/design team while designing any new or existing product (digital)”.
“It can also be defined as the experience provided to an end-user gets while using a product.”
Below are more definition of UX Design from some experts
Now you should be having some understanding of what UX Design is, and also may have made your own definition of UX. So, let us now understand more.
UI and UX are not the same, even though they are named together most of the time. Let’s try to understand how different they are:
When we speak of fundamentals there are multiple domains that come under UX which need to be considered, like Interaction Design, Experience Design, Human Centered Design, and many more. While it might not be possible to cover every aspect of UX, below I have listed some of the common topics, which require some understanding while you are just starting out.
UX Laws are those best practices that we should follow during our design process, to make the design solutions more user-oriented. Some of the commonly used UX laws are mentioned below:
Jakob’s law was defined by Jakob Nielsen, Ph.D. a User Advocate and principal of the Nielsen Norman Group which states that –
People spend more time on others websites, that means users expect your application shoud behave functionally the same way as other application they are accquinted with.
Learn more from expert leaders about what they have to say about Jakob’s Law and why it is one of the crucial and interesting laws to know and apply in your design solutions.
Hick’s Law (or the Hick-Hyman Law) named after British and American psychologist team William Edmund Hick and Ray Hyman states that –
People tend to take more time in making decisions with more number of options or choices provided to them
See below what other experts have to say about Hick’s Law.
Fitt’s Law was defined by a psychologist named Paul Fitts in 1954, states that
The time to acquire a target is a function of the distance to and size of the target.
This law actually describes the time it takes for a user to interact with any UI elements on the screen depending on size and distance.
Miller’s Law of UX states that –
The average person can only keep 7 (plus or minus 2) items in their working memory.
See in the video below how experts think of Miller’s Law of UX Design
Below are some of the recommended resources you should check out to learn more about UX Laws:
Laws of UX – https://lawsofux.com/
5 essential laws of UX Design – https://uxplanet.org/5-essential-laws-for-ux-designers-5ca70466faa1
A diagramtic representation of UX (User Experience)
The color theory defines how to use colors effectively in our visuals or hi-fi-mockups which are nothing but the final screens that are designed using design tools like FIGMA, Adobe XD, etc.
The color wheel mainly comprises two different color models. One is RGB, i.e., Red, Green, and Blue which is mainly used for designing digital applications like websites, apps, dashboards, etc. The other is RYB, i.e., Red, Yellow, and Blue used by artists.
The color wheel also helps to select our primary, secondary and tertiary colors, which are the three main categories of colors.
Primary colors
We have three main colors which are considered primary colors namely Red, Green, and Blue.
Secondary colors
The secondary colors are created by mixing each of the two primary colors. And the colors newly generated are Orange, Purple, and Green
Tertiary colors
These types of colors are mixes of both primary and secondary colors.
The above three color categories can be further subdivided into color schemes mentioned below:
Monochromatic
The simple way to select a color is where a color palette is created from one single color by a combination of multiple shades, tints, and tones.
Analogous
An analogous color scheme is created in a combination of three colors alternating with each other in the color wheel.
Complementary
Complementary color uses opposite colors from the color wheel to create a contrasting color effect in UI. For example – Green and Red.
Typography deals with different fonts, and typefaces and can be defined as the technique of arranging texts or fonts in your application in a legible, readable, and appealing manner. Typographies are not just limited to the digital medium, it goes for print as well.
Understanding the different elements of typography will help you in using fonts in a much better way.
Fonts and typefaces
Fonts can be defined as an individual weight or style within a particular typeface, while typeface, also known as font family can be considered as a group of all variants of a font. For example, if Poppins is used in your project as a typeface (font family), Poppins Light, Poppins Bold, can be considered as a font.
Contrast
The contrast in typography can be maintained by using different font variants like medium, light, bold, etc. Having proper contrast in our content emphasizes the most important element which needs to be focused on.
Consistency
One of the key principles in typography is to keep fonts consistent throughout your application design. Having too many fonts can be confusing for the same information, so use the same font styling for the same information.
Whitespace
Whitespace refers to the empty space that is applied to the text or any UI elements. It can be provided via margin and padding or using CSS properties like position. The idea of having whitespace is to allow your text or UI elements to breathe and also can be used for drawing users’ attention.
Sans serif fonts have a clean and minimalistic look. These types of fonts are one of the most commonly used fonts for any website. Some of the commonly used Sans Serif fonts are Poppins, Noto Sans, Montserrat, etc. Ideally, a sans serif font looks something like as shown below.
Serif fonts have a pointed edge on them which makes them a classic look. These types of fonts are one of the most commonly used fonts for restaurants, and magazines. Some of the commonly used Serif fonts are Times New Roman, Playfair Display, Lora, etc.
Monospace fonts are commonly known as fixed-width fonts. Such fonts have equal-width letters and each of the characters occupies the same amount of space. Some of the commonly used Monospace fonts are Roboto Mono, IBM Plex Mono, etc. Ideally, a Monospace font looks something like as shown below.
Handwriting fonts look somewhat similar to human writing. These types of fonts are also known as Cursive fonts (also known as Script fonts). If you prefer to have manually designed fonts, then probably you can go with handwriting fonts. Some of the commonly used Handwriting fonts are Avocado, Pacifico, Satisfy, etc. Handwriting fonts look something like above.
Design tools are the software used by UX Designers to create mockups for digital applications like websites, dashboards, and mobile apps. Such tools also come with amazing features like creating prototypes, complex animations, developer handoff, collaboration within product teams, and many more. Below are some of the widely used design tools which you must try learning if you are willing to start your career in design.
One of the best and most commonly used design tools across the industry. It is completely free to use although FIGMA has premium plans. The best part about FIGMA is it can be accessible in the browser through its shareable link and you can also import design files worked on other design software like Photoshop or Sketch.
Invision is a great tool when it comes to creating complex animations for your application. You can also create wireframes, and prototypes and even do a collaboration like FIGMA. Learn more about Invision from official learning page. It has a free tier so you can learn it for free, like FIGMA.
Adobe XD is a product from Adobe that is a similar design tool to FIGMA. Unlike FIGMA, Adobe XD is mainly used for designing digital products with minimum collaboration. It requires a subscription and is available for a trial of 14 days.
Typography deals with different fonts, and typefaces and can be defined as the technique of arranging texts or fonts in your application in a legible, readable, and appealing manner. Typographies are not just limited to the digital medium, it goes for print as well.
There are two types of research we have in UX Design namely Qualitative Research and Quantitative Research
Qualitative Research – As the name suggests, this type of research is mainly done to understand the user’s behavioral pattern by using different research methods like User Interviews, Case Study Research, Brainstorming, Diary Studies, etc.
Quantitative Research– Quantitative research refers to the evaluation of certain problems or situations using quantifiable numbers, by asking how many and how much kinds of questions. For example, re-design of a website’s hero section leads to a 20% increase in sales. Some of the commonly practiced quantitative research methods are Focus groups, tree testing, etc.
Apart from the visual design, there are other design artifacts, created by the designer as a part of design deliverables. Some of the common UX deliverables are mentioned below:
Personas are design artifact (or design deliverables) that contains the details of your target audience received via multiple research processes represented through a fictional character. Check out the detailed guide on How to create a User Persona to learn more. Ideally a Persona looks something like shown below.
A Journey Map allows you to understand the end-to-end journey of a user in the product. It also defines all users involved in the different stages of the product, captures user’s emotion, and figure out the overall experience of the users engaging with the product. Ideally, the Journey map looks something like displayed below.
Wireframes are the blueprint for the final design of your product or application. The main purpose of creating wireframes is to align with layout spacing, content alignment, understanding of any functionalities to be implemented. Wireframes are also easy to create which saves time and effort for a designer before actually making the Hifi visuals with brand colors, typography, etc. Checkout the best practices to follow for creating wireframes.
Hifi (aka High Fidelity) Mockups are the final designs created with brand colors, typographic specification, standard iconography. These are the actual designs shared with the product or engineering team to be implemented with functional code. Hifi Mockups also known as Visual Designs are the end result of the complete UX Design process followed by a designer.
The two most important characteristics of a good design are discoverability and understanding as mentioned in the book – The Design of Everyday Things written by Don Norman
Hmm 😕 quite a lot it seems. UX is not just only about visuals or making screens in FIGMA or any other design tool that we think of, it is way more than that. Now is the time, to reflect on what is just discussed above, and analyze whether should I consider being a UI/UX designer or UX designer or maybe into something specific.
Well if you are confused and thinking about which area to select and proceed with, do not worry, I got you covered. Listed below are my two tips on how I started and managed to upskill myself with time.
#1. Personal interest – think of that one area you feel confident about. It could be about research, colors, or with design tools. Dive deeper into that area by reading books, taking courses, podcasts, etc.
#2. Your goals – Are you looking for a job or wanted to start as a freelance? If you are aim is to get a job, do some research and explore more on the areas you are confident about, go through job descriptions on some of the job sites like LinkedIn, Naukri, etc. and start applying. And if you want to explore freelancing, then look out for gigs around your specialty and keep learning.
Do not feel low, if rejected in your initial interviews. Learn from the mistakes you made, note down the questions, and keep trying. The only way you could fail is, if you stop trying and learning.
If you are in a job started as a UX designer or UI/UX designer in most cases you will be working on all phases of the design process, from discovery to hi-fi designs and prototyping. While it is a very common working culture in the UX design industry, you can also decide after a certain period of time depending on your interest which area you want to go with, and accordingly you can upskill yourself.
While it could be difficult for any beginner to have the live project working experience, that should not be a show-stopper in your learning journey. You can always work on some mock projects, take up some design challenges or even take up any personal challenge you are facing on any digital product used in your daily life.
My personal go-to choice out of all is working on design challenges. It will provide you with a ready-made problem statement or a brief that you can take and start working on directly.
Also, in my personal experience, working on design challenges is great as you will be working on a real project brief, which can also be featured in your portfolio. Some of the best platforms where you can find design challenges:
It is a platform created for designers and developers to find ready-made UI kits and other resources. Both freemium and paid resources are available. You can create your own account for free and participate in those challenges.
One of the best platforms to work on UX projects with pre-built design problems. One thing that I like most about this platform is they have challenges specific to different UX areas like Journey Mapping, Persona, Heuristic Evaluation, and many more. It is completely free to try.
Another cool platform for beginners looking out to work on design challenges or searching for a job. It is definitely a go-to platform where you can identify your skill gap once you create your profile and import or attach your case studies if created any.
Upskilling yourself is crucial to this evolving design industry where we see multiple new things coming out every day. Every individual has a unique style of learning. Some prefer to have structured courses, while others like to hustle, self-explore on their own and gather knowledge.
While self-learning could be very interesting as you can learn it at your own pace, I myself am a self-taught designer and like to find my own solutions, but at times it could be challenging and also self-learning might not work for everyone. Below are two of my recommended approaches and choices for upskilling yourself.
1. Courses
While there any many platforms providing courses on UX Design which are available both for free and premium. It depends on your interest if you want to learn from free courses or paid sessions. Below are some of my recommended platforms from where you can learn.
Coursera
Coursera is providing a course on UX Design named Google UX Design Professional Certificate. It requires a paid membership.
Simplilearn
One of the best platforms, where you can about UX Design. They have a program named UI/UX Design Expert where you get dedicated online sessions with industry-led mentors along with self-paced video lectures and assignments. It is a paid course.
Interaction Design Foundation
Another best platform to learn about UX where pioneers and founder of UX Design like Don Norman takes sessions and also have self-paced courses, which you can complete in your own time. They have both free resources and paid memberships. Check out the IDF literature section for free.
2. Mentorship
A mentorship program can be very helpful where you can learn in a collaborative way from an expert. Such programs might be exploratory where you are free to learn things in your own interest along with a mutual discussion with your mentor. There are also structured mentorship programs where you can learn from an expert through 1-on-1 live sessions, curated course contents, assignments, and portfolio building. Such programs could be paid for, but the good side is you will be getting dedicated attention, as you will be in small groups of 2-3 members learning and growing together.
Join the 5-week intensive mentorship program where you will learn about UI/UX Design completely from scratch which includes topics like User Research, Prototyping, Wireframes, and Design tools.
Showcase of your work on design platforms like Behance, Uplabs, and Medium, and also on social media platforms of your choice like LinkedIn, Instagram, etc. Putting out your work in front of an audience gives you two advantages, which I can say from my own personal experience.
Firstly, you help out yourselves, meaning your work and you as a person get noticed. Not only that, but people also get to know your skills and experience and might also provide or share their feedbacks which will help you to enhance your work.
Secondly, if you are looking out for a job or are willing to freelance, someone will be watching your work and you might land up getting some offers. Having your work online provides another benefit, which is you can share your work with others or present it to anyone without you being physically present. Also, since its online, you can access it from anywhere at anytime.
Well, congrats 🎉✨for completing the article, and thanks for sticking around. By now you must have got a fair understanding of all areas you need to focus on, learn and grow if you are planning to start your career in UX Design.
And if you are planning to land a job, then you need to have an understanding of all of the above-mentioned areas, create your design portfolio, and prepare for design interviews. Every designer’s journey is different stay calm and focused, and keep learning you can also be a great designer.
Also, let me know, in the comments below your journey and process for becoming a UI/UX Designer.
How to start your career as UX Designer in 2023 in 7 simple steps.
Creating a successful product that resonates with your target audience is no easy feat. It takes time, resources, and a deep understanding of your users. This is where user personas come in. User personas are fictional representations of your ideal customers, based on research and data. They help you develop a better understanding of your audience’s needs, behaviors, and motivations, and guide your decision-making throughout the product development process.
In this step-by-step guide, we will explore everything you need to know about creating user personas. You will be provided with a comprehensive framework that will help you define your user personas, gather data, and create detailed profiles that truly represent your target audience. I will also share best practices and expert tips that will help you take your user-centric approach to the next level.
Whether you’re a seasoned product designer or new to the field, this guide is an essential resource for anyone looking to build better products that truly resonate with their users. By following my step-by-step approach, you’ll be able to create user personas that will guide your decision-making, improve your products, and ultimately lead to greater success.
Creating a user persona is an essential step in developing any product or service. It help us understand our target audience by providing a fictional representation of their behavior, attitudes, goals, and motivations. This information is invaluable when designing and marketing a product or service, as it ensures that we are meeting the needs of our users.
The term persona or User Persona can be defined as a design artifact (or design deliverables) that contains the details of your target audience received via multiple research processes represented through a fictional character.
It act as a guided path that helps the design team in making design decisions while designing the product. Also, personas are not just for designers, they should be shared across the product team including management so that everyone is aligned with the target users and the decisions taken revolves around user benefits along with the business goals.
Below is a sample persona displayed.
It provide valuable insights into your target audience’s needs, behaviors, and preferences, leading to more successful product development. Having a well-documented one provide lots of benefits not only to design teams but also to other internal stakeholders.
Before you begin, it’s important to understand the purpose. What problem are you trying to solve, and how will a user persona help you solve it? Here are a few common reasons:
Once you have defined the purpose, you can move on to the next step.
Defining user personas is a critical step in creating products that meet the needs of your target audience. To do this, you must first identify your target audience and gather relevant data about their preferences, behaviors, and pain points.
The first step is identifying your target audience. This involves understanding who your product is designed for and what their needs are. You should consider factors such as age, gender, occupation, income, and geographic location when identifying your target audience.
Once you have identified your target audience, the next step is to conduct research and gather data. This can include surveys, interviews, focus groups, and other research methods to gain a better understanding of your users’ behaviors, preferences, and pain points. This data will help you develop accurate and detailed user personas that capture the essence of your target audience.
Finally, you can begin developing user profiles based on the data you have gathered. These profiles should capture key characteristics and motivations of your target users, such as their goals, challenges, and behaviors. By taking a comprehensive and data-driven approach, you can create products that truly resonate with your target audience, leading to greater user satisfaction and higher levels of engagement.
Creating user personas is a crucial step in designing products that meet user needs and expectations. In this section, we will explore the process of crafting personas based on user profiles. This involves identifying key characteristics and behaviors of your target audience and defining their goals and pain points.
To do this, you will need to gather information about your target audience and create user profiles. This information can be gathered through surveys, interviews, user testing, and analytics.
Once you have collected these information, you can start to identify key characteristics and behaviors of your target audience. This could include their demographics, preferences, needs, and behaviors. You can use this information to create a set of personas that represent your target audience.
Finally, you will need to define the user goals and pain points of each persona. This involves understanding what each persona is trying to achieve with your product, as well as any obstacles or challenges they may face. By doing this, you can design a product that meets the needs and expectations of your target audience.
Utilizing the personas is an important aspect of the product development process. This section of the guide will cover how to apply the same throughout the product development process.
Crafting is just the beginning. To ensure usefulness, it is essential to use the personas effectively throughout the product development process. This involves incorporating them into design decisions, feature prioritization, and usability testing. By doing so, teams can create products that better meet user needs and expectations.
Testing and validating is a crucial step in the process of creating effective user personas. It ensures that the personas accurately represent the needs and goals of your target audience. Here are some steps to follow for testing and validating your personas:
By testing and validating you can ensure that they are an accurate representation of your target audience, and you can use them to guide your product development decisions.
As your product evolves and your target audience changes, it is important to ensure that your user personas remain up-to-date and relevant. This will help you to create products that continue to meet the needs of your users and stay ahead of the competition.
Here are some tips and strategies for creating effective personas:
It is important to avoid common pitfalls that can lead to inaccurate or ineffective personas. Here are some of the most common pitfalls to watch out for:
In conclusion, creating user personas is a crucial step in developing products and services that meet the needs of your target audience. By following the step-by-step guide outlined in this article and utilizing best practices and tips for creating effective personas, you can develop accurate and valuable user profiles that inform all aspects of the product development process. Remember to constantly test, validate, and update your personas to ensure they remain relevant and useful. With well-crafted personas, you can design products and services that resonate with your target audience and drive success for your business.
Let me know in the comments below, your experience of creating User Personas.
If you are someone new to FIGMA and looking to explore and learn the best plugins that you can use in your FIGMA project, then you are at the right place.
In this below article, you will learn the top 10 plugins that you can use to increase your workflow.
So let’s try to explore them.
What is Plugin?
Benefits of using plugins
How to install a plugin?
10 plugins to 5X your workflow
Plugins are added functionality or feature which helps to enhance your workflow in an easy way
To install a plugin in FIGMA, you can do it in two simple steps.
Select the Community option from the top left corner, as shown below.
Search for the plugin from the Search bar on top. Filter Plugins from left. Select Try it out to install the plugin and use it in your project.
Below is the list of the top 10 recommended plugins to have for any designer.
It is a great plugin from Iconify and Vjacheslav Trushkin that displays the combined list of multiple icon libraries in one single place. The settings panel of the Iconify plugin looks something like below. You can try out the Iconify plugin from the FIGMA community.
Benefits
Another great plugin by Dave Williames that allows you to generate random content for your UI elements. You can use it to generate words, sentences, and paragraphs. The settings panel of the Lorem Ipsum plugin looks something like below. Try out the Lorem Ipsum plugin from the FIGMA community.
Benefits
Blobs from Dylan Feltus help you to generate custom shapes. Such shapes are mostly used as background elements for photography on websites. You can try out the Blobs plugin from the FIGMA community.
Benefits
Logo Creator by By Hexorial Studio, Deep, and Manthankumar Satani is a must-have plugin and a great resource for finding logo inspiration within FIGMA. There are different categories from which you can select the logotype of your choice. Now no need of moving out of FIGMA for finding logo inspirations. You can try out the Logo Creator plugin from the FIGMA community.
Benefits
Unsplash by Kirill Zakharov, Liam Martens, and Unsplash is one of my favorite plugins on the list. No need to move out of FIGMA now to search for high-quality free images. Just install the plugin and search for images of your choice. This plugin makes an API call to pull out the images from Unsplash official website right into your FIGMA workspace. You can try out the Unsplash plugin from the FIGMA community.
Benefits
Another favorite on the list is Color Generator by Jorge Fernandes. You can very easily create color schemes based on Design Systems available within the tool. At present, the plugin supports four Design Systems which are Orbit, Atlassian Design System, Material Design System, and Ant Design System. Try out the Foundation Color Generator plugin from the FIGMA community.
Benefits
This plugin is another great resource to include in your plugin list. You can remove the background of any image now within FIGMA completely for free. This plugin is from Icons8 itself. Try out the Icons8 Background Remover plugin from the FIGMA community.
Benefits
Content Reel is directly from Microsoft and Eugene Gavriloff. This plugin allows you to create your own content and design layouts more efficiently by pulling text strings, images, and icons. You can try out the Content Reel plugin from the FIGMA community.
Benefits
Last but not least is the Arc plugin from unfold. It is a super cool plugin that allows you to create arc-shaped text right within FIGMA. No need to go for Photoshop or Illustrator. And thanks to the community once again for bringing this out. You can try out the Arc plugin from the FIGMA community.
Benefits
Join the 5-week intensive mentorship program where you will learn about UI/UX Design completely from scratch which includes topics like User Research, Prototyping, Wireframes, and Design tools.
Check out the actual implementation of each plugin from the above list in the video below.
Well, congrats 🎉✨for completing the article, and by now you must have got a fair understanding of what plugins are and their benefits. Also, some of the commonly used plugins can help you in your design workflow.
Let me know in the comments below which is your favorite plugin from the list above and what other plugin you use in your daily design work. Catch you soon in my next article.