MediaArtTutorials
Composition Techniques III – Part 1
Objective
Create three digital compositions, each combining two different Gestalt Principles of Design from the list below:
- Proximity
- Similarity
- Continuity
- Closure
- Figure/Ground
- Prägnanz
Each composition should demonstrate how the selected principles interact to affect form, structure, and visual perception.
Use what you’ve learned so far (e.g., layout, grids, colour theory, texture) along with the new Gestalt concepts and examples introduced in class to produce designs that are intentional, engaging, and format-aware.
Software
- Adobe Illustrator (vector-based) – for general layout, shapes, and composition setup
- Adobe Photoshop (pixel-based) – for textures, photomontage, or image-based enhancements
Activities
Complete the following activities in order. Ask your professor for help if needed.
[15–20 min] Sketching
You may sketch using a digital or physical notebook.
According to Wikipedia, a sketch is “a rapidly executed freehand drawing that is not usually intended as a finished work.”
Task:
- Sketch three compositions (one per format), each combining two different Gestalt principles from the list above.
- Explore how these principles interact visually to create structure and meaning.
Composition Formats (Choose one per sketch):
- Graphic Design → Logo or Poster
- UI Design → One-page website mockup or App intro + second screen
- Photomontage → A photographic composition using collage and texture
Focus on:
- Artistic experimentation – explore unexpected visual relationships
- Communication – ensure Gestalt principles support clarity and impact
- Negative space and layering – enhance visual hierarchy
- Viewer experience – guide the eye and create unity in complexity
- Colour & contrast – use them to support perceptual grouping and focus
Ask the professor for feedback during sketching!
[15 min] Setup
Set up your documents in Adobe Illustrator and/or Photoshop based on the format of each composition.
You must follow the appropriate setup tutorial and use correct file naming conventions.
Graphic Design (Logo or Poster)
- Primary Software: Adobe Illustrator
- Optional: Adobe Photoshop (for prepping raster images)
- Don’t forget to embed all linked images.
Setup for Logo design
Your Illustrator document must include the following settings for Logo Design:
- Naming Protocol:
Lastname-Firstname-CompTech3-Logo - Units: Pixels
- Size: 1000 × 1000 px (1:1 aspect ratio)
- Bleed: 10 px (on all sides)
- Color Mode: RGB
- Raster Effects: High (300 PPI)
Required Layers:
- Guides Layer: Include an inner rectangular border at -20 px from the edges.
- Composition Layer: This is where your main shapes should go.
- Background Layer: Add any background colors or images here.
Setup for Poster design
Your Illustrator document must include the following settings for Poster Design:
- Naming Protocol:
Lastname-Firstname-CompTech3-Poster - Units: Inches
- Size: 11 × 17 in (vertical) or 17 × 11 in (horizontal) (Tabloid size)
- Bleed: 0.3 in (on all sides)
- Color Mode: RGB
- Raster Effects: High (300 PPI)
Required Layers:
- Guides Layer: Include an inner rectangular border at –0.5 in from the edges.
- Composition Layer: This is where your main shapes should go.
- Background Layer: Add any background colors or images here.
Recommended tutorials
UI/UX Design (Website or App Screens)
- Primary Software: Adobe Illustrator
- Optional: Adobe Photoshop (for preparing assets/images)
- Don’t forget to embed all linked images.
Setup for Website design
Your Illustrator document must include the following settings for Web Design:
- Naming Protocol:
Lastname-Firstname-CompTech3-Website - Units: Pixels
- Size: 1920 x 1080 px (Web-Large size)
- Bleed: 10 px (on all sides)
- Color Mode: RGB
- Raster Effects: High (300 PPI)
Required Layers:
- Guides Layer: Include an inner rectangular border at –50 px from the edges.
- Composition Layer: This is where your main shapes should go.
- Background Layer: Add any background colors or images here.
Setup for App design
Your Illustrator document must include the following settings for Mobile Design:
- Naming Protocol:
Lastname-Firstname-CompTech3-App - Units: Pixels
- Size: 1125 x 2436 px (iPhone X)
- Artboards: 2
- Bleed: 10 px (on all sides)
- Color Mode: RGB
- Raster Effects: High (300 PPI)
Required Layers:
- Guides Layer: Include an inner rectangular border at –50 px from the edges.
- Composition Layer: This is where your main shapes should go.
- Background Layer: Add any background colors or images here.
Photomontage
- Primary Software: Adobe Photoshop
- Optional: Adobe Illustrator ((for preparing or exporting vector-based elements)
- Naming Protocol:
Lastname-Firstname-CompTech3-Photomontage
Setup for Photomontage
Your Photoshop document must include the following settings for Photo-Collage:
- Naming Protocol:
Lastname-Firstname-CompTech3-Photomontage - Units: Inches
- Size: 11 × 17 in (vertical) or 17 × 11 in (horizontal) (Tabloid size)
- Resolution: 300 PPI
- Color Mode: RGB
- Bits: 16 bits
Recommended tutorials
[Rest of class] Create Your Compositions
Ask yourself as you work:
- Are the Gestalt principles clearly integrated and visually understandable?
- Does the composition guide the viewer’s eye effectively?
- Are form, space, contrast, and balance working together harmoniously?
- Does the final output align with your sketch and chosen format?
📥 Final Submission
Submit the following:
- A single PDF file containing your three sketches
- Naming:
Lastname-Firstname-CompTech3-Sketches.pdf
- Naming:
- Three separate PDF files, one for each digital composition
- Naming:
Lastname-Firstname-CompTech3-Logo.pdforLastname-Firstname-CompTech3-Poster.pdf - Naming:
Lastname-Firstname-CompTech3-Website.pdforLastname-Firstname-CompTech3-App.pdf - Naming:
Lastname-Firstname-CompTech3-Photomontage.pdf
- Naming:
- Two-sentence description for each composition
- Post directly into Avenue to Learn (not as a file)
- Each description must briefly explain the concept and identify the Gestalt principles used
Example:
“This composition explores urban isolation through the use of Figure/Ground and Continuity. The contrast between overlapping silhouettes and blurred cityscapes emphasizes the fragmented experience of city life.”
❗ Follow submission and naming instructions carefully to avoid losing points.