UI Design — Visual Design
Hello everyone, in this blog post, I would like to share with you my understanding of visual design. Also, I would like to share with you how I implemented it in the software engineering project.
What is Visual Design?
Visual design is the use of imagery, color, shapes, typography, form, and others to enhance usability and improve the user experience. It focuses on the aesthetics of a product and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design ensures that content remains central to the page or function, and enhances it by engaging users and helping to build their trust and interest in the product and the brand. By considering how to form or arrange visual elements to address the principles of good visual designs, designers can shape the user experience in order to elicit user responses and behaviors that suit the use and purpose of the product. Therefore, small details of a product’s aesthetics can play a significant role in the design of the user experience.
Basic Elements of Visual Design
There are basic elements of visual design, some of which are:
- Lines connect two points and can be used to help define shapes, make divisions, and create textures. All lines, if they’re straight, have a length, width, and direction.
- Shapes are self-contained areas. To define the area, the designers uses lines, differences in value, color, and/or texture. Every object is composed of shapes.
- Color palette choices and combinations are used to differentiate items, create depth, add emphasis, and/or help organize information. The color theory examines how various choices psychologically impact users.
- Texture refers to how a surface feels or is perceived to feel. By repeating an element, a texture will be created and a pattern formed. Depending on how a texture is applied, it may be used strategically to attract or deter attention.
- Typography refers to which fonts are chosen, their size, alignment, color, and spacing.
- Form applies to three-dimensional objects and describes their volume and mass. Form may be created by combining two or more shapes and can be further enhanced by different tones, textures, and colors.
Principles of Visual Design
There are 9 principles of visual design, which are:
- Unity has to do with all elements on a page visually or conceptually appearing to belong together. Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
- Gestalt, in visual design, helps users perceive the overall design as opposed to individual elements.
- Space is “defined when something is placed in it”. Incorporating space into a design helps reduce noise, increase readability, and/or create illusion. White space is an important part of your layout strategy.
- Hierarchy shows the difference in significance between items. Designers often create hierarchies through different font sizes, colors, and placement on the page. Usually, items at the top are perceived as most important.
- Balance creates the perception that there is equal distribution. This does not always imply that there is symmetry.
- Contrast focuses on making items stand out by emphasizing differences in size, color, direction, and other characteristics.
- Scale identifies a range of sizes; it creates interest and depth by demonstrating how each item relates to each other based on size.
- Dominance focuses on having one element as the focal point and others being subordinate. This is often done through scaling and contrasting based on size, color, position, shape, etc.
- Similarity refers to creating continuity throughout a design without direct duplication. Similarity is used to make pieces work together over an interface and help users learn the interface quicker.
How I Implement the Visual Design in Software Engineering Project
In the software engineering project, my group and I were given the mockup by the client from RubyH. Here are some of the mockups:
Based on Nielsen’s 10 Usability Heuristics, in my opinion, the mockup has implemented one of the heuristics which is user control and freedom. The user can leave an unwanted ‘state’ without going through extensive dialogue.
Conclusion
From my perspective, visual design is very important because it helps to attract users to use the product and gain their loyalty.
Thank you for reading :)
