The anatomy of the elements: grid and layout, typography, color, gradients, shadows, buttons, forms, icons, images, navigations

1. UI AND UX DESIGN
UNIT-II

2. Syllabus
 The anatomy of the elements: grid and layout, typography, color,
gradients, shadows, buttons, forms, icons, images, illustrations,
navigations

3. The anatomy of the elements:
grid and layout
 Grid is one of the most important foundation in design elements .
 This grid is combination of horizontal and vertical line on the screen.
 Screen is divided into coloums and rows.
 Vertical areas of the grid are called coloums.

4. The anatomy of the elements:
grid and layout
 The horizontal area of the grid is called rows

5. The anatomy of the elements:
grid and layout
 The space in between the columns is left blank and this is called gutter.

6. The anatomy of the elements:
grid and layout
 The space on the outside edge of column is called margins.

7. Fluid Grid
 A Fluid grid allows designers to change design elements based on
screen size.
 More accurately columns width changed based on the screen
width,gutters and margins are fixed.
 Fluid Grid is recommended for responsive interfaces.
 Responsive Interface is about creating web sites which automatically
adjust themselves to look good on all devices, from small phones to
large desktops.

8. Fixed Grid
 When the margins are changed and coloumn and gutter points are not
chaged then it is called fixed grids.
 Default grid size for good grid is 12 colomns.
 Many online tools are available to calculate grid values.
 Most of the screen sizes are divisible by 8 so choose the values which is
divisible by 8.
 Many mobile screens have 8 px grid ,margins-16px and gutter 16 px.
 https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

9. Typography
 Typography is how text is arranged with in design.
 While using typography the designer not designing the actual letters.
 The designer working with exsisting type faces and fonts.
 A Type face is lettering design that has collection of different fonts.
 Font is specific style with in that type face.
 The choice of the type face must be made according to legibility,
according to the scalable.

10. Typography
 There are 3 categories of type face.

11. Typography
 For UI and UX most avoidable font is script because its difficult to
understand by the user.
 The line height and font size are inversely propostional.
 A short line text is appropriate for large text.
 A long line text is appropriate for smaller text.
 Line length is the distance between the edges of text block.
 If line length is too long your eyes has to travel for long.
 Short line length text are prefereable.
 Letter spacing is space between the letlers in the text.
 Main purpose of the letter spacing is improving the readability.

12. Typography
 For UI and UX most avoidable font is script because its difficult to
understand by the user.
 Type Space is also need to be considered.
 Letter Spacing
 Text alignment:1.Left 2.Right 3.Center 4.Justify
 Most alignment used is left because 90 percent humans are rignt handers.
 Justify alignment is recommended for Articles and Blogs.
 Hifenation is solution to the gaps uptained form justification alignment.

13. color
 Color tells the basic mood and concept.
 Online users assess the quality of the product in online in just 90 sec
according to a research of institute of colors.
 In that 90 percent 67 percent of quality assessment depends on color.
 The right color selection always improves the displaying of elements,
 Colors can be noted down in different ways:

14. color
 In web design we use only HEX and RBG.
 Hue referes to the origin of the colors we can see.
 It doent have any adjustments on original color.
 Saturation is how colorfull or vivd the color appearance.
 Zero percent saturation is grey color and 100 percent is intence color.
 Lightness is the way to compare how the color is close to white or black.
 For example zero percent lightness is pure black.
 50 percent lightness is choosen color.
 100 percent lightness is pure white.

15. color
 Increasing the lightness of the color will create color versions by adding
white.
 Decreasing the lightness of the color will create color versions by adding
Black.
 Pure black is not recommended in web design.
 Instead of black use dark grey text on white background .
 Creating color palette is on of the responsibility of UI Designer.
 The colors used in design should not be choosen randomly.It should have a
meaning visually and for the user.
 The color real is known the fundamental method to choose color from
every aspect of life.

16. color
 Increasing the lightness of the color will create color versions by adding
white.
 Complementary color palette.Complemetary colors are palce on opposite
side of color real.This combination provides high contrast.

17. color
 Analogous color palette.In this Scheme Three colors are placed on side by
side.

18. color
 Split complementary color Scheme uses one Primary color and Two
Complementary colors opposite to primary on color real.

19. color
 Triadic color palette Scheme contains 3 colors that draw shape of a
Triangle on color real.It Provides high contrast color scheme provides boldness.

20. Creating own color Plalette
 Rules:
1.Set the Primary Color:This color will be used in buttons,Icons ,
Typography, cards ,headers and others.
2.Chose a Secondary Color:I It is used to guide the users in navigating
website.This color could be complementary color of primary or nutral color.
3.Set attention catching colors :These are strongly suggested in order to
communicate with the user.
Ex: Green for success ,red for Error in form submission.
4.Create Tints and Shades of the colors in color palette. In color theory, a
tint is a mixture of a color with white, which increases lightness, while a
shade is a mixture with black, which increases darkness.

21. Creating own color Palette
 Rules:
5.Create the Gray palette.
6.60-30-10
60 percent is dominat hue usually a neutral color.
30 percent is secondary color
10 percent is accent color.

22. Gradient
 What is Gradient
 Types of Gradient
 How to create a Gradient
 Morph Gradient

23. Gradient
 A Gradient is gradual blending from one color or more.
 Gradients makes everything look real because in real life is not made up
of flat objects or colors.
 Gradients can be found in typography ,buttons ,cards and illustraions.
 There are 3 Types of Gradients:
 Linear Gradient
 Radial Gradient
 Angular Gradient
.

24. Gradient
 Linear Gradient : This Gradient is a Transition between two or more
colors.
 It can be oblique,Horizonatal,Vertical.Lighter color on top.
 It is used for squares.

25. Gradient
 Radial Gradient :This Type of Gradient have color starting at center point
and other color is at edge.
 This Gradient creates awesome 3d effects use it for round shapes.

26. Gradient
 Angular Gradient : this gradient creates an angle also known as iconic
gradient.
 The color function changes relative to center point.

27. How to create Gradient
 Always use soft color transitions to make gradients.
 Avoid using more than 3 colors in small shapes and make symmetry
between colors
 Another way to create gradients is to inspire by the nature.

28. Gradient
 Morph Gradient is special Gradient can created with two types
Radio and Linear Gradients.
Step 1:Create a oval shape and fill with radio gradient
Step 2:Draw color full shapes on it with linear Gradient.
Step 3:Add another oval shape in background blur and glossy in blur.

29. Shadow
 Naturally the shadow is created by the presence of the sun.
 Our eyes are able to see 3D objects that includes shadows,lighting.
 With out Shadows the design doesn’t look real any more.
 In UI Ux design the elements could be
1. With Out shadow,
2. Drop shadow,
3. Inner shadow.

30. With Out Shadow
 With out shadow the element looks like that is in back ground.

31. Drop Shadow
 The Drop shadow creates the effect that element can be elevated from
the background.
 Depending on shadow values it could be closer or higher from
background.

32. Inner Shadow
 It creates the effect that element is sunk into the back ground.
 This type some times used in th input field that there is a space between
fields that need to be filled.

33. Creating the shadow
 A shadow can be Created by setting values for x-axis and y-axis .
 Depending on these values the shows placed on top,bottom left ,Right of
the element.
 Try to avoid placing shadow on the top of the element.
 There are no exact values for shadows because they are directly
proposnal to elements.
 To create a pleasant shadows it must be created in layers.
 White shadow is common mistake in dark mode.

34. Shadow

35. Steps for Realistic shadows
 1. Add Image
 2.Duplicate the image
 3.Set blur effect-35% and opacity-65%
 4.Resize it smaller than the image
 5.Place the shado on the first image and center it.
 6.You just created a Realistic shadow.

36. Buttons
 What is Button
 Different Shapes of Buttons
 Styles,States,Colors,functions and Positions.
 Buttons are interactive elements of the UI and convey Instructions
or Actions.

37. Buttons Shapes and Styles
1. Rounded Rectangles are created by setting boarder radius.
2. The size of the button will built hierarchy between the elements.
3. According to material design principals the touch target is minimum
of 36*36 pixels.

38. Button styles and Color

39. Buttons Padding

40. Buttons States

41. Forms
 A form is a UI component that contains inputs,dropdowns radio
buttons, Toggle buttons check boxes and Sliders.
 An Input is A text field component whose design should be
accessible efficenent to fill in and Provide clear opportunity for
interaction.
 It is the common element build with the lable rectangle and
placeholder.

42. Forms-Input Styles
 Input Styles are outlined or underlined.

43. Forms-Input States

44. Forms
 Drop Downs
 Radio Buttons
 Check box
 Toggle Buttons
1. A Toggle Button is a UI element That has two Mutual States Such a
ON and OFF.
2. The design and Control of this control is based on Physical Switch.

45. Forms -Toggle

46. ICONS
 Icons are simple symbols that can used in contacts to communicate
something.
 Icons are easier to recognize for great user experience.

47. ICONS
 The most common style of icons is outline icons, Glyph icons and
Duo tones because they are easiest to view and understand.
 Gradient icons and Frozen icons have more remarkable effect but they
can become tireing to watch they become too often.
 3d icons are looks famous in 2021 and looks spectacular only in large
sizes.
 Avoid using multiple icon styles in the same project.
 There are many libraries of icon packages you have to choose from
your needs.

48. Functions of Icons
 Depending on the purpose the icons have 3 functions.
 1.clarify 2. Interactive 3.Decorate.
 Clarifying icons are icons that illustrate the text near them.
 People who instantly recognize icons doesn’t pay much attention to
the text.

49. Icons
 Interactive Icons: These icons appear in interactive areas and the
primary purpose is do actions symbolize by them.
 These icons support the navigation.

50. Icons
 Decorative icons offers more aeistic appeal.
 It is one of the feature that can attract retain users and add positive
user experience.

51. How to use icons correctly
 1.The icons must be simplest as possible.When they contain too many
meanings their meaning covey differently to users.
 2.The icons should be scalable and Flexible
 3.Consistency in using choosing colors for icons.

52. Images
 A Human brain processes images 60 thousand times faster than the text.
 90 percent of information transmitted to human brain is images.
 Images should have a focus point so they can be cropped with out
loosing contact.
 Image quality plays vital role in user experience in product design.
 If the image looks blur it will impact on the brand of the product.
 Don’t forget to compress the images while uploading to web sites
because compressed images loads much faster.

53. Images
 Using images that don’t match the context can confuse the user
 You should use images more appropriate to the concept.
 The image should be relevant and invoke the right feeling depending on
the theme of the web site.

54. Navigations
 Navigation plays a vital role while the user interact with the websites.
 Navigation design is the central and basis of User Experience.
 Navigations can be linked Text, Linked icons and Buttons.
 Types of navigations:
 1.Menu- Header menu, Ladder menu, Footer menu.
 2.Breadcrumbs: In this type of navigation the links must be highlighted to
the user to understand the hierarchy of the pages.
 3.Tabs:tabs creates navigation on the small devices such as mobiles. They
appear on the bottom of the screen. They should not be more than 5.If they
are more than 5 it looks smaller.

55. Navigations