Let me just welcome another tutorial on UX/UI fundamentals for beginners. With great pleasure, I introduce to you one of my greatest passions for you today, User experience and User interface design. In this tutorial, you will understand the core fundamentals of UX/UI design, how they fit together and what the overall process for a digital product design is.
![](https://static.wixstatic.com/media/9efac7_ccd2ab4e859b4e01a46915eeb9793515~mv2.png/v1/fill/w_980,h_482,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_ccd2ab4e859b4e01a46915eeb9793515~mv2.png)
This article would be taught in my own unique way showing all you need to know to start a career in UX/UI design. The goal of this article is to build up more confidence in you as a beginner UX/UI designer. Here are the key points we would be focusing on in this tutorial:
· UX Design: What is it?
· UX Design Process
· UI Design: What is it?
· UI Design Process
· Your First UX/UI design job
· Conclusion
So just sit back and enjoy as you read on!!!
UX Design
UX design meaning user experience design in the design industry can be best described in my opinion as the beginning of a design process. Often time’s designers and even companies are unable to distinguish between UX and UI, which is why I decided to tackle the problem first.
User experience is the first stage of any design project or work. This is where you are to understand in detail the problem you are trying to solve for your users.
In every business, there is usually a problem you are trying to solve, meaning your customers come to you because there’s a solution you can provide or a service you can render to solve their problem.
UX Design Process
This is the steering wheel of how a business is run. Understanding what a user’s problem is, is the first part of a UX designer's work. All this can be accomplished by performing what is called research.
Research
![](https://static.wixstatic.com/media/9efac7_3dd15a5b2d884a9eb7580e3a18582189~mv2.png/v1/fill/w_980,h_485,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_3dd15a5b2d884a9eb7580e3a18582189~mv2.png)
This is the first of the four-stage cycle that centers on the UX design process. In this stage, the goal of the UX designer is to utilize various tools needed to understand the problem of the users and how to solve them.
At this stage, there is no design work done, just research techniques like surveys, interviews, and customer personas. After this process is done, the UX designer understands what the problem of the user is and how to solve it.
One thing to take note of is that there are more UX research job roles and if you enjoy this part of the process you can decide to go deeper into learning more about it. This all leads to the conception stage.
Concept
![](https://static.wixstatic.com/media/9efac7_3eacd3c56cc846fa9c05a64a5ed2fb13~mv2.png/v1/fill/w_980,h_483,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_3eacd3c56cc846fa9c05a64a5ed2fb13~mv2.png)
At this stage, the UX designer knows what problem to solve and thereby comes up with solutions for these problems. This can be in form of a sketch or a storyboard. The idea of the complexity of the design does not matter at this stage; the most important thing is to generate ideas and concepts that would in return produce meaningful results.
One of the unique traits of a UX designer is to take in ideas from colleagues because as a UX designer your role is to facilitate and collaborate with other departments and get them involved with the various stages of the design process.
To sum it up, the concept stage is all about generating and validating ideas, which in return leads to the next phase which is the design phase.
Design
![](https://static.wixstatic.com/media/9efac7_8b9fd4c9b6634f86a6f4e2b7bbfc3d23~mv2.png/v1/fill/w_980,h_483,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_8b9fd4c9b6634f86a6f4e2b7bbfc3d23~mv2.png)
This stage at times gets confusing to most designers because they have the misconception that you are to proceed to the actual design of the software. This stage should be all about the content of the design and how they come together. The design phase is about making sure your ideas are great.
Creating wireframes is a great way of accomplishing this, and the design created would then allow you to be able to perform the last phase which is the testing phase.
Test
![](https://static.wixstatic.com/media/9efac7_f3be3c78dd2e42c28cd07ae083eb33a6~mv2.png/v1/fill/w_980,h_483,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_f3be3c78dd2e42c28cd07ae083eb33a6~mv2.png)
The purpose of this stage is to get your designs to the users, allowing the users to test them to see if it meets the user’s needs. The most important thing to take note of at this stage is that your design would continuously undergo refining in order to meet the user's expectations.
After the wireframe has been created, it is then passed on to the UI designer. With this, I believe you understand what a UX designer does.
In summary, UX design is the process of understanding a user’s problem and solving it to enhance the user’s usability and accessibility of the software you are to designing.
UX design is focusing on the user’s needs, which can only be accomplished through constant feedback from the users which would in return help to improve our designs.
UI Design
At this stage, things are beginning to get more interesting. UI design meaning User interface design is all about creating powerful visual designs for your software. Once the wireframes have been handed to the UI designer, the UI designer then starts adding more emotions to the designs using images, fonts, and exciting colors to the design.
UI design is the stage in which conversations are made concerning the visual identity of the software. Great UI design can either make or break your wireframe. If the image does not match the style or the content, the website/software would not be as effective.
This is why UX and UI need to work together because an error in one part could most definitely affect the other. Imagine having:
· Great images: This could spring up an emotion that connects your users to your brand in the right way
· Choice of colors: Choice of color on a button can most time double the click-through rate.
When these two are paired together properly, they can improve your business or product goals. This is where a design language comes to play.
“A design language is a set of consistent visual elements that you can use over and over again”.
It has made UX/UI designers focus more on the little things that they wouldn’t otherwise give attention to thereby bringing more effectiveness to their designs.
The concept is known as the 80 percent vs. the 20 percent rule. With a design language, 80 percent of the UX/UI designer's work is practically done, giving the UX/UI designer the ability to focus more on things like components, images, animations, and other important details.
A design language gives design consistency in the overall layout of the design.
UI design generally has provided help to many individuals with disabilities and those who are visually impaired by providing an opportunity for larger fonts, high contrast, and a wide range of colors that are tailored for different users both online and offline.
UI Design Process
Like the UX design process, this process has four stages. The UI design process puts the user at the center of the overall design structure, by focusing on providing the user with a better experience.
Research
![](https://static.wixstatic.com/media/9efac7_dcba00be6cd243a4a1ece949e8ab44e5~mv2.png/v1/fill/w_980,h_491,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_dcba00be6cd243a4a1ece949e8ab44e5~mv2.png)
Research in the UI design process is all about identifying the user’s problem early in your design process and understanding the techniques needed to solve those problems.
Research is one of the most important stages in your design process as it influences the other activities of your design process. Understanding the user of your app can go a long way to creating the best designs for them.
You can do effective research by creating a survey form for your user (SurveyMonkey is a great tool to use), or go the old fashion way of getting the user's opinion on project ideas and what they would expect to see or benefit from.
“This stage makes sure you understand who you are designing for”.
Another important thing to do during the research phase is to hold interviews with the business stakeholders and departmental heads to make sure you are checking off all the requirements needed for the business and also including them in the design process.
This is also great because it helps you integrate yourself into the design team and make other team members feel valued and important in the design process.
Concept
![](https://static.wixstatic.com/media/9efac7_d608e9d46dba41faa79e5c70b597cc58~mv2.png/v1/fill/w_980,h_488,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_d608e9d46dba41faa79e5c70b597cc58~mv2.png)
Now after you understand what the problems and requirements are and how to solve them, this is where creativity starts. But before you go into drafting out your design structure, it is important to look at the design in a holistic manner and how everything fits into place.
Look at the design like a giant machine, once you understand how the machine works you would be able to design the individual pieces and tailor them according to the user’s requirements.
It would also help to look at the overall design like a map or a journey you are trying to take the user on, when you understand how the user relates with each piece along the way, this would provide you the ability to create an effective UI design.
Findability is a great principle to incorporate into your UI design as it helps your users find the content of your application easily. You can accomplish this by using great labels, colors, icons, images, and lots more.
“This stage is about idea creation and execution”
Another great principle is idea creation. This is when you sit down with other members of your team and come up with ideas for the design. This helps because each member of your design team is an expert in their own field and this would undoubtedly help you come up with great ideas as a team in the concept stage.
Design
![](https://static.wixstatic.com/media/9efac7_1d8dddb61813430b935d97dca146eee6~mv2.png/v1/fill/w_980,h_489,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_1d8dddb61813430b935d97dca146eee6~mv2.png)
As we saw in the previous stage, coming up with great ideas and concept comes before the actual design of your application. At this stage, you are ready to bring your ideas to life.
· Raw Design Phase
One of the best approaches to this is creating your design first using a pen and paper.
You might ask why? Or I thought this is supposed to be a design article? Yes, it is. We have found out from experience that starting your designs on paper first helps to do two things:
1. It makes it easy to discard if you choose to
2. It removes all design biasness by giving you a raw look into your design
Now that you have your design on paper and your whole team is satisfied with the design, this leads us to the detailed design phase.
· Detailed Design Phase
The Wireframes gotten from the UX designer are what you have to work with at this stage. At this stage, you are focused on creating designs that allow the users to focus their attention on the content rather than just the visual elements.
“The purpose of this stage is to bring to life the overall design structure and components”
This is also the stage you begin to make use of UI design tools for your overall design. Read our article to find out more about the best UI design tools.
Testing
![](https://static.wixstatic.com/media/9efac7_1c2fb766878e406d94838b5410efe5d1~mv2.png/v1/fill/w_980,h_491,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9efac7_1c2fb766878e406d94838b5410efe5d1~mv2.png)
Finishing up the detailed design for your product, the next phase is bringing it in front of a customer or user. You then ask the user to perform specific tasks while monitoring the performance of the product. These tasks can be as simple as opening a menu icon or signing up for a service.
“The Purpose of the stage is to get your product tested and improved based on user feedback”
Providing a natural environment for your users to test your products is important because it helps them easily assess your product effectively. One of the ways you can accomplish this is by using the following techniques:
· Card Sorting: Card sorting is a process where you ask your users to organize your website content.
· Online User Testing: This method is where you ask a large volume of the user base to test your website and provide feedback.
· In-person User Testing: In-person user testing is the method whereby you ask a specific set of people up close and personal to test your product. Most of the time this approach is more effective because you get quality feedback from the users.
· Split User Testing: This is a competitive test between two designs otherwise known as a preference test.
This stage should be an iterative process and not a one-time process. You always try and get your designs tested as frequently as possible in order to improve the overall design and usability of your product.
Your First UX/UI design job
There are important details to take note of when seeking a UX/UI design job and these details would differentiate you from a beginner UX/UI designer to a professional UX/UI designer.
· UX/UI Design Tools
The main thing that employers are looking for today is that you have a great understanding of UX/UI design tools. There are many UX/UI design tools in the market today but having a solid understanding of the main tools is what employers are looking for.
For example, you have Sketch, Figma, and Adobe XD. Having knowledge of these tools should be your priority as a UX/UI designer.
“Showcase your UX/UI design tool skill in your portfolio”
This leads us to the next point.
· Your UX/UI Design Portfolio
Having a portfolio for your design is one of the most important must-haves for a UX/UI designer. At this stage of your career, your portfolio design is more important than your CV because it is the best way to showcase your strength and skill to potential employers.
There are two types of portfolios you should have as a UX/UI designer. One is having a portfolio website that holds most or all of your designs, and the second is having a hardcopy preferably a PDF document for your designs.
Having a portfolio website is necessary as potential employers would have easy access to your designs anywhere and at any time. Also having a PDF file for your designs helps potential employers to be able to reference your works in case they need to.
“Now you have a portfolio for your works, what next?”
· Internships
Internships are one of the common ways in landing a UX/UI design job. There are many UX/UI design internship job opportunities and you can land such job opportunities using sites like:
1. LinkedIn
2. Indeed.com
3. UXHOP.com
“Making connections with other Designers in the industry is Key”
Conclusion
I would love to congratulate you on completing this short fundamental course on UX/UI design; I hope this has helped you to want to learn more. It is quite impossible to go into detail about everything you need to know about UX/UI design in this course, but to help you more on this, check out other related articles on UX/UI design.
If you aren’t satisfied, we have a complete course on UX/UI design with practical knowledge on how to use the Figma design tool. The course is also filled with a practical approach to take when working as a freelance UX/UI designer.
Having this fundamental knowledge would help you kick-start your career in UX/UI design.
Comentarios