Basic

Principles
Design, Color, Typography UI and UX
[
Basic Principles

We are pleased to present you with our basic

Purpose of principles guide

The Guide
This guide was created to help you present the basic
principles. By using this guide you’ll discover different
aspects of Design, Color, Typography , UI and UX. It is Use
in past present and future this is basic that every designer
or creative person is fixed with this principles.

Page - 02 www.sanskrutha.com
Basic Principles

We are pleased to present you with our

Basic principles Guideline!

This guide was created to help you present the design in a

proprietary way. By using this guide you’ll discover
different aspects to create Designing , Color theory , Basic
typography, Basics on UI and UX

Page - 03 www.sanskrutha.com
Basic Principles

Table of Contents

01 04 05 06
02 03

Introducing about Basic Typography UI Design UX DESIGN

Elements of Color Theory
Design, Fundamentals Process
Design
Color, Typo , UI
and UX

Page - 04 www.sanskrutha.com
Basic Principals

Introduction
Why is the way something looks
important?
Text, color, Design, UI and UX all interact to produce a user friendly environment. This course will help you understand the effect , component and
explain how a consistent and thoughtful application of these components can have a significant impact on the product.

Learning outcomes:
After studying this course, you should be able to know:

• Elements of Design

• Color Theory

• Basic Typography

• UI Design Fundamentals

• UX DESIGN Process

Page - 05 www.sanskrutha.com
Basic Principles

Basic
Principles

01 02 03 04

Elements of Design Color Theory Basic Typography UI and UX Design &

Fundamentals
Design elements have an impact Color theory is the collection of Typography is the art and (UI) user may interact with to
on how a piece of work is rules and guidelines which technique of arranging type to use a digital product or service
perceived, executed, and used designers use to communicate make written language legible, but (UX) users to interact with,
and are present in design with users through appealing readable and appealing when their experience, whether
regardless of skill, taste, or style. color schemes in visual displayed. positive, negative, or neutral,
interfaces. changed how users felt about
those interactions. UX, evolved
as a result of the improvements
to UI

Page - 06 www.sanskrutha.com
Basic Principles

Elements of
Design-01
The elements of design are the building blocks. The elements of
design are the things that make up a design.

• LINE
• SHAPE
• DIRECTION
• SIZE
• TEXTURE
• COLOUR

Page - 07 www.sanskrutha.com
Basic Principles

LINE
Line is probably the most fundamental of all the elements
of design. It is the starting place for most artistic creation
whether one is starting a line drawing or painting or even
sketching ideas for a sculpture. most design begins with
line.

So what is line?
A math teacher would say that line consist of only one
dimension, length. In the real world of creating art though
a one dimensional line would not be practical. A more
usable definition might be that line is the path of a dot,
point etc. through space and that is always has more
length than thickness. Lines are not all the same,
especially in art.

Page - 08 www.sanskrutha.com
Basic Principles

Types of Lines
Vertical lines:
Are straight up and down and perpendicular to horizontal lines

Horizontal lines:
Are straight up and down and perpendicular to vertical lines

Diagonal lines:
Are lines that straight in any direction except vertical or horizontal

Zigzag lines:
Are a series of diagonal lines joined end to end

Curved lines:
Are lines that bend in any amount of degree; they may be gently wavy to
tightly wound spirals

Page - 09 www.sanskrutha.com
Basic Principles

Shape
A shape is a two- or three-dimensional object that stands out
from the space next to it because of a defined or implied
boundary. A shape can live in different areas in space, and
have other elements like line, color, texture, or
movement. Like forms, shapes come in two different types:
geometric and organic.

Types of Shapes
• Geometric Shapes
• Free-form or Organic Shapes

Page - 10 www.sanskrutha.com
Basic Principles

GEOMETRIC SHAPES

• Can be described using mathematical terms

• They are very regular or precise
• They are more often found in man-made things because they are easier to reproduce and make things with
shapes
• Examples of geometric shapes are: Squares, Rectangles, Triangles, Circles, Oval, Pentagons and so on.

FREE-FORM OR ORGANIC SHAPES

• Are difficult to describe using definitions
• Are irregular or uneven
• Are more often found in nature
• Example the shape of Clouds, Puddles, Trees, Leaves, Rocks and so on.

Page - 11 www.sanskrutha.com
Basic Principles

Direction
Among the elements of good page design, whether for print or
web, is the concept of direction, which closely aligns with
movement. Elements in the page design intentionally guide
the viewers' eyes from one area of the page to another.

How to Determine Direction

If you aren't sure how to design a page to indicate direction,
experiment by looking at web pages and print publications to
identify where your eye goes first and then where it goes
second. Then, look for the reason that happened.

Once you recognize the symmetrical design elements that

cause your eye to move from one element to the next, you can
use those elements in your design.

Page - 12 www.sanskrutha.com
Basic Principles

Common Directions in Designs

The three directions common in designs used to

direct the eye are:

Page - 13 www.sanskrutha.com
Basic Principles

Horizontal
If you divide the page or screen in half from side to side with a line or other element, the eye moves to each
element in the top half of the design before moving to the section under the horizontal line or element that
divides the page.

Vertical
If you have two long, narrow columns of text or two long, narrow photos or graphic elements, you have a
design with a vertical direction. The eye flows from the top of one column to its bottom and then moves to
the top of the second column.

Diagonal
If you use diagonals or triangles in your design, the eye is captured, particularly on the web, where you don't
see many diagonal direction layouts. Every page design has a dominant direction, which is established by
the placement of the most critical elements.

Page - 14 www.sanskrutha.com
Basic Principles

Size
Size is simply how small or big an element is in relation to other objects
within a design. Generally, we use size to make a particular element
stand out or to give it importance. However, size becomes a much
more powerful design tool when it is considered alongside scale.

What is Scale?
We can generate scale within a design by making size relationships
between elements. For example, if two circles of the same size were
placed on a page there would be no size relationship – neither would be
large or small. However, if one circle was a third of the size of the other,
we would describe one as being big and the other as small. This is called
scale of reference. It is impossible to determine the relative size of an
object if there is no scale of reference.

Page - 15 www.sanskrutha.com
Basic Principles

Identify and Name the Size You Need

For some teams, one is enough. Otherwise, how many sizes do we need?

Some trend towards (1) Default versus (2) High density. The former
serves most adopters with a sensible starting point. The latter offers
those designing denser interfaces the compression appropriate for their
customer needs.
Two alternatives may not be enough. More often, we’ll see :

Small:
High-density displays for frequently used interfaces that integrate
considerable data and enable diverse tasks.

Medium:
A default for many motifs and long-form reading experiences for any
Takeaway: A component library likely requires two or (at most)
range of consumer, business, and internal apps and content.
three sizes. Avoid greater complexity, so that a systems offer
Large :
choices that balance flexibility with continuity across a catalog.
Content-rich marketing sites, promotions, and one-time data entry for
onboarding, setup, and other simple flows.

Page - 16 www.sanskrutha.com
Basic Principles

Texture
Texture refers to the surface quality in a work of art. We associate textures
with the way that things look or feel. Everything has some type of texture.
We describe things as being rough, smooth, silky, shiny, fuzzy and so on.
Some things feel just as they appear; this is called real or actual texture.
Some things look like they are rough but are actually smooth. Texture that is
created to look like something it is not, is called visual or implied texture.
How to Determine Direction

If you aren't sure how to design a page to indicate direction,

experiment by looking at web pages and print publications to
identify where your eye goes first and then where it goes
second. Then, look for the reason that happened.

Once you recognize the symmetrical design elements that

cause your eye to move from one element to the next, you can
use those elements in your design.
Page - 17 www.sanskrutha.com
 Basic Principles

Texture may be used in a work of art to:

• Create visual interest or a focal point in a composition
• To create contrast within a design composition
• To help visually balance a design composition

Real Texture
Visual texture is the real thing. Real texture cannot be represented here
because a computer screen, even with the highest quality photographs can
only create simulate textures. However for the purpose of providing
examples assume that these images are real.

Visual or Implied Texture

Visual or implied texture can be simulated or invented. Simulated texture is
the type that is created to look like something it is not. For example, in
drawing or painting of a cat where its fur is made to look like real fur. Invert
texture, on the other hand may look rough, smooth or any other feel but is
purely made up by the artist. It does look like "real" texture.

Page - 18 www.sanskrutha.com
Basic Principles

Color
The Elements of Design, color is probably the most challenging to
understand. We have to learn a little science to fully understand the nature
of color. Color has three main properties: Hue, Value and Intensity.

What is color?
Color originates from a light source, that is either view directly or as reflected
light. Daylight or white light contains light waves for all colors. There is no
color with out light! The absence of light is complete darkness or black. The
mixture of all visible light is white light. White light is made up of all the
colors in the rainbow. Water droplets in the air act like a prism does when
light passes through. It organizes random color light waves into the order of
their wave length. We see that organized pattern as a rainbow. These colors
are always in the same order and are called the Color Spectrum. When
organized in order around a circle; the color spectrum is called a Color
Wheel.

Page - 19 www.sanskrutha.com
Basic Principles

Color Theory - 03
Color Theory applies to the system through which we are able to create a
reasonable structure for color. Using color theory, we are able to anticipate
the visual effects of specific color combinations and predict how different
colors will react to each other when mixed.

The attached color theory poster, chart includes a visual of the color wheel,
as well as diagrams to illustrate how color schemes are created. By using
the color theory poster artists, designers, painters or students will have a
greater understanding of how basic color theory applies when determining
what colors to use in a project. Color theory chart includes a visualization
and explanation of how colors are created digitally and through printing
using RGB additive and CMYK subtractive methods.

To better understand color theory basics, one must begin with the color
wheel. The color wheel is made up of twelve colors, including THREE
PRIMARY, THREE SECONDARY, and SIX TERTIARY COLORS.

Page - 20 www.sanskrutha.com
 Basic Principles

Color Hues, Tints, tones and Shades

Hue is a term that seems more complicated than it is. A hue is just a
color. More specifically, a hue is any color on the color wheel. Hopefully,
you’re familiar with the color wheel, but let’s go over it quickly if you need
a refresher. There are three primary colors, red, blue and yellow. Most of
us also know that combining any two of those primary colors will give
you one of the secondary colors: red and blue make violet, yellow and
blue make green, and red and yellow make orange. A third set of colors,
the tertiary colors, fill in the six gaps between the primary and secondary
colors — red-orange, blue-green, red-violet and so on. Tertiary colors are
pretty simple to figure out based on their names, so we won’t cover
them here
Tints, tones, and shades are variations of the hues found on the basic
color wheel when white, black or both are mixed in. To illustrate this, I
painted a Tint, Tone and Shade color wheel using Liquitex Basics acrylic
paint for each of the 6 primary and secondary colors.

Page - 21 www.sanskrutha.com
 Basic Principles

Tints
Tints are created when you add white to any hue on the color wheel. This
will lighten and desaturation the hue, making it less intense. Tints are
often referred to as pastel colors, and many feel they are calmer quieter
colors. To make the tints below, I used equal parts white and the hue
straight from the bottle. Again, the amounts needed will vary by
manufacturer and paint variety, depending on the intensity of the
pigment in a given paint.

Tones
Tones are created when you add both black and white to a hue. You
could also say grey has been added. Depending on the proportions of
black, white and the original hue used, tones can be darker or lighter
than the original hue, and will also appear less saturated or intense than
the original hue. Tones can reveal subtle and complex qualities in a hue
or combination of hues, and are more true to the way we see colors in
the real world.

Page - 22 www.sanskrutha.com
 Basic Principles

Shades
Shades are created when only black is added to a hue. This results in a
rich, often more intense and darker color. Because of the overpowering
nature of many black pigments, adding black to a hue is a tricky and
sometimes frustrating exercise when mixing paint. Many blacks will
change the character of a hue even in small amounts, so they should be
used sparingly. Alternatively, a hue can often be made darker by adding
another dark hue rather than black. Testing different mixtures is the best
approach.

Look around you.

Where do you see colors that might
be tints, tones or shades?

Page - 23 www.sanskrutha.com
 Basic Principles

Color Harmonies
• Monochromatic color scheme
• Grayscale color scheme
• Analogous color scheme
• Complimentary color scheme
• Triadic color scheme
• Split Complimentary color scheme

Monochromatic color scheme

One of the most simple color schemes is a monochromatic color
scheme. Monochromatic color schemes can employ a variety of tints,
tones, and shades, but all colors used will stem from the same base hue.

Page - 24 www.sanskrutha.com
Basic Principles

Grayscale color scheme

Grayscale color schemes are similar to monochromatic color schemes in
their simplicity. However, grayscale color schemes do not employ any
base hue and fall outside the original color wheel. Instead of being based
on a hue, a grayscale color scheme is created by mixing of various
shades of black, gray, and white.

Analogous color scheme

Analogous color schemes involve two or more colors that sit directly
beside each other on the color wheel. It is interesting to note that an
analogous color scheme can involve several different hues and is not
limited to a specific number. However, in order to be considered
analogous, the color scheme must have a minimum of two hues and all
must be connected on the color wheel.

Page - 25 www.sanskrutha.com
 Basic Principles

Complementary color scheme

Complimentary color schemes, similar to analogous, employ a minimum
of two base hues. However, in complimentary color schemes the base
hues sit directly opposite each other on the color wheel.

Triadic color scheme

Triadic color schemes are slightly more complicated, involving three
completely separate hues. Triadic color schemes involve three hues
evenly spaced from each other on the color wheel. It is interesting to
note that all three hues will be of the same color type, primary,
secondary, or tertiary.

Split Complementary color scheme

Split complimentary color schemes also involve three separate hues. In
split complimentary color schemes two of the three colors will be spaced
closer together than the third, separated only by the third color’s
opposite on the wheel.

Page - 26 www.sanskrutha.com
 Basic Principles

Color Systems
As illustrated on the attached color theory poster, the method of
creating the chosen colors is dependent on the media through which the
project is completed. Digitally, we are able to create color using light in
an RGB additive system. In RGB additive, one begins with black and adds
light and color, with the added color creating a lighter result as one
progresses towards white. However, using physical printing methods, we
use a CMYK subtractive color system which is, in essence, reverse to RGB
additive. In CMYK subtractive, one begins with white and adds ink or
paint to create a darker surface. As color is added, the result becomes
darker and tends towards deep shades, ending in black.

RGB: RED, GREEN, AND BLUE

CMYK: Cyan, Magenta, Yellow, and Key

Page - 27 www.sanskrutha.com
Basic Principles

Basic Typography
Typography is actually one of the most important elements of design; it can
literally make or break your final product and can be the difference
between your design being successful or not. This makes it rather
unfortunate then that typography is one of the hardest areas of design to
master.

once you’ve learnt the basic principles of typography, you are half way to
mastering the art. In this article we’re going to discuss the 5 most important
aspects of typography which must always be considered when working with
text. The idea is to create a mental checklist that you can tick off whenever
you’re implementing text in a design.

Page - 28 www.sanskrutha.com
 Basic Principles

Font Choice

Your choice of font will be the first thing you need to consider – and probably
the most time consuming! I have been guilty of meticulously going through
endless lists of fonts in order to get it right. It’s a bit of a tedious process, but
your choice of font is such a crucial ingredient in typography and the time spent
will prove itself worthy in the end.

Firstly, let’s make sure we know the difference between a serif and a sans serif
font. Serif fonts are the ones with the extra bits on the end of the letters (these
extra bits are actually called serifs) and sans serif fonts are the ones without the
extra bits.
So when should you use these font types? Studies have suggested that, in terms
of body text, serif fonts are more readable when it comes to print, but become
less readable on the web due to low screen resolutions. Therefore the general
rule of thumb is to use serif fonts for print and sans serif fonts on the web,
although this often depends on the context of the design. Always use either
serif or sans serif fonts for body text – there is pretty much no room for
negotiation on this point.

Page - 29 www.sanskrutha.com
 Basic Principles

Size
To determine the size of your text you must consider the purpose; what’s it for?
Who’s its audience? If you want your text to be scanned easily, make it larger
and less effort for the eyes. Studies have shown that [if the reader is interested
in the content] smaller text can encourage the reader to focus more on the text,
rather than scanning it. However, smaller text isn’t as effective at drawing a
reader in and communicating the information in as little effort as possible.

You must also consider your audience. For example, if you’re design is aimed at
children or the elderly, a small font-size doesn’t seem advisable! Just think
about who might be reading the text and what they would prefer.

Moving away from just the body text, we need to form a hierarchy of
importance, with the most important elements occupying a larger font-size. For
example, the main headline would be the largest text on the page, followed by
the sub-headers and then the body text. This improves usability and readability
as it organizes the content for the reader, without forcing them to figure it out
themselves!

Page - 30 www.sanskrutha.com
 Basic Principles

Letter Spacing & Line Height

A very important aspect of typography, that is often overlooked, is letter-

spacing. All too often, the default letter-spacing value is employed and no
thought is applied. It can be the difference between someone reading your
content or not.

The general rule of thumb for letter-spacing is the larger the text, the lower the
letter-spacing value. For example, if you had negative letter-spacing on your
body text, it would appear all crunched up and be very difficult to read,
whereas, the effect would be lessened on a headline or a logo with a much
larger font-size.

Line height is extremely important in order to ensure readability in your text.

Despite its importance, line height is yet again often overlooked by designers
and I regularly find myself, when asked for an opinion on a design, suggesting
that they ‘increase the line height just a touch’.

Page - 31 www.sanskrutha.com
 Basic Principles

Alignment & Proximity

Aligning your text properly can organize the content in the readers mind and
reduce the effort required of them to make sense of the page layout. Look at
your text in relation to the whole design and align it with other elements on the
page to create a structured, organized feel. If your text is just plonked
somewhere on the page without any relation to the other elements on the
page, then it will appear messy and will reduce the aesthetic quality.

Grids are a great way to maintain alignment in your design and to ensure that
everything on the page is positioned in relation to other elements on the page.
In terms of Web Design, the 960 Grid System is currently the most popular
choice to work with.

Proximity involves considering the space between your text and any other
elements on the page. Space is the key to creating a digestible, easy on the eye
design that is simple for the mind to organize. If everything is positioned within
a couple of pixels of each other, things will start to look cluttered and messy.
Always consider the padding around your text.

Page - 32 www.sanskrutha.com
 Basic Principles

Readability
Finally, you must consider the readability of your text as a whole. Take a look at
your text; ask yourself (and be honest), do you think people will want to read
this text? Think about what you can do to make it more readable. Let’s face it –
we, as a race, are a lazy bunch, so make it as effortless as possible for your
readers.

Make sure your text is broken up into paragraphs of a sensible length and if
suitable, you can use images to further break up your text and make it easier
on the eye.

Page - 33 www.sanskrutha.com
Basic Principles

Typography
Manual
Flush Left
When in doubt, set your type flush left rag right. Why? In western culture,
people read from top to bottom, left to right. By justifying type left, the eye
is able to find the edge and read copy much more easily. Avoid indenting the
first line of a paragraph for this reason

Use One Typeface

Using two typefaces successfully within a layout requires an understanding of
the chosen faces in order to be confident that they are complementary. In
general, avoid using two typefaces of the same classification. For example, do
not use two sans serif, serif, slab serif or script faces together.
The reason—contrast.
Stay with one typeface until you have achieved mastery

Page - 34 www.sanskrutha.com
 Basic Principles

Skip A Weight
Go from light to bold, or from medium to extra bold when changing font weights.
The key to great design is contrast. Slight changes in weight change make it harder
for the audience to notice the difference.
Try mixing bold for the headline and light for the body copy for greater Contrast.

Double Point Size

A good rule of thumb when changing point sizes, is to double or half the point size
you are using. For example, if you are using 30 pt. type for the headline, use 15 pt.
type for the body copy. For other uses try 3x or 4x the point size for something
more dramatic.

Align To One Axis

Build your type along one primary axis, and align elements to this grid line. For a
vertical axis, align the left edge of your type. This will work regardless of font type
or size. For horizontal axis, align on strongest horizontal element. Sometimes this
is the cap height while others it’s the baseline

Page - 35 www.sanskrutha.com
 Basic Principles

Pick Any Typeface

Use any typeface you like as long as it’s one of the following:
Akzidenz Grotesk, Avenir, Avant Garde, Baskerville, Bembo, Bodoni, Bookman, Caslon,
Century, Clarendon, Courier, DIN, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans,
Gotham, Helvetica, Letter Gothic, Memphis, Meta, Mrs. Eaves, OCRB, Rockwell, Sabon,
Times New Roman, Trade Gothic,

Group By Using Rules

Use rules/lines to group related blocks of information. This will also make dissimilar
objects appear more orderly

Avoid The Corners

Don’t place elements along the edge or corners of a page unless to deliberately cut
elements off. Negative space is a good thing, so let your design breathe.

Page - 36 www.sanskrutha.com
 Basic Principles

Mind The Gap

Typography is all about spacing. Never use forced justified type because of the inherent rivers that will run through your copy. Avoid having a single word on the last line
of a paragraph, otherwise known as a widow. Don’t allow a new page or column to begin with the final word or line from previous paragraph, thus separating it from the
rest of its paragraph—an orphan. Use a single space after punctuation in a sentence. Pay attention to the shape that the rag creates to avoid undesired shapes/angles.
Spacing matters. The closer things are together, the more the reader will assume a relationship exists between separate blocks of information.

Page - 37 www.sanskrutha.com
Basic Principles

UI and UX Design
& Fundamentals
UI/UX design where everything means how to fix it together and what the
overall design process for a digital project looks like.

What is UI design?
You might be starting from a clean slate with a new product or revisiting an
existing product, but to define your UI patterns library you must start by
establishing an interface inventory. Just as a content inventory helps to
ensure content (i.e. words, images, and other types of content) is
consistent, an interface inventory also ensures that user interfaces are
developed consistently within a comprehensive and considered framework.

Page - 38 www.sanskrutha.com
Basic Principles

An interface inventory helps you to define everything that needs to be

considered in your UI.

The first stage in the process is to systematically take screenshots of

everything you’ve designed. This will be time-consuming, but it’s important.
It’s at this stage — especially if you have a sizable design team — that you
might start to see inconsistencies in how different elements have been
designed. Your interface inventory will help you identify these elements,
which you can then fix.

Consider all the different components that comprise your user

interface, including:

• Typography

• Images and media

• Forms

Page - 39 www.sanskrutha.com
Basic Principles

• Typography

• Headings and subheadings

• Text elements (stand firsts, paragraphs)

• Lists

• Images and media

• Logos

• Iconography

• Images

• Forms

• Text inputs

• Radio/Checkbox inputs

• Select menus

Page - 40 www.sanskrutha.com
Basic Principles

What is User Experience (UX)?

User Experience design is often inferred to the digital industry as UX for
sure. Why not UE? Well, I don’t know! You need to X just sound to the core.

User Experience, in my opinion, is the design to be followed, to begin with,

the design cycle/process. You know what, every business at its core solves a
problem in your customers or users come to you because you're for the
best solutions. To understand this problem there are various techniques a
UX designer can easily use. This is all a part of the research face and
user-centered design process.
The user-centered design process (UCD) helps you to solve problems. Once
this initial process is complete, the UI designer now as a deep
understanding of the problem users trying to solve. No design works
happen so far just research techniques such as services, customer
personas, and many others. Below, I am gonna quickly mention UCD i.e.
user-centered design process, in detail so that the designer aren't face
any problem while working.

Page - 41 www.sanskrutha.com
Basic Principles

Now, in order to use the principles properly, we first need to understand

how websites attract users’ minds, what they think and what are the basic
patterns of users’ behavior.

1.Simple is the best

The simple websites simply attract the reader’s mind and the over-designed
may not work. Keep your website as simple as possible so that the visitors
can feel it easy-to-use and can find their way easily.

2. Compartmentalize your design by grids

You know what, by placing content randomly on your website page can end
up with a random appearance that is quite messy. Here, the Grid-based
layouts arrange the whole content into sections, columns, and boxes that
line up and feel properly balanced, which leads to better-looking website
design.

Page - 42 www.sanskrutha.com
Basic Principles

3. Visual elements placed to focus user attention

Visual elements or we can say visual hierarchy its something that we can
work through the visual elements by just working over the visualizing the
top-notch elements. Basically, it’s the arrangement of elements in order to
be placed.

4. White Space
White Space is also related to the line-height of your text. If you neglect to
supplement a proper line-height, your well-designed sentences become
one big block of letters.

5. Content Writing/Design
Always remember that content is the king, marketing is the queen and
together they can run a household. Moreover, the effective design of the
web holds both great content and great design. By the usage of compelling
language, great content can attract and influence the visitors all by twirling
them into customers.

Page - 43 www.sanskrutha.com
Basic Principles

6. Typography and Readability

In general, sans serif fonts, such as ‘Arial’ and ‘Verdana’ are quite easier to
devour online. Now at this point, you can notice that the typography and
the readability that envelops the requirements of the readers.

7. Text Alignment

• Left-Aligned Text- When lines of text are left-aligned, they usually flush
on the left-hand side and ragged on the right.

• Right-aligned text- When lines of text aligned right, they are flush on the
right-hand side & ragged on the left.

• Center-Aligned text- When the lines of the text center-aligned, they are
ragged on both the left & right.

Page - 44 www.sanskrutha.com
Basic Principles

8. Navigation
Studies show that navigation is key for attaining visitors. It shows that
visitors stay more time on websites that mainly having easy navigation.
Some tactics for effective navigation subsume a logical page hierarchy
keeping navigation quite simple, intuitive and more consistent on each and
every page is key. .

9. Push Button Hover Effects

https://ianlunn.github.io/Hover/ Must check this given link only if you’re
going to supplement the hover effect push button on the websites. It will
help you throughout. It contains a collection of CSS3 powered hover effects
to be applied to links, buttons, logos, SVG, featured images and so on.

10. Load Time

Here, you need to ensure that your website doesn’t take too long to load
your website. Some of the hacks to enhance page load times subsume
image size optimization, compiling the code into central CSS or JavaScript
file and minimize Java, HTML & CSS.

Page - 45 www.sanskrutha.com
Basic Principles

11. Mobile Friendly

It is now commonplace to access the websites from multiple screen sizes
from different devices, so it is essential to consider if your website is
mobile-friendly or aren't.

12. Basic UX Motions

Below the GIF includes the foremost principles of UX Motion such as
transformation, cloning, masking, overlay and all relative to the object
continuity. And more importantly, these linguistic tools are agnostic of any
specific prototyping tool.

13. Attractive Fonts

Here, when you convey the information, it should be readable. It should be
attractive in a style that attracts the readers’ minds directly. Don’t
underestimate the power of picking the right font design and the deep
psychological impact it has on your visitors. Experienced designers
understand this and pick their fonts very carefully & deliberately. Which
font should be applicable whilst designing the website you can see in the
given link.

Page - 46 www.sanskrutha.com
Basic Principles

14. Aesthetically Appealing

To make a website appealing designers can seem an impossible task. You
already know its pretty critical factors in creating trust, because it’s what
you look for yourself.

15. ‘F’ Pattern Design

The F-pattern design is the foremost and commonly way visitors scan the
text on a website. Eye-tracking studies have perceived that most of what
people see in the top area of the screen. An effectively designed website
will work with a reader's natural pattern of scanning the page.

Page - 47 www.sanskrutha.com