This document discusses layout design and color theory. It covers the principles of layout design including alignment, visual hierarchy, contrast, balance, proximity, and the elements of layout design such as color, line, value, space, and texture. It then discusses color theory including primary, secondary, and tertiary colors. It explains hue, tint, tone, and shade. It also covers different color schemes like monochromatic, analogous, split complementary, triadic, square, and rectangle. It provides tips for choosing a color scheme such as prioritizing user experience, setting a mood, considering context, using the 60-30-10 rule, and drafting multiple designs.

1. Dealing with
Colors
Computer Science II
Second Quarter
and Layout Design

2. Topics to Cover
• The Elements and
Principles of Layout
Design
• Proper Combination
of Colors

3. Layout Design
• It is the process of
arranging visual elements
• It is important for any
project that conveys a
message.

4. Principles of Layout Design
ALIGNMENT
• arrangement in a
straight line, or in correct
or appropriate relative
positions.
VISUAL HIERARCHY
• a pattern in the visual
field wherein some
elements tend to "stand
out," or attract attention,
more strongly than other
elements, suggesting a
hierarchy of importance.

5. CONTRAST
• appropriately and
aesthetically pairing of
visual elements.
BALANCE
• pertains to the even
distribution of weight of
visual elements.
Principles of Layout Design

6. PROXIMITY
• Deals with spacing of
visual elements.
Principles of Layout Design

7. Elements of Layout Design
• COLOR - Probably the most striking art element
that catches the eye is color. It is a sensation
created by visible wavelengths of light caught in a
prism.
• LINE - Extension of a point, a short or long mark
drawn or carved on a surface.
• VALUE - the degree of lightness and darkness of a
color.

8. Elements of Layout Design
• SPACE - a void, an emptiness which can either be
positive or negative.
• TEXTURE - Extension of a point, a short or long
mark drawn or carved on a surface.
• SHAPE & FORM – Shape (two-dimensional); Form
(three-dimensional)

9. What is
Color Theory?
• “It is the basis for the primary
rules and guidelines that
surround color and its use in
creating aesthetically pleasing
visuals” (Cartwright, 2021).

10. Three Types of
Color
• Primary colors
(parent colors)
• Secondary colors
(primary color + primary color)
• Tertiary colors
(primary + secondary)

11. • Red + Purple = Red-Purple (magenta)
• Red + Orange = Red-Orange (vermilion)
• Blue + Purple = Blue-Purple (violet)
• Blue + Green = Blue-Green (teal)
• Yellow + Orange = Yellow-Orange (amber)
• Yellow + Green = Yellow-Green (chartreuse)

12. Hue (pure color)
Tint (hue + white)
Tone
(hue + white & black)
Shade (hue + black)

13. . • passion, anger, or love
. • peace, nobility, or sadness
. • gaiety, innocence, jealousy
. • energetic, friendly, confidence
. • natural, peaceful, growth, health
. • seductive, wise, deep, creative
. • trust, care, clarity, reliability
. • softness, delicate, cuteness
The Meaning of Colors

14. Color Schemes
• Monochromatic – use of single color with
varying shades and tints.

15. Color Schemes
• Analogous –
pairing one main
color with the two
colors directly next
to it on the color
wheel

16. Color Schemes
• Split
complementary –
includes one dominant
color and the two
colors directly adjacent
to the dominant color’s
complement.

17. Color Schemes
• Triadic color
scheme – created
by choosing three
colors that are
equally placed in
lines around color
wheel.

18. Color Schemes
• Square color
scheme – uses four
equidistant from each
other on the color
wheel to create a
square or diamond
shape.

19. Color Schemes
• Rectangle or
tetradic color
scheme

20. Color Schemes
• Rectangle or
tetradic color
scheme

21. How to Choose a
Color Scheme?
• Prioritize the user experience, first.
• Set a mood for your color scheme.
• Consider color context
• Use the 60-30-10 rule.
• Draft multiple designs