Web Design Exam  >  Web Design Notes  >  Complete Web & Mobile Designer: UI/UX, Figma, + More  >  Introduction to Design Thinking

Introduction to Design Thinking

Design Fundamentals

Design is everywhere around us. From the chair you're sitting on to the screen you're reading from, every object and interface has been designed by someone. Good design isn't just about making things look pretty-it's about solving problems, communicating ideas, and creating experiences that work for people. In this document, we'll explore the fundamental principles and elements that form the foundation of all design disciplines, whether you're designing a poster, a website, a product, or a building.


What Is Design?

Design is the intentional process of planning and creating something to solve a problem or fulfill a need. It combines aesthetics with functionality, form with purpose. Unlike art, which is primarily about self-expression, design always serves an audience and addresses a specific goal.

Think of design as a bridge between a problem and its solution. A chair must be comfortable and support weight-that's the problem. The designer creates a structure that achieves this while also considering materials, cost, appearance, and how it fits into a space-that's the solution.

Design operates across many fields:

  • Graphic Design: Visual communication through typography, images, and layout
  • Product Design: Physical objects and their functionality
  • Interior Design: Spaces where people live and work
  • UI/UX Design: Digital interfaces and user experiences
  • Industrial Design: Mass-produced manufactured goods
  • Fashion Design: Clothing and accessories

Despite their differences, all these disciplines share common fundamental principles.


Elements of Design

The elements of design are the basic building blocks that designers work with. They're like the ingredients in a recipe-you combine them in different ways to create different results. Understanding these elements gives you a vocabulary to analyze and create design work.

Line

A line is a mark connecting two points. It's the most basic element of design, yet incredibly powerful in directing attention, creating movement, and establishing structure.

Lines can be:

  • Straight or curved: Straight lines feel structured and formal; curves feel organic and relaxed
  • Thick or thin: Weight affects importance and visual impact
  • Solid, dashed, or dotted: Pattern creates different moods and meanings
  • Horizontal, vertical, or diagonal: Direction conveys different feelings

Horizontal lines suggest calm and stability-think of a horizon. Vertical lines imply strength and authority-like pillars or skyscrapers. Diagonal lines create tension and movement-they feel dynamic and energetic.

Lines also define shapes, create texture, guide the eye through a composition, and organize information. When you underline a heading or draw a border around content, you're using lines functionally.

Shape

When a line connects back to its starting point, it creates a shape. Shapes are two-dimensional areas with defined boundaries. They're fundamental to composition and visual communication.

Shapes fall into categories:

  • Geometric shapes: Circles, squares, triangles, rectangles-precise and mathematical
  • Organic shapes: Irregular, flowing forms found in nature-leaves, clouds, water
  • Abstract shapes: Simplified or stylized versions of recognizable forms

Different shapes carry psychological associations. Circles suggest completeness, unity, and protection. Squares and rectangles feel stable, trustworthy, and organized. Triangles point and direct, suggesting movement or hierarchy. These associations aren't arbitrary-they're rooted in human experience and perception.

Shapes can be positive (the shape itself) or negative (the space around and between shapes). Skilled designers pay attention to both.

Form

Form is the three-dimensional version of shape. While shapes have length and width, forms have depth as well. In two-dimensional design like posters or websites, we create the illusion of form through shading, perspective, and lighting.

Understanding form is essential for:

  • Product and industrial design where physical objects exist in space
  • Creating depth and realism in visual design
  • Understanding how light and shadow work
  • Building spatial relationships in composition

Basic three-dimensional forms include spheres, cubes, cylinders, cones, and pyramids. Complex objects are combinations of these basic forms.

Space

Space refers to the area within and around elements in a design. It's not just emptiness-it's an active design element that gives other elements room to breathe and creates relationships between them.

We distinguish between:

  • Positive space: Areas occupied by design elements
  • Negative space (white space): Empty areas around and between elements

Beginners often fear empty space and fill every inch of a design. This creates visual clutter. Professional designers understand that negative space is crucial for clarity, emphasis, and elegance.

Think of negative space like silence in music. The pauses between notes make the music meaningful. Similarly, space in design gives the eye places to rest and makes important elements stand out.

Space also creates depth through:

  • Overlap: When one element covers part of another
  • Size variation: Larger elements appear closer
  • Position: Elements lower in the frame seem closer
  • Perspective: Objects recede toward vanishing points

Color

Color is perhaps the most emotionally powerful design element. It attracts attention, conveys meaning, creates mood, and establishes visual hierarchy.

Color has three main properties:

  • Hue: The color itself-red, blue, yellow, etc.
  • Saturation (chroma): Intensity or purity of the color, from dull to vivid
  • Value (brightness): Lightness or darkness, from black to white

The color wheel organizes hues in a circle, showing relationships between colors:

  • Primary colors: Red, yellow, blue-cannot be created by mixing
  • Secondary colors: Orange, green, purple-created by mixing primaries
  • Tertiary colors: Created by mixing primary and secondary colors

Color relationships create different effects:

  • Complementary: Opposite on the wheel (red/green, blue/orange)-high contrast and vibrant
  • Analogous: Adjacent on the wheel (blue, blue-green, green)-harmonious and calm
  • Triadic: Three colors equally spaced-balanced but vibrant
  • Monochromatic: Variations of a single hue-unified and sophisticated

Colors carry cultural and psychological associations. Red can mean danger, passion, or excitement. Blue often represents trust, calm, or professionalism. However, these associations vary across cultures, so context matters.

In digital design, colors are defined using systems like RGB (Red, Green, Blue-for screens) or CMYK (Cyan, Magenta, Yellow, Black-for printing).

Texture

Texture refers to the surface quality of an object-how it feels or appears it would feel. In physical design, texture is tactile and real. In visual design, we create the illusion of texture.

Texture can be:

  • Tactile: Actual physical surface you can touch
  • Visual: The appearance of texture in two-dimensional design

Texture adds richness, depth, and interest to design. A rough texture might convey ruggedness or naturalness, while smooth surfaces suggest refinement and modernity. Think of how different a concrete wall feels compared to polished marble-both materials communicate different messages through texture.

In digital design, texture can be subtle-like the slight grain in a background-or pronounced, like a wood texture in a furniture app. Used well, texture creates visual interest without overwhelming the design.

Value

Value refers to the lightness or darkness of a color, ranging from white to black. It's one of the most important elements for creating contrast, depth, and emphasis.

Value is crucial because:

  • It creates visual hierarchy-darker or lighter elements stand out
  • It establishes depth through shading and highlights
  • It ensures readability-sufficient contrast between text and background
  • It works even without color-valuable for accessibility

A design with poor value contrast looks flat and is hard to read. Strong value contrast creates drama and guides attention. Professional designers often test their work in grayscale to ensure the value structure works independently of color.


Principles of Design

While elements are what you work with, principles are how you arrange them. These principles guide your decision-making and help you create effective, aesthetically pleasing designs.

Balance

Balance is the distribution of visual weight in a composition. A balanced design feels stable and complete, while an imbalanced one feels unsettling or incomplete.

Think of balance like a physical scale. If you place a heavy object on one side, you need equal weight on the other side to achieve equilibrium. In design, visual weight comes from size, color, texture, and position.

Types of balance:

  • Symmetrical (formal): Elements are mirrored on either side of a central axis-feels stable, traditional, and organized
  • Asymmetrical (informal): Different elements of equal weight on each side-feels dynamic, modern, and interesting
  • Radial: Elements radiate from a central point-feels circular and complete

Symmetrical balance is easier to achieve but can feel static. Asymmetrical balance is more challenging but often more visually engaging. A large element on one side can be balanced by several smaller elements on the other, or a bright color can balance a larger neutral area.

Emphasis (Focal Point)

Emphasis creates a center of interest that draws the viewer's eye first. Without emphasis, everything competes equally for attention, and the design feels chaotic.

You create emphasis through:

  • Contrast: Different from surrounding elements in color, size, or shape
  • Placement: Central or isolated position
  • Size: Larger than other elements
  • Repetition: Breaking a pattern
  • Color: Vibrant color among neutrals

A poster advertising a concert might emphasize the band name through large, bold typography while keeping other information smaller. A website might use a bright button to draw attention to a signup action.

Good design typically has a clear hierarchy of emphasis-primary, secondary, and tertiary focal points-that guide the viewer through the content in order of importance.

Contrast

Contrast is the difference between design elements. It creates visual interest, establishes hierarchy, and improves readability.

You can create contrast through:

  • Color: Light versus dark, warm versus cool, complementary colors
  • Size: Large versus small elements
  • Shape: Geometric versus organic, simple versus complex
  • Texture: Rough versus smooth, patterned versus plain
  • Typography: Bold versus light, serif versus sans-serif
  • Space: Dense versus sparse areas

Contrast makes designs dynamic and helps organize information. Imagine reading black text on a dark gray background-poor contrast makes it difficult. Change the background to white, and suddenly it's effortless to read.

However, too much contrast everywhere creates visual chaos. Strategic contrast guides attention where you want it.

Repetition (Pattern)

Repetition uses the same or similar elements multiple times throughout a design. It creates unity, consistency, and visual rhythm.

Repetition works through:

  • Repeating colors throughout a design
  • Using the same fonts for similar content
  • Consistent spacing and alignment
  • Recurring shapes or graphic elements
  • Pattern and texture

Think of a magazine where all headlines use the same font, or a website where all buttons share the same style. This repetition creates familiarity and makes the design feel cohesive.

Repetition also creates rhythm-a sense of movement through regular spacing or pattern. Like rhythm in music, visual rhythm can be regular and predictable or varied and syncopated.

Proportion (Scale)

Proportion is the relative size relationship between elements. It creates hierarchy, harmony, and visual interest.

The Golden Ratio (approximately 1:1.618) is a mathematical proportion found throughout nature and used in art and design for centuries. It's considered aesthetically pleasing, though not a rigid rule.

Proportion affects meaning and emotion. A tiny figure in a vast landscape emphasizes isolation or the grandeur of nature. Oversized typography creates impact and modernity.

Good proportion creates harmony. When elements relate to each other in pleasing size relationships, the design feels right even if the viewer can't articulate why.

Movement

Movement is the path the viewer's eye follows through a design. Though static, good design creates a sense of motion and guides viewers through content in a deliberate sequence.

You create movement through:

  • Lines: Lead the eye in particular directions
  • Rhythm: Repetition creates flow
  • Implied motion: Diagonal lines, dynamic shapes
  • Hierarchy: Size and contrast guide viewing order
  • Directional cues: Arrows, pointing shapes, or gaze direction

Consider how you naturally read a webpage. Headers, images, and buttons are arranged to guide you from one section to the next. That's movement at work.

Unity (Harmony)

Unity means all elements work together cohesively. The design feels complete and intentional, not like random pieces thrown together.

Unity is achieved through:

  • Consistent color palette
  • Related shapes and forms
  • Repeated visual elements
  • Unified style and tone
  • Proximity-grouping related items

Unity doesn't mean everything looks identical-that would be boring. It means variety within a coherent framework. Think of a jazz ensemble: different instruments play different parts, but they work together to create unified music.

Variety

Variety introduces diversity and interest to prevent monotony. It's the counterbalance to unity-you need enough similarity for cohesion, but enough difference to maintain interest.

Variety can come from:

  • Varying sizes while maintaining similar shapes
  • Using different values of the same color
  • Mixing typography styles purposefully
  • Combining different textures
  • Alternating dense and sparse areas

Too much unity without variety creates boring designs. Too much variety without unity creates chaos. The art of design is balancing these opposing forces.


Gestalt Principles

The Gestalt principles describe how humans naturally perceive and organize visual information. Understanding these principles helps you design in harmony with how people actually see.

Gestalt is a German word meaning "unified whole." The core idea is that people perceive the whole before they notice individual parts-we see a face, not a collection of eyes, nose, and mouth.

Proximity

Elements close together are perceived as related, while elements far apart are seen as separate groups.

Use proximity to:

  • Group related information
  • Create clear sections in layouts
  • Show relationships between elements

On a form, placing a label close to its input field shows they belong together. Spacing between form sections shows where one group ends and another begins.

Similarity

Elements that share visual characteristics-color, shape, size, or texture-are perceived as related or part of the same group.

All blue elements might represent one category, while red ones represent another. All circles might be clickable buttons, while squares are static images.

Similarity creates patterns and helps users understand systems intuitively.

Continuity

The eye naturally follows lines, curves, and paths. We prefer continuous, flowing forms over abrupt direction changes.

When elements are arranged in a line or curve, we perceive them as belonging together and naturally follow that path. Navigation menus work this way-items arranged horizontally or vertically create an obvious path for the eye.

Closure

Our minds fill in missing information to perceive complete shapes, even when parts are absent.

You can show just a few segments of a circle, and viewers will perceive the complete circle. Many logos use closure-the NBC peacock or the World Wildlife Fund panda use incomplete shapes that our minds automatically complete.

Closure allows for simpler, more elegant designs because you don't need to spell everything out.

Figure-Ground

We instinctively separate objects (figures) from backgrounds (ground). Our brains determine what's the subject and what's the backdrop.

Sometimes this relationship is ambiguous, creating interesting visual effects-like the famous vase/faces illusion where the same shape can be seen as either a vase or two facing profiles.

Designers manipulate figure-ground relationships to create depth, emphasis, and sometimes clever visual play.

Common Fate

Elements moving in the same direction are perceived as a group.

While less applicable to static design, this principle is crucial in animation and interactive design. Menu items that slide in together or cards that fade simultaneously are grouped mentally by users.


Typography Fundamentals

Typography is the art and technique of arranging type. Since much design involves text, understanding typography is essential.

Type Anatomy

Letters have specific parts with technical names:

  • Baseline: The line letters sit on
  • Cap height: Height of capital letters
  • X-height: Height of lowercase letters like x
  • Ascender: Part extending above x-height (like in b, d, h)
  • Descender: Part extending below baseline (like in g, p, q)
  • Serif: Small decorative strokes at letter ends
  • Counter: Enclosed or partially enclosed space within letters

Type Classifications

Typefaces fall into broad categories:

  • Serif: Have small strokes (serifs) at letter ends-traditional, formal, readable in print
  • Sans-serif: Clean, without serifs-modern, simple, readable on screens
  • Script: Mimic handwriting or calligraphy-decorative, personal
  • Display: Decorative fonts for headlines, not body text
  • Monospace: Each character has equal width-used for code

Different typefaces communicate different moods. Times New Roman feels traditional and authoritative. Helvetica feels modern and neutral. Comic Sans feels casual and informal (often too informal for professional work).

Type Properties

Several properties affect how type looks and functions:

  • Font size: Usually measured in points (pt) or pixels (px)
  • Weight: Lightness or boldness-light, regular, bold, black
  • Style: Regular, italic, oblique
  • Line height (leading): Vertical space between lines
  • Letter spacing (tracking): Space between all letters
  • Kerning: Space between specific letter pairs

Proper spacing is crucial for readability. Too-tight spacing makes text cramped and hard to read. Too-loose spacing makes words fall apart.

Hierarchy and Readability

Typographic hierarchy guides readers through content by showing what's important:

  • Headlines: Largest, boldest-grab attention
  • Subheadings: Medium size-organize content
  • Body text: Smaller, high readability-main content
  • Captions: Smallest-supplementary information

For readability:

  • Use appropriate font sizes (minimum 16px for web body text)
  • Maintain sufficient contrast between text and background
  • Limit line length (45-75 characters ideal for body text)
  • Use adequate line height (1.4-1.6 for body text)
  • Avoid excessive uppercase text
  • Limit number of typefaces (usually 2-3 maximum)

Color Theory in Practice

Beyond basic color knowledge, understanding how to use color effectively is essential.

Color Psychology

Colors evoke emotional and psychological responses:

ColorCommon Associations
RedEnergy, passion, danger, excitement, urgency
BlueTrust, calm, professionalism, stability, sadness
YellowOptimism, happiness, caution, energy
GreenNature, growth, health, money, harmony
PurpleLuxury, creativity, royalty, mystery
OrangeEnthusiasm, creativity, warmth, affordability
BlackSophistication, power, elegance, mystery
WhitePurity, simplicity, cleanliness, space

Remember these are cultural and contextual. Red means good fortune in China but danger in Western contexts.

Creating Color Palettes

Effective color palettes typically include:

  • Primary color: The dominant brand or theme color
  • Secondary colors: Supporting colors (1-2)
  • Accent color: For calls-to-action and emphasis
  • Neutral colors: Grays, whites, blacks for backgrounds and text

The 60-30-10 rule is a helpful guideline:

  • 60% dominant color (often neutral)
  • 30% secondary color
  • 10% accent color

This creates balanced, harmonious designs without overwhelming the viewer.

Accessibility

Color accessibility ensures designs work for everyone, including people with color blindness or visual impairments:

  • Don't rely solely on color to convey information (use icons, labels, or patterns too)
  • Ensure sufficient contrast (minimum 4.5:1 for normal text, 3:1 for large text)
  • Test designs in grayscale to verify they work without color
  • Avoid problematic color combinations (red-green for colorblind users)

Composition and Layout

Composition is how you arrange elements within your design space. Good composition guides the viewer, creates hierarchy, and communicates effectively.

The Grid System

Grids are invisible structural frameworks that help organize content consistently. They divide space into columns, rows, and modules.

Types of grids:

  • Manuscript grid: Single column-simple, for text-heavy content like books
  • Column grid: Multiple vertical divisions-flexible for magazines, websites
  • Modular grid: Rows and columns creating modules-precise control for complex layouts
  • Hierarchical grid: Flexible, based on content needs rather than strict structure

Grids provide consistency across pages or screens. They're guides, not prisons-you can break the grid intentionally for emphasis or variety.

Rule of Thirds

The rule of thirds divides a composition into nine equal parts using two horizontal and two vertical lines. Placing important elements at intersections or along these lines creates more dynamic, interesting compositions than centering everything.

This technique comes from art and photography but applies to all visual design.

Visual Hierarchy

Visual hierarchy ranks elements by importance, guiding viewers through content in the intended order.

Create hierarchy through:

  • Size: Larger elements are seen first
  • Color: Bright or contrasting colors attract attention
  • Position: Top and left areas are noticed first in Western cultures
  • Contrast: Different from surroundings stands out
  • Whitespace: Isolation emphasizes importance
  • Typography: Bold or distinctive fonts create emphasis

Good hierarchy feels effortless-viewers naturally flow through content without confusion.

Alignment

Alignment creates order and connection between elements. It's one of the most important factors in professional-looking design.

  • Edge alignment: Lining up elements along a common edge creates organization
  • Center alignment: Symmetrical and formal, but can feel static
  • Left/right alignment: Creates strong vertical edges

Random alignment looks amateurish. Even when breaking alignment rules, do so intentionally and consistently.

White Space (Negative Space)

White space isn't wasted space-it's a powerful design tool. It provides breathing room, improves readability, and creates sophistication.

Types of white space:

  • Macro space: Large areas-margins, padding between major sections
  • Micro space: Small areas-between letters, lines, list items

Generous white space makes designs feel premium and easy to navigate. Cramped designs feel cheap and overwhelming.


Visual Communication

Design is fundamentally about communication. Every design choice should serve the message you're trying to convey.

Understanding Your Audience

Before designing, consider who will use or view your design:

  • What's their age, culture, and background?
  • What's their level of expertise with the subject?
  • What are their needs and expectations?
  • In what context will they encounter the design?

A design for children uses bright colors, playful fonts, and simple layouts. A design for financial professionals uses restrained colors, professional typography, and data visualization.

Clarity and Simplicity

The best designs communicate clearly without unnecessary complexity. This doesn't mean boring-it means purposeful.

Achieve clarity through:

  • Removing unnecessary elements
  • Using familiar patterns and conventions
  • Creating clear visual hierarchy
  • Using appropriate typography
  • Maintaining consistency

Every element should serve a purpose. If you can't explain why something is there, remove it.

Storytelling Through Design

Good design tells a story or creates a narrative flow. This is obvious in sequential designs like presentations or comics, but applies to single compositions too.

Guide viewers through your design by:

  • Creating a clear entry point (where eyes land first)
  • Establishing a visual path through content
  • Building from general to specific or important to supporting
  • Creating rhythm and pacing through spacing and grouping

Design Process

Design isn't just about the final product-it's about the process of getting there.

Research and Discovery

Before creating anything, understand the problem:

  • What problem are you solving?
  • Who is the audience?
  • What are the constraints (budget, timeline, technical limitations)?
  • What are competitors or similar projects doing?

Research prevents wasted effort on wrong solutions.

Ideation and Sketching

Generate multiple ideas before committing to one. Sketch quickly and loosely-this phase is about quantity and exploration, not perfection.

Sketching on paper is often faster than digital tools for early exploration. Don't judge ideas too quickly; sometimes unusual concepts lead to breakthrough solutions.

Iteration and Refinement

Design is rarely right on the first attempt. Create, evaluate, and refine:

  • Create an initial version
  • Get feedback from others
  • Identify what works and what doesn't
  • Revise and improve
  • Repeat

Professional designers create many iterations before arriving at the final design.

Critique and Feedback

Good designers seek and accept feedback. Critique isn't personal-it's about improving the work.

When receiving feedback:

  • Listen without defending immediately
  • Ask clarifying questions
  • Separate personal preference from valid concerns
  • Consider the source and their perspective

When giving feedback:

  • Be specific, not vague ("The hierarchy is unclear" not "It looks bad")
  • Explain why something isn't working
  • Suggest alternatives when possible
  • Balance criticism with recognition of strengths

Design Thinking

Design thinking is a human-centered approach to problem-solving that can be applied beyond traditional design work.

The typical design thinking process includes:

  1. Empathize: Understand users' needs, behaviors, and pain points
  2. Define: Clearly articulate the problem you're solving
  3. Ideate: Generate many possible solutions
  4. Prototype: Create rough versions to test ideas
  5. Test: Gather feedback and learn what works

This process is iterative-you cycle through steps multiple times, each time getting closer to an effective solution.

Design thinking emphasizes:

  • Understanding real user needs, not assumed needs
  • Failing fast and learning from mistakes
  • Collaboration across disciplines
  • Prototyping and testing over lengthy planning

Common Design Mistakes

Awareness of common pitfalls helps you avoid them.

Too Much Going On

Trying to include everything results in cluttered, confusing designs. Beginners often:

  • Use too many fonts
  • Include too many colors
  • Fill every bit of space
  • Make everything large and bold

Solution: Embrace simplicity. Remove anything that doesn't serve the core message.

Poor Contrast

Insufficient contrast between elements makes designs hard to read and navigate. Common issues:

  • Light gray text on white backgrounds
  • Busy backgrounds behind text
  • Similar colors for different elements

Solution: Test contrast ratios and ensure readability in various conditions.

Inconsistency

Changing styles randomly throughout a design creates confusion:

  • Different heading styles on each page
  • Varying spacing and alignment
  • Random color usage

Solution: Establish rules and follow them. Create style guides for larger projects.

Ignoring Alignment

Elements placed randomly create visual chaos. Even small misalignments are noticeable and make designs feel unprofessional.

Solution: Use grids and guides. Everything should align with something.

Poor Typography Choices

Typography mistakes are among the most common:

  • Using decorative fonts for body text
  • All caps for long passages
  • Too many different fonts
  • Poor spacing and line height

Solution: Keep typography simple and functional. Reserve decorative fonts for headlines only.

Not Designing for the Medium

What works in print may not work on screen, and vice versa:

  • Tiny text that's unreadable on mobile
  • Designs that don't adapt to different screen sizes
  • RGB colors in print-intended work (should be CMYK)

Solution: Consider where and how your design will be used from the start.


Digital vs. Print Design

While fundamental principles apply to both, digital and print design have important differences.

Print Design Considerations

  • Color mode: Use CMYK, not RGB
  • Resolution: 300 DPI minimum for quality printing
  • Bleed: Extend backgrounds beyond trim edge
  • Fixed size: Exact dimensions defined upfront
  • Paper and materials: Affect color, texture, cost

Print is permanent-you can't update it after printing. This demands more careful planning and proofreading.

Digital Design Considerations

  • Color mode: RGB for screen display
  • Resolution: 72-150 PPI typical for screens
  • Responsive design: Must work on various screen sizes
  • Interactive elements: Buttons, links, animations
  • Loading speed: File size affects performance
  • Accessibility: Screen readers, keyboard navigation

Digital allows updates and iteration after launch. It also enables interactivity impossible in print.


Tools and Software

While tools don't make you a designer, knowing what's available helps you work efficiently.

Industry Standard Tools

  • Adobe Photoshop: Raster image editing, photo manipulation
  • Adobe Illustrator: Vector graphics, logos, illustrations
  • Adobe InDesign: Layout and publication design
  • Figma: UI/UX design, collaborative, web-based
  • Sketch: UI/UX design, Mac only
  • Adobe XD: UI/UX design and prototyping

Raster vs. Vector

Raster images are made of pixels-tiny colored squares. They have fixed resolution and become pixelated when enlarged. Used for photographs and complex images. Common formats: JPG, PNG, GIF.

Vector images are made of mathematical paths. They scale infinitely without quality loss. Used for logos, icons, and illustrations. Common formats: SVG, AI, EPS, PDF.

Choose raster for photos and realistic images. Choose vector for graphics that need to scale or be edited frequently.


Design in Different Contexts

Design principles apply universally, but specific fields emphasize different aspects.

Branding and Identity

Brand design creates visual systems representing organizations:

  • Logos and marks
  • Color palettes
  • Typography systems
  • Visual style and tone
  • Application across materials

Good branding is consistent, memorable, and appropriate for the brand's values and audience.

User Interface (UI) Design

UI design focuses on digital interfaces-apps, websites, software:

  • Visual design of interactive elements
  • Consistency across screens
  • Clear affordances (showing what's clickable)
  • Responsive layouts
  • Accessibility

User Experience (UX) Design

UX design focuses on the entire user journey:

  • User research and understanding needs
  • Information architecture
  • User flows and navigation
  • Wireframing and prototyping
  • Usability testing

UX is more about strategy and structure; UI is about visual execution. They work together.

Editorial Design

Editorial design handles magazines, books, newspapers:

  • Grid systems for consistency
  • Typography for long-form reading
  • Integrating text and images
  • Pacing and rhythm across pages

Packaging Design

Packaging combines 3D structure with graphic design:

  • Physical construction and materials
  • Brand representation on shelf
  • Legal requirements and information
  • User experience of opening and using
  • Environmental considerations

Developing Your Design Eye

Design skill comes from practice and deliberate observation.

Study Great Design

Look at award-winning work, successful brands, and classic designs. Ask yourself:

  • What makes this effective?
  • How is hierarchy established?
  • What mood or feeling does it create?
  • How are principles and elements used?

Build a collection of designs you admire as reference and inspiration.

Practice Observation

Pay attention to design in your daily life:

  • Notice signage, packaging, websites you use
  • Consider what works and what frustrates you
  • Analyze why certain designs succeed or fail

The more you notice design, the better your intuition becomes.

Create Regularly

Skill develops through practice. Create personal projects, experiment with techniques, and push yourself to try new approaches.

Early work won't be perfect-that's normal. Each project teaches you something.

Seek Feedback

Share work with others and genuinely listen to their responses. Fresh eyes catch issues you've become blind to.

Join design communities online or locally to connect with other designers and learn from each other.


Ethical Considerations in Design

Design has impact and responsibility. Consider the broader implications of your work.

Accessibility and Inclusion

Design should be usable by everyone, including people with disabilities:

  • Sufficient color contrast for visual impairments
  • Alt text for images for screen readers
  • Keyboard navigation for motor impairments
  • Clear language for cognitive accessibility
  • Representation of diverse people in imagery

Accessible design is better design for everyone.

Sustainability

Design decisions affect the environment:

  • Material choices in physical products
  • Energy efficiency in digital products
  • Durability and repairability
  • Packaging waste

Consider the full lifecycle of what you design.

Honesty and Manipulation

Design can persuade, but shouldn't deceive:

  • Don't hide important information in small print
  • Don't make cancellation harder than signup
  • Don't use dark patterns to trick users
  • Represent products and services honestly

Good design serves users, not just business goals at users' expense.


Moving Forward

Design fundamentals provide the foundation for all creative visual work. These principles-balance, contrast, hierarchy, color theory, typography, and more-are tools you'll use throughout your design career.

Remember that learning design is a journey. Understanding principles intellectually is different from applying them skillfully. That comes with practice, experimentation, failure, and iteration.

Start simple. Master basic compositions before attempting complex projects. Notice design around you. Ask questions. Create regularly. Seek feedback. Learn from others.

Design is both creative and analytical, artistic and strategic, subjective and objective. It requires both intuition and knowledge. These fundamentals give you the knowledge; practice develops the intuition.

Every designer continues learning throughout their career. Trends change, tools evolve, and new challenges emerge. But the fundamental principles remain constant-they're based on human perception and communication, which don't fundamentally change.

Use these fundamentals as your foundation, then build your own style, approach, and expertise on top of them. Good design solves problems, communicates clearly, and creates positive experiences for people. That's the ultimate goal everything else serves.

The document Introduction to Design Thinking is a part of the Web Design Course Complete Web & Mobile Designer: UI/UX, Figma, + More.
All you need of Web Design at this link: Web Design
Explore Courses for Web Design exam
Get EduRev Notes directly in your Google search
Related Searches
Previous Year Questions with Solutions, Semester Notes, shortcuts and tricks, Free, Summary, pdf , Exam, Introduction to Design Thinking, Viva Questions, past year papers, Introduction to Design Thinking, study material, practice quizzes, mock tests for examination, ppt, Objective type Questions, Extra Questions, Introduction to Design Thinking, Sample Paper, MCQs, video lectures, Important questions;