Hi!! My name is Hung from ABC Software Solutions Company.
Applying the UI-UX design process in website/app design is an effective method to ensure that you create a product with a great experience that brings success to your business. So what is the standard UI-UX design process? And how does the UX process help create a good experience? Let's learn the steps of the UI-UX design process in this article to understand why it is important and trusted by businesses.
Analyze and come up with ideas
I believe that any field or profession or job, the analysis process is indispensable. Especially with information systems, it is extremely important to carefully analyze data, habits, habits … of users and create a detailed plan for the project. This helps Designers and Developers firmly grasp the purpose, business, features of the software or features to be developed, thereby avoiding unnecessary errors and misunderstandings that lead to a lot of time and effort to repair. . At this step Designer needs to work with BA (Business Analyst) quite a lot.
The advice for you is to survey business stakeholders, learn and survey different users through User Personas, User Stories, Use cases and User flows.
After having a detailed plan, the task of UI-UX Designer is to come up with ideas through reference to design archives such as Behance, Dribble, Pinterest Freepik… From there, consistently assign the design to the design. Design elements such as color, typography, or design style that best suit the user of the product.
Draw Wireframes
Creating Wrireframes is a blueprint for each page, with visual indicators like lines, grids, and boxes that indicate where the type of content, images, and other elements will lead the user. Wrireframe is just a blueprint, not a final design, it may be high resolution or it may be low resolution depending on the tool you use, it doesn't matter, what matters is the wireframe. Provide your team with the things to follow when starting a detailed website design.
Wrireframe shows a clear and simple way to organize the layout of a web page. Wireframing also serves another important function and that is communication. The common way is to wait until a detailed web design is available before discussing and editing. But doing so makes it difficult to evaluate the effectiveness of the design and risks starting over and over again, leading to time and effort. Therefore, the way in UX design is to build wireframes quickly so that everyone in the team has a rough design to discuss and agree on the necessary things before going to the official design. From there, know how to coordinate smoothly to push the project to completion.
Detailed design
Unlike Wireframe, in this step we need to focus on user interface. This step will create a complete interface for our software, website, creating a good user interface or not will also affect the user experience (UX). That's why it is said that UI/UX goes hand in hand and cannot be separated.
At this step, components will also be fully designed with states. For example, a node in a wireframe only needs to show up as a rectangle, but in detail design, a node in addition to including metrics like color, border, cornering, shadow… then it is also displayed as button on hover, button on click, button after click, button on disabled…
Prototyping and Mockups
Some people are confused between Wireframe, Mockup or Prototype. But all can have different functions.
- Mockups: As a step on the wireframe, mockups take what has been established with the wireframe and present it on the graphic design, which may have some functionality like navigation, used to see how the design will look.
- Prototype Acts as an almost fully realized version of the design, navigating, interacting, and utilizing all the main images and content blocks. It is not necessary that every component has everything for the user to interact and experience. Prototype is closest to the finished web design, it allows you to get the feedback you need and make tweaks and tweaks. edit before moving to code.
With Prototype, you still have 2 types: Focus on function over design and the other is design for the closest to the final version.
Check
After you have a prototype, it's time to do usability testing. This means that you have to give someone who has never seen a design before and let them experience it comfortably, live testing can allow you to see clear and actionable feedback when people page experience web. Or their inquiries looking for answers to popular question variable users will likely do with your site. To from that Observe everything is unstable, easy to see the level in the content of the tutorial. All of the above data will give you information about the design's level results and the points that need to be changed.
Hand over
This step is to hand over the complete design to the Front-End Dev team to ensure that the Dev has understood correctly and fully about the entire design. This step is extremely important as it will determine whether the actual product is really what it is intended to be compared to the UI/UX design. Of course, the ability of Front-end dev is something to be mentioned but there are many cases where they do it wrong because they have not read the design properly. This phase needs to coordinate smoothly between the coder and the designer.
Hope my article will be of some help to you, Currently, all the steps to create a Product design as mentioned above, we can all use Figma tool - A design tool. professional UI/UI design but also free.
Once again I am Hung, thank you for your interest in my Blog!!!