Faculty of Computing

Software engineering Web design and

Programming Group Assignment
Group Members ID

1. Kiya Zewdu 1202173

2. Bamlaku Getachew 1201063

3. Daniel Kebede 1103170

Submitted to: Yonas A.

Submission date:30/08/2014E.C
Acknowledgment
First and foremost, we want to express my gratitude to the Almighty God. Then we'd want
to offer our heartfelt gratitude to our teacher. for providing us with this fantastic opportunity to
work on this Web design principal concepts, which allowed us to do a lot of research and learn a
lot of new things.
 Table of Contents
Introduction ..................................................................................................................................... 1
Part I. Color Theory ........................................................................................................................ 2
Definition of Color theory .............................................................................................................. 2
Why Color matters? .................................................................................................................... 2
Basic 3 color theory terms ........................................................................................................... 3
Part II. Typography ......................................................................................................................... 5
Definition of Typography ............................................................................................................... 5
Why is typography important? .................................................................................................... 5
The difference element in typography ........................................................................................ 6
How do you choose the right typography for your website? ...................................................... 7
Part III. User interface design ......................................................................................................... 7
Definition of User Interface Design ................................................................................................ 7
Why is user interface important? ................................................................................................ 7
Here are the most important overarching elements of UI: .......................................................... 8
UI design guidelines .................................................................................................................... 8
Part IV. User experience design...................................................................................................... 9
Definition of User experience design ............................................................................................. 9
UX design disciplines: The quadrant model ............................................................................. 10
Importance of User experience design ...................................................................................... 11
Conclusion .................................................................................................................................... 12
Reference ...................................................................................................................................... 13
Introduction
In this Assignment we tried to explain four pillars of web design principles namely Color
theory, Typography, User interface design and User experience design in Part I, Part II, Part III
and Part IV respectively. We began the Color Theory section by attempting to define color
theory from three perspectives, importance, and basic three theory terms. After finishing Part I,
we moved on to Part II, which included a brief description, importance, and many elements of
typography, as well as a list of tips and tricks for selecting the proper typography for your
website. Moving on to Part III, where we attempted to define user interface design and provide
some guidelines. Finally, our group discussed the definition of user experience design, the
quadrant model of user experience, and the significance of user experience design.

Page | 1
Part I. Color Theory
Definition of Color theory
Color theory is a huge field of knowledge. It includes rules and guidelines about various
color combinations and their uses. Apart from the basic terminology and classifications (such as
color schemes), it also taps into other considerations such as human perception, cultural
associations, color psychology, and more.

In addition to the above definition, color theory can be defined as Color theory is the
collection of rules and guidelines which designers use to communicate with users through
appealing color schemes in visual interfaces. To pick the best colors every time, designers use a
color wheel and refer to extensive collected knowledge about human optical ability, psychology,
culture and more.

Color theory definition of Wikipedia, color theory is a body of practical guidance to color
mixing and the visual effects of a specific color combination. Color terminology based on the color
wheel and its geometry separates colors into primary color, secondary color, and tertiary color.

Why Color matters?

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).

However, there are other vital benefits of understanding color. When used effectively in
web design, it plays a significant role in branding and product messaging. In fact, research has
found that color plays a huge role in customers’ decisions about purchasing a product, with a
staggering 92.6 percent of viewers putting high importance on the item’s visual factors.

The right color scheme can also make or break the success of a marketing campaign.

Page | 2
Basic 3 color theory terms
1) Color Wheel: A color wheel is a powerful tool that can help you visualize relationships
between colors in a standard, schematic way. The basic color wheel consists of 12 colors.
Primary colors form the basis of all others. Although traditional theory lists these as Red,
Blue, and Yellow, recent research suggests that Magenta, Cyan, and Yellow are more
accurate descriptors of how we perceive these colors. Mixing primary colors gives you
Orange, Green, and Purple. These are known as secondary colors. You can also combine primary
and secondary colors to create tertiary colors such as yellow-green, blue-green, and so on.

2) Color Relationships: 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.
➢ Complementary: Based on two colors from opposite sides of the color wheel.
➢ Analogous: Featuring three colors that are next to each other on the color wheel.
➢ Triadic: Using three colors that are at the points of a triangle drawn within the
color wheel.

Page | 3
3) Tints and Shades: You can create tints by adding white to a color. Higher levels of white
will produce lighter tints. Similarly, if you add black, you will produce a different shade.
The darker the shade, the blacker it contains. You can combine tints and shades of a base
color to achieve a monochromatic color scheme. However, it can be more difficult to make
important elements stand out in such a design.

Page | 4
Part II. Typography
Definition of Typography
Web typography is the art and technique of arranging type on a website. It’s not only about
the design or composition of the letters and characters and their arrangement. Of course, it’s about
those things — but it’s also about communication, visual identity, brand persona, usability, and
much more.

We can also define 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.

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
your users, optimize readability and accessibility, and ensure an excellent user experience.

We can see the importance of typography in 3 manners:

➢ Typography builds brand recognition: Not only will good typography enhance
the website’s personality, but your users will subliminally begin to associate the
typeface featured on your site with your brand. Unique, consistent typography will
help you establish a strong user following, build trust with your users, and help to
carry your brand forward.
➢ 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 your website for one minute or half an
hour. It’s important that your website is visually stimulating and memorable, and
typography plays a huge role in this process.

Page | 5
The difference element in typography
A. 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.

B. Contrast: Much like hierarchy, contrast helps to convey which ideas or message you want
to emphasize to your readers. Spending some time on contrast makes your 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.

C. Consistency: Keeping your 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 your
readers instantly understand what they’re reading, and begin to notice a pattern. While it’s
ok to play around with levels of hierarchy to some extent, it’s good practice to establish a

Page | 6
 consistent hierarchy of typefaces (one consistent font for headers, another for subheadings)
and stick to it.

How do you choose the right typography for your website?

When choosing typography, we have to consider the following tips:

➢ Think about personality

➢ Reflect on tone
➢ Don’t skimp on function
➢ Consider performance
➢ Get inspired
➢ Take some time to test

Part III. User interface design

Definition of User Interface Design
The user interface (UI) is the point at which human users interact with a computer, website
or application. The goal of effective UI is to make the user's experience easy and intuitive,
requiring minimum effort on the user's part to receive maximum desired outcome.

UI is created in layers of interaction that appeal to the human senses (sight, touch, auditory
and more). They include both input devices like keyboard, mouse, trackpad, microphone, touch
screen, fingerprint scanner, e-pen and camera and output devices like monitors, speakers and
printers. Devices that interact with multiple senses are called "multimedia user interfaces". For
example, everyday UI uses a combination of tactile input (keyboard and mouse) and a visual and
auditory output (monitor and speakers).

Why is user interface important?

User interface is important to meet user expectations and support the effective functionality
of your site. A well-executed user interface facilitates effective interaction between the user and
the program, app or machine through contrasting visuals, clean design and responsiveness. When
designing a UI for your site, it's important to consider the user's expectations in terms of
accessibility, visual aesthetic and ease of use. An optimal mix of effective visuals and efficient

Page | 7
responsiveness will improve your site's conversion rates, as it anticipates the needs of the user and
then satisfies those needs.

Here are the most important overarching elements of UI:

➢ Information architecture: The functionality of a site is built according to the IA.
Structuring and organizing your website's content in a logical way is important to help
users navigate the site with minimal effort. Components of IA include three main types of
organizational structures: hierarchical (level of importance), sequential (logical order of
steps) and matrix (in which the user chooses the organization of the content they see).
Example: Navigation elements (buttons, tabs, icons), labels (terminology), search features
(search bar) and organization systems (categories).

➢ Interactive design: Elements of ID aim to turn passive readers into active participants by
presenting instances of user input. Keeping the user in mind while creating the UI will help
to improve the interactivity and execution of specific behaviors that satisfy user needs.
Additionally, efficiently-designed interactive UIs can 'learn' to anticipate and remedy any
problems that may come up before they negatively impact the user's experience.
Example: Social-share features, toggles, buttons.

➢ Visual design: The importance of your site's aesthetic value cannot be underestimated.
Effective design utilizes color, contrast, font, video and photo elements to attract visitors
and make it easy for them to read and works with the content, rather than around it, to
create a logical, intuitive flow of functionality.
Example: Contrast, color, white space, typography, mobile optimization.

UI design guidelines
1) Visibility of system status: Systems should offer appropriate feedback within
reasonable time. For example: when a user clicks on a button, it changes its
background color as well as its font.
2) Match between system and the real world: Use familiar language your target
audience can understand. Design your UI using symbols and objects that relate
to the real world. For example: add a magnifying glass icon to a search bar.

Page | 8
 3) User control and freedom: Give users space to go back and undo or redo
previous actions.
4) Consistency and standards: Standardize every UI element to guarantee
consistency throughout your system.
5) Error prevention: Reduce any potential errors in your system, and flag them
when they happen so the user can fix the issue right away.
6) Recognition rather than recall: Minimize the amount of information a user
needs to remember by offering help within the specific context in which a user
is. Avoid giving them long tutorials upfront.
7) Flexibility and efficiency of use: Let users customize or tailor their interface to
suit their needs so that frequent actions can be achieved through shortcuts and
touch gestures.
8) Aesthetic and minimalist design: Keep both your content and visual design
simple. The user shouldn't get distracted or confused by unnecessary elements
that get in their way.
9) Help users recognize, diagnose and recover from errors: Highlight your
error messages and use plain language that give specific solutions to your user's
problems.
10) Help and documentation: Ensure your documentation is easy to find and
understand. Present the documentation in context right at the moment that the
user requires it and make it actionable.

Part IV. User experience design

Definition of User experience design
User experience (UX) refers to any interaction a user has with a product or service. UX
design considers each and every element that shapes this experience, how it makes the user feel,
and how easy it is for the user to accomplish their desired tasks. This could be anything from how
a physical product feels in your hand, to how straightforward the checkout process is when buying

Page | 9
something online. The goal of UX design is to create easy, efficient, relevant and all-round pleasant
experiences for the user.

Another definition of User experience 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).

UX design disciplines: The quadrant model

UX can be divided up into four main disciplines:

1) Experience Strategy (ExS): UX design is not just about the end user; it also brings huge
value to the business providing the product or service. Experience strategy is all about
devising a holistic business strategy, incorporating both the customer’s needs and those of
the company.
2) Interaction Design (IxD): Interaction design looks at how the user interacts with a system,
considering all interactive elements such as buttons, page transitions and animations.
Interaction designers seek to create intuitive designs that allow the user to effortlessly
complete core tasks and actions.
3) User Research (UR): UX design is all about identifying a problem and designing the
solution. This requires extensive research and feedback from existing or potential
customers. During the research phase, UX designers will launch surveys, conduct
interviews and usability testing, and create user personas in order to understand the end
user’s needs and objectives. They gather both qualitative and quantitative data and use this

Page | 10
 to make good design decisions. Learn how to conduct user experience research in our
article on it.
4) Information Architecture (IA): The short answer is that information architecture is the
practice of organizing information and content in a meaningful and accessible way. This is
crucial in helping the user to navigate their way around a product. To determine the IA of
any given product, information architects consider the relationship between different sets
of content.

Importance of User experience design

User experience is important because it tries to fulfill the user’s needs. It aims to provide
positive experiences that keep a user loyal to the product or brand. Additionally, a meaningful user
experience allows you to define customer journeys on your product that are most conducive to
business success.

When it comes to the Internet, the importance of User Experience (UX) cannot be
overstated, as a website that is hard to use, is slow or poorly laid out, will cause visitors to leave,
whilst also, at the same time, degrading the standing of the associated brand. On a larger scale,
(UX) is vital as its goal is to totally fulfil the user’s needs, aiming to provide constant positive
experiences, that in turn keep a user loyal to the product or brand.

Page | 11
Conclusion
Generally, we can say that to build a beautiful out looking and user-friendly web design. It
is important to have a good understanding of the four pillars of web design principles mentioned
in this assignment. Which is Color theory, typography, user interface design and user experience
design.

Page | 12
Reference
➢ https://webdesign.tutsplus.com/

➢ https://www.interaction-design.org/literature/topics/color-theory
➢ https://careerfoundry.com/
➢ Fonts by Hoefler&Co. (typography.com)

➢ UIvs.UX:What’stheDifference?(usertesting.com)

Page | 13