*--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--*

(&)

(%)

($)

-/\

Nam Bắc Một Nhà

My final year project, delving into the longlasting division between North and South Vietnam, intricately woven with my family's personal stories.

---~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~-

(&)

-/\

[!]

Role

Project Direction,

Writing,

Design,

Development,

Typography,

Visual Communication,

Experimental,

Print matter,

Website.

Date

Theme

Context

As a final year graduation project at LASALLE, this was the most extensive undertaking I had ever pursued, characterized by the complexity of the chosen topic, the considerable time I spent grinding on, and the range of design media it encompassed. The entire process of this project is too extensive to be fully detailed on this page alone. Consequently, I created a dedicated archive website to thoroughly document it.

Visit nam-bac-mot-nha.vercel.app to see!

Take a look at the github repository of the site.

Despite the reunification of Vietnam nearly 50 years ago, the division between the people from the North and South Vietnam still remains, a lingering result of the Vietnam War. This project, "Nam Bắc Một Nhà," envisions a National Reconciliation Day that aims to celebrate all memories of the Vietnam War, particularly those that have been suppressed, avoided, or ignored by both the general public and the Vietnamese governments. The conflict surrounding the war has deeply affected and divided families, including my own, leaving behind a complex legacy that I've been exposed to throughout my childhood. This project offered me a chance to confront these deeply rooted issues, gain a deeper understanding of my family's history, and reflect on how these experiences have shaped my current perspective on the world.

Contextually, I was fortunate to work on "Google Translate: Uncut" concurrently with this project, and the two efforts mutually influenced and enriched each other thanks to relevant topic on the governmental systematic censorship. Given the sensitive nature of the topics I was exploring, I made a conscious effort to approach them with an open-minded, inclusive, and honest sensibility. This involved extensive research, including reading books and archived documents, as well as conducting interviews with a wide range of individuals, from family members to Vietnamese individuals living around the world (which is why there are lots of people in the individual credit section)

Here, I will shed some light into the process of making this in terms of graphic design and website development. For a more in-depth written version about the research, please visit the website!

1/ Visual Identity:

($)

[*]

The logo name 'Nam Bắc Một Nhà' was inspired by a photograph captured at the Ben Hai riverside in the Demilitarized Zone, the 17th Parallel, during the Vietnam War. The image signifies the deep longing of the Vietnamese people to unite their country and their unwavering commitment to brotherhood. However, mere reunification does not suffice to heal the wounds of the past; what is needed is a genuine reconciliation that fosters inclusive and empathetic conversations. Literally, the name translates to "North and South, One Home," symbolizing the unity of the two regions of Vietnam.

[=]

-/\

The primary typographic treatment in the main display features two slanted texts leaning toward each other. This can be interpreted as either a representation of a house roof or the two sides saluting each other, reinforcing the attitude of mutual empathy. The typeface used for this logo was Bourrasque family by Bureau Brut and I had to make a bit of illegal customization to incorporate Vietnamese diacritics into it.

(&)

($)

(#)

-/\

(%)

($)

This customization process involved rearranging and combining existing diacritics, and designing new ones like the hook (e.g. ‘ả’) and horn (of ‘ư’ and ‘ơ’). Although I had some experience with the Glyphs App, typeface design was never my thing. I faced various difficulties, such as figuring out proper kerning for characters like ‘ư’ and ‘ơ,’ and maintaining proper leading for stacked diacritics in uppercase letters. Additionally, there were technical issues with font features and plugins. After completing the 2 sets, I named them ‘Bánh mì’ since its slanted and narrow silhouette reminded me of the French baguette and its original name ‘Bourrasque’ is in French also. Bánh mì - a bootleg-Vietnamized-Bourrasque-Font.

[+]

[!]

I chose Acumin Pro with its condensed variance to resemble the typography commonly used in the past governmental documents/propaganda posters. Furthermore, it suggests a sense of standing still, a feeling of honesty and righteousness.

-/\

[=]

The color palette includes the main color of Light Yellow, complemented with Light Turquoise, Black, and White. The choice of Light Yellow and Turquoise draws inspiration from the tinted colors found in archived film reels of Vietnam. These colors create a nostalgic and dreamy atmosphere, evoking memories of the past in a surreal manner.

[+]

-/\

($)

(#)

-/\

[=]

[!]

-/\

Besides using typography as the main ingredients, I develop these 4 slanted stripes as an option to solidify the overall typographic structure and better control the layout design. This graphic system is of flexible usage and can be taken out either as 1 stripe or all 4 together. The most common way is to use it as the positional markers for the display typeface.

-/\

(%)

-/\

The grid system is simple yet dynamic. I aim to convey a sense of boldness and practicality by positioning all text elements at the center stage, pushed all the way to the top or bottom of the canvas. This approach creates an ample amount of white space in the middle, which can be utilized for images or left blank to further emphasize the propaganda-like look and feel.

(&)

-/\

($)

(#)

2/ Physical Touchpoints:

After much research on the preparation for National Day events of multiple countries, below is a list of touchpoints that I had brainstormed for the project. These touchpoints cover both physical and digital aspects:

Physical:

Flags and banners that can be hung up around the event area or on the streets leading up to it.
Street signs that help guide people to the event location.
Event banners that are hung up at the gate or entrance
Posters that can be displayed on walls or bus stops
Photo journal book
Gift pack that contains relevant items or souvenirs for attendees

Digital:

Stickers that can be shared on social media
Short videos
Website archive

a) A street sign

Besides the usual touchpoints, I found the adaptation of street signs to be particularly interesting. One of the subtle nuances of the Reunification event is the change in street names that occurred during the transition period between the two governments. This signifies a significant shift in the country's history and the people’s awareness about the system. I wanted to show that difference while incorporating the brand identity to street signage.

[=]

-/\

Initially, I was concerned about the cost of producing the street sign due to the expenses of printing on metal plates in Singapore. My friend, an architecture/interior designer in Vietnam, suggested that this could be done more affordably there or even on my own using spray paints and stencils. I was excited about the DIY approach, but with the deadline approaching and other project tasks to complete, I decided to outsource the production to a signage manufacturer in Vietnam. A friend who often shipped items from Vietnam to Singapore assisted with the shipping. The result was a polished street sign.

(%)

-/\

[=]

-/\

[+]

-/\

b ) A scarf

I wanted to use the yellow scarf as a touchpoint. It's a reference to the iconic red scarf or 'khăn quàng đỏ,' which was mandatory for students as part of their school uniform. Not wearing the red scarf, along with having one's shirt untucked outside of the pants, would prevent students from entering the classroom. The red scarf had both a symbolic and political significance, signifying a good or bad child of Uncle Ho (Ho Chi Minh). I saw this scarf as a valuable item and a symbol of social conformity, righteousness, and identity. I wanted to use it as a souvenir piece in the project.

-/\

[!]

[*]

For the production, I explored various options. I considered fabric printing services in Singapore but was concerned about the cost. I reached out to friends and contacts in fashion programs and inquired about the possibility of getting it done in Vietnam, where it might be more affordable. One friend suggested using the fashion lab at LASALLE and seeking assistance from a current fashion student. My mom recommended hand sewing or machine embroidery, and I decided to go with her expertise. We opted for both light yellow and light turquoise variations of the scarf, resulting in two scarfs.

I got the chance to explore fabric embroidery myself!

-/\

(%)

[!]

(&)

(%)

($)

-/\

($)

(#)

-/\

c ) Brand Guideline book & Bleed Notes

When designing print materials, I intentionally chose to work with materials and formats that are ubiquitously recognized in the Vietnamese context. The use of tape binding, as seen in this Brand Guideline book, is a typical and readily identifiable practice at print shops throughout Vietnam. By employing such familiar elements, I aimed to create a sense of relatability and cultural resonance in the project's print materials.

(%)

(#)

The Brand Guideline book instructs readers on how to apply the provided brand identities for their specific needs, ensuring consistency and coherence.

[+]

-/\

(#)

The "Bleed Notes" have a hollow center, preserving only the bleed area (hence their name), which is typically discarded during the printing process. They were crafted from the remnants of the main Brand Styleguide book, metaphorically implicating a side of Vietnam's history that is often overlooked but still deeply impactful. These notes contain over 140 images, each telling a small story about life in South Vietnam. The images were gathered from various sources, including my family, friends, and the internet, with proper citations included.

I had spent a crazy amount of time on scouting those images on the Internet. Most of the images were from this Flickr account–Manh Hai flickr.com/photos/13476480@N07

[=]

-/\

($)

-/\

[=]

($)

-/\

[+]

(%)

[+]

(%)

[!]

(#)

-/\

(#)

You can view the scanned version of the Bleed Notes online here nam-bac-mot-nha.vercel.app/bleednotes

-/\

[=]

-/\

d ) Creative Process Journal (CPJ)

Continuing the theme of incorporating local print inspirations from the Brand Styleguide book, this time I used student notebooks that I brought way from Vietnam as materials for the CPJ. These notebooks are a common and nostalgic item for those who grew up in Vietnam. This CPJ is created by binding two student notebooks together, keeping them open-flat, and retaining the original covers.

It serves as a documentation of my entire project journey in physical form (the digital form is the website.)

[=]

-/\

[*]

[+]

[=]

[!]

(#)

-/\

(#)

(&)

(%)

($)

[*]

e ) Envelope Notebook

The identity initially included the envelope as one of the touchpoints, kind of posing a challenge in terms of coherence with the rest of the materials. However, just days before the submission deadline, I had a brilliant idea: creating a notebook that contained ready-made envelopes. Each piece of paper inside is instructed to be folded into an envelope.

[+]

[=]

This item was constructed by removing all the paper from the notebook, printing instructions on them, defining fold lines, and then staple binding them back to the cover.

-/\

f ) Posters

The posters were designed to be adaptable and incorporate various illustration styles, drawing inspiration from historical propaganda posters during the war, as showcased in the examples below.

-/\

($)

These posters aligned with the localized concept, utilizing paper notebooks as the printing material. The posters aimed to promote the core values of the event and the project as a whole.

-/\

(&)

-/\

($)

[*]

Printing on notebook paper presented some challenges since it was smaller than the standard A4 size. I had to conduct numerous print tests and carefully consider the paper's placement within the printer tray to ensure accurate results.

[+]

(%)

-/\

g ) Website design

This website adhered to the visual identity, incorporating slanted strokes as the primary design ingredients.

(&)

-/\

[!]

(#)

[=]

($)

-/\

For the digital Creative Process Journal, I wanted to spice it up by wrapping the text content below the 2 slanted strokes. It gives a fun visual twist on scroll, and those slanted lines work as scrollbars.

[=]

($)

-/\

h ) Website development

This website marked a significant transition in my development journey, as it was the point where I shifted from traditional web development with HTML, CSS, and JavaScript to embracing industry-standard frameworks. Specifically, I built this website using Next.js, which introduced me to the world of modern web development.

Initially, I even attempted to incorporate TypeScript into the project. However, during this phase, I struggled to grasp TypeScript fully and ended up using the 'any' type extensively throughout my code. This practice essentially defeated the purpose of using TypeScript…

With time and continued learning, I gradually refined my TypeScript skills, understanding its proper implementation in subsequent projects. This transition marked a pivotal moment in my journey as a developer, where I moved from vanilla development to adopting more robust and sophisticated tools and frameworks.

[+]

-/\

Switching to Next.js was quite a challenge for me, considering I had zero experience with React or JSX before. It felt like a whole new world compared to the typical web development I was used to. I had to completely change the way I thought about web applications and how I developed them.

One of the challenges I faced was adapting to a different approach for handling JavaScript on the client-side when making the switch to Next.js. Converting my vanilla JavaScript DOM manipulation code to React syntax proved to be a bit tricky. Additionally, ensuring that this code executed every time the page was loaded posed a challenge, especially since Next.js is typically used as a single-page web framework. To work around, I had to use a small trick with the useEffect hook to execute vanilla script on the client-side before every page loaded. After this, I should sit back and look deeper into React in order to use Next more effectively.

[+]

[=]

[!]

-/\

To achieve the text wrapping technique on the front-end, I applied the shape-outside CSS property.

-/\

The website was set up to pull content directly from Google Docs on-demand, which was quite a challenge as I had to figure out how to work with the Google Docs APIs.

[+]

(%)

[!]

(#)

One of the annoying things about this Google Docs was that the image URIs it provided had a very short lifespan, typically lasting only 30 minutes. After this period, the URIs would return a 404 error, basically preventing me from using Next optimized image components. To fix this problem, I had to resort back to regular <img> tag.

Take a look at the github repository.

3/ Conclusion

-/\

[*]

Throughout the whole development of this project, I was constantly in a state of confusion. I had often suspected whether my project would bring any good or if there was anyone actually asking for it. However, deep down, I recognized that this topic was closely intertwined with my own identity, which had always been difficult for me to talk about. I knew that it was important to shed light on this topic, even if doing so might be seen as "cringe”. I held conversations with family and friends, and ultimately, these discussions reinforced my belief that this was a subject that deserved to be explored further. Thanks to them, I was able to learn more and more about this complex issue from diverse perspectives to the point that I eventually returned to the neutral state again. However, that neutrality now was certainly not where I was in the first place.

That process actually repeated itself several times, so it was quite an emotional rollercoaster of self-esteem, some uncertainty to some moments of overconfidence. Carrying out this final year project was particularly challenging for me as it took place just a few months after the end of my 2-year relationship. It was difficult to stay motivated and engaged, without having a supportive partner always available to share exciting new stuff with (it might be the first project during the past 2 years without the interference of my partner). However, in retrospect, this difficult time pushed me to become more independent and to delve deeper into my own thoughts and ideas, resulting in a project that was truly reflective of my own perspective and voice. I also had the opportunity to meet new people and make new friends along the way, for which I am truly grateful.

Even though honesty and inclusivity were how I approached such a topic, I still devoted much of my personal experience & feelings to this project. This was mainly because it is a tribute to my family, the closest people from my childhood, and their influence on me is significant. As a result, there were certainly some aspects that I didn't cover in their entirety, and the articulation of my thoughts may have been somewhat scattered. Nonetheless, I tried as much as possible to diversify and open up smaller related topics that could be explored further. For instance, I explored the perspectives of the American-born Vietnamese youth and the experiences of people from various sides within South Vietnam itself.

From the start, the project was intentionally born out of my empathy for those people like my family even though they might not urgently need it since it was already the past. However, in the end, I think the project was actually helping myself more than my family, to make peace with those inner doubts, thoughts that have been bottled up in my mind for years and to confront my family legacy and the values that have shaped who I am today.

I’m so happy that it received the Creative Conscience Award 2023 and got featured on Slanted Magazine #42 - Books!

(&)

[=]

($)

(#)

(%)

(#)

Thanks to everyone who helped me throughout this project, one way or another:

Special thanks to Giun Trym, Tường Vi Ng, my lecturers Joselyn, Felix, and Joanne, chị Ven, chị Tường Nguyên, anh Triết, chị Nhung, chị Phương, my dad, my mom, my grandparents, my uncle, Duy Psycoreboy, anh Tân, chị Trang, Pauline, Eka, Joseph, Tiara, Vũ Phạm, Hải Vân, Ziêm, Sinprint print shop near Burger King, and a shoutout to the display font I used–'Bourrasque' from Bureau Brut.

Individual Credits

Duy Nguyen (psychoboy)

Tiara Rivera

Joseph Tasman

Eka Purnamasari Paramitha

Pauline Theodora Tandiah

Trang Đinh

Vân Anh (marchsecondninetynine)

Group Credits

LASALLE College of the Arts, SG

Sinprint (near Burger King), SG

Design Futures Symposium 2022

Variable-Case modular font

Other works

*-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --*

(&)

-/\

[!]

Various development works I contributed to during the time in Tusitala, a creative storytelling/literary art company based in Singapore

Works at Tusitala

2024-02

[!]

(#)

An artist website focusing on claiming the traces left behind during a web development process, pondering the question of how we can observe the growth of a web page.

Victoria Hertel Velasco website

2023-11

-/\

($)

[*]

Backend development for a website exploring the impacts of digital culture on creative expression, by Singapore Art Museum.

Open Systems website

2023-11

[=]

($)

[*]

A typeface designed with generative ligatures, complemented by a website that maximizes this concept.

Form & Agency exhibition website

2023-06

(&)

(%)

[!]

A font that when moved up, it becomes uppercase; moved down, it's lowercase.

Variable-Case modular font

2023-02

[+]

-/\

($)

-/\

Visualization of human passion inside web developer tools.

Measure a machine’s heart

2023-05

08/2019 →05/2023 (expected)	LASALLE COLLEGE OF THE ARTS Singapore Diploma in Design for Communication and Experiences For the AY 2021 - 2022, I take a gap year to return to my hometown, Vietnam. I will be coming back to Singapore this August 2022 to resume my study.
09/2016 →05/2019	HIGHSCHOOL FOR THE GIFTED—VNUHCM Vietnam High School Diploma

08/2022 →10/2022	PRACTICE THEORY Graphic Design Intern – Communication & Visual Designer for the Singapore-based creative studio
07/2021 →12/2021	THE LAB SAIGON Junior Graphic Designer – Communication & Visual Designer for the Saigon-based creative agency
05/2019	INTEL PRODUCTS VIETNAM Independent Freelance Illustrator – Stage Background Illustrator for the company’s year-end event.
2017 →Now	SMALL MEDIUM ENTERPRISES Freelancer in Graphic Design – Responsible for the visual images, graphics, illustrations and concepts for clients’ needs.

07/2022	D&AD New Blood Academy – Participant.
01/2022 →03/2022	Google Developer Solution Challenge 2022 – Participant.
09/2021 →04/2022	Google Developer Student Club - UIT – Development team.
05/2021 →10/2021	Project Vietnamme—a non-profit organisation dedicated to the relationship of young Vietnamese and the Arts. – Graphic Design Consultation.
10/2020 →01/2021	Vietnamme Magazine—magazine.vietnamme.me, an online magazine dedicated to the contemporary arts in Vietnam. – Website Development, Graphic Design.
10/2017 →01/2018	Human Library Vietnam—a non-profit organisation dedicated to raising awareness to societal issues. – Graphic Design, Illustration.
08/2017 →08/2018	Project Sugar—a non-profit student-run organisation dedicated to underprivileged children – Graphic Design, Illustration, Art Direction.

2022	D&AD NEW BLOOD YELLOW PENCIL – Awarded 2022 Yellow Pencil by D&AD New Blood for the entry Duolingo: Non-fungible Efforts.
2021	RED DOT JUNIOR AWARD – Awarded “Red Dot Junior Award” under Red Dot Award: Brands & Communication Design by Red Dot Award in 2021.
2021	CERTIFICATE OF TYPOGRAPHIC EXCELLENCE TDC67 – Awarded “Certificate of Typographic Excellence” in TDC67 by Type Directors Club and will be included in the Annual of the Type Directors Club, The World’s Best Typography.
2020	LASALLE SCHOLARSHIP 2020-2021 – Awarded LASALLE Scholarship 2020–2021 to cover my tuition fee for my great performance at LASALLE College of the Arts.
2019	LASALLE TUITION GRANT – Awarded 60% merit-based tuition grant for my tuition fee in the diploma at LASALLE College of the Arts.

LASALLE COLLEGE OF THE ARTS

HIGHSCHOOL FOR THE GIFTED—VNUHCM

PRACTICE THEORY

THE LAB SAIGON

INTEL PRODUCTS VIETNAM

SMALL MEDIUM ENTERPRISES

– Proficient with the following Digital Softwares:

– Familiar with the following Digital Softwares:

– Technical Skills:

D&AD New Blood Academy

Google Developer Solution Challenge 2022

Google Developer Student Club - UIT

Project Vietnamme—a non-profit organisation dedicated to the relationship of young Vietnamese and the Arts.

Vietnamme Magazine—magazine.vietnamme.me, an online magazine dedicated to the contemporary arts in Vietnam.

Human Library Vietnam—a non-profit organisation dedicated to raising awareness to societal issues.

Project Sugar—a non-profit student-run organisation dedicated to underprivileged children

D&AD NEW BLOOD YELLOW PENCIL

RED DOT JUNIOR AWARD

CERTIFICATE OF TYPOGRAPHIC EXCELLENCE TDC67

LASALLE SCHOLARSHIP 2020-2021

LASALLE TUITION GRANT

1/ Visual Identity:

2/ Physical Touchpoints:

a) A street sign

b ) A scarf

c ) Brand Guideline book & Bleed Notes

d ) Creative Process Journal (CPJ)

e ) Envelope Notebook

f ) Posters

g ) Website design

h ) Website development

3/ Conclusion

Individual Credits

Group Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Form & Agency exhibition website

Variable-Case modular font

Measure a machine’s heart