Visual Design
Instructor: Ms. Rabia Rauf
Principles of Visual design
1) Unity
2) Gestalt
3) Space
4) Hierarchy
5) Balance
6) Contrast
7) Scale
8) Dominance
9) Similarity
10) Color
11) Typography
12) Alignment
Unity
• Unity is when all the elements on the page appear to belong
together, creating a unified visual appearance throughout the
graphic. .
• You can create unity by including similar features in each of
your design elements or by selecting a uniting feature, like color
or size
Gestalt
• Gestalt is a German word that refers to how multiple things are
combined to create a whole.
• This principle refers to looking at the entire design and individual
elements.
• Gestalt can help you visualize how each aspect looks together to
create a cohesive whole instead of focusing on the individual
elements one at a time.
• When all the elements work well together, the gestalt of the design is
clear and communicates a legible message.
Space
• Space is the place your design, including where there are elements
and where there aren't any elements.
• The way you use space can improve your design
• Space can affect the readability of your graphic or create a visual
illusion.
Hierarchy
• Hierarchy is the difference in significance between elements of your
design.
• Some elements are more critical to the overall message of your visual
than others, establishing a hierarchy that you can keep in mind when
designing how much space each element takes up or how much
attention it draws.
• Items near the top, large in size, or a contrasting and noticeable color
are typically at the top of the hierarchy. When designing the less
essential elements, you can keep the hierarchy in mind, so you don't
pull the audience's focus on less important elements.
Balance
• Balance is the distribution of specific elements throughout your
design.
• Having a balance of different elements can create a visually appealing
design.
Contrast
• Contrast is the visual difference between two elements.
• For example, a white element and a black element contrast because
they are opposites. Adding contrast to your design can create
balance. It can also increase readability and visual interest.
• You can use contrast to emphasize specific elements higher in the
hierarchy than others.
• For example, if you have the majority of your elements in yellow and
then an important element in purple, the audience may find that
element more noticeable than the others.
Scale
• Scale is the size of an element about the other elements around it.
• Size is relevant to the other elements of your project because having
different sizes can help you create balance, or it can help you create
contrast.
Dominance
• Dominance is when one element is more significant or draws more
attention than other elements.
• You can use dominance to direct attention to the important aspects
of your design.
• You can use contrast and scaling to create dominance.
Similarity
• The similarity is creating a sense of continuity without duplicating
elements.
• The similarity often helps the audience recognize similar patterns
throughout a larger piece to help them grasp concepts quicker.
• For example, if you have a similar setup in terms of format, you can
use that format repeatedly to help the audience understand where
they can find specific information.
Color
• Color is the different shades you assign to each element of your
design.
Typography
• Typography is the font and size of letters you use in a graphic.
• Different elements of your typography can also help with readability.
• For example, if you use a serif font or a font where the letters have
lines that look as though they may connect to other letters, it can
help draw the eye from one letter to the next, improving readability.
Alignment
• Alignment refers to how you space each element and relate to each
other within their space.
• You can align different elements to make your design look cleaner and
more intentional.
• You can control the amount of space between elements and edges.
User Interface design principles
User Interface design
• User interface design (UI) is the foundation of a website’s look, it ties
together concepts from interaction design, information architecture
and visual design.
• User interface design is all about designing a consistent, clear and
simple interface for the user.
User Interface design Principles
1. Clarity
2. Consistency
3. Accessibility
4. Feedback
5. Familiarity
6. Design Standards
7. Structure & Hierarchy
8. Simplicity
9. Control
10. Empathy
User Interface design Principles- Continued
Clarity: When a user visits a new website, it should be made clear to
them what the website is about and most importantly, why they
should use it.
Consistency: Elements with the same purpose should look the same.
Product pages, service pages, contact forms, and informational
sections, should all feature a similar appeal and look exactly how they
behave.
Accessibility: It refers specifically to improving your interface
to enhance the usability and ease of use for all users.
Continued
Feedback: The association of feedback with actions on an interface is
important. To name a few, this would include button hovers, error pop-ups,
confirmation messages, completion animations, check marks and colour
changes.
Familiarity: When users visit a website and are searching for a specific
section of your website, they expect to find it within just a few clicks.
Design standards: Throughout the process of creating a useful interface
for your user, you have to understand and follow design standards. In user
interface design, these standards include the proper use of colour, contrast,
balance, layout, alignment, hierarchy, the placement of elements and much
more.
Continued
Structure & Hierarchy: the design principle that puts emphasis on
the most important visual elements. It helps the user know where to
look first.
Simplicity: It is the process of minimizing, refining and making a
positive impact with less.
Control: creating an interface that’s easy to use, and easy to navigate.
Empathy: The role of empathy in design is to observe, identify,
analyze and resolve any previously unidentified behaviors, methods,
and problems.
