Skip to main content

Digital Design and Media

Digital Design Fundamentals​

1. Digital Image Formats​

Raster (Bitmap):

  • Pixel-based images
  • Fixed resolution
  • Created with painting/photo software
  • Scaling up loses quality
  • Formats: JPEG, PNG, GIF, BMP
  • Suitable for: Photography, painting, detailed work

Vector Graphics:

  • Mathematical curves and shapes
  • Resolution-independent
  • Scale infinitely without loss
  • Smaller file sizes
  • Formats: SVG, EPS, PDF
  • Suitable for: Logos, typography, illustrations

Understanding Resolution:

  • DPI/PPI (dots/pixels per inch)
  • Screen: 72-96 PPI
  • Print: 300+ PPI
  • Higher resolution = better quality
  • File size considerations

2. Color Modes​

RGB (Light-Based):

  • Red, Green, Blue channels
  • Screen display
  • 8-bit: 256 levels per channel (16 million colors)
  • Additive: Adding colors creates white
  • For: Web, digital media, screens

CMYK (Print-Based):

  • Cyan, Magenta, Yellow, Black
  • Print output
  • Subtractive: Combining colors creates black
  • Separates into print plates
  • For: Professional printing

Grayscale:

  • Black to white values
  • 256 levels of gray
  • Efficient file size
  • Versatile and classic
  • Printing and artistic use

Digital Design Software​

1. Adobe Creative Suite​

Photoshop:

  • Raster image editing
  • Photo manipulation and retouching
  • Digital painting
  • Compositing and effects
  • Industry standard

Illustrator:

  • Vector graphics creation
  • Logo and icon design
  • Typography and text
  • Scalable illustrations
  • Technical and artistic work

InDesign:

  • Layout and publishing
  • Multi-page documents
  • Print and digital
  • Typography control
  • Professional publications

Affinity Alternatives:

  • Affinity Photo (Photoshop alternative)
  • Affinity Designer (Illustrator/multi-purpose)
  • Affinity Publisher (InDesign alternative)
  • Lower cost, perpetual license
  • Increasingly professional quality

2. Other Design Tools​

Web Design:

  • Figma: Cloud-based, collaborative
  • Sketch: macOS, UI/UX focus
  • XD: Adobe's UX tool
  • Webflow: Code-free web builder

3D Design:

  • Blender: Free, open-source, powerful
  • Cinema 4D: Professional 3D
  • Maya: Animation and modeling
  • SketchUp: Architectural 3D

Animation:

  • After Effects: Motion graphics
  • Toon Boom: Animation specialist
  • Procreate Dreams: iPad drawing/animation

Web Design​

1. Web Design Principles​

User Experience (UX):

  • How site functions
  • Navigation and structure
  • Information architecture
  • Accessibility
  • User goals and tasks

User Interface (UI):

  • Visual design and layout
  • Buttons and interactions
  • Typography and colors
  • Consistency and branding
  • Form and usability

2. Responsive Design​

Mobile-First Approach:

  • Design for smallest screen first
  • Scale up to larger devices
  • Touch-friendly interactions
  • Fast loading times
  • Accessibility priority

Breakpoints:

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px
  • Flexible layouts
  • Gradual scaling

Flexible Grids:

  • Percentage-based widths
  • Flexible images
  • Media queries
  • Adapting to screen size
  • Fluid typography

3. Web Typography​

Font Selection:

  • Web-safe fonts: System installed
  • Web fonts: Downloaded or linked
  • Font services: Google Fonts, Typekit
  • Fallback fonts: Default alternatives
  • Performance considerations

Readability:

  • Font size: 16px body minimum
  • Line-height: 1.5-1.8 for body
  • Line length: 50-75 characters
  • Contrast: WCAG accessibility standards
  • Hierarchy: Size, weight, color

4. Web Accessibility (a11y)​

Design for All:

  • Accommodate disabilities
  • WCAG guidelines
  • Color contrast: AA or AAA standards
  • Alt text for images
  • Keyboard navigation

Inclusive Design:

  • Not just compliance
  • Beneficial for all users
  • Captions for video
  • Clear language
  • Multiple ways to accomplish tasks

Interactive Design​

1. Interaction Design​

User Actions:

  • Buttons and clickable elements
  • Hover states and feedback
  • Forms and input
  • Navigation responses
  • Clear affordances

Feedback and Response:

  • Immediate visual response
  • Loading states
  • Confirmation of actions
  • Error messages and guidance
  • Animation and transitions

2. Animation and Motion​

Principles of Animation (Disney):

  • Squash and stretch
  • Anticipation
  • Staging and timing
  • Follow through and overlapping action
  • Ease in/ease out (non-linear motion)

Digital Animation Uses:

  • Loading animations
  • Transitions between states
  • Micro-interactions
  • Data visualization movement
  • Attention direction

3. Prototyping​

Low-Fidelity Prototypes:

  • Wireframes (gray boxes, no style)
  • Sketches and mockups
  • Quick iteration
  • Testing basic flow
  • Rapid feedback

High-Fidelity Prototypes:

  • Detailed visual design
  • Interactive elements
  • Realistic appearance
  • User testing
  • Close to final product

Tools:

  • Figma: Prototyping in design tool
  • Adobe XD: Dedicated prototyping
  • InVision: Linking to InVision
  • Axure: Complex interactions
  • Code: HTML/CSS/JavaScript prototype

Motion Graphics and Video​

1. Motion Graphics​

Definition:

  • Animation applied to graphic design
  • Text, shapes, and images moving
  • Often with sound
  • Communicating information
  • Engaging and dynamic

Applications:

  • Video introductions/outros
  • Animated logos and branding
  • Title sequences
  • Infographics
  • Social media content

2. Video Design​

Editing:

  • Premiere Pro or Final Cut Pro
  • DaVinci Resolve: Free powerful option
  • Cutting and sequencing
  • Color grading and correction
  • Audio mixing

Composition:

  • Frame composition for video
  • Safe areas for text
  • Motion and space
  • Depth and layering
  • Narrative flow

Digital Illustration and Painting​

1. Digital Painting Techniques​

Drawing Tablets:

  • Pen displays (Wacom, XP-Pen, iPad)
  • Sensitivity and responsiveness
  • Pressure sensitivity
  • Tilt and rotation
  • Natural drawing feel

Digital Brushes:

  • Brush engines and libraries
  • Customizable settings
  • Mimicking traditional media
  • Unique digital possibilities
  • Stylus behavior

2. Creating Digital Art​

Non-Destructive Editing:

  • Layers and masking
  • Adjustable parameters
  • Undo and revision
  • Experimentation without loss
  • Professional workflow

Digital Process:

  • Sketch layer foundation
  • Color layers and grouping
  • Blending modes
  • Opacity and transparency
  • Final refinement

Emerging Digital Media​

1. Virtual and Augmented Reality​

VR (Virtual Reality):

  • Immersive 3D environment
  • 360-degree exploration
  • Interactive experiences
  • Gaming and entertainment
  • Training and education

AR (Augmented Reality):

  • Digital elements in real world
  • Phone or AR glasses
  • Enhancing physical reality
  • Shopping and visualization
  • Gaming and education

2. Generative and AI-Assisted Design​

AI Tools:

  • Text-to-image generation
  • Neural networks for style transfer
  • Procedural generation
  • Design assistance
  • Ethical considerations

Uses and Concerns:

  • Inspiration and iteration speed
  • Artistic authenticity
  • Copyright and training data
  • Labor displacement concerns
  • Novel creative possibilities

3. Interactive and Kinetic Design​

Installation Art:

  • Interactive digital art
  • Viewer participation
  • Sensors and connections
  • Real-time response
  • Immersive experience

Kinetic Typography:

  • Text as animation focus
  • Meaning revealed through motion
  • Poetry and narrative
  • Dynamic communication
  • Artistic expression

Digital Workflow and Optimization​

1. File Management and Organization​

Folder Structure:

  • Project folders
  • Assets (images, fonts, graphics)
  • Versions and archives
  • Final output
  • Consistent naming

Version Control:

  • File naming with dates/versions
  • Git for collaborative work
  • Cloud backup (Google Drive, Dropbox)
  • Regular saves
  • Recovery options

2. Performance Optimization​

File Compression:

  • Reducing file sizes
  • Maintaining quality
  • Web loading speed
  • Print readiness
  • Appropriate compression levels

Format Selection:

  • JPEG for photographs
  • PNG for transparency
  • WebP for web (modern browsers)
  • SVG for graphics and icons
  • Purpose-appropriate choices

Summary​

Digital design involves:

  • Software: Raster and vector, specialized tools
  • Web Design: UX/UI, responsive, accessible
  • Interactive Design: User experience, prototyping
  • Motion Graphics: Animation, video, engagement
  • Digital Media: Emerging VR/AR, AI-assisted tools
  • Workflow: Organization, optimization, collaboration

Digital design is rapidly evolving, combining traditional design principles with new technologies and possibilities. Understanding both software and design fundamentals allows effective communication and innovation in digital contexts.