Graphics Editing and Design Principles of design.pptx

Principles of design: color theory, layout, typography

1. Module 2 . Graphics Editing and Design 2.a Principles of design: color theory, layout, typography

2. 2.a. 1 Principles of Design: Color Theory Color theory is the foundation of understanding how colors interact and how they can be combined to create visually appealing and meaningful designs . In computer graphics , color theory plays a vital role, as digital displays and printed materials use specific color models to represent and produce colors.

3. Color Models in Computer Graphics RGB (Red, Green, Blue) : Used in digital displays like monitors, TVs, and HTML coding. RGB is an additive color model where colors are created by adding light. Example: Combining red and green light produces yellow . CMYK (Cyan, Magenta, Yellow, Black) : Used in printers and physical media. CMYK is a subtractive color model where colors are created by subtracting light reflected from the paper. Example: Cyan and yellow ink create green.

4. Color Theory

5. RGB (Red, Green, Blue): RGB is consider as Additive Color Model in Computer Graphics The RGB color model is one of the most widely used systems in computer graphics and digital displays. It is an additive color model, meaning that colors are created by adding light of different intensities of the primary colors : This model is foundational for screens, projectors, and any device that emits light.

6. How RGB Works? Color Values: Each RGB component can have a value between 0 and 255 in digital systems, representing the intensity of the color . Example : RGB(255, 0, 0) creates pure red . Example : RGB(255, 255, 0) creates yellow by combining red and green light at full intensity light .

7. RGB Color Table Reference https :// www.rapidtables.com/web/color/RGB_Color.html

8. HTML and Web Design : Hexadecimal Format Colors in web design are coded using the RGB model, often represented in hexadecimal format. Example: #FF0000 = Red , #00FF00 = Green , #0000FF = Blue .

9. HTML Color codes Reference https :// www.sampletemplates.com/business-templates/html-color-code-chart.html#google_vignette

10. Limitations of RGB Not Suitable for Printing:Printers use the CMYK (Cyan, Magenta, Yellow, Key/Black) model because they rely on subtractive color mixing (absorbing light) rather than additive.

11. CMYK (Cyan, Magenta, Yellow, Black) Color Mode . It is specifically designed for creating colors on white or light-colored paper by layering ink or toner. The CMYK color model is a subtractive color model used in printers and other physical media

12. How CMYK Works Subtractive Color Mixing : Unlike the additive RGB model , CMYK works by subtracting light that reflects off the surface of the paper.

13. Role of Each Color Cyan (C): Removes red light. The remaining light appears as green and blue. Magenta (M): Removes green light. The remaining light appears as red and blue. Yellow (Y): Removes blue light. The remaining light appears as red and green. Black (K): Used to create true black.Mixing cyan, magenta, and yellow makes a muddy dark brown, not pure black, so black ink is added for clarity and depth. Reference: https :// www.w3schools.com/colors/colors_cmyk.asp

14. Example of CMYK Mixing Cyan + Yellow = ? Green : Cyan ink blocks red light, and yellow ink blocks blue light, leaving only green light to reflect. Magenta + Yellow = : Red Magenta blocks green light, and yellow blocks blue light, leaving only red light to reflect.

15. Why CMYK is Used in Printers White Background Assumption:Printing typically occurs on white paper, which reflects all colors of light.By layering inks, CMYK subtracts (absorbs) specific wavelengths, leaving the desired color visible . Efficient Ink Usage:Cyan , magenta, yellow, and black can produce a wide range of colors while minimizing the number of inks required . Black Ink's Role (K):Although cyan, magenta, and yellow combined can produce a dark shade, black ink is more efficient and precise for text and deep shadows.

16. 2.a. 1 Principles of Design: Lay-out In computer graphics and digital design, the layout is critical for creating user-friendly interfaces, websites, and graphics. It involves arranging text, images, and shapes to ensure clarity, visual flow, and usability

17. Balance Balance ensures that the design feels stable and visually pleasing, even in digital formats like web pages or application interfaces Balance means arranging things in a design so that it feels stable and looks good. It makes sure nothing feels too heavy on one side or too empty on the other.

18. Types of Balance Symmetrical Balance Symmetrical Balance : Visual elements are evenly distributed on both sides of a central axis This happens when both sides of a design look the same or are evenly matched . Think of it like folding a paper in half—both sides should match perfectly.

19. Example Symmetrical Balance

20. Example Symmetrical Balance

21. Example Symmetrical Balance

22. Types of Balance Asymmetrical Balance: Unevenly distributed elements that still create a harmonious design . Asymmetrical balance happens when elements in a design are not the same on both sides but still work together to look pleasing and balanced. Uneven Arrangement : One side might have a big, bold element (like an image), while the other side has smaller, lighter elements (like text or icons). Dynamic and Modern : Asymmetrical designs often feel more creative and less formal than symmetrical ones.

23. Example: Asymmetrical Balance:

24. Example Asymmetrical Balance: The rule of thirds often applies to asymmetrical balance in photograph

25. Example Asymmetrical Balance: The rule of thirds often applies to asymmetrical balance in photograph

26. Alignment Alignment ensures that elements like text, buttons, or images are positioned consistently for a clean, professional look It involves intentionally positioning text, images, and other elements within a layout to achieve a structured, cohesive, and easily navigable interface . Effective alignment is crucial in guiding the user’s eye through content, enhancing readability, and reinforcing the overall design hierarchy.

27. Alignment Principle is Design and Layout Edge alignment is either to the left, right, top or bottom. Edge alignment Center alignment as it states is aligned to a center line down the middle or across the horizontal . Center alignment

28. Example of Alignment Where visual elements are aligned, a composition can appear clear, confident, elegant, formal and trustworthy . If mixed alignment is intended as part of a design, it can appear more radical, dynamic, free and playful. When visual elements are  out  of alignment, it is  noticeable,  and can  devalue  a piece of work if done unintentionally.

29. Alignment can be simple or complex and is commonly achieved with the use of a grid . A grid can create an invisible structure on which visual elements can be placed on. These grids can ensure accurate alignment and consistency in a large piece of design work.

30. Hierarchy Visual hierarchy is the principle of arranging elements to show their order of importance. is a design principle that talks about how a design should arrange elements in the order of preference Visual hierarchy helps us define what design elements need to stand out, which message or text should have the largest font, and how each element should be sized in proportion to other elements and their importance

31. What You See First  ?

32. What You See First  ?

33. Optical Illusion 1: Analysis Tree & Birds: This means you are an honest and rational person. You are also known for being positive and your friends often come to you for advice. You are the advisor of the group and are considered to be the wisest among all.  A negative side to your personality is that you are also known for being too rigid. Therefore you must try to be more spontaneous and flexible in your everyday life . Lion :  You have the most strong personality and are an influential person. Everyone around you is aware of your aims and you achieve them as well.  You always push yourself and the people around you to achieve anything they put their minds to. You like to take risks in life and whenever you are hot with any obstacle or you fail at something, you come back stronger.  Gorilla:  In case you see the gorilla first, you are the Mr / Ms Curious of your group. You are a highly analytical person. You always tend to find a deeper meaning in things that seem ordinary. You seek opportunities to grow and wish the same for everyone around you. You are also a problem solver . You do not wish to trouble anyone else around you which is why you do things on your own. You are stubborn and strong-headed.  Fish : If you saw the fish first, you can be labelled as a dreamer, an optimistic and a cheerful person. You have a positive view of life. You are an idealist as well. However, at times people take advantage of you due to your helpful nature. 

34. Optical Illusion 1: Analysis Panther and the Bird If you saw the panther and the bird first,  you possess natural leadership skills. Keeping things under control and taking on responsibility come naturally to you. Your charisma and attentiveness to your surroundings make you a magnet for others, who often seek your guidance in times of need. People trust you and rely on you for effective solutions. However, be cautious of individuals who may try to take advantage of your generosity and willingness to help. In relationships, you value honesty and transparency. You are not one to shy away from difficult conversations if it means resolving an issue and moving forward stronger. This direct approach is appreciated by your partners and friends, who see you as a reliable and trustworthy individual. A woman’s face  If you saw a woman’s face first,  you are a patient individual capable of navigating life's challenges with ease. While you prefer to go with the flow, it doesn't mean you succumb to social pressures. Instead, you rise above difficulties and find solutions through compromise, always open to listening to others' perspectives. Your honesty shines through in all your interactions, making you a reliable and trustworthy person in the eyes of those around you. In relationships, you tend to be calm, patient, and understanding. You are not one to rush into decisions or judgments, preferring instead to listen, observe, and consider all sides of a situation before forming an opinion.

35. White Space (Negative Space) In design, whitespace is a term that refers to negative space. Refers to the blank areas between design elements, crucial for readability and focus in digital design . White space can be any area within a design that is free from text, images, or embellishments. Designers love it because it can help create grouping, add emphasis and improve legibility ..

36. Newspaper Example of Whitespace Magazines

37. Example of Whitespace Webpage Design Info graphics

38. Proximity Proximity means putting related things close together so people can easily understand that they’re connected. When similar items are grouped, it becomes clear they belong together. When it comes to visual design, proximity applies to all elements in a composition. That includes headings, body text, graphics, images, illustrations, icons, shapes and so on — the placement of all items in the frame relies on proximity

39. 2.a. 1 Principles of Design: typography Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. It involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages

40. Intro to typography Typography is everywhere we look. It's in the books we read, on the websites we visit, even in everyday life—on street signs, bumper stickers, and product packaging.

41. Typography 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.

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

43. E lements of T ypography  Fonts and typefaces A font is a specific style, size, and weight of text typeface is the design or family of text styles

44. Three basic kinds of typeface serif , sans-serif , and decorative .

45. Serif Serif fonts have little strokes called  serifs  attached to the main part of the letter The addition of these small strokes and elements gives serif fonts an air of tradition, history, authority, and integrity . Times New Roman , the Microsoft Word original font, is a serif font. It was replaced in 2007 by the sans-serif  Calibri .

46. Sans-serif Sans serif fonts don't have that extra stroke—hence the name, which is French for without serif . This style is considered more  clean and modern  than serif fonts. Also , it tends to be easier to read on computer screens, including smartphones and tablets.

47. Decorative or Display Font It come in many  different styles , like script, blackletter , all caps, and just plain fancy.

48. Hierarchy Hierarchy is used to  guide the reader's eye  to whatever is most important. In other words, it shows them where to begin and where to go next using  different levels of emphasis .

49. How to establish good Hierarchy Establishing hierarchy is simple: Just decide which elements you want the reader to notice first, then make them  stand out . High-level items are usually larger, bolder, or different in some way.

50. Leading Leading is  the space between lines of text , also known as  line spacing . The goal is to  make your text as comfortable to read as possible

51. Tracking Tracking is the  overall space between characters , sometimes called  character spacing . Most programs let you condense or expand this depending on your needs.

52. Kerning Kerning is the  space between specific characters . Unlike tracking, it varies over the course of the word because each letter fits together differently. Some fonts have what we call  bad kerning , making certain letters look improperly spaced. If a font you're using has bad kerning, it's best to cut your losses and choose something else.

53. Anatomy of typography