2022

BIT
COMPUTING FACULITY
SOFTWARE ENGINERING
DEPARTMENT

Web Designing Assignment

Group Members
Name ID
1. Hailelule Baye …………………..1201890
2. HENOK GIRMA…………………..1201978
3. Eyerusalem taeme………….......1201615

Submitted to______ MR .Yonas A.__

Submission Date:29/08/2014
 Table content
content page
introduction……………………………………………..3
color theory…………………………………………….4
schemes of color theory…………………………7
typography……………………………………………………………..1
3
elements of typography………………………………………..15
user interface design…………………………………………….19
how to make great ui……………………………………………...21
user experience design…………………………………………...22
user experience principle……………………………………….22
summary………………..
……………………………………………………26
reference………………………………………………………………….
.27
INTRODUCTION
An effective website design should fulfill its intended function by conveying its
particular message whilst simultaneously engaging the visitor. Several factors
such as consistency, colors, typography, imagery, simplicity, and functionality
contribute to good website design.

When designing a website there are many key factors that will contribute to how
it is perceived. A well-designed website can help build trust and guide visitors to
take action. Creating a great user experience involves making sure your website
design is optimized for usability (form and aesthetics) and how easy is it to use
(functionality).

For the website, to fulfill its main requirement there are four pillars in good web
designs which are color theory, typography, user interface design, user
experience design. We try to define each principle in a best possible way
Color theory
What does color theory means?
In color theory, colors are organized on a color wheel and grouped into 3
categories: primary colors, secondary colors and tertiary colors.
why should you care about color theory?

 branding, marketing and sales.

With this basic knowledge about colors and color schemes, you’re prepared to
make effective branding decisions. Like what color your logo should be . Or the
emotions that colors evoke in a consumer and the psychology behind color
choices on your website.

Understanding color
Color is an essential part of human-computer interaction, and similar to other
elements like typography, designers should select colors with care because

 People decide whether or not they like a product in 90 seconds or less. 90%
of that decision is based solely on color. So, a very important part of your
branding must focus on color.

Color scheme is a term that designers use to describe color combinations that
they use in GUI design . Since there are infinite color combinations out there, it
can be hard to decide what color scheme will work the best for your product.
Fortunately, we have color theory, a discipline that helps us select balanced and
effective color combinations.

Here are a few practical recommendations from color theory that will help to
select powerful color combinations for your design system.

1 . Limit the total number of colors

Achieving harmony in color combinations is one of the main color theory

principles. When you create a new scheme, it might be tempting to add dozens of
colors to it. But it’s better to avoid that temptation.
Why?

 Because it’s really hard to achieve a visual balance when you use too many
colors. You can also easily overwhelm your users.

 So how do you avoid this? -Keep your color scheme simple, with a
maximum of two or three colors. Some designers think that two or three
colors will limit their creativity, but that’s not true. It’s possible to create
interesting visual combinations by playing with shades and tints of those
colors. Simple schemes also work best for your users.

2 . RGB: the additive color mixing model

Humans see colors in light waves. Mixing light—or the additive color mixing
model—allows you to create colors by mixing red, green and blue light sources of
various intensities. The more light you add, the brighter the color mix becomes. If
you mix all three colors of light, you get pure, white light.
TVs, screens and projectors use red, green and blue (RGB) as their primary colors,
and then mix them together to create other colors.

3 . CMYK: the subtractive color mixing model

Any color you see on a physical surface (paper, signage, packaging, etc.) uses the
subtractive color mixing model. Most people are more familiar with this color
model because it’s what we learned in kindergarten when mixing finger paints. In
this case, “subtractive” simply refers to the fact that you subtract the light from
the paper by adding more color.
Traditionally, the primary colors used in subtractive process were red, yellow and
blue, as these were the colors painters mixed to get all other hues. As color
printing emerged, they were subsequently replaced with cyan, magenta, yellow
and key/black (CMYK), as this color combo enables printers to produce a wider
variety of colors on paper.

4 . Use the color wheel to select colors

The next step is to understand how to select the actual colors. Designers typically
rely on the color wheel to solve this.

 The first color wheel was designed by Sir Isaac Newton in 1666 so it
absolutely predates your introduction to it in kindergarten. Artists and
designers still use it to develop color harmonies, mixing and palettes.

 The color wheel consists of three primary colors (red, yellow, blue), three
secondary colors (colors created when primary colors are mixed: green,
orange, purple) and six tertiary colors (colors made from primary and
secondary colors, such as citron, russet, buff ,blue-green or red-violet).
Draw a line through the center of the wheel, and you’ll separate the warm colors
(reds, oranges, yellows) from cool colors (blues, greens, purples).
 Warm colors are generally associated with energy, brightness, and action,
whereas cool colors are often identified with calm, peace, and serenity.
  When you recognize that color has a temperature, you can understand how
choosing all warm or all cool colors in a logo or on your website can impact
your message.
Here are three popular types of color schemes that you can create with a color
wheel:

color schemes
Monochromatic. Monochromatic schemes use a single color, but with variations
of tints, shades, and tones of the color. This scheme is very easy on the eyes; since
the colors naturally go well together, they create a soothing effect.

Analogous. Analogous color schemes use a few related colors—one color is the
dominant color, while others support it. The supportive colors enrich the scheme
and make it more visually appealing.

Complementary. In their most basic form, complementary schemes consist of

only two contrasting colors (for example, a dominant green color and an accent
red color). This scheme works well if you want to attract attention.

Triadic. colors Using a triadic color scheme in your marketing creates visual
contrast and harmony simultaneously, making each item stand out while
making the overall image pop.

How You Can Use Colors in Websites

Colors give sites meaning without having to use descriptive words. They create a
lot of impact, whether you intend for them to or not. They can help move a user’s
eye through your site, creating movement and motion that directs users around a
page.
As seen in many of the corporate sites, they create emotions and values that help
show users what the company is about and what kind of products they are selling.
Use colors to your advantage by carefully selecting complimentary colors and ones
that showcase the values you’re trying to sell. Pairing colors can help change the
meaning of a site altogether.

Pair a soft blue site that creates calming qualities with a bright orange, and you
could change your site to be more exciting and joyful. Maybe your client thinks the
site you’ve designed is too harsh with lots of dark grey hues. Add soft blue colors
and your site design could have a more calming and peaceful tone.

What Colors Mean to Users

Most colors can be taken in a positive or negative manner, depending on how it’s
used, the other colors surrounding it, and the connotation of the site itself. Here are
some general meanings of popular colors.

Red-Red symbolizes fire and power and is associated with passion and
importance. It also helps to stimulate energy and excitement. The
negative connotations of red are rage, emergency, and anger, which stem
from the passionate and aggressive qualities of red.

Orange-Orange is a combination of its two neighbors on the color wheel, red

and yellow. Orange symbolizes happiness, joy and sunshine. It is a
cheerful color, evoking childlike exuberance.
 Orange is not as aggressive as red but takes on some of the same qualities,
stimulating mental activity. It also symbolizes ignorance and deceit.

Yellow- Bright yellow is a happy color representing the positive yellow qualities:
joy, intelligence, brightness, energy, optimism, and happiness. A dingy
yellow brings about negative feelings: caution, criticism, laziness, and
jealousy.

Green- Green symbolizes nature and has a healing quality. It can be used to
symbolize growth and harmony. People feel safe with green.
 Hospitals often use the color of green. On the other hand, green is symbolic
of money, showing greed or jealousy. It can also be used to symbolize a lack
of experience or a beginner in need of growth (“green behind the ears”).
Blue- Blue is a peaceful and calming color exuding stability and expertise. It is a
common color used in corporate sites because of this. Blue can also
symbolize trust and dependability.
 A cool shade can bring about the negative side of blue, symbolizing
depression, coldness, and passiveness.

Purple- Purple is the color of royalty and sophistication showing wealth and
luxury. It also gives a sense of spirituality and encourages creativity.
Brighter purples can exude a magical feeling.
 It’s also great for promoting creativity and feminine qualities. Darker
purples can conjure gloominess and sadness.

Black- Although black is not a part of the color wheel, it can still be used to
suggest feeling and meaning. It is often correlated with power, elegance,
sophistication, and depth. It is said that wearing black on a job interview
can show that the interviewee is a powerful individual, and the same
goes with websites.
 Black can also be seen negatively because the color is associated with death,
mystery and the unknown. It is the color of grief, mourning, and sorrow so it
must be used wisely.

White -White—also not a part of the color wheel—symbolizes purity and

innocence. It also shows cleanliness and safety. Conversely, white can be
seen as cold and distant, symbolizing winter’s harsh and bitter qualities

Example of Colors in Big Companies Sites

1 . Dodge

Dodge’s site is mostly black which allows their images to pop. They use a bright
red for accents. The black gives a powerful quality to the site, showing their
products off in a sophisticated and masculine light.
Black is a great color to use to make products look expensive and worthy of value.
The red shows passion and excitement, as well as the hope to drive consumers to
purchase the vehicles from a company that values commitment and quality.

2 . Tori’s Eye
Twitter visualization tool Tori’s Eye. This is a great example of a mostly
monochromatic color scheme. Here, we see the effects of a simple yet powerful
color palette centered around shades of green.

This color scheme is often easy to pull off, as one shade of a color will almost
always work with another shade of the same color.

3 . BarkBox

The dominant pink color on the BarkBox homepage is repeated throughout the site
in different shades. It contrasts beautifully with the blue color that’s used in the
logos and CTAs throughout the site.

Using complementary colors to draw visitors’ attention where you want it can help
improve any website color palette.

why should you care about color theory?

With this basic knowledge about colors and color schemes, you’re prepared to
make effective branding decisions. Like what color your logo should be. Or the
emotions that colors evoke in a consumer and the psychology behind color choices
on your website.
Think it doesn’t matter? Take a look at this article on color combinations from hell.
It just hurts.

Not only can knowledge of color theory guide you in your own marketing, it can
also help you better understand what your competition is doing.

In a side-by-side comparison of three law firm web pages, you’ll notice a variety of
analogous color schemes. Blue is generally associated with dependability, brown
with masculinity, and yellow with competence and happiness. All of these are
positive associations in a field that stereotypically has negative connotations, such
as dishonesty or aggression.

Making your brand stand out and appeal to your target, plus understanding that
poor colors can mean poor sales—that’s why you should care about color theory.
WHAT IS TYPOGRPAHY DESIGN?

In short, typography design is the art of arranging a message in a readable and

aesthetically pleasing composition. It’s an integral element of design. Typography
doesn’t ask the designer to draw their own letterforms, but to instead work with
typefaces that already exist. This process requires the designer to go through a
series of decisions like selecting the proper typeface, choosing the point size,
adjusting kerning and line spacing and coming up with a layout that makes sense.

This can be done quickly and easily using laptops, computers and even phones.
Thanks to technology, typography and its rules are being challenged each day by
new generations of designers who are envisioning letters in ways we couldn’t
have imagined just a few years ago.

Why is typography design is important graphic design?

Typography has two main purposes in graphic design. The first is to promote
legibility, and the second is to help communicate the messaging, tone, and
sentiment of a design piece. Another function of typography revolves around
aesthetics. We're drawn to visually attractive designs that are clean and easy on
the eyes. In contrast, if a design is busy, confusing, and causes us to strain our
eyes, we run the other way. Thus, it's in our best interest, and our clients', to
learn how to effectively use typography in graphic design.

How to use typography in graphic design

Hitting all the marks of effective and visually appealing typography in graphic
design requires a solid understanding of basic design principles. Through practice,
you'll develop an eye for good typography and will get better at making strategic
design choices. Below are some fundamental concepts to keep in mind when
using typography in graphic design.

Typefaces vs. Fonts: Difference?

A lot of people use the terms “typeface” and “font” interchangeably. But they’re
two very distinct things. Before we get started talking about typography, let’s get
our terms straight.

A typeface is a set of typographical symbols and characters. It’s the letters,

numbers, and other characters that let us put words on paper (or screen). A font,
on the other hand, is traditionally defined as a complete character set within a
typeface, often of a particular size and style. Fonts are also specific computer files
that contain all the characters and glyphs within a typeface.

Several types of fonts are;

 Transitional serif
 Square sans-serif
 Geometric sans-serif
 Typeface refers to a group of characters, letters and numbers that share
the same design. For example Garamond, Times, and Arial are typefaces.
Whereas font is a specific style of typeface with a set width, size, and
weight. For example, Arial is a typeface; 16pt Arial Bold is a font. So
typeface is the creative part and font is the structure.
Choosing and paring fonts
Selecting and pairing fonts for a graphic design are two skills and art forms in and
of themselves. The chosen font or fonts should fit the mood and tone of the
message and be easily legible. If you can master the skills of font selection and
pairing, the value of your graphic design work will reach new heights.
When pairing two fonts, there are essentially two recommended ways to go
about it. The first is to pair two different fonts within the same typeface. For
instance, a bold, uppercase font for headings and its regular counterpart for body
text. The other option is to choose two different typefaces that contrast with one
another. For example, a sans serif for headings and a serif for the body. As a
general rule of thumb, avoid pairing two different fonts or typefaces with very
subtle differences; there needs to be a visible contrast between the two.
Elements of typography
There are eight basic, universal typographical design elements: typeface,
hierarchy, contrast, consistency, alignment, white space, and color .
Typeface

There are three basic kinds of typefaces: serif, sans-serif, and decorative.

Notice the little embellishments at the end of

lines on the serif font, circled in red. Those are
actually called “serifs,” hence the name of the
font category. “Sans” means “without,” which is
why all fonts without serifs are called “sans-
serif.” Decorative fonts are such that don’t
really fit strictly in either of those categories,
and are often elaborate, creative fonts used for
titles.

It’s best to use a maximum of three fonts in a given design project, and two is
often even better. It keeps your design uncluttered and simple. Try to pair serif
fonts with sans-serif fonts, such as putting main body text in a serif font and
putting your title in a sans-serif font, or vice-versa. Use decorative fonts minimally,
and almost never for main-body text, because they often have low readability and
just won’t look right most of the time.

Hierarchy- One of the main roles of hierarchy is to help keep your ideas organized,
so that viewers can always identify which category of information they are
reading. A typical example would be a website, where the title of the site is at the
top of the page in a large header, while main navigation pages within the website
are listed below the header in a smaller font. This is a visual cue, that helps readers
identify the context of the text without even having to consciously think about it.

Contrast- makes text interesting and can help you communicate which
ideas you want to emphasize. Varying size, typeface, weight, color, and
style can give your designs a big impact as well as make your ideas
organized. Below, you can see how contrast helps you to give your text
an interesting, attention-grabbing, and even more meaningful
appearance. Below, the word “Small” is black, aligned right, lightweight,
in an italic serif typeface with increased space between letters. “Large”
is red, heavy weight, in a regular sans-serif typeface, and is about 10x
bigger than the word “Small.”
Consistency- is a key principle for all typography. Consistent fonts are
especially important, as using too many can lead to a confusing and
messy look, so always use the same font styling for the same
information. Decide on a hierarchy of styles and stick to it. Even though
you may have many levels of hierarchy, you should keep to an overall
theme for the design.

Alignment- refers to the “line,” that the text orients towards. It can
apply to a whole body of text, individual words, or even images.
Alignment should be as consistent as possible and every element of
your design is meant to align to one of the other elements in some way,
to create equal sizes and distances between objects. For example, you
may want the logo to align in size with your header, and you may want
your body text to align with the same margins the header falls in.

Whitespace- refers to the empty space around objects or text, and can
take the form of margins, padding, or just an uncluttered area. It
creates a pleasing visual experience and can even draw attention to
text. In the first box below, the text is crammed against the bounding
box, making it hard to read. In the second box, the text has breathing
room and the design even looks more stylish.
List of typography terms
See below for a comprehensive list of foundational typographic terms.

Alignment: result of lining up letters to a reference such as a margin

Aperture: white space at the end of an open counter

Apex: the top point where two strokes are joined together

Arm: when a horizontal stroke is not attached to a stem on one end

Ascender: the stem of a lowercase letter projecting above the x-height.

Backslanted: italics leaning backward

Ball Terminal: ball-shape extension of a letter

Baseline: the imaginary line upon which a line of text rests.

Bold: a heavy weight of any given typeface, often used for emphasis.

Bowl: the generally round or elliptical forms which are the basic body shape of
letters such as C, G, O in the uppercase, and b, c, e, o, p in the lowercase.

Bracket: a curved connection between the stem and serif of some fonts. Not all
serifs are bracketed serifs.

Calligraphy: the art of writing letters with a very specific tool (e.g., broad nib pen,
brush pen, etc.)

Cap Height: the height of capital letters, measured from baseline to the top of the
capital letter. It is based on letters that are flat on the top and bottom, such as an
H or an E. Capital letters with curves, such as B, C, D, G, O, Q, and S extended
slightly above and below the cap height to appear optically similar in size to other
letters.

Center aligned: when text is aligned to the center of a text frame, with the rag on
the left and right sides of the text frame

instances where body copy is aligned within a text frame, creating a rag on both
sides

Character: a letter, number, punctuation mark or symbol

Character Set: entire collection of characters for any given typeface weight
Counter: the white space enclosed by a letterform, whether wholly enclosed, as
in ‘d’ or ‘o’, or partially, as in ‘c’ or a double-story ‘a’.

Crossbar: a stroke across a stem (as in the horizontal line of the letter ‘T’, ‘H’, ‘E’,
etc.)

Descender: the stem of a lowercase letter that extended below the baseline, such
as the g, j, p, q, and y.

Ear: the stroke attached to the bowl of the lowercase g. Some typographers use
the same term for the lowercase r.

Ellipsis: character composed of three dots.

Serif: a stroke drawn at right angle or obliquely across the arm, stem, or tail of a
letter. It is found on vertical and horizontal strokes of some characters. Serifs can
also fall into different categories, such as slab or hairline, among others.

Lowercase: lowercase characters are the non-capital letters of the alphabet. They
make up the bulk of written text, with uppercase or capital letters used primarily
only to start sentences or proper names. The term lowercase is derived from the
days of metal type where the more frequently used letters were kept near at
hand in the lower case while the less frequently used capital letters were kept in
the harder to reach upper case.

What is UI Design?
UI (User Interface) design is the user-centered approach to designing the
aesthetics of a digital product.

The “UI” in UI design stands for “user interface.” The user interface is the graphical
layout of an application. It consists of the buttons users click on, the text they read, the
images, sliders, text entry fields, and all the rest of the items the user interacts with.
This includes screen layout, transitions, interface animations and every single micro-
interaction. Any sort of visual element, interaction, or animation must all be
designed.UI is all about how things look.
 UI design includes the following formats

 Graphical User Interface (GUI): GUI design involves how users interact with
the visuals and digital control panels of a system. The computer's desktop is an
example of a GUI.

 Voice-controlled Interface (VUI): VUI design deals with the interaction

between a user and a system using voice. Smart assistants like Bixby for
Samsung mobile devices and Siri for iPhones are examples of VUIs.

 Gesture-based Interface: This is mostly used in virtual reality (VR) and other
gesture-based design scenarios, which deal with the engagement of users within
3D spaces. Here is an example of our fully coded simulation of the Soft UI
Admin Dashboard in VR:

UI designers are graphic designers. They’re concerned with aesthetics. It’s up to

them to make sure the application’s interface is attractive, visually-stimulating
and themed appropriately to match the purpose and/or personality of the app.
 HOW TO MAKE GREAT UI
1. Make buttons and other common elements perform predictably
2. Maintain high discoverability:Clearly label icons and include well-
indicated affordances

3. Keep interfaces simple (with only elements that help

serve users’ purposes) and create an “invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus
on hierarchy and readability:
1. Use proper alignment. Typically choose edge (over center)
alignment.
2. Draw attention to key features using:
5. Minimize the number of actions for performing tasks but focus
on one chief function per page
6. Put controls near objects that users want to control. For
example, a button to submit a form should be near the form.
7. Keep users informed regarding system responses/actions
with feedback.
8. Use appropriate UI design patterns to help guide users and
reduce burdens (e.g., pre-fill forms). Beware of using dark
patterns, which include hard-to-see prefilled opt-in/opt-out
checkboxes and sneaking items into users’ carts.
9. Maintain brand consistency.
10. Always provide next steps which users can
deduce naturally, whatever their context.

What is UX Design?
“UX” stands for “user experience.” A user’s experience of the app is
determined by how they interact with it.  how users interact with the
system
It is mainly concerned on answering the following questions
- Is the experience smooth and intuitive or clunky and
confusing?
- Does navigating the app feel logical or does it feel arbitrary?
-Does interacting with the app give people the sense that
they’reefficiently accomplishing the tasks they set out to
achieve or does it feel like a struggle? 
User experience is determined by how easy or difficult it is to interact with
the user interface elements that the UI designers have created.So UX
designers are also concerned with an application’s user interface.

UX design Principle
1. Put the user in the center

- Understanding how people think or what they want can be tough. Means

leaving our own preferences behind

-
-

2. Understand information architecture (IA)

 - This is about making sense of every screen and every piece of information the
product will contain. Most people wouldn’t be able to use any product if
everything was just thrown into a long list of topics and features.

- The ultimate goal of information architecture is to help people understand what

they’re looking at and help them find what they are looking for.The ultimate
goal of information architecture is to help people understand what they’re
looking at and help them find what they are looking for.

3. Context is crucial for designers and users alike

- The first steps of the project tend to also include getting to know the problem the usr
faces as well as the context that surrounds it.

4. Understand consistency and why it matters

- Consistency in UX design plays a key part in the learnability of a product. That
is to say, that products that enjoy a consistent design can be picked up much
faster by new users.

5. Give users the right amount of control

6. Put usability first

- This is about checking that users can complete tasks comfortably, that the
product behaves properly and that it does its job. 

 UX designers are in charge of determining how the user interface

operates.

UX designers determine
- The structure of the interface and the functionality.
- How it’s organized and how all the parts relate to one another

UI design and UX design involve very different skill sets, but

they are integral to each other’s success.
Key Differences Between UI and UX Design

 Main focus
 Use of color
 Tools
 Artistic Component
Sample illustration of basic difference
between UI AND UX
 SUMMARY
Color theory is useful in evaluation of color elements such as lightness, saturation
and hue. Manipulating these characteristics provides the spectrum of color used
on modern computing and design.

Web design consists of 95% typography. Believe it or not, everyone will decide for
himself. But the text that cannot be read is a product without purpose. start
paying attention to the quality of information presented at once; do not delay.
That’s all I have. Subscribe to updates, and you will not miss the most exciting
things.

UI (User Interface) design is the user-centered approach to designing the

aesthetics of a digital productUX” stands for . how users interact with the
system.Key Differences Between UI and UX Design Main focus, Use of color ,
Tools, Artistic Component. UX design PrinciplePut the user in the center,
Understand information architecture (IA),Give users the right amount of
controlPut usability first.
 References

- www.interaction-design.org/courses/ui-design-patterns-for-
successful-software
- www.premium.wpmudev.org/blog/ux-ui-wordpress/
- www.smashingmagazine.com/2018/02/comprehensive-guide-ui-
design/
- www.hackernoon.com/6-bad-ui-design-examples-common-errors-of-
ui-designers-e498e657b0c4
- www.ironhack.com/en/ux-ui-design/what-is-ux-ui-design-and-what-
does-a-ux-ui-designer-do
- www.justinmind.com/ux-design/examples
- What Is Typography? A Deep Dive Into All Terms And Rules
(shillingtoneducation.com)

- https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-
theory

- https://ceblog.s3.amazonaws.com/wp-content/uploads/2018/03/24214517/
website-color-palettes-4.png

- https://www.crazyegg.com/blog/website-color-palettes