Server sync... Block time in database: 1615391772, server time: 1664427288, offset: 49035516

#CLUB5050 - UI/UX Designer Lesson Part 2


Untitled-1.jpg


saasas.png
Hello guys,,,,


Come back with me @atim1234.


After part 1, we discussed the meaning of UI/UX design and the difference between the two, this time I will continue this lesson about UI/UX designer, this time we will discuss about Workflow UI/UX design.


Of course, we already know the difference between the two from the previous lesson, but why do UX and UI designers have to work side by side? because both UI and UX are required to develop a high-quality site/application


And this time, we'll look at how UI and UX Designers work together to create a product.
saasas.png


Conduct research


image.png
sorce image

A UX designer must conduct research at the start of the job in order to create a good design, so the UX designer must understand what the needs of the user are. For example, if you are creating an Online Taxi application, you must know and collect data about transportation needs from users, such as the desired price, required features, and so on.


A UX designer might begin research by interviewing potential consumers, both online and in person. Data can also be collected using quantitative and qualitative methods.
saasas.png


Create IA


image.png
sorce image

A UX designer must also construct an Information Architecture (IA), which is the process of organizing the pieces of websites and apps. IA is critical since it will help the team comprehend the concept that will be created.


The UX designer must sort out and establish the buyer personas based on the findings of this research in order to assist the UX in structuring the product from the user's perspective.
saasas.png


Create Wireframes


image.png
sorce image

The following step is the wireframing process, which is a visual sketch of a product that includes information flow for the user to be able to operate the product. The UX Designer's task is to design the concept of an application or website in this case.


This wireframe method is divided into two steps, the first of which is Low Fidelity Wireframe (LFW) and the second of which is High Fidelity Wireframe (HFW) (HFW). Wireframes are often created utilizing tools like as Figma, Adobe XD, and others.


The wireframe process is critical for assisting the team of designers, content creators, and developers in visualizing the appearance of the product.
saasas.png


Manage UX Flows


image.png
sorce image

The next step is to define the flow of a product that will be utilized by people. This flow was created with a UX approach in mind, so that future consumers would feel at ease using your product.


This method is then defined so that developers may easily create products.


saasas.png


Creating Prototypes


image.png
sorce image

We often utilize software like as Invision, MockPlus, Adobe XD, and others to prototype this design.


The internal team then tests the outcomes of this design prototype and repairs it as soon as possible if necessary. If the design prototype passes muster with the internal team, we can then put it to the test with the user.
saasas.png


Developing a Design System


image.png
sorce image

The design system is helpful for keeping all design components in a library, such as icons, typefaces, color palettes, and so on.


And here is where UI designers and developers must work together. UI designers begin by generating display design elements, while developers construct library components using HTML, CSS, Javascript, and other technologies.


Because the design elements are already accessible, this Design System will expedite the design development process. It will improve the design's consistency and efficiency when working on subsequent product concepts.


saasas.png




  • Creating User Interfaces




A UI Designer starts designing the display based on the wireframe that was previously developed.


The UI Designer is in responsibility of beautifying the drawing with a color palette, typography, and transitions between pages using pieces created in the previous stage, as well as adhering to the principles of good UI design.


These UI Designers often work with Adobe Illustrator, Adobe Photoshop, Sketch App, and other design software.
saasas.png




  • Developer's Product Development Process




This is part of the Developer's development of the site or application. Designs are being produced that have passed trials and are designed by UI designers. However, the UI and UX designer's work is not yet complete. If a barrier is discovered, developers must continue to work and communicate with the designer team in order to solve it.
saasas.png




  • Create a usability test.


    After a site or application with a decent appearance has been constructed and has begun to be deployed. But first, we must conduct a test procedure in which each design aspect is assigned a score.




Following testing, the design will get recommendations and feedback from users. The design is then tweaked and retested until it is pleasant and desirable to the user.


saasas.png


Well, that's all for the discussion of the UX/UI designer Workflok in part 2 this time, but in the future material I want to focus on lessons on UI Designers only, because I myself am only a UI designer, not UX, so I don't really understand well about UX. designers.


Thank you, see you in my next post

Hopefully Helpful, Happy creative!

Thank you


saasas.png





Best Regards To :
@milakz
@daytona475
@papi.mati
@steem.skillshare



Comments 4