FACULITY OF COMPUTING

3rd Year Software Engineering

Web design and Programming (Seng3071)
Group assignment
On
Color theory, Typography and UI/UX

Nardos Tsegaye ………………………..... BDU1202602

Chalachew Tsegaye …………….................. BDU1201314
Haileamlak Gorew…………………………. BDU1201886

Submitted to Mr. Yonas A.

Submission date 28/08/2014 E.C
1
Contents

Color theory .................................................................................................................................................. 3

The vocabulary of color ............................................................................................................................ 3

Color schemes ........................................................................................................................................... 5

Why Color Matters In Web Design? ......................................................................................................... 6

How to Use Color Psychology and Meaning to Influence Emotions......................................................... 6

Analogy (web page case study)............................................................................................................... 10

What is typography in web design? ............................................................................................................ 12

User Interface design (UI) .......................................................................................................................... 13

User Experience design (UX) .................................................................................................................... 14

References ................................................................................................................................................... 16

2
Color theory
Color theory definitions vary, but color theory for designers generally refers to the practical
guidelines of color mixing and principles that lead to visually appealing and harmonious color
combinations.

Familiarizing yourself with the principles of color theory can help you with everything from logo
creation to web design.

To help you learn color theory, we’ve broken it down into the following topics:

Vocabulary: from tints to saturation to warmth and more — we’ll cover the lingo designers use
when talking color.

Color wheel: a powerful tool for visualizing the relationships between colors.

Color schemes: how to use the color wheel to choose your color schemes.

Tools and resources: apps and guides to help you master designing with color.

The vocabulary of color

Before we dive into theory, you’ll need to know the following terms:

Primary colors
Primary colors form the basis for all other shades. Humans perceive three base colors: magenta,
cyan, and yellow. Every other color we see consists of a combination of these three colors in
varying amounts, brightness, tints, and shades.

Traditionally, we considered red, blue, and yellow to be the primary colors, but research has
shown that magenta, cyan, and yellow better describe our experience of color. If those colors
sparked memories of printer errors caused by lack of magenta ink, you’re not alone. The CMYK
color model — cyan, magenta, yellow, key (black) — is a subtractive color model based on
what’s used in color printing. It’s subtractive because it subtracts red, green, and blue hues from
white light.

RGB and hex

On the web, we use RGB (red-green-blue) and hex values to represent colors. RGB is an additive
color model — colors are created by adding colored light to black.

The RGB color system defines all colors as a combination of three different values: a particular
shade of red, another of green, and another of blue. So:
3
RGB (59, 89, 145) equals Facebook blue

RGB(0, 0, 0) equals black

RGB(255, 255, 255) equals white

The hex color system converts each value to a hexadecimal (base 16) representation, like so:

#3b599b equals Facebook blue

#000000 equals black

#ffffff equals white

Every two characters represent a color value, so for Facebook blue, the red hue is 3b, the green is
59, and 9b is blue.

Hot and cold

Colors also have “warmth,” and each can be classified as either a warm or a cool color.

Warm colors contain higher amounts of reds and yellows. They can invoke a sense of warmth
and passion in a design. They can also feel very aggressive and bold — that’s why red is often
used in error messages.

Cool colors contain higher amounts of blue, evoking chilly climates, ice, winter, water, nighttime,
death, and sadness. They can carry connotations of loneliness, coldness, and fear. On the more
positive side, because cool colors are less aggressive, they can also be soothing — think of a blue
sky or calming blue waters on a beach.

Color temperature
Increasing an image’s temperature means increasing its orange levels. It generally makes an
image look warmer and happier, similar to how the world looks happier when the sun casts its
orange glow upon it. In contrast, reducing an image’s temperature makes it look colder and less
inviting, like an overcast day.

Tints and shades

You add white to a color to create a tint and add black to create a shade. Tints and shades let you
create monochrome color schemes by adding varying levels of white and black to a base color.

For example, if your base color is #8dbdd8 (a lightish blue), you can create a monochrome
scheme by choosing two tints (two brighter blues) and two shades (two darker blues).

4
Saturation, hue, and lightness
Saturation describes the intensity of a color. Increasing saturation makes the color richer and
darker, while reducing saturation makes it look faded and lighter. When we say “light blue” or
“dark green,” we’re describing changes in saturation.

Hue defines the degree to which a color can be described as similar to or different from red,
orange, yellow, green, blue, indigo, and violet (the colors of the rainbow). So when you describe
a color as “blue-green,” you’re defining it in terms of two hues.

Lightness, also known as value or tone, defines the perceived brightness of a color compared to
pure white.

The color wheel

A basic color wheel contains the 12 standard colors used to create color schemes. Each slice of
the pie represents a family of colors that can be achieved with different saturations, hues, tints,
shades, and mixes of neighboring colors. The color combinations (e.g., yellow-orange, red-
orange) result from mixing equal amounts of the base hues (yellow and orange, or red and
orange).

Red, yellow, and blue are the primary colors. Violet, orange, and green are the secondary colors.
Everything else is a tertiary color — a mix of primary and secondary colors.

Designs use the color wheel to choose one of four types of color schemes.

Color schemes
5
When working on a project, designers often rely on fundamental color relationships, also known
as color schemes. The four main types include:

Monochrome: Consisting of various tints, shades, and saturation of the same color. A
monochromatic color scheme utilizes just one color with varying levels of saturation and value.
This way, the value structure can be established without having to worry about multiple colors.

Complementary: Complementary colors are opposite each other on the color wheel. When
placed next to each other, there is an extremely strong contrasting and vibrant effect. If overused,
your painting may become jarring and uncomfortable to look at. You should select a dominant
color and use the other color as an accent.

Analogous: Featuring three colors that are next to each other on the color wheel. For example,
blues and greens, or oranges and yellows. These colors have a close relationship with each other.
There is not that much hue contrast between analogous colors, so you need to make sure you are
creating enough contrast using the other elements like value or saturation.

Triadic: Using three colors that are at the points of a triangle drawn within the color wheel. A
triadic color scheme utilizes colors which are evenly spaced on the color wheel. For example,
yellow, blue and orange. If using a triadic color scheme, you should pick a dominant color and
two secondary colors. Otherwise, it would be tricky to balance all three colors without it
appearing jarring to look at.

Complementary and analogous color schemes are the easiest to work with for many designers.

Why Color Matters In Web Design?

The most apparent advantage of using the right color combinations in web design is that they
help users understand and navigate the site. Colors can improve visitors’ online experiences,
enabling them to find the information they need and respond to your Call to Action (CTA).

When used effectively in web design, it plays a significant role in branding and product
messaging.You needs to become fluent in color theory.

How to Use Color Psychology and Meaning to Influence Emotions

Color psychology is a fascinating field of study that examines the influence of colors on people’s
behaviors and moods.

To create a successful design, you need to be aware of the color meanings, and understand how a
color choice can influence your users by generating a specific emotional response. Employ color
meaning in their designs.

6
Red

Red is a strong, energetic color. It can symbolize many emotions and ideas, both positive and
negative. Users can associate it with love and passion, but it can also signal danger or anger. This
example uses an inviting tint of red, which resonates energy and confidence:

Red can be a bold statement color if you want to draw users’ immediate attention. In fact, many
food and beverage companies use red to evoke feelings of hunger and desire.

Orange

Orange is a warm and happy color that reminds many users of friendliness, enthusiasm, and
motivation.

7
As seen in Suited & Booted, using a bold orange background for your website’s navigation
screen can give off a creative and adventurous vibe:Using orange as a key player in your color
scheme can result in a highly memorable site that leaves visitors with positive first impressions.

Blue

Blue is a popular choice for many corporate brands as it symbolizes trust and reliability.

Here is a classic example of blue used in a business context. It’s vibrant and energetic, and
evokes trust and confidence:

Blue can also look distant and sad when pale, so it’s essential to strike a thoughtful balance with
this color.

Pink

Pink is a youthful and romantic color, reminding users of everlasting love. It’s widely associated
with sensitivity and femininity, and it can also be a bold statement color.

As seen in this striking design by the Komini agency, you can use pink typography to create
strong accents on your website:

8
It can take a fair bit of confidence to pull off a pink-heavy color scheme. However, when used
wisely, it makes for striking and memorable designs.

White

White is a popular choice for modern, minimalist websites as it increases readability and pairs
well with any color. The use of white space creates a feeling of cleanliness and light.

In this example, Jason Blackeye uses crisp white and light grey to make his portfolio projects
stand out:

White can inspire new ideas as it reminds users of a blank page, so it’s not surprising it’s such a
popular choice for a background color. However, too much white can also look empty and
isolated.
9
Purple

Purple has long been associated with royalty, luxury, and wealth, but it’s also a mysterious and
magical color. Combining the energy of red and blue, it can be an excellent option if you want to
convey a message of power and trustworthiness.

For example, Proxy employs a stunning purple palette to create a sophisticated and mystical
nighttime look:

Purple can be relaxing as it reminds many people of the dream sphere. However, a high
concentration may also distract users.

Analogy (web page case study)

If we want to web page for agricultural and rural area related web sites we can use green color in
most parts of the web page . Because across different regions and cultures, people associate the
color green with nature, safety, and reliability. It can also represent growth, wealth, and
prosperity. We can see this in the following web site https://www.farmafrica.org/what-we-
do/what-we-do which uses green color for logo, navigation bar tabs , search icon, font colors and
font back-ground color.

10
This site also uses orange color to remind many users of friendliness, enthusiasm, and motivation.
We can see this in the “FARM AFRICA” logo, “Get involved” and “Donate” navigation items
and when we hover over the search icon.

11
What is typography in web design?
Typography is everything from structure, appearance, and font style. It is the art of arranging
letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.
It plays an important role in web design that can evoke certain emotions and provide specific
messages. It gives meaning to a website’s alignment, size, font, layout, and color. All of these
details are important because they provide a comfortable reading and user experience for as
many visitors as possible.

How can you create good typography for your website?

Limit the number of fonts

In order to communicate your brand value clearly and precisely, you should limit the number of
fonts used in your design, because using more than three different fonts will make your website
look unstructured and unprofessional.

Match and pair the fonts properly

As for the web design work, there are many design tools available for you to choose and the
system fonts in your design tool are a safe bet as they are easy to use and will not give out a
complex layout. In order to have a well-organized design, you need to skillfully pick the fonts
and mix them properly and the design tool like Mockplus can help you get it done.

Limit your line length

The length of your line will determine the ease with which a user can read and grasp a message.

Set the line-spacing

If you correctly use the white spaces between lines of text, not only the visibility and visual
appeal will be improved but also the legibility. To make your text easier to read, you can set the
line spacing to 120–145% of the point size.

Use a color contrast

Your website can be easy to read and scan if you have sufficient color contrast. Do not use the
same or similar color for text and background.

Avoid using all caps

Having all the characters capitalized will make an unpleasant user experience, it may appear like
you are screaming and imposing on your readers.

12
User Interface design (UI)

User Interface design (UI) — A specialization of web design that deals with the controls people
use to interact with a website or app, including button displays and gesture controls. Controls
must be as responsive as possible, so the interface must be simple enough that interactivity is
instantaneous.

Good interfaces share these eight qualities or characteristics:

1. Clarity: The interface avoids ambiguity by making everything clear through language,
flow, hierarchy and metaphors for visual elements. Clear interfaces don’t need manuals.
They also ensure users make less mistakes while using them.
2. Concision: It’s easy to make the interface clear by over-clarifying and labeling
everything, but this leads to interface bloat, where there is just too much stuff on the
screen at the same time. If too many things are on the screen, finding what you’re looking
for is difficult, and so the interface becomes tedious to use. The real challenge in making
a great interface is to make it concise and clear at the same time.
3. Familiarity: Something is familiar when you recall a previous encounter you’ve had with
it. Even if someone uses an interface for the first time, certain elements can still be
familiar. You can use real-life metaphors to communicate meaning; for example, folder-
style tabs are often used for navigation on websites and in applications. People recognize
them as navigation items because the metaphor of the folder is familiar to them.
4. Responsiveness: This means a couple of things. First, responsiveness means speed: a
good interface should not feel sluggish. Secondly, the interface should provide good
feedback to the user about what’s happening and whether the user’s input is being
successfully processed.
5. Consistency: Keeping your interface consistent across your application is important
because it allows users to recognize usage patterns. Once your users learn how certain
parts of the interface work, they can apply this knowledge to new areas and features,
provided that the user interface there is consistent with what they already know.
6. Aesthetics: While you don’t need to make an interface attractive for it to do its job,
making something look good will make the time your users spend using your application
more enjoyable; and happier users can only be a good thing.
7. Efficiency: Time is money, and a great interface should make the user more productive
through shortcuts and good design. After all, this is one of the core benefits of
technology: it allows us to perform tasks with less time and effort by doing most of the
work for us.
8. Forgiveness: Everyone makes mistakes, and how your application handles those
mistakes will be a test of its overall quality. Is it easy to undo actions? Is it easy to
recover deleted files? A good interface should not punish users for their mistakes but
should instead provide the means to remedy them.

13
User Experience design (UX)

User Experience design (UX) —is the process design teams use to create products that provide
meaningful and relevant experiences to users. This involves the design of the entire process of
acquiring and integrating the product, including aspects of branding, design, usability and
function. UX design encapsulates many other areas, but views them from the perspective of the
user.The likelihood a user will “bounce” (leave your site after just a few moments) increases
with every second of loading time, so we should prioritize reducing the load time on the home
and landing pages first before addressing the problem site-wide.

Here we gathered six popular definitions for User Experience in order to concentrate what the
professionals think about its features and role. Having based on those great explanations, we try
to generalize main thoughts to be involved in of UX designer’s work.

1. Understand your user

User experience (UX) focuses on having a deep understanding of users, what they need, what
they value, their abilities, and also their limitations. It also takes into account the business goals
and objectives of the group managing the project. UX best practices promote improving the
quality of the user’s interaction with and perceptions of your product and any related services.

2. Make the product simple and joyful

The first requirement for an exemplary user experience is to meet the exact needs of the
customer, without fuss or bother. Next comes simplicity and elegance that produce products that
are a joy to own, a joy to use. True user experience goes far beyond giving customers what they
say they want, or providing checklist features. In order to achieve high-quality user experience in
a company’s offerings there must be a seamless merging of the services of multiple disciplines,
including engineering, marketing, graphical and industrial design, and interface design.

3. Practice the art of planning

User experience (UX) is the art of planning a product’s design so that interactions with the
completed product will be as positive as possible. User experience design addresses all aspects of
how a product or service is perceived by users.

14
4. Make the experience valuable and dynamic

User experience (UX) is about how a person feels about using a system. User experience
highlights the experiential, affective, meaningful and valuable aspects of human-computer
interaction (HCI) and product ownership, but it also covers a person’s perceptions of the
practical aspects such as utility, ease of use and efficiency of the system. User experience is
subjective in nature, because it is about an individual’s performance, feelings and thoughts about
the system. User experience is dynamic, because it changes over time as the circumstances
change.

5. Always consider the human element

User experience (abbreviated as UX) is how a person feels when interfacing with a system. The
system could be a website, a web application or desktop software and, in modern contexts, is
generally denoted by some form of human-computer interaction (HCI).

6. Remember that every single detail matters

The User Experience is everything that happens to your users when they interact with your
business or organization via your website, application or online communications. It includes
everything they see, hear and do as well as their emotional reactions.

15
References

 https://webflow.com
 https://elementor.com
 https://s3.amazonaws.com

16