Embed Size (px)
Citation preview
The Recollect was my thesis project at the Pacific Northwest College of Art. The thesis experience at PNCA is a rigorous process, requiring two semesters of research and development under the guidance of a mentor (mine was the wonderful Kristin Rogers Brown, of Bitch Media) concluding with a formal thesis defense with a panel of PNCA faculty.
First semester I proposed to create an interactive digital publication utilizing two concepts — visual writing and nonlinear storytelling. In addition to those concepts, I had three goals for the content: intimacy, experience, and shareability. By intimate, I meant imagery, writing, and experience design that is both thought-provoking and rich in the human touch. By experiential, I meant interactive design that is both enveloping and immersive. And by shareable, I meant content and a delivery system that are easy to experience, and then share with others on social media.
Thesis Process
The Idea
So first let’s talk about digital publication. Most digital publications mimic the structure of traditional print publications: blocks of static text, clunky slideshows, expected grid and typography solutions. There is little relationship between the design, art, and writing. This formula isn’t necessarily conducive to the way we interact with digital publications — on screens. And most of the time, it’s just boring.
I wanted to figure out how to do this better. As I worked through the process of creation, I realized these key ideas for how I wanted it to function:
Create a publication that was completely interactive, not a traditional publication with random, one-off interactive pieces.
Build the website responsively, rather than a native app. Prioritize social sharing.
Develop a framework for interactive publication, rather than create a fully functioning publication.
Collaborate with only woman writers.
Explore nonlinearity and what it means in how we tell stories with interactive design.
Maintain that quality writing is the foundation for effective communication design.
•
•
•
•
•
•
Personal Process + Timeline
The Recollect was the first interactive project I had ever created and it was an illuminating and exciting process to participate in.
I played every role for this project — visual designer, interactive designer, developer, editor, managing editor, art director, and even writer.
I worked in many different ways in tandem before arriving at The Recollect’s final form. From messy wireframes on tracing paper to journal entries to formal academic writing to UX testing on my classmates to 3x4 foot mind maps to coding in browser — I was able to build something in the short time frame I was working in (less than two months, really) and for all the roles I needed to fulfill.
Tools I used:EvernoteGmailGoogle DriveInstagram WordpressUilangFont DeckIllustrator
September
December
January
February
March
April
May
Decided on general direction
Presented thesis proposal
Defined goals
Prepared for thesis proposal
Turned in written thesis proposal
Winter Break!
Took a wintercession course on Chris Ware’s Building Stories
Began researching
Began contacting writers + developing
content strategy
Semester begins
Synthesized research and re-established initial goals
Created a feature library and aesthetic moodboards
Created wireframes with practice stories
Began coding
Further conceptualized UX design and story structures
Midterm Reviews
Realized concept of recollection. Decided on name “The Recollect.”
Began working on branding
Finished first story
Wrote thesis paper
Defended thesis
Coded, coded, coded
Further developed
stories 2–5
Finished coding!
Wrote defense speech
Some Thoughts On Nonlinearity
“I took a wintersession course here at PNCA during break this year on Chris Ware’s Building Stories. Building Stories is an incredible book, it’s a collection of 16 loose leaf comic books, varying in length from one page to 80. The story revolves around the residents of an apartment building in a Chicago neighborhood, and centers mostly on one character’s life. The story is chronological, but all the pieces are scrambled. Reading it requires pickingup and reading the books at random and piecing together an out-of-order linear story.
As I read it, I ended up thinking how this mimicks how we interact with the world. You piece together a story and you’re required to readjust your perception of these characters as you learn more. We’ve all had that experience of thinking we know someone or understand something, and then randomly they retell a fact or a story or an experience and it radically recontextualizes how you understand them. I think this is a compelling way to tell stories, a way to show how we recollect, and a way to create a really incredible feeling — discovery.
I realized something that I didn’t expect with nonlinear storytelling and it’s that I think most of our stories, our narratives, are nonlinear anyway. What I mean is that we usually read linear, chronological nonfiction stories and we assume those stories are told that way because they are that way, but in reality the writer made a series of choices in how they told the story — they omitted facts, they exaggerated, they downplayed details — and they did a really beautiful and wonderful thing: they added themselves to the story. Nonlinearity acknowledges this head on, because the form appears to be jumbled. But what it does more apparently is add another person — the reader, to make choices in how the story moves, to participate. It’s experiential.
When it came to applying these ideas of nonlinearity to The Recollect, I first took the concept literally. I thought I needed to make a truly random nonlinear experience to make a “pure” piece of nonlinear work. What I just showed you though does follow a system, but it also breaks another one. It requires the user, the reader, to navigate. To move and to think about the moving.
Writing this way and making work this way frees us from the expectation of what we owe to the illusion of linearity and reality, I think it’s also linked to how we understand, remember, and recollect our experiences. The theme of all these stories, rather accidentally, came to be about remembering and recollecting. Recollection isn’t clean or linear — it’s layers, shuffling vignettes, linked and unlinked, relevant and irrelevant, woven and unwoven moments. How they link and connect, or maybe don’t. I think it’s also really intimate, to be shown this. To see the building of a story and all the links and connections.
I had never designed anything digitally interactive before this project and I was surprised to realize how much it’s tied to film and animation. Interactive design in time based. Designer and writer Frank Chimero defines this, and responsive web design itself, as “flux,” which he describes as the capacity for change. There is a beat and a pace to stories, and telling stories with flux can be so beautiful. Another thing that surprised me about designing interactively, was that I was more conscious than ever before of how I wanted my audience to feel. I had forgotten how design could facilitate poetry, and how the beat and the pacing and the language and the color and the typography and the system of it all, could facilitate language and emotion.”
Below is a short excerpt from my defense speech that I think best explains what I realized about the form of nonlinearity, and how to better tell stories.
To move and to think about the moving.
Story Development
Feature Library
Example Story Explorations
Before I had writing to work with, I spent some time experimenting with other content. Below, an essay by Durga Chew Bose, called Some Things I Cannot Unhear. I was trying to find different ways to present sectioned writing — “listicles” — visually and interactively.
I made a few feature libraries for inspiration for different design devices, so that I could have something to reference when I felt stumped building stories.
Q+A Interview: Friendships
An article type I wanted to rethink was the Question + Answer interview. I interviewed five women, a mix of writers, educators, and artists about friendship. My goal with the Q&A was to find a way to make navigating these questions and answers more interesting.
Q&A interviews are linear, and if not paced out correctly can be boring and disjointed. Since these interviews were done via email, losing the sense of a conversation’s pace wasn’t something I was concerned about, but I didn’t want it to feel without pace or without flavor. I wanted to give the user a choice in how they navigated the content.
For the desktop and tablet experiences, I wanted to lay out the content so the user could also feel like they had a holistic view of the piece. I wanted the user to feel in control of how they experienced what they were reading.
Visit this story ->
In Your Defense
In Your Defense is a nonlinear narrative listicle written by Jenna Fletcher. In this piece, the story sections shuffle on each page refresh, meaning the order of the pieces is a unique to each visit and visitor.
I laid out the imagery subtly behind the text, and when the sections were unfolded the imagery would move along with it. I wanted the imagery to be present from the beginning, but not completely understood until after reading. I use color and imagery throughout The Recollect, thinking a lot about Gestalt — connecting smaller details to create an overall experience.
Visit this story ->
Advice For My Teenage Self
Advice For My Teenage Self is a linear listicle written by Kristin Rogers Brown.
One of the goals for this piece was that I wanted the navigation design to feel like a part of the writing, I wanted it to be an equal participant. I wanted to remind the user the design of this is just as important as the writing.
I was surprised to see how far just color and typography could carry the feelings I wanted the user to experience. I chose the colors to go along with the tone of each piece of advice and had the colors change and transition depending on each list item. At first my instinct was to make this experience purely nonlinear, but the momentum of Kristin’s writing truly benefited from the numbered progression. I chose the typeface, Didoni, for the numbers because I wanted the numbers to feel precious, enticing, and enjoyable to click on and move through.
Visit this story ->
Ox-Bow
I wanted to rethink the form of the traditional essay by having two writers tell the same story, but from their own perspectives.
Clare Vernon and Jessika Stocker met at an art camp and retreat a few years ago and this piece is a collection of certain scenes and details they each remember, but in different ways. I designed the writing so I could give the user the option to choose which perspective to read first as they progressed through the story, and through each section.
This piece ended up being much more linear than I had originally envisioned. But I realized I wanted this story to feel like it was being woven. I wanted the reader to feel like they were sitting with Clare and Jessika, recounting this experience, as each person added and supplemented their own anecdotes to the story. I used handwritten elements, color, and typography to distinguish each voice. I wanted this piece to feel like a recollection, a story being built out of individual moments and a vignettes of experience. Building and building to an end.
Visit this story ->
Prayers For Kara
And the last piece is one I wrote called Prayers For Kara. This was the last story I made and, how it often is (annoyingly) with creation, it’s the place where it all started to click. I took diary entries I had written as a teenager and supplemented them with reflection from now. I wrote it, strangely, as I was designing and coding it. Visually, I used layering as a device to reference recollection and retelling. And this is where I think the ethos of nonlinearity can shine. I wanted it to feel like these memories were coming back, appearing and disappearing, seeming less important and more important as the writing is introduced. It grows, it builds, and it changes.
Visit this story ->
Home Page
Developing the home page was one of my favorite aspects of this project — balancing the user experience, responsive design, and integreity of the content was an interesting challenge. I knew I wanted to explore different channels of delivery, rather than a traditional feed of headlines. I utilized imagery, quote, and list organization to display the content.
Initial home page explorations
Home Page
For the final home page I settled on displaying the content through a grid and a list. The visually appealing grid is the first land, but allows the reader to navigate via list if they’d prefer.
Visit home page ->
“Animated Cover”
I wanted the introduction on the left to function kind of like a print publication cover does — in that I wanted it to be intriguing and interactive. I wanted someone to feel that push, to pick it up and touch it. I think this idea has potential, particularly if The Recollect were set up by issues, and using different language and devices to introduce specific stories, or themes.
Branding Moodboards
“Friendly Modern Grotesque”
“Monotone Blackletter”
“Bold Modern Minimalism”
“Subversive Zine”
Final Branding
Branding Exploration
Logo
Color
Typography
I went through many different colors, experimented with a lot of web fonts and finally decided on this bright, uncomfortable green and the Gabriel Sans Family.
I chose the green because I wanted it to feel unique and native to a screen and Gabriel Sans because I wanted a typeface that was both distinctive and friendly. I supplemented the green with shades of gray for balance.
After creating the branding moodboards, I decided to go in the direction of blackletter, as a nod to the history of publication and a bold way to convey the brand.
Gabriel Sans Black ItalicGabriel Sans BoldGabriel Sans MediumGabriel Sans NormalGabriel Sans Light ItalicGabriel Sans ThinGabriel Sans Thin Italic
Some logo explorations
What’s Next
Concepts I’m still thinking about:
Contextual links, what does it look like when external links occupy the same space as the linking content?
Gestalt, “parallax” visual elements occuping the space before, after, and during reading the referenced content.
Is there a digital equivalent of the presence of wear and tear, or perhaps, just “presence” of people reading, interacting, and particpating in interactive publication?
How can we mimic the feeling of the cadence of conversation with interactive design and threaded interviews?
How does native advertising effect the integrity of interactive publication?
How we make marginalia work as commenting, or commenting work as marginalia?
How will we move publication away from screens and into our environements?
Does successful interactive design move people away from their devices?
How do we make lasting and enriching interactive publication while resisting clickbait?
I knew from the beginning this project would most likely not turn into a fulI-fledged publication post-thesis, but I do want to take these ideas and expand upon them in Babe Vibes, or other publications, in the future. I’m not done, for sure! Below are some ideas I’m still toying with.
Have a suggestion? Idea? Question? Something I oughtta read? Email me at [email protected].
Bibliography + Resources
Nonlinearity:
Building Stories by Chris Ware
What Screens Want by Frank Chimero
Visual Editions
On Publication:
64 Ways To Think About a News Homepage by Melody Kramer
Fully Booked — Ink on Paper by Andrew Losowsky
Post-Artifact: Books & Publishing by Craig Mod
Post Digital Print by Allesandro Ludovico
The Social Life of Marginalia by Liz Danzico
What Books Will Become by Kevin Kelly
Publications:
Adult Mag
An Another
Hazlitt
The New York Times
Technical:
Responsive Web Design by Ethan Marcotte
Uilang
Visual Inspiration:
Fraktur Mon Amour by Judith Schalansky
Women Writers:
Interview with Vivian Gornick by Believer
The Laugh of Medusa by Hélène Cixous
The VIDA Count
Thank you to contributors:Chelsea G. Summers, Clare Vernon, Intisar Abioto Jazmine Hughes, Jenna Fletcher, Jessika Stocker, Kristin Rogers Brown, Lauren Zuniga, and Sarah Sentilles.
Special thanks to:Carrine Urrutia, Daniyel Hicks, Joel Marchand, Katie Beasley, Kristin Rogers Brown, Martha Lewis, Martin French, Mei Ratz, Skylar Jessen, Steph Luke, Stephanie McCullough, and my parents for all their support and love.
