01
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Dark Patterns
Project Intro
Dark patterns was created as a final project for IAD 4200: Prototyping II class in the Interactive Design program at Kennesaw State University. For this exercise, I was given the task of utilizing Figma's advanced prototyping features such as Auto Layout, Component Properties, Variables, and Conditional Logic.
Dark Patterns splash screen.
Dark Patterns
Challenges
- Conceptualize a digital product containing a system interface.
- Create an interactive prototype using Figma.
- Implement advanced prototyping features such as Auto Layout, Component Properties, Variables, and Conditional Logic.
Dark Patterns
Concept
Since I was given free range in choosing the domain, theme, and platform for the prototyping project, I decided to challenge myself in designing for an unconventional aspect ratio and input method. With that in mind, I chose to create and prototype a guessing game for the quirky, handheld game system Playdate.
Project's initial concept sketch.
Dark Patterns
Sketch and Wireframe
The main idea for the game was to present the player with two sets of items: the first set consisting of a pattern with a missing item, and the second, a set of randomized items--of which only one would fit in and complete the initial pattern.
Quick sketch defined the game's system.
Simple wireframes helped test Variables and Conditional Logic.
Dark Patterns
Because the Playdate uses a 1-bit memory LCD screen for its devices, a minimalist approach to the visual design seemed to be the best fit. With that in mind, I sourced a library of pixel art illustrations by PiiiXL and a typeface by Daniel Linssen. I also followed guides from Playdate’s design documentation to set up colors and scale.
Assets
Pixel art by PiiiXL on Itch.io.
Dark Patterns
Next, I created color variables for both light and dark mode, and the number variable used for the score interaction, which increases one point every time the player picks the correct item.
Variables
Local Variables panel in Figma.
Dark Patterns
I created interactive components and leveraged Auto Layout while following atomic design principles. These consisted of building blocks like icons, cards, and sections. In addition, I applied Component Properties such as Text, Boolean, Instance Swap, and Variant Modes to dynamic elements—creating an effective design system.
Components and Auto Layout
Dark Patterns' prototype components in Figma.
Dark Patterns
Interactions
For the handheld game console prototype, I created touch targets at the directional pad and AB buttons, since the Playdate device does not have a touch sensitive scree. In the transitions between pages and dialogue boxes, I played around with microinteractions at the interactive component level, and motion using After Delay and Smart Animate.
Project Dark Patterns prototype interactions.
Dark Patterns
Takeaways
Designing for the Playdate system using advanced prototyping techniques in Figma helped enhance my design system skills. In addition, problem-solving complex interactions in such a small aspect ratio while using pixel art and animation was a lot of fun. In the future, I would love to revisit and augment this project—and given Playdate’s SDK and Web-based game editor, I can see myself developing and publishing Dark Patterns to the catalog for the community to enjoy.