UI UX and Graphic Design

UI UX and Graphic Design

1. GRAPHIC DESIGN & UI, UX Course intern at First two week Sarankumar S

2. TABLE OF CONTENT 2 S.NO TOPIC 1. Graphic Design 2. Color Theory 3. Typography 4. Layout 5. Logo Design & Branding 6. Design Trends 7. UI Design 8. UX Design 9. Design Process 10. Wireframes

3. GRAPHIC DESIGN

4. 4 Graphic design is the process of visual communication using typography, photography, iconography and illustration. The field is considered a subset of  visual communication   and  communication design , but sometimes the term " graphic  design " is used synonymously. Graphic designers create and combine symbols, images and text to form visual representations of ideas and messages. According to me it’s a universal language . What is Graphic Design

5. 5 Won’t believe Graphic Design is a Universal language I think you know English If we don’t know Chinese

6. Color Theory 6

7. 7 The property of what we see when we interact with light and other objects color theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. In this topic, I learned about color combinations, color palette. What is Color and Color theory

8. 8 Color Theory Types Split Colors Complementary colors Analogous colors Triadic colors Analogous colors  are groups of  colors  that are next to one another on the  color  wheel. Colors that are opposite each other on the color wheel are considered to be complementary colors combines one base color with the two colors directly adjacent to its opposite or complementary color A triadic color scheme uses three colors that are evenly spaced around the color wheel .

9. 9 Color Theory Types Tetradic Monochromatic color Square Monochromatic color schemes are color schemes based on only one color or tint. The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs. The square color scheme is similar to the rectangle, but with all four colors spaced evenly around the color circle.

10. TYPORAPHY TYPOGRAPHY 10

11. 11 What is Typography T he art and technique of arranging type to make written language legible, readable, and appealing when displayed. Content Visibility Spacing Font Pairing

12. 12 Typography Content Visibility Spacing Font Pairing

13. 13 LAYOUT

14. 14 What is Layout T he plan or design or arrangement of something laid out It helps the reader to grasp the essence of the design and focus on the main content.

15. 15 LOGO DESIGN & BRANDING

16. 16 WHY LOGO IS IMPORTANT Because it  grabs attention, makes a strong first impression , is the foundation of your brand identity, is  memorable, separates you from competition, fosters brand loyalty , and is expected by your audience. .

17. Emblems are just about the oldest form of logo. people have been using them since at least the  middle ages , if not before. 17 Logo Types Brand marks W ordmark Emblems Monogram Also known as a “ logotypes ,” logotypes are logos which are built entirely of the word or words that make up the company’s name D ecorative design made up of a combination of one to three letters (traditionally three) to create a single symbol A pictorial mark (sometimes called brand mark or logo symbol) is an icon—or graphic-based logo.

18. they simply mean that the  product or service is being represented through an abstract symbol or icon . 18 Logo Types Mascots Abstract logo Monogram A mascot is different than the above pictures and symbols in that it’s a drawing of a particular person Combination of all the above logo types

19. My Logo Design 19

20. 20 DESIGN TRENDS

21. 21 DESIGN TRENDS Design trends are constantly changing.  Being able to keep up with and implement them  is an important Current Design Trends Flat Design  Detailed Cut-Out Images With Solid Light Background Custom Illustrations and Icons Unique Geometric Shapes

22. 22 Current Design Trends Unique Geometric shapes Cut-out Images with solid light background Flat Design Custom Illustration & Icons

23. 23 Our company also update logo in current trends

24. 24 One special mention

25. UI DESIGN

26. 26 What is UI The “UI” in UI design stands for “ user interface .” The user interface is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with.

27. 27 UX DESIGN

28. 28 What is UX User experience (UX or UE) is a person's emotions and attitudes about using a particular product, system or service. It includes the practical, experiential, affective, meaningful, and valuable aspects of human–computer interaction and product ownership.

29. 29 Design Thinking Process 5 Stages in the Design Thinking Process Empathise - understanding of the problem Define - analyse observations and synthesise Ideate - explore all of the possible solutions Prototype - process of creating wireframes Test - often used to  redefine  one or more problems and inform

30. WIREFRAME 30

31. 31 WHAT IS WIREFRAME Wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website / app. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. 

32. 32 My UX Design for Coffee app Wireframe link: saran coffee – Image 1.jpg (marvelapp.com)

33. 33 My UI Design for Coffee app

34. Any Questions? 34

35. Thank You 35