AGPM LESSON DEMO
LESSON DEMO: PORTFOLIO DESIGN
PROMOTING + PRESENTING CREATIVE WORK VIA NARRATIVES + DESIGN
1. STORY: NARRATIVE FOR PORTFOLIOS + PROMOTION
A PORTFOLIO IS INTERACTIVE + PLAYABLE, DESIGN SHOULD ADDRESS FORM + FUNCTION
BOTH A CONTAINER + COMMUNICATOR
container + communicator can shape meaning of contents
consider user experience {UX/UI} - if the promo doesn’t work, what would you expect from the game itself?
DESCRIPTION V.S. STORY
Frozen organic cream, sugar + chocolate, made in Santa Cruz.
Locally sourced organic cream, sugar and fresh, seasonal ingredients go into each scoop of our small-batch recipes.
EXPLODE THE “ABOUT” SECTION
STORY EXERCISE
Create 3 lists of words to define + describe the following:
1. What do you create?
2. How do you create?
3. Why do you create?
Circle or bold 2 - 3 words in each list that you think apply to your work THE MOST
Create a 1 sentence Portfolio Story Statement that addresses the what, how + why from these circled words
GAME STORY EXERCISE
Create 3 lists of words to define + describe the following:
1. What IS THE VISUAL TONE/STYLE OF THE GAME?
2. HOW DOES THE GAME-PLAY FEEL?
3. WHY IS IT UNIQUE? {MECHANICS/NARRATIVE/GOAL}
Circle or bold 2 - 3 words in each list that you think apply to your work THE MOST
Create a 1 sentence GAME PROMO/SUMMARY that addresses the what, how + why from these circled words. ADD IN FORMAT AS NEEDED.
2. WORK: PORTFOLIO CONTENT
CONTENT EXERCISE 1
What do you have?
What is in a digital format / file that can easily be uploaded as an image, video and/or audio?What can you easily document?
What projects have you completed that need to be converted into a digital format, such as photographing an existing controller / physical component or screen-recording in-game actionWhat is missing / unfinished?
Can include projects that are in-progress OR completed projects with little to no documentation that are not easy to document, such as a performance-based live action game that requires multiple participants or an interactive installation artwork
CONTENT EXERCISE 2
from the works + projects listed in #1 + #2 only:
Think about all the ways to categorize / organize these works.
How could they be organized by theme, content, style, medium, format, form and/or function? (+ anything not mentioned here)
Create a series of 3 - 4 specific categories to organize these works, and list each work under the corresponding category. Works can be listed in multiple categories.
TRANSLATES TO NAVIGATION + ORGANIZATION IN A PORTFOLIO OR PROMO SITE
A FEW COMPELLING SECONDARY CATEGORIES
IN-PROGRESS/PROCESS,MAKING OF, BEHIND THE SCENES, NARRATIVE FOCUSES, PLAY-THROUGHS, ONE-SHEETS, CUSTOM CONTENT, EASTER-EGGS, DIGITAL SHWAG
NAVIGATION DESIGNS - LINEAR V.S. NON-LINEAR
3. PLATFORM: STORY + CONTENT
Shift from Site-Driven to Content Driven Web Designs
FOCUS ON CONTENT
Layouts more minimal or streamlined
Invisible UX/UI designs
Standard forms / formats
FOCUS ON SITE FORM / FUNCTION
Evident UX/UI designs
Complexity
Unique + novel forms
PLATFORM CATEGORIES
HTML + CSS + JS AUTHORED SITE
Custom design + code
Highest level control over style + navigation
BASIC CMS TEMPLATE / FRAMEWORK
Some layouts and functions automated
High control over style + navigation
WordPress, Wix
HIGH-LEVEL CMS TEMPLATES / DRAG + DROP PLATFORMS
Most layouts + functions automated
Moderate control over styles + navigation
Squarespace, Wix, Cargo, Adobe Portfolio
PLATFORM / SOCIAL HYBRIDS
Almost all layouts and functions automated
Less control over look + feel beyond pre-defined templates
Artstation, DeviantArt, Behance, Dribbble
PURELY SOCIAL PLATFORMS
All layouts + functions automated
Little to no control over styles + navigation
Instagram, TikTok, Twitch, YouTube
SELECTING A Platform
CHOOSE YOUR FIGHTER ;)
Think about this Second
Domain Name options
Digital Community
Social Media Integration options
UX/UI - Multiple standpoints
Platform Branding
Commerce options*
THINK ABOUT THIS FIRST
Fit to narrative, storyboard + navigation
Fit to type of work
Template quality + variety
Ease of customization / Ease of editing
Community + Platform Support
Responsiveness
*Pricing / Ads / Free Plans
PLATFORM SELECTION - BALANCE OF PRACTICAL FIT + CREATIVE FIT - IF YOU CAN’T DECIDE, GET TO TOP 2
4. PLUG + PLAY{TEST}PLATFORM, TEMPLATE + WORK
TEMPLATE connections
Style / Tone = > Story
Main Navigation = > Categories
Content + Type = > Work Lists - Images? Video? Text?
PRE-BUILD CHECKLIST
Portfolio Story + Site Map
Work + Category List
Content Starter Pack:
Banners, backgrounds, work samples + media
Other supporting visuals elements - logos / icons
Sample Text
I am a designer-maker-artist with a penchant for results-driven mischief-making. In practical terms, this means creating designs that break down oppressive systems, telling stories that challenge expected narratives, and re-imagining and rebuilding from fresh perspectives.
Often encountered: canoodling with other rebel rousers, drawing stories, playing with lasers and/or sharks and running through the forest. Works, makes, & plays in Santa Cruz, with deep roots in SF, Oakland, and the Bay Area.
Building PROCESS
SELECT TEMPLATE
SET UP NAVIGATION + SITE ARCHITECTURE
PLUG-IN GRAPHICS, TITLES + WORK
PLAY-TEST;