UI/UX Design

Unit 1
Computer Fundamentals & Digital Illustration
1 What is Graphic Design?
• Graphic designing is a very well-known profession these days.
• A company always wants its audience to be attracted to its products. This is possible due
to graphic design.
• Graphic design is a craft where professionals create visual content to communicate
messages. By applying visual hierarchy and page layout techniques, designers use
typography and pictures to meet users’ specific needs and focus on the logic of displaying
elements in interactive designs, to optimize the user experience
• There are many definitions of Graphic design, According to definition given by the
American Institute of Graphic Arts(AIGA),
• “Graphic design is the art and practice of planning and projecting ideas and experiences
with the visual and textual content”.
• graphic design is predominantly used for business and commercial purposes, it can just be
a simple way to express art around us.
• The main goal behind it is communication.
• Graphic design isn’t just a black-and-white concept, there are many principles that build
it.
• It makes sure you communicate with people in an efficient manner.
• Graphic designers create visual concepts to inform, entice, and motivate their target
audience.
• It is a blend of art and technology to convey a message.

2 Importance of Graphic Design

It plays a great role in communication
• Beautiful designs speak to customers when you are not verbally speaking to them.
Looking at a product, logo, banner, or website you get a visual message. It has to be
attractive so that people don’t get bored. It is a way of distinguishing your brand from
others.
It gives you a consistent look
• Through graphic design, you can give a unique, customized touch to your brand. For it to
be professional, the colors, fonts, and logo across all media have to be uniform.
• This in turn keeps your brand message similar on all the platforms and people can
connect with your brand.
It leads to higher conversions
• Good designs have always been overlooked. But as a matter of fact, a good design that is
professional and attractive can attract an audience to your site and tempt them to
purchase your product.
• A great design can convert a business from no sales to a lot of sales.
It sets you apart from the rest
• People like to associate themselves with good-looking things.
• So, it is important that you choose the right design to set yourself apart from other
competitors and convince your audience about their choices.
• Quality graphic design significantly increases your chances to stand out in the market
and among audiences.
It shows professionalism
• The presentation can actually make your business a great one.
• People tend to look for companies that are trustworthy and seem professional.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 1

 UI/UX Design

• Graphic design is a great way to convince people who are looking for signs of
professionalism.
• This develops a perception in their minds about your company and they invest in it.
It builds an aesthetic value
• A good design helps you to look good.
• It can be compared to going for an interview. For instance, you do not go for an interview
in pajamas and a t-shirt, you always wear formal which creates an impression on the
interviewer.
• Similarly, a stunning design allows you to put an impression on the audience which will
lead them to form initial opinions about your product in no time. Therefore, having a
great design can work wonders in framing a positive set of mind toward your brand.
• Graphic designers try to design elements that work together for perfect visual
communication.

3 Applications of Graphic Design.

Look around you. Graphic design is everywhere, from the wrappers on candy bars to the logo
on your favourite coffee mug. In fact, you see hundreds of examples of graphic design every
single day, and most of the time, you don't realize it.

Graphic design can serve many functions. Just a few of the uses of graphic design include:Some
of the methods to gain empathy with the users are, by
• Corporate identity/branding
• Packaging (from water bottles to appliances)
• Printed materials (books, flyers, magazines, newspapers)
• Online art (banners, blogs, websites, Logos)
• Album covers
• Film and television titles and graphics
• T-shirt and clothing designs
• Greeting cards
• Animated graphics designs

Types of Graphic Design

4 Elements of good graphic design.

The Elements of Good Graphic Design are the components or parts of a work of art or design.
More simply put, they are the ingredients of art. Take one part color, a pinch of texture, and a
whole lot of shape and the result will be some well-designed graphic design
Recipes may vary, but all works of art and design contain a combination of the following seven
elements shown in this infographic:

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 2

 UI/UX Design

• Line: Lines can be continuous or broken, straight or curved, smooth or zigzagged and
beyond, and are used for more than just outlines or dividing up content. Lines, in graphic
design, can be used for a wide range of purposes: stressing a word to phrase, connecting
content, creating patterns and more.
• Colours: Colour is used to generate emotions, define importance, create visual interest and
unify branding
• Texture: Texture relates to the surface of an object. Using texture in graphic design adds
depth and visual interest. This can be applied graphically in the form of a pattern or
through the choice of printable surface.
• Size: In graphic design, size is used to convey importance, attract attention and create
contrast.
• Shape: The three basic shape types are Geometric (Circles, Squares, Triangles, etc.),
Natural (leaves, trees, people, etc.), and abstract (icons, stylizations, and graphic
representations). Use carefully to create a visually pleasing design and eye-catching design.
• Space: A vital part of any good graphic design, Space is the area around the elements in a
design. It can be used to separate or group information. Use it effectively to give the eye a
rest, define importance and lead the eye to where you want it to travel.
• Value: Value is how light or dark an area looks in a design. It is everything from the darkest
of blacks through to the brightest of whites. Used correctly it will create depth, contrast
and emphasis

5 What Is Raster and Vector Graphics?

• Raster images and vector images are two different types of image files in graphic design.
• So, they are two simple, but complex forms used in computer graphics.
• Raster programs are something like painting and vector programs are like illustrator
drawing.
• Pixel:
o In Computer graphics, a pixel, dot, or picture element is a physical point in a picture.
o A pixel is simply the smallest addressable element of a picture represented on a
screen.
o Most pictures that we see on our computer screen are raster images.
o The selfie that you click with your mobile phone is another example of a raster image.
o An image is made up using a collection of pixels referred to as a bitmap.
• Bitmap:
o An image is made up using a collection of pixels referred to as a bitmap.
o A bitmap is an array of bits that specify the color of each pixel in a rectangular array of
pixels.
o The number of bits devoted to an individual pixel determines the number of colors that
can be assigned to that pixel.

6 What Is Raster?
• Raster images, also known as bitmaps, are
comprised of individual pixels of color. Each color
pixel contributes to the overall image.
• The pixels in a raster image work in the same
manner, which provides for rich details and pixel-
by-pixel editing.
• The higher the dpi, the better the resolution.
• Humans won't be able to notice pixels while you
can see them by zooming in on a picture on the screen.
• Changing the size of a raster image is something like
• shrinking or stretching the pixels themselves.
• Raster graphics are highly used for photographs, scanned artwork, or detailed graphics.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 3

 UI/UX Design

• The more pixels an image has, the higher quality it will be, and vice versa. The number of
pixels in an image depends on the file type (for example, JPEG, GIF, or PNG).

7 What Is Vector Graphics?

• Vector graphics is the opposite form of raster
graphics.
• The type of vector image work is almost different
from the raster image.
• While raster images are arranged with pixels or dots,
vector images are based on mathematical formulas
that define points, lines, curves, and paths.
• The vector image used a mathematical calculation from one point to another to take shape
and color in an image.
• zooming in a vector image doesn’t cause cracked feelings because they are composed of
true geometric primitives so that it can represent a more structured image.
• In vector graphics, one can easily maintain the crisp, sharp edges of an image even if it is
enlarged significantly.
• Equation for a circle of center (h, k) and radius r is (x - h)2 + (y - k)2 = r2. If we want to make
the circle bigger, we just must increase the value of r - instead of having to keep track of
tons more pixels, the computer just must keep track of a different number..
• common vector file types are, EPS, AI, PDF, SVG, etc.

8 Difference between Raster and Vector.

Aspect Raster Graphics Vector Graphics

Composition Pixels Paths, mathematical shapes

Resolution Resolution-dependent Resolution-independent

Best for Photos, detailed images Logos, icons, illustrations
File Types JPEG, PNG, GIF, BMP SVG, AI, EPS, PDF
Scalability Loses quality when resized Retains quality at all sizes

9 What is illustration?
• Illustrations are a visual way to portray or illustrate a written text.
• They might help explain an idea or tell a story or provide decoration. They come in many
forms
• both traditional and digital.
• Illustrations fulfill two main purposes: express the text and engage with the attractions.
• It gives clarity to any idea or concept with an enticing story, expressed with visuals.
• It is also not ignorable that the process and approach for Illustration are not simple.
• It is a two-dimensional image that serves across industries.
• It can express intentions clearly without compromising the concept. Graphic designers
create illustrations as one of their forms of design; it can also be images, fonts, images, etc.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 4

 UI/UX Design

•
Infographics are a selection of images and diagrams with a minimum of text, allowing you
to quickly understand the essence of the topic.
• Good infographics make it easier to understand information and a large amount of data.
• Digital illustration is the creation of visuals by use of digital tools. These tools include
software and apps such as Adobe Illustrator and Photoshop, as well as devices like a
mouse, a drawing tablet, or a stylus pen.
• For instance, you are designing a car that is way beyond normal imagination, has features
that never existed, and looks all different from the existing cars; illustrations will help you
justify your idea.
• It gives a base to the idea in the form of a visual.
• There are several types of illustrations like product, editorial, comic, courtroom, medical,
• storyboard, technical, fashion, forensic, etc. The list is exhaustive, and the usage is
extended.
• Creating illustrations requires certain tools and techniques, which reduces the process of
its
• making and crafting the results as fast as possible.
• So if your drawing is not explaining something, it is a work of art, not an illustration.
• Vector shapes and illustrations are created using vector graphic tools that rely on
mathematical paths, curves, and points.
• These tools allow you to design scalable, resolution-independent graphics perfect for logos,
icons, diagrams, and illustrations.
• Steps to Create Vector Shapes and Illustrations
o Choose a Vector Graphics Tool
o Start with Basic Shapes
o Use the Pen Tool
o Edit with Shape Operations
o Add Colors and Gradients
o Refine with Layers
o Use Brushes and Symbols
10 What is Art and Sketching?
• Refers to the process of visually conceptualizing ideas, interfaces, and user experiences in
their early stages using sketches, wireframes, or artistic designs.
• It involves creating hand-drawn or digital illustrations that help designers brainstorm,
communicate ideas, and plan the structure of an application or website.
• Purpose of Art and Sketching
o Idea Visualization: Sketching provides a quick and easy way to visualize concepts
without committing to details or high-fidelity designs.
o Brainstorming: It helps designers explore multiple design ideas, layouts, and
workflows in a freeform, creative manner.
o Collaboration: Sketches allow designers, developers, and stakeholders to communicate
ideas effectively and give feedback at early stages.
o Low-Cost Prototyping: Sketching is inexpensive and time-efficient compared to
developing polished prototypes early on.
• Types of Sketching
o Freehand Sketches: Rough, hand-drawn ideas created with pen and paper.
o Wireframes: A structured visual outline of a user interface, showing placement of UI
elements like buttons, menus, and content.
o Storyboarding: Visual storytelling of the user journey or experience step-by-step
through a series of sketches.
o Low-Fidelity Prototypes: Simple mockups with minimal details to outline basic
structure and functionality.
• Role of Art in UI/UX
o Creativity and Aesthetics: Art brings visual appeal to interfaces through typography,
colors, shapes, and composition.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 5

 UI/UX Design

Branding: Artistic sketches help define the look and feel of the brand or product to
o
ensure consistency.
o Expressing Emotions: Illustrations, icons, and hand-drawn elements can make the UI
feel more engaging and relatable.
o Personalization: Artistic elements help make the design stand out and resonate with
users.
• Benefits of Sketching
o Speed and Flexibility: Sketching allows for rapid ideation without being constrained by
software tools.
o Problem Solving: Helps identify user flow issues, spacing, and usability challenges.
o Improves Focus: Designers can focus on structure and layout before jumping into
colors and aesthetics.
o Facilitates Collaboration: Clear sketches ensure alignment between designers,
developers, and clients.
11 Drawing Techniques in UI/UX
• Process of creating visual representations of digital products, such as wireframes,
sketches, and high-fidelity designs.
• Help designers communicate their concepts effectively and bring structure to their
creative process.
• Basic Sketching Techniques:
o Lines and Shapes: Start with basic lines, circles, rectangles, and triangles to outline UI
elements like buttons, forms, and icons.
o Grids and Guides: Use a grid structure to ensure proper alignment and spacing of UI
components.
• Basic Sketching Techniques:
o Shading and Depth: Use hatching, cross-hatching, or light shading to show contrast,
layers, and focus.
o Arrows and Annotations: Include arrows for navigation flow and text annotations to
explain design elements.
• Thumbnail Sketching
o Small, quick drawings of UI screens or design ideas.
o Focus on exploring multiple ideas quickly without fine details.
o Ideal for brainstorming layouts, hierarchies, or button placements.
• Wireframing
o Wireframes are structural drawings of UI designs that outline the placement of
elements.
o Use simple boxes, placeholders, and labels for buttons, text, and images.
o Draw using clean straight lines and geometric shapes to mimic digital UI.
o Start with low-fidelity wireframes (minimal detail) and then add more specifics as the
design evolves.
• Perspective Drawing
o Helps show depth or 3D aspects of a UI interface.
o Useful for creating mockups of devices or realistic screens (e.g., tilted phone screens
for presentations).
o Use vanishing points to create proper proportions and perspective.
• Gestural Sketching
o Freeform, quick, and loose sketches that capture the flow and feel of the interface.
o Focuses on overall design concepts and navigation flows rather than precision.
o Ideal for early-stage brainstorming.
• Storyboarding
o A step-by-step visual narrative of the user journey or experience.
o Draw small frames to represent screens and illustrate user actions, inputs, or
transitions.
o Combine sketches with text to explain interactions or touchpoints.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 6

 UI/UX Design

• Layering Technique
o Sketch elements in layers to improve clarity:
o Start with a basic outline (e.g., screen layout).
o Add UI elements (buttons, text, images).
o Highlight key sections with darker lines, shading, or annotations.
• Digital Drawing Techniques
o Use tools like Figma, Adobe XD, Sketch, or Procreate to create digital sketches.
o Leverage pre-made grids and components for cleaner wireframes.
• Use layers, shapes, and brushes to add depth and polish to your sketches.

12 Conceptual Thinking in Creativity.

• Conceptual thinking means understanding and linking ideas, patterns, and relationships
to produce creative and new solutions.
• In creativity, it helps people think differently, find unique ideas, and create new and
meaningful products, art, or solutions.
• It focuses on "why" and "how" rather than "what" and allows for a deeper understanding
of a situation.
• It is essential in problem-solving, innovation, design, and artistic creation.
• Role of Conceptual Thinking in Creativity
• Idea Generation
o Conceptual thinkers generate ideas by exploring "what could be" instead of "what is.“
o They move away from literal interpretations and consider broader, abstract
possibilities.
• Innovative Problem Solving
o It helps in breaking free from fixed thinking patterns and allows for unconventional
solutions.
o By reframing the problem, new ideas can emerge.
• Connecting Disparate Ideas
o Creativity often thrives when unrelated ideas or concepts are combined.
o Conceptual thinking encourages exploring connections between seemingly unrelated
things.
• Storytelling and Metaphors
o Conceptual thinkers use metaphors and stories to convey complex ideas in simpler
ways, sparking imagination.
• Breaking Boundaries
o It helps in transcending existing norms and creating something entirely new.
o For artists, designers, and innovators, conceptual thinking drives experimentation.

13 Different Creative Fields

• Art and Design
o Artists use creative ideas to represent new ways of looking at things.
o M.F. Husain’s Paintings – He used bright colors and abstract shapes to tell stories
about Indian culture.
• Writing and Storytelling
o Writers use themes and ideas to create stories with deeper meanings.
o Chetan Bhagat’s Novels – His stories reflect the struggles and dreams of young Indians
in a modern world.
• Advertising and Marketing
o Conceptual thinking in marketing involves creating campaigns with emotional or
symbolic connections.
o Fevicol Ads – Fevicol uses humor and creative visuals to show how strong their glue is
• Science and Innovation

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 7

 UI/UX Design

o Scientists and inventors often think conceptually to explore new theories, patterns,
and possibilities.
o Example: ISRO’s Mars Mission (Mangalyaan) – India created a low-cost satellite to
reach Mars, making space travel more affordable.
• Technology and Product Design
o Innovators imagine products that help people in everyday life.
o Blinkit imagined a platform where people can get groceries and daily items delivered
in just 10 minutes.
14 Steps to Develop Conceptual Thinking
Ask the Right Questions
• Focus on why, how, and what if to explore new possibilities.
o Why can’t electric vehicles be affordable for all?
o How can we design a sustainable, low-cost car?
o What if we use alternative materials to reduce costs?
o Tata Nano was conceptualized as an affordable car for Indian families.
Think in Metaphors
• Use metaphors to simplify & represent abstract ideas, making them easier to understand.
o Fevicol’s “Hathi nahi chhodta” metaphor simplifies and represents strong bonding.
o The brand creatively shows glue strength using a memorable metaphor.
Brainstorm Freely
• Allow space for unconventional, unrelated ideas to unlock new creative solutions.
o During a brainstorming session, Blinkit thought, “What if groceries could be delivered
in 10 minutes?”
o The idea seemed unconventional but led to their quick commerce model.
Identify Patterns
• Look for relationships in ideas, behaviors, and systems to make connections and develop
new insights.
o Zomato identified a pattern: People often order food late at night, yet few restaurants
were open.
o Zomato launched a “late-night delivery” service to meet this demand.
Change Perspectives
• View a problem or idea from different lenses, such as cultural, historical, or emotional
viewpoints.
o Traditional Lens: Initially, Netflix was seen as just a DVD rental service, offering a
simple option to rent movies.
o This shift in perspective helped Netflix become a global leader in streaming and
revolutionize the way we consume media.
Experiment and Iterate
• Test abstract ideas, gather feedback, and refine the concept for better results.
o Paytm initially launched as a simple digital wallet.
o After testing user behavior and feedback, it iterated and expanded to include mobile
payments, shopping, and ticket booking.

15 Color Modes in illustration

In illustration and design, color modes determine how colors are represented and displayed in
different mediums.
The two main color modes are RGB and CMYK, though others like Grayscale and Lab Color are
also used in specific contexts.
If you need to print your artwork, it’s highly recommended to change the document color mode
to CMYK.
RGB (Red, Green, Blue)
▪ Purpose: Used for digital screens (computers, TVs, smartphones, etc.).
▪ Nature: Additive color model – colors are created by combining light.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 8

 UI/UX Design

CMYK (Cyan, Magenta, Yellow, Black)

▪ Purpose: Used for printing.
▪ Nature: Subtractive color model – colors are created by layering inks. The more ink, the
darker the result.
Grayscale
▪ Purpose: Represent images in shades of gray.
▪ Application: Sketching, line art, drafts, and monochrome designs.
Lab Color (L* = Lightness, a* = Green–Red axis, b* = Blue–Yellow axis)
▪ Purpose: Used for high-precision color correction and editing.
▪ Application: Photo retouching, advanced color grading, and consistency across devices.
Indexed Color
▪ Purpose: Limits the color palette to a specific number of colors (256 or fewer).
▪ Application: Optimized images for web use (e.g., GIFs).

16 Types of Color Schemes

▪ Monochromatic Color Scheme: Uses variations of a single hue (color), including its tints,
tones, and shades.
▪ Analogous Color Scheme: Uses colors that are next to each other on the color wheel.
▪ Complementary Color Scheme: Uses colors opposite each other on the color wheel.
▪ Split-Complementary Color Scheme: Uses one base color and two adjacent to its
complementary color
▪ Triadic Color Scheme: Uses three colors evenly spaced on the color wheel.
▪ Tetradic (Double Complementary) Color Scheme: Uses two complementary color pairs.
▪ Warm Colors: Reds, oranges, and yellows – evoke energy, warmth, and excitement.
▪ Cool Colors: Blues, greens, and purples – evoke calm, peace, and relaxation.

17 Image Retouching and Color Balancing

▪ Image retouching and color balancing involve editing and enhancing an image to improve
its overall quality, aesthetics, and accuracy.
▪ Image retouching Improving pictures used in the design.
▪ Color balance is an adjustment that affects the overall mixture of colors in a photograph.
▪ To balance an image, you simply adjust the intensities of the cyan, magenta, and yellow
tones.
▪ The main goal is to make white, gray, or neutral colors look like they do in real life. White
should look white, and a Gray should look neutral.
▪ In many cases, photographers and image editors use color balance adjustments
to remove a color cast, a tint that affects the entire photo.

18 Types of Filters
▪ There are several types of filters that can be used to modify an image. Some of the most
common filters are blur, sharpen, edge detection, color correction, and noise reduction.
▪ Blur: Blur filters are used to soften the edges of an image, creating a more Refined look.
This can be used to make an image look more natural or to reduce the visibility of
distracting details.
▪ Sharpen: Sharpen filters are used to make an image appear sharper and clearer. This can
be used to make an image look more detailed or to make the colors more vibrant.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 9

 UI/UX Design

Edge Detection: Edge detection filters are used to accentuate the outlines of an image.
▪
This can be used to make objects stand out more or to create a more dramatic effect.
▪ Color Correction: Color correction filters are used to adjust the hue, saturation, and
brightness of an image. This can be used to make an image look more realistic or to create
a specific color palette.
▪ Noise Reduction: Noise reduction filters are used to remove unwanted noise from an
image. This can be used to make an image look more natural or to reduce the visibility of
digital artifacts.
19 Corporate Identity Design
▪ How a company presents itself to the public (including both internal and external
audiences). It is how the company looks, behaves, and communicates.
▪ Helps the company to get recognized and differentiated in the market space and among
its internal stakeholders (including all the employees, investors, and partners of the
company) and external stakeholders (including the customers, consumers, media, etc.)
Corporate Communication
• Corporate communications are how the company interacts and passes on all the
information to the internal and external audiences to develop a favorable point of view
and a uniform image of the company on all channels.
• Internal communication: Includes policies/procedures, team communications, internal
newsletters and everything that relates to communication with the internal audience.
• Paid Communication: It consists of communication messages released through paid
media like advertisements, sponsorships, events, etc.
• Media relations: All earned-media communication, like public relations, news, etc. come
under media relations.
• Investor relations: It includes all messages communicated to the investors in the company

20 Designing Brochures & Catalogues

A brochure is a publication that can be used to present information about a company, or
individual Brochures are often used for informing or persuading people about something.
They are usually A 5 in size and are sent out by post, handed out face to face, or distributed at
exhibitions.
Steps to help you create compelling brochures and catalogues:
▪ Define Your Purpose and Audience: Clarify the purpose of the brochure/catalogue (e.g.,
product showcase, event promotion, company overview).
Identify your target audience to tailor the design and content accordingly.
▪ Gather Content: Collect high-quality images, product descriptions, key messages, and
any other relevant content.
Ensure consistency in tone and branding with other marketing materials.
▪ Determine Layout and Format: Choose a layout and format that suits your content and
audience (e.g., bi-fold, tri-fold, booklet, digital).
▪ Create a Wireframe: Sketch a rough wireframe to plan the placement of images, text,
headings, and other elements.
Decide on the hierarchy of information and the overall visual structure.
▪ Design Software: Use professional design software such as Adobe InDesign, Illustrator,
or other tools that support high-quality print output.
▪ Typography: Choose readable fonts that align with your brand.
Maintain consistency in font styles, sizes, and colors throughout the brochure/catalogue.
▪ Color Scheme: Select a cohesive color scheme that complements your brand.
Ensure that the colors evoke the desired emotions and convey the right message.
▪ Images and Graphics: Use high-resolution images. Incorporate graphics that enhance
visual appeal and support the content.
▪ Call-to-Action (CTA): Include clear and compelling CTAs to prompt reader action. Place
CTAs strategically throughout the brochure/catalogue.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 10

 UI/UX Design

21 Layouts for Newspapers

Designing newspaper layouts requires a combination of creativity, readability, and visual
appeal.
▪ Content Hierarchy: Prioritize headlines, followed by subheadings, images, and body text.
Ensure a clear distinction between main stories, editorials, advertisements, and
supplementary sections.
▪ Typography: Choose readable fonts for body text.
Sans-serif fonts are often preferred for their clean and modern look.
Use serif fonts for more traditional and formal designs.
▪ Color: Choose a limited color palette to maintain a cohesive look.
Consider the mood and tone of the content when selecting colors.
Ensure there is enough contrast between text and background for readability.
▪ Headline Styles: Create impactful headlines that are easy to read.
Experiment with font sizes, styles, and colors to make headlines stand out.
Ensure that headlines convey the main message of the article.
▪ Modular Design: Break the layout into modules or sections.
This allows for flexibility in arranging content and makes it easier to update or modify
individual elements.
▪ Readability: Prioritize readability by choosing appropriate font sizes and line spacing.
Ensure that text is easily readable both in print and online versions.
▪ Get Feedback: Before finalizing a layout, gather feedback from colleagues/ target readers.
Will help to identify potential improvements & ensure the layout meet its objectives.

22 Designing Magazines
Magazines are a type of literature, usually taking the form of a thin book with large pages, that
contain articles, stories, poems, and illustrations about a certain topic or field of research.
▪ Define Your Audience: Understand your target audience and tailor your design to their
preferences.
Consider factors such as age, interests, and lifestyle to create a design that resonates with
your readers.
▪ Establish a Consistent Visual Identity: Develop a consistent visual style for your magazine.
This includes selecting a color palette, typography, and layout style that aligns with your
brand and appeals to your audience.
▪ Eye-Catching Cover Design The cover is the first thing readers see, so make it visually
compelling. Use images, catchy headlines, and a clean design to attract readers.
▪ Typography Choose fonts that are readable and complement the overall design.
Experiment with font sizes and styles to create hierarchy and emphasize important
content.
▪ Grid Layout: Implement a grid system to organize content on each page. Grids ensure
consistency and help readers navigate the magazine easily.
▪ Whitespace and Balance: Use whitespace strategically to avoid overcrowding pages.
Balance text and visuals for a layout that's engaging and easy to read.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 11

 UI/UX Design

▪ Captivating Images: Use high-quality, relevant visuals to enrich content and reflect the
essence of the articles. Consistency in image style contributes to a polished look.

23 Visual Design Principles

• Visual design principles are basic rules that help make designs look good and work well.
• Whether you're creating a website, poster, or any other visual piece, using these
principles can make your design more effective and attractive.
• Unity in design means that all the elements on a page should look like they belong
together, either visually or conceptually. A good design needs to balance unity with
variety, so it doesn’t become too boring or too busy.
• Gestalt in visual design helps users see the entire design, rather than focusing on
individual parts. If the design elements are arranged well, the overall design will be easy
to understand.
• Space is the empty space around design elements. It helps keep the design clean, makes it
easier to read, and gives the elements room to stand out.
• Hierarchy shows the importance of different items by making some stand out more than
others. Designers create hierarchy using different font sizes, colors, and placements on
the page, with items at the top often being seen as the most important.
• Balance makes the design feel evenly distributed, though it doesn’t always mean
everything is perfectly symmetrical.
• Contrast helps items stand out by emphasizing differences in things like size, color,
direction, and other features.
• Scale shows a range of sizes in the design, creating interest and depth by showing how
each item relates to the others based on its size.
• Dominance makes one element the focal point while others appear less important. This
can be achieved through differences in size, color, position, shape, etc.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 12