Parten’s Six Stages of Play
Parten’s Six Stages of Play
AI Generated Illustration & Interactive Infographic
Copilot | Photoshop | Claude Anthropic
DESIGNER’S STATEMENT
Static infographics work fine on paper. In a digital learning environment, they’re a missed opportunity. When a student encounters Parten’s six stages as a flat image, they read it once — maybe — and move on. When they can explore it, expand what they want to know, compare age progressions visually, and print a clean reference sheet for field placement, they actually use it. To incorporate interest and an immediate understanding of Parten’s research, I decided to introduce Parten’s Play Stages using an AI Generated Image, followed by an interactive infographic.
The Interactive Infographic piece started as a quest for me to further delve into the possibilities of building job aid type tools using AI and more importantly as an example of the type of resource we could add to an early childhood development course. It also became a case study in what accessibility-first interactive design actually looks like when you take both words seriously. The WAVE accessibility score landed at 9.6 out of 10 with zero errors and zero contrast errors — not because I ran it through a checker at the end, but because every design decision from color palette to ARIA labeling was made with that standard in mind from the first line of code.
The color progression from light teal to deep navy isn’t decorative. It encodes the developmental trajectory — each stage literally deepens as social complexity grows. That kind of visual logic is the difference between a pretty chart and a teaching tool.
| Overview Item | Description |
|---|---|
| Project Type | Standalong HTML5 Interactive Infographic |
| Target Audience | Anyone looking to further understand the stages of play |
| Subject Matter | Parten’s Six Stages of Play (1932) — social development theory |
| Tools Used | Infographic: Clause Anthropic: HTML5, CSS3, Vanilla JavaScript, Google Fonts (Nunito, Playfair Display) · Illustration: Microsoft Copilot Designer, Adobe Photoshop Editing |
| Accessibility | Built from scratch as part of launching the O&A program at NMSU WCAG 2.1 AA compliant · WAVE AIM Score: 9.6/10 · 0 errors · 0 contrast errors |
| Source | MSU Extension — Power of Play series (Kylie Rymanowicz, 2015) |
| Status | Complete · Available for course integration or faculty reference |
AI IMAGE GENERATION
An illustrated infographic showing Parten’s Six Stages of Play set in an outdoor playground scene with trees and grass. Six diverse cartoon children are arranged across the image, each representing a stage. Stage 1, Unoccupied Play, shows a young child sitting alone on a blue mat exploring a toy with no apparent direction. Stage 2, Solitary Play, shows a child sitting independently on a green oval playing with a block, focused entirely on the object. Stage 3, Onlooker Play, shows a child sitting quietly nearby, watching others without joining in. Stage 4, Parallel Play, shows a child on an orange mat playing alongside another child, each engaged with their own toys without interacting. Stage 5, Associative Play, shows two children on adjacent mats with toys, beginning to share the same space and activity. Stage 6, Cooperative Play, shows three children gathered together under a tent structure, working collaboratively at a small table. Each stage is labeled with its name and a numbered circle. The background shifts from blue-green grass tones in the upper half to warm golden tones in the lower half, visually separating the earlier and later stages.
The Process
The scene above was generated using Microsoft Copilot Designer — the AI image tool supported in my employer’s current technology stack. After establishing the initial composition, approximately ten iterative prompt revisions were needed to address label placement, stage numbering, color consistency, and spelling errors that the model repeatedly reintroduced when correcting other elements. This is a documented limitation of current generative image tools: fixing one variable frequently destabilizes others. Final corrections — including accurate spelling, number placement, and restoring the intended color zones — were completed in Adobe Photoshop. The result is a working example of a hybrid AI-assisted production workflow: generative tools for composition and concept, traditional tools for precision and quality control.
Iterating The Copilot Image
Image Generation Process
Microsoft Copilot Designer iterations → final corrections in Adobe Photoshop
This slider documents the iterative AI image generation process as part of the Parten’s Six Stages of Play portfolio project.
Tool: Microsoft Copilot Designer · Final corrections: Adobe Photoshop
THE INTERACTIVE INFOGRAPHIC
What It Does
The infographic presents Parten’s six stages — Unoccupied, Solitary, Onlooker, Parallel, Associative, and Cooperative Play — as an interactive, multi-view resource. Learners aren’t locked into one layout. Three views serve different learning goals:
- Card View — six expandable cards in a responsive grid, each with a stage summary, social involvement indicator, and expandable detail panel with key developmental skills
- Timeline View — a vertical list format with color-coded stage bars, better suited for sequential reading or low-bandwidth contexts
- Age Comparison View — a horizontal bar chart showing all six stages plotted on the same developmental timeline, making overlap between stages immediately visible
All three views support full keyboard navigation, and an Expand All / Collapse All control supports both quick scanning and deep reading. The Print View button auto-expands all content and fires a clean print stylesheet — removing controls and formatting to a three-column reference handout.
Accessibility Note
I used the Chrome WAVE plugin to verify accessibility, our AIM score? A 10 of 10!
DESIGN DECISIONS
Decision 1: Color as content, not decoration.
The teal-to-navy progression is a deliberate encoding of developmental complexity. Stage 1 (Unoccupied Play) opens in the lightest teal — low complexity, low social involvement. Stage 6 (Cooperative Play) closes in deep navy with teal type reversed out — maximum complexity, maximum social engagement. A student who never reads the labels still absorbs the trajectory.
Decision 2: Removing age ranges from the descriptive text.
Parten’s 1932 research did not specify precise age ranges. The figures that circulate widely — including on the MSU Extension page used as the source — are approximations added by later researchers. The infographic uses age labels as visual reference only, clearly noted as approximate. The full text alternative omits age ranges entirely to avoid presenting interpretation as fact.
Decision 3: aria-valuetext over aria-valuenow for the social movement bars.
The bars use a relative visual scale to show social progression across stages — a design choice, not a data point from Parten’s research. Announcing a percentage to a screen reader user would present a made-up number as meaningful. Instead, each bar announces a plain-language description of that stage’s social involvement level, grounded in what Parten actually described.
Decision 4: The workshop teaches what it does.
A workshop about learning design that uses passive delivery would undermine its own message. Faculty experience cognitive level engagement, spaced practice, and multi-modal content — and then they're asked to build those same elements into their own program assessment process. The medium and the message are aligned. That's intentional.
Decision 5: Three views ofr three use cases.
Card view is for exploration and initial learning. Timeline view is for review and linear reading. Age comparison view is for the pedagogical conversation about overlap — the most common misconception students bring to developmental theory is that stages are sequential and exclusive. Putting all six bars on the same axis makes the overlap undeniable without a single word of instruction.
EXPLORE THE INTERACTIVE INFOGRAPHIC
TECHNICAL SPECIFICATIONS
| Overview Item | Description |
|---|---|
| File Format | Articulate Storyline 360, Genially |
| Hosting | Midjourney AI-generated illustrations |
| Repsonsive | Adobe Premiere Pro |
| Print Support | Suno AI-generated audio, Speechma |
| Keyboard Navigation | Microsoft Excel |
| Screen Reader | Canvas LMS Outcomes Tool |
| Dependencies | PowerBI (transitioning to Intelliboard) |
| Color Palette | Canvas Outcomes Report + five Cognos reports |