BAHIRDAR

INSTITUTE OF
TECHNOLOGY
Department of
Software Engineering
Web Design and
Programming
Group Assignment

Group Members

1.Bezwit Yimer 1201210

2.Gebeyehu Assega 1201767
3.Habtemariam Yaregal 1207393
Submitted to: - Mr. Yonas A.
Submission date: - 29/08/2014
 TABLE OF CONTENT
Content Page
1.Introduction …………………………………………………... 2
2.Color Theory …………………………………………………. 3
2.1 Primary, secondary and tertiary colors …………………... 3
2.2 Hue, tints, shades and chroma …………………………… 4
2.3 Hot and cold ……………………………………………... 5
2.4 Color schemes …………………………………………… 6
3.Typography …………………...……………………………… 9
3.1 Why is typography important ……………………………. 9
3.2 Elements of typography ……….…………………………. 10
3.3 How do we choose the right typeface for our website? ….. 12
4.User interface design ………………………………………… 15
4.1 Steps in UI design ……………….………………………. 16
5.User experience design ……………………………………… 19
5.1 Elements of UX …………………………………………. 19
5.2 Difference between UI and UX …………………………. 21
6.Conclusion ….………………………………………...……… 22
7.Reference ….……………………………………………...… 23

1|Page
 INTRODUCTION
Basically, users’ habits on the Web aren’t that different from customers’ habits in a
store. Visitors glance at each new page, scan some of the text, and click on the first
link that catches their interest or vaguely resembles the thing they’re looking for.
In fact, there are large parts of the page they don’t even look at.
The most important thing to making a website loved by users is pretty much the
design. A well-designed website can help us form a good impression on our
prospective customers. It can also help us nurture our leads and get more
conversions. But, more importantly, it provides good user experience and helps our
website visitors access and navigate our website with ease.
A visually appealing website starts with solid design, and a conscious color
scheme. The colors that a developer use resonate with different feelings, and can
trigger different responses. When defining our brand, carry that over onto a
website to create a holistic experience of us and our company.
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. Based on this there
are four basic pillars of web design principles. Which are,
1. Color theory
2. Typography
3. User interface design, and
4. User experience design.

Let’s see all of them one by one

2|Page
 COLOR THEORY
Along with a well-designed user-interface, helping visitors to navigate through the
site is one key role color plays, guiding them through the site content easily and
quickly. Colour also helps towards building a content hierarchy, focusing attention
on key information and calls to action.
We remember color theory in art class: the meaning of the color wheel,
temperature and chroma. As a web designer, we work with color theory every day
- whether unconsciously or consciously.
The first records of color theory and the color wheel date back to at least the
beginning of the 17th century. The origin of colors, the reflection of light, the
process in the human eye - humankind has been interested in all these topics for a
long time.
We designers are often primarily visual types. Creating color combinations often
comes from the gut. We constantly see and analyze the colors around us. This
results in an intuitive way of dealing with colors.
But factual knowledge of colors and their effects is not only indispensable for
explaining the choice and arrangement of colors. It's also important for making
decisions that deviate from the norm.

Primary, Secondary and Tertiary colors

3|Page
Our screens are usually based on RGB (red, green, blue) - also known as the
Additive Color System. As a rule of thumb, anything that reflects light is based on
the Additive Color System. In this structure, we use the primary colors as a starting
point. White is created by combining all the colors, while black represents the
absence of the colors.
Explained using the example of a simple color wheel: primary colors are yellow,
red and blue. Secondary colors are created when we mix primary colors together.
Tertiary colors are created from mixtures that contain primary and secondary
colors.
On the web, we use RGB (red-green-blue) and hex values to represent colors. 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:
✓ rgb (59, 89, 145) equals Facebook blue
✓ rgb (0, 0, 0) equals black
✓ rgb (255, 255, 255) equals white

Hues, Tints, Shades and Chroma

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 we describe a color as “blue-green,” we’re defining it in terms
of two hues.
We add white to a color to create a tint and add black to create a shade. Tints and
shades let us create monochrome color schemes by adding varying levels of white
and black to a base color. For example, if our base color is #8dbdd8 (a lightish
blue) as seen in the image below, we can create a monochrome scheme by
choosing two tints (two brighter blues) and two shades (two darker blues).

4|Page
Chroma, also called saturation or tone, is 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.

Hot and Cold

We can also classify colors in temperatures.

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. Gray and shades of gray, white and black belong to the group of
neutral colors.
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.
A few rules of thumb apply here:
➢ Warm colors look more dominant when we pair them with cool colors.

5|Page
 ➢ Neutral colors tend to look uninteresting on their own, which is why they
need at least one color to stand out.
➢ Primary colors contrast with each other.

Types of Color Schemes

Designers create color schemes by pairing multiple color families from the color
wheel. This works best when we use one of the following patterns that create color
harmony.

1. Monochrome
A monochromatic color scheme consists of various tints, shades, and saturations of
a single base color. They’re very cohesive, but run the risk of becoming
monotonous.

All black and white films fall into the monochromatic category. Black and white
are present at the extremes of each and every color, meaning solid black and white
can be included in a monochromatic scheme built around any color.

6|Page
2. Complementary
Complementary color schemes are based on two colors from opposite sides of the
color wheel. Because the two hues will be wildly different, such schemes can be
very impactful and noticeable. There is also split complementary — where one
primary color is used with two analogous colors to its complement.

3. Analogous
Analogous color schemes feature three colors that sit next to each other on the
color wheel. Because of the tonal similarities, these schemes can create a very
cohesive, unified feel, without the monotony of a monochrome scheme.

7|Page
4. Triadic
To make a triadic color scheme, draw an equilateral triangle (a triangle where all
three sides are the same length) on the color wheel, and select the three colors at
the points of the triangle. This triad creates a diverse, yet balanced, scheme.

5. Tetradic
A tetradic color scheme includes four colors that are equidistant from each other on
the color wheel. Because the four colors can either form a square or rectangle,
some resources break these color schemes into two - square and rectangle.

8|Page
 TYPOGRAPHY
Let’s kick off with the basics: what actually is typography? In essence, typography
is the art of arranging letters and text in a way that makes the copy legible, clear,
and visually appealing to the reader. Typography involves font style, appearance,
and structure, which aims to elicit certain emotions and convey specific messages.
In short, typography is what brings the text to life.
Typography can be dated back to the 11th century, during the innovation of
movable type. Before the digital age, typography was a specialized craft associated
with books and magazines, and eventually public works. The first example of
typography can be seen in the Gutenberg Bible, which kick-started a typography
revolution in the west. Fun fact: the style of type used in the Gutenberg Bible is
now known as Textura, and we’ll find it in the font drop down menu on major
desktop applications today!
Fast forward to modern day, where typography is mostly associated with both the
digital world and print. With the birth of the internet came a creative explosion of
the art of typography. Suddenly, web designers had an abundance of fonts and type
options at their disposal, making typography more visually diverse than ever
before.

Why is typography important?

Typography is so much more than just choosing beautiful fonts: it’s a vital
component of user interface design. Good typography will establish a strong visual
hierarchy, provide a graphic balance to the website, and set the product’s overall
tone. Typography should guide and inform our users, optimize readability and
accessibility, and ensure an excellent user experience.
Let’s delve a little deeper into why typography is so important.

✓ Typography builds brand recognition

Not only will good typography enhance the website’s personality, but our users
will subliminally begin to associate the typeface featured on our site with our
brand. Unique, consistent typography will help us establish a strong user
following, build trust with our users, and help to carry our brand forward.

9|Page
 ✓ Typography influences decision making
Typography has a profound effect on the way that users digest and perceive the
information conveyed by the text. Eye-catching type is much more persuasive than
weak fonts that don’t reinforce the message of the text.

✓ Typography holds the attention of the readers

Good typography could be the difference between someone staying on our website
for one minute or half an hour. It’s important that our website is visually
stimulating and memorable, and typography plays a huge role in this process.

Elements of typography
To get started in typography, we first need to get to grips with the seven essential
typographical design elements.

❖ Fonts and Typefaces

There’s some confusion surrounding the difference between typefaces and fonts,
with many treating the two as synonymous. A typeface is a design style which
comprises a myriad of characters of varying sizes and weight, whereas a font is a
graphical representation of text character. Put simply, a typeface is a family of
related fonts, while fonts refer to the weights, widths, and styles that constitute a
typeface.

10 | P a g e
 ❖ Contrast
Much like hierarchy, contrast helps to convey which ideas or message we want to
emphasize to our readers. Spending some time on contrast makes our text
interesting, meaningful, and attention-grabbing. Most designers create contrast by
playing around with varying typefaces, colors, styles, and sizes to create impact
and break up the page.

❖ Consistency
Keeping our typefaces consistent is key to avoiding a confusing and messy
interface. When conveying information, it’s essential to stick to the same font
style, so our readers instantly understand what they’re reading, and begin to notice
a pattern.

❖ White space
Often referred to as ‘negative space,’ white space is the space around text or
graphics. It’s often overlooked and tends to go unnoticed by the user, but proper
use of white space ensures the interface is uncluttered and the text is readable.
White space can even draw attention to the text and provides an overall
aesthetically pleasing experience. White space often takes the form of margins,
padding, or just areas with no text or graphics.

11 | P a g e
 ❖ Alignment
Alignment is the process of unifying and composing text, graphics, and images to
ensure there is equal space, size, and distances between each element. Many UI
designers create margins to ensure that their logo, header, and body of the text are
aligned with each other. When aligning our user interface, it’s good practice to pay
attention to industry standards. For example, aligning our text to the right will
seem counterintuitive for readers who read left to right.

❖ Hierarchy
Establishing hierarchy is one of the most vital principles of typography.
Typographical hierarchy aims to create a clear distinction between prominent
pieces of copy that should be noticed and read first, and standard text copy. In an
age of short attention spans brought about by social media, designers are urged to
be concise and create typefaces that allow users to consume the necessary
information in short amounts of time.

How do we choose the right typeface for

our website?
Now that we’ve familiarized ourselves with the different typography elements,
let’s talk about the process of choosing typefaces for our interface. With so many
different fonts and typefaces to choose from, it’s easy to feel overwhelmed.
Making the right choice depends on so much more than just seeing what looks
nice. Here are a few key considerations:

12 | P a g e
 1. Think about personality
How do we want our users to feel when they first enter our website? Do we want to
emulate a friendly atmosphere? Do we want the site to feel high-end, welcoming,
playful, or serious? It’s imperative that the typography reflects the personality of
the brand or product. A good starting point when faced with this challenge is to
define the core traits of our brand, and start to gather typefaces that reflect these
traits. From there, we can begin to notice a trend.

2. Reflect on tone
It’s equally important to consider how the font harmonizes with the tone of the
message. For example, if we want to convey serious or important information,
choose a less stylized or decorative font that is both clearly legible and will limit
distraction.

3. Don’t skimp on function

Function is just as vital as form: there’s nothing worse than a website that looks
pretty but is entirely illegible, leading us to click the wrong button or take a wrong
turn because the instructions were unclear. When deciding what typefaces to
include in our interface, set the style, aesthetic, and voice aside and reflect on
whether the font is legible, readable, and accessible. Can the text be legible without
strain? Are the characters distinct enough?

4. Consider performance
One thing that many designers often overlook is choosing typefaces that are web
browser friendly. Commonly used font libraries such as Google fonts offer web-
based font files that can be rendered perfectly in a browser without any issues. Pro
tip: when downloading web fonts, never download more character sets than we
need to. This way, you’ll avoid excess weight!

5. Get inspired
If we’re not sure where to start, take some time to see what other people are doing.
Open our eyes to the typography that we see around us. Can we notice similar
patterns? Can we see good and bad examples of typography? Even following
typography hashtags on social media or looking up typography on Pinterest will
give us some good ideas of what’s out there.
13 | P a g e
 6. Take some time to test
The best way to decipher which font to use for our interface? Test, test, and test!
By gathering useful feedback from real users, we’ll get a clearer insight into what
works, what doesn’t, what is legible and what feels counterintuitive or clunky.

14 | P a g e
USER INTERFACE DESIGN
User interface (UI) design is about building interfaces with a focus on styling and
interactivity. The UI designer’s goal is to create an interface the user finds easy to
use and aesthetically pleasing.
The word “interface” refers to the access point where a user interacts with a
software application (e.g., Figma, Sketch), a browser-based website, or a hardware
device (e.g., a smartphone touchscreen). A UI designer explores all the interactions
and behaviors a user takes with a product to create an interface that best adapts to
the user’s needs.
When we talk about UI design, we talk about the stylistic choices a designer makes
when creating a product, e.g., an image, button, menu bar, or footer. All of these
elements will affect the user’s interaction, and so, must be planned accordingly.
Everything stems from knowing our users, including understanding their goals,
skills, preferences, and tendencies. Once you know about our user, make sure to
consider the following when designing our interface:
▪ Keep the interface simple - The best interfaces are almost invisible to
the user. They avoid unnecessary elements and are clear in the language they
use on labels and in messaging.
▪ Create consistency and use common UI elements - By using
common elements in our UI, users feel more comfortable and are able to get
things done more quickly. It is also important to create patterns in language,
layout and design throughout the site to help facilitate efficiency. Once a
user learns how to do something, they should be able to transfer that skill to
other parts of the site.
▪ Be purposeful in page layout - Consider the spatial relationships
between items on the page and structure the page based on importance.
Careful placement of items can help draw attention to the most important
pieces of information and can aid scanning and readability.
▪ Strategically use color and texture - We can direct attention toward
or redirect attention away from items using color, light, contrast, and texture
to our advantage.

15 | P a g e
 ▪ Use typography to create hierarchy and clarity - Carefully
consider how we use typeface. Different sizes, fonts, and arrangement of the
text to help increase scanability, legibility and readability.
▪ Make sure that the system communicates what’s happening -
Always inform our users of location, actions, changes in state, or errors. The
use of various UI elements to communicate status and, if necessary, next
steps can reduce frustration for our user.
▪ Think about the defaults - By carefully thinking about and anticipating
the goals people bring to our site, we can create defaults that reduce the
burden on the user. This becomes particularly important when it comes to
form design where we might have an opportunity to have some fields pre-
chosen or filled out.

Steps in UI design
The user interface design process happens during the later stages of the product
development process after a team of designers, developers, and product manager
carries out extensive user research.

1.Understand the problem we are trying to solve

The UI design process starts by defining the problem your team needs to achieve.
For that, design teams use design briefs, which provide a general understanding of
what the design project is all about.
The design brief helps UI designers understand the context of their work as their
job comes after the user experience has been defined and developed. It also
facilitates the definition of responsibilities and deadlines, and the discussion of the
project as a whole.

2.Implement competitor benchmarking

Early in the process, we want to look for inspiration that our team can use for
reference once we start designing the user interface. We want to see what UI
components other products use to present a screen, interaction, or user flow.
Usually, we’ll be looking at companies in our industry to create design
benchmarks.

16 | P a g e
Let everybody in our team select any component that they like. The point of this
exercise is to see the direction that each member would like to take. Once our team
has gathered some ideas, we can create an interface inventory. An interface
inventory is a directory that defines all the UI elements you could use.

3. Define screens and user behaviors

Note that we are talking about screens and not pages. It’s best to think about them
this way because pages are associated with a web browser, whereas a screen
applies to mobile devices, apps, and browsers. It also emphasizes the changes in
resolutions and layouts each screen will have once they adapt to different devices.
Then, we will need to design a user flow, which shows the process a user takes to
complete a given task. A user flow will help our team analyze the interactions
between each screen and how the user progresses along in their journey.

4. Develop sketches and wireframes

With the screens defined, our team can start creating sketches that illustrate
potential screen layouts. The goal is to get a high-level idea of the different ways
the interface could meet the user’s needs. Every member of the design team should
discuss and generate ideas with the relevant stakeholders to find the right
combination that gets users to complete each task efficiently. Once we have
defined the right sketch for each screen, we can start working on our wireframes.
These are low-fidelity prototypes that define the visual hierarchy and structural
guidelines of each screen.

5. Create and maintain a design system

Before we move onto higher-fidelity prototypes, we want to define the exact UI
components we will use in them with the help of design systems. A design system
groups every UI element that will allow a design team to design and develop a
product. It will evolve constantly with the product, the tools, and the new
technologies available. In this sense, a design system is like a library of reusable
elements that give a team clarity and consistency throughout the UI design process.

6. Develop high-fidelity prototypes

Finally, we can start creating our high-fidelity prototypes, which includes every UI
element we have defined previously. Although a high-fi prototype won’t look

17 | P a g e
exactly like the finished product, the goal is to present a user flow to both your
stakeholders and users that you can discuss and test.

7. Hand-off
Once we have finished creating our high-fidelity prototypes, it's time for the hand-
off. In this final step, we present the finished product to our stakeholders and
discuss the changes made. Before we carry out the hand-off, document the specific
changes made to the product, which we can do with the help of any of the major
design tools such as Figma, Sketch, Zeplin, and InVision. We can also record a
quick video demonstrating the interactions.

18 | P a g e
 USER EXPERIENCE
DESIGN
User experience (UX) design 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.
Unlike user interface design, which focuses solely on the design of a computer
interface, UX design encompasses all aspects of a user's perceived experience with
a product or website, such as its usability, usefulness, desirability, brand
perception, and overall performance. UX design is also an element of the customer
experience (CX), which encompasses all aspects and stages of a customer's
experience and interaction with a company.

Elements of UX
❖ Research
User experience design draws from design approaches like human-computer
interaction and user-centered design, and includes elements from similar
disciplines like interaction design, visual design, information architecture, user
research, and others.

❖ Visual Design
Visual design, also commonly known as graphic design, user interface design,
communication design, and visual communication, represents the aesthetics or
look-and-feel of the front end of any user interface. Graphic treatment of interface
elements is often perceived as the visual design. The purpose of visual design is to
use visual elements like colors, images, and symbols to convey a message to its
audience. Fundamentals of Gestalt psychology and visual perception give a
cognitive perspective on how to create effective visual communication.

19 | P a g e
 ❖ Information Architecture
Information architecture is the art and science of structuring and organizing the
information in products and services to support usability and findability. In the
context of information architecture, information is separate from both knowledge
and data, and lies nebulously between them. It is information about objects. The
objects can range from websites, to software applications, to images et al. It is also
concerned with metadata: terms used to describe and represent content objects such
as documents, people, process, and organizations. Information architecture also
encompasses how the pages and navigation are structured.

❖ Interaction Design
It is well recognized that the component of interaction design is an essential part of
user experience (UX) design, centering on the interaction between users and
products. The goal of interaction design is to create a product that produces an
efficient and delightful end-user experience by enabling users to achieve their
objectives in the best way possible. The current high emphasis on user-centered
design and the strong focus on enhancing user experience have made interaction
designers critical in conceptualizing products to match user expectations and meet
the standards of the latest UI patterns and components.

❖ Usability
Usability is the extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency and satisfaction in a specified context
of use. Usability is attached to all tools used by humans and is extended to both
digital and non-digital devices. Thus, it is a subset of user experience but not
wholly contained. The section of usability that intersects with user experience
design is related to humans' ability to use a system or application. Good usability is
essential to positive user experience but does not alone guarantee it.

❖ Human Computer Interaction

Human–computer interaction is concerned with the design, evaluation and
implementation of interactive computing systems for human use and with the study
of major phenomena surrounding them.

20 | P a g e
Difference Between UI and UX
1. UX is focused on the user’s journey to solve a problem, UI is focused on
how a product’s surfaces look and function.
2. A UX designer is concerned with the conceptual aspects of the design
process, leaving the UI designer to focus on the more tangible elements.
3. UI is the bridge that gets us where we want to go, UX is the feeling we get
when we arrive.
4. UI is focused on the product, a series of snapshots in time. UX focuses on
the user and their journey through the product.
5. UX encompasses all the experiences a person has with a product or service,
whereas UI is specific to the means by which people interact with a product
or service.

21 | P a g e
 CONCLUSION
Color theory is a mix of science, psychology, and emotion — making color an
incredibly powerful aspect of design. Sir Isaac Newton got us started with a basic
color wheel based on how light reflected a spectrum of colors. Color theory and the
color wheel have continued to evolve, teaching us more about the science behind
why certain colors complement each other. And over time, color psychology has
influenced design as well. A combination of cultural, historical, and emotional
elements influences how humans feel when they see different colors. When we
learn color theory, we arm ourself with the scientific and psychological principles
that help you evoke emotion and responses from your target audience.
Every website has text, and where there is text there is either good or bad
typography. So, as a website owner, we need to invest time into the typography of
our own site. By focusing on the look and readability of our words, we ensure our
readers won’t be challenged by our text. And for the few who do appreciate good
typography, our attention to detail will convey professionalism, empathy, and
design smarts.
User Interface (UI) Design focuses on anticipating what users might need to do and
ensuring that the interface has elements that are easy to access, understand, and use
to facilitate those actions. UI brings together concepts from interaction design,
visual design, and information architecture.
The field of user experience design is a conceptual design discipline and has its
roots in human factors and ergonomics, a field that, since the late 1940s, has
focused on the interaction between human users, machines, and the contextual
environments to design systems that address the user's experience. With the
proliferation of workplace computers in the early 1990s, user experience started to
become a positive insight for designers. Donald Norman, a professor and
researcher in design, usability, and cognitive science, coined the term "user
experience," and brought it to a wider audience.
UX and UI design are related but not exactly the same. UX design involves
managing the user journey as they interact with a product or service, while UI
design focuses on the actual construction of that product or service's interface. UI
design is usually considered part of the UX design process.

22 | P a g e
 REFERENCE
✓ www.careerfoundry.com
✓ www.wikipedia.com
✓ www.redboxes.io
✓ www.webflow.com
✓ www.blog.hubspot.com
✓ www.usability.gov
✓ www.maze.co
✓ www.interaction-design.org
✓ www.usertesting.com
✓ www.google.com

23 | P a g e