Scribd
Upload
60 views31 pages

Web Design Principles

The document discusses principles of web design including use of white space, color psychology and palettes, contrast through color, size, shape and position, scale, alignment, typography, visual hierarchy, and laws of UI/UX design. It also provides tips for web design such as keeping icons consistent, prioritizing quality photos, ensuring good contrast, using white space, and consistency.

Uploaded by

metasebiamerkin7275
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
60 views31 pages

Web Design Principles

The document discusses principles of web design including use of white space, color psychology and palettes, contrast through color, size, shape and position, scale, alignment, typography, visual hierarchy, and laws of UI/UX design. It also provides tips for web design such as keeping icons consistent, prioritizing quality photos, ensuring good contrast, using white space, and consistency.

Uploaded by

metasebiamerkin7275
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

WEB DESIGN

PRINCIPLES
1. White Space
• White space leaves separation between the content, it makes the
important things stand out, and it creates balance.
• There are two types of spaces:
• Macro space: This term refers to spaces between the main elements of a web
page or mobile and the space around each part.
• Micro-space: These are small gaps within an element: line spacing in the text,
gaps between pictures, separators, and more.
2. Colour
• 2.1 Colour Psychology
• Color psychology refers to the influence of color on our feelings, emotions, and
behaviours.
• Red: passion, power, love, danger, excitement
• Blue: calm, trust, competence, peace, logic, reliability
• Green: health, nature, abundance, prosperity
• Yellow: happiness, optimism, creativity, friendliness
• Orange: fun, freedom, warmth, comfort, playfulness
• Purple: luxury, mystery, sophistication, loyalty, creativity
• Pink: nurturing, gentleness, sincerity, warmth
• Brown: nature, security, protection, support
• Black: elegance, power, control, sophistication, depression
• White: purity, peace, clarity, cleanliness
2. Colour
• 2.2 Colour palette types
• Analogous
• Analogous colours are colors that sit next to each other on the colour wheel.
• Monochromatic
• Monochromatic color palettes are based on a single color paired with various shades and
tints.
• Complementary
• Complementary color palettes contain colors on opposite ends of the color wheel.
3. Contrast
• In general terms, the word ‘contrast’ is used to describe objects that differ from each
other strikingly. Talking about visual perception, contrast is basically associated with
the difference in color or light that allows an object to be clearly distinguishable.
• color: this type is one of the most natural and noticeable for the human eye; it works when
colors are sharply different. This type of contrast is most widely used to make CTA buttons and
other critical navigation elements instantly seen in the layout of the web page or an app
screen, which supports clear and intuitive navigation.
• size: this type of contrast is based on making an element that should catch attention first
noticeably bigger than the others
• shape: here, users’ eyes are caught by making the shape of one element different from the
others
• position: in this type, designers change the position of one element in the row this way,
making it look different, like, for instance, the new paragraph of the text piece is started with
the indention.
4. Scale
• Scale is the relative dimensions of element
5. Alignment
• Alignment refers to lining up the top, bottom, sides or middle of text
or visual elements on page
5. Alignment
6. Typography
• Typography plays a critical role on any website by ensuring we can
comfortably read and process all its text-based content.
• Font size
• Text alignment
• Weight
• Spacing
7. Hierarchy
• A clear visual hierarchy guides the
eye to the most important
elements on the page. It can be
created through variations in color
and contrast, scale, and grouping.
• The page’s visual hierarchy
controls the delivery of
information from the system to
the end user — it lets users know
where to focus their attention.
UI/UX DESIGN LAWS
1. Law of similarity
• Elements that look similar are perceived as being part of the same
group or category
2. Law of proximity
• Elements that are close to each other are perceived as related
3. Fitts’s law
• The time it takes for a user to reach a target is directly related to the
distance and size of the target
4. Hick’s Law
• The more choices the use has, the longer it takes for them to make
decision
5. Jakob’s Law
• Users expect your website or app to work the way other websites or
apps they used before work
UI/UX TIPS
Keep icons consistent
Present real content
Design all interactive states
Show overflowing items
Prioritize quality photos
Embrace similarity
Ensure good contrast
Match photo with audience
Don’t use too much colors
Make sure of contrast
White spaces
Consistency in everything
END

You might also like