Drectl

Visual hierarchy is an important approach that is used in the design process. Visual hierarchy is based on one of the known psychological theories named Gestalt psychological theory. Gestalt psychological theory checks the users' visual perception about elements, how people visually identify elements having different relation to each other.

Logo Intro

In simple words, with the help of visual hierarchy, we can check people's behavior how they perceive any element either it will in printed form or in a non-printed form.
Let's discuss how UX designers achieve visual perception digitally.

1- Scale/Size
One of the most important tools in the design process is the scale or size of the element. Psychologically it is observed that the human mind can give more attention to large and huge object rather than small ones and designers have to implement the same thing in design If they want that user gives attention to their any specific element, make that element large but with beautiful color and make reasonable distance if you have same elements.

2- Color/Contrast
All colors have their own hierarchy which out a great impact on users' minds. The human mind gives more attention to bold colors such as red, orange, and black rather than soft or muted colors like white or other cream colors. In design, designers should use highlighted and bold colors to make that element more prominent where users can take action and make colors of other elements standard or muted. In the selection of bold and muted colors, keep in mind color contrast too and keep the color contrast balance so that no element get obscure from the others. By doing this, user can easily see your screen and can take action easier and faster

3- Proximity
As we discussed visual hierarchy is based on Gestalt theory and in Gestalt theory, Proximity is very important. When you want to show two different messages or two different elements in UI, arrange them in the form of groups having the same characteristics, and this arrangement in the form of a group is known as Proximity. With the help of proximity, designers can divide the content into categories or subcategories.

4- Alignment
In UI design, alignment is one of that element which plays a key role in the design process. Psychologically, human minds read from left to right and in UI design, designers must align their content from left to right if they want more user attention. From the content point of view, always try to align content from left to right and for graphically or patterns, align same elements properly in the form of group.

5- Negative Space
In UI design, Negative space is also known as white space. If you want to make any user interface more noticeable for the users' eyes then designers have to make negative space. Negative or white space is the area between the element or graphical content in a design composition. The right amount of negative space between the element or graphical content will help the users to notice more and he can perceive your message quickly and easily.

6- Dimension
In UI design, any kind of element stretches and messing or mixing of elements is the bad way to present your design. In the design process, designers should have to keep an eye on element dimensions and organize them in the proper way. Neither overlapped the elements nor mess them too. Your UI design will look better when you're present in the proper dimension.

You can say visual hierarchy is the base or foundation of the UI design in the design process. When UI elements in the user interface are properly structured, organized, and aligned by proper use of colors then it will be more effective and people will enjoy by using your product.

The visual presentation of the user interface put a great impact on the user experience of a product. If the elements of the content look messy and not properly structured and aligned then people can't navigate your product or maybe they will not feel happy by using your product. Always keep in mind, bad UI/UX design can lead to poor satisfaction which means your product wouldn't give their desire results.

Thinking about design is hard, but not thinking about it can be disastrous. - Ralph Caplan -



















#

Watch the full lecture on the youtube channel on the wireframing
https://youtu.be/tDUtgDYN2fA
Wireframes are an important part of the design process. Wireframing is that practice that is used by UX designers to plan and then execute that plan (how it will look like or how it will work) about the design of the website and mobile application. In wireframing, UX designers focus on one thing which is how users process the information or navigate on a site and this depends on the user research that UX design collected.
what is the best approach to create wireframes?
1st step: To Do Research
In research, you have to know what are you designing or creating and for whom are you designing or creating it?
2nd Step: Sketching the wireframing
After doing research now you have many ideas about problem-solving for your client's product. Start sketching with your pencil or a pen on paper or you can use the whiteboard and you can draw sketches digitally too.
3rd Step: Emphasize
One more point, don't try to stay on one design, you can make different variations for each screen. Your wireframe is a skeleton and in body, you know skeleton is much important for us so your wireframe should be strong and cover all the user problems of your target audience.
4th Step: To communicate with user flow
A good wireframe should have 2 forms of communication to go along with it.
One is about the story behind the wireframes that you have designed and the second is to get instructions from developers.
5th Step: Test your interface
It's important that in the final step, make sure that your design is actually worth building for the client because at this point no coding is done and no colorful interface has been designed so it is much easier to do it again rather than after a product is released.

Watch the full lecture on the youtube channel on the UX User Flow
https://youtu.be/pLX7CiWsALA?t=22
User flow is a pathway that users use to achieve a goal. User flow is the visual representation, you can make it either digital or handwritten too.
When a product owner or UX designer tells requirements to the developer engineers or other cross-functional teams then the sentence they say first is what is the flow? So, here user flows come into the field.
Three types of user flow that are commonly used by every UX designer in product design
Type 1: Task flow
Type 2: Wire flow
Type 3: Screen flow/user flow