Proud & Torn
As a “visual memoir,” Proud & Torn tells the story of the ups and downs, over generations, of an everyday peasant family from the Hungarian countryside. The narrative reveals the dramatic and often horrific events that led one family—like Hungary itself—to be irreparably torn: two world wars, the Holocaust, and more than a century of instability with competing regimes of autocracy, fascism, democracy, and communism. Proud & Torn breaks free of these rigid national narratives, amplifies the voices of women and historically marginalized peoples, and uses digital tools to illuminate alternative narratives.
The story, constructed over sixteen chapters from 1848 to 1956, features Bettina Fabos’ own Hungarian family history intertwined with rural communities, the city of Budapest, and the country as a whole. Dana Potter designed Proud & Torn to resemble a personalized scrapbook. Nearly a thousand images, alongside graphic maps and drawings, are collaged together to make the complicated story of Hungarian and Eastern European history accessible to anyone, from children to adults.
Design Ideas: storytelling, graphic history, photomontage
Timeline
Scrolling down from the Proud & Torn landing page, the flow shifts from vertical to horizontal. A visually-rich timeline serves as an interactive table of contents. We move through a never-ending landscape, like a passenger on a train, across chronological chapters. Inspired by Richard Mcguire's graphic novel “Here” the landscape is the constant and square outcropped photos indicate windows to specific time-periods. The reader can hover over a time-marker and click to enter a chapter.
The Proud & Torn Style
Each chapter has the feel of a carefully crafted scrap-book made with modern web-tools. The text is pieced into small patches and broken-up with cut-out and collaged images. The reader must switch frequently between reading and viewing images. A CSS grid brings subtle but consistent spacing to the scrolling content.
While indications of a scrap-book aesthetic (handwriting and photomontage) make the project feel personal and accessible this contrasts with repetition and control from the webpage overall. The visual play between orderly and intimate is true to the rigorous research and content curation behind this personal narrative.
P&T Prologue | harvest in Hungary with scythes in 1940s
P&T 1956 | Fliers posted during the 1956 Hungarian revolution
P&T 1946 | Hungarian Communist Party members re-parcel agricultural land
P&T 1930 | farming women in a kitchen
P&T 1950 | workers on a collective farm in Soviet Era Hungary
P&T 1950 | Stalin statue inauguration in Budapest in 1951
Photomontage
To illustrate this story, we carefully chose a vast assortment of nearly a thousand photographs that we have isolated into parts, put into animation, or crafted into photomontages. We have limited our use of the most iconic photographs and relied instead on alternative visual sources to document rural Hungary, including: the Fábos family’s own collection of photographs; the photographic collections of the Hungarian Ethnography Museum; the Fortepan digital archive of amateur photography, and the fascinating collection of images from the newsletter Magyar Rendőr (from the Hungarian Policeman Photo Archive). These images tell us a richer, more complicated history than the simple suggestion of a few iconic images.
The use of photomontage shows the hand of the narrator curating historical images into scenes and stories. The two subtle color tones, earthy and navy, reveal the collage and curation especially in juxtapositions which may appear un-altered.
P&T 1900 | view from Gellert Hill, Budapest, Hungary in 1904
P&T 1953 | construction workers in Budapest, Hungary, 1954
P&T 1949 | Hungarian police inspecting horse cart during Rákosi era
Photo Albums
The photo album aesthetic in Proud and Torn shows small collections of similar photos with different subjects, emphasizing historical events as both political and personal experiences. Everyday snapshots in particular illustrate how a feeling or movement spreads across communities and time.
P&T 1900 | a collection of images showing friends smiling and workers on farms posing happily for photos
P&T 1949 | tractor parade promoting collective farming and Mátyás Rákosi
Cut-out figures
The repeated motif of a stand-alone, cut-out figure draws attention to an important person. We also use this signifier to challenge the expectation of who is an important person. Our important historical figures include peasants, anonymous farmers, kings, athletes, shop-owners, etc.
Empress Sisi, Autsrian Empire, 1867
Photo Narrative
Proud & Torn relies on photos to tell a visual history. In the beginning chapters the images and text read as a rhythmic back and forth, a more didactic relationship. With the introduction of video in the 1930 chapter and the camera becoming affordable for the family in the 1940 chapter, there is a dramatic shift in the visual ability of the images to tell stories. The photos go from dry documentation, repetitive shots of farm houses, family portraits, or significant events, to a vast array of expressive and experimental images of everyday moments.
The 1949 chapter shows a photo narrative using excerpts from Magyar Rendőr/The Hungarian Policeman. Because the collection documents a process over time, the images tell a dramatic tale on their own.
P&T 1949 | excerpts from Magyar Rendőr/The Hungarian Policeman magazine
Voices
I have the great fortune of knowing Bettina as a close personal friend. She expresses awe with vibrant enthusiasm and delivers distain with forceful complaint. To start each chapter, Bettina and I sat down with her draft and she talked me through it. I would know how she felt throughout and understand her reasons. Bettina’s way of speaking helped me remember the histories and connect to the stories. I used multiple text-styles help readers hear Bettina's reactions or reasons for including something.
Bettina as the Narrator
The majority of the historical narrative is told from via the narrator, Bettina, and is formatted in short paragraphs. The orange line helps guide the eye as the text shifts locations on screen from left, center, or right to best integrate with the images.
Bettina’s Personal Voice
When talking of her family, giving her opinion, or otherwise changing to “I” statements, a font made from Bettina’s handwriting is used. The text is broken up to mimic her speech. Each line has a uniquely curved path to mimic writing on a blank paper.
Factual Asides
The paragraph text that is completely wrapped in an orange box designates factual information which supports but is not in the direct flow of the narrative.
Intimate Quotes
A hand-writing font, distinctly different from Bettina’s, was used when directly quote someone who was speaking in a personal or intimate way and was a non-authoritative (occasionally anti-authoritative) voice.
Authoritative Quotes
The strips of call-caps text on grey-tabs are voices of authority or quotes from government documents.
Visualizations
When a map or chart was needed, it felt most fitting to re-create them as hand-drawn rather than completely computer-generated. Data is about people and drawing maps and charts by hand connects the information to lived experience.
P&T 1945 a map and timeline detailing Pista’s two-year journey as a prisoner under the Rákosi regime
P&T 1940 a map showing the outline of the Hungarian border prior to the Treaty of Trianon, with land “awards” designated Hungary by Hitler during WWII
P&T 1900 pie chart showing the total populations of the largest ethnic groups in Hungary, this was to counters the idea that Magyar was THE Hungarian ethnicity
P&T 1900 a pie chart showing the growing population of Jewish professionals in Budapest in the early 1900s, a period of rising antisemitism
