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

(&)

(%)

($)

-/\

Kasper Florio - Atypical Swiss | Visual Analysis

An analysis into the Swiss Grid, a graphic design foundation, through the works and practice of Kasper Florio.

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

(&)

-/\

[!]

Role

Project Direction,

Design,

Writing,

Print matter,

Visual Communication,

Typography.

Date

Theme

Context

Swiss Grid has long been a solemn pillar within the graphic design discipline. However, compared to itself half a century ago, the Grid system in the 21st century has evolved into, more or less flexible and dynamic. Today I look into the contemporary application of the Grid by researching both visually and textually on a Swiss graphic designer duo, Kasper Florio for a better insight into how that tool is intensively practiced based on a variety of typographic standards in the industry.

($)

[*]

1/ Material gathering:

As this is one of the first books that I have ever produced end-to-end, I was really dedicated to not only its form but also its content. Most of my time was devoted to extensive research on the subject matter and organizing the information into distinct categories. Writing had never been my thing but I tried as hard as I could to articulate it coherently (this was before the inflation of AI writing thing).

Below is the content structure I carefully crafted in preparation for the actual writing process. It encompasses my analysis of type design, typography usage, page layout techniques, book construction, some big, some small nuances, all gleaned from Kasper Florio's works/interviews scattered on the Internet.

2/ Design process:

The general vibe I wanted to achieve for this publication resembled the graphic design look and feel in Kasper Florio’s design, a very structural, rigid, monotone, with dense textural content. However, the design should also feel a bit blatantly plain and daring with brutal treatment of images or one tiny detail that unapologetically violates the grid.

Most of the layout references I took came from the cool-looking and crazy designs and mockups on the Internet. Because I was so in awe with all those, I tried to put all of the refs together at first while hoping that the result would not turn out a big mess.

[=]

-/\

My lecturer told me not to overdo with all the fancy stuff and question me back the functionality of those interaction details I added in (for the sake of it).

But I tried le… to defend for most of them because I thought that it was my first book ever, so I should put everything I have into it. It’s like the amalgamation of all of my ideals about a book. And it wasn’t even a client project so no big deal! It was all of my stolen Instagram design saves, Pinterest moodboard images, Are.na layout references, … consciously dumped into a single publication!

(&)

($)

(#)

Slanted pages, one of the flashy details I wanted to add in

I did actually take into account my lecturer’s criticism and tried my best to ensure that all aspects of the publication came together cohesively. It was an exhausting process of balancing what to retain and what to remove to achieve the desired outcome.

-/\

(%)

($)

At first, I opted for this Laica typeface by Dinamo, which gave similar vibe to the desired look. However, I had concerns about using it since I didn't have proper licensing for the font; I had basically pirated it. Worried that this could get nitpicked, I switched to an open-source option from Google Fonts–Xanh Mono by Yellow Type Foundry, which also aligned with my vision (but for free).

3/ Production:

My first visit to a major print house was quite a learning experience, as I encountered several technical challenges I hadn't anticipated. One significant issue I grappled with was the printing of black ink, especially considering that some of my pages featured a predominantly black background. It took me a few attempts to choose the right black color and strike a balance that allowed the white details to stand out against the black backdrop.

Another technical issue that troubled me was the fact that all the images in the InDesign FA file I provided were embedded within the document because I copied/pasted them directly from source without downloading them beforehand. Consequently, the printed result for those images turned out to be disappointingly low-resolution. To rectify this issue, I had to painstakingly download each image and then relink them to the InDesign file. It wasn't a groundbreaking revelation, but it was certainly something I should have been aware of from the start!

[+]

[!]

-/\

[=]

Small version of the publication to check the order of the pages

There were lots of other minor issues cropped up all over the place, stretching the timeline way too out of hand.

Eventually, the very first version of the book saw the light, very sketchy, almost on the verge of falling apart! All held together thanks to my prayers… It was the last-minute attempt before the submission deadline of the module.

[+]

-/\

($)

(#)

After I got the the ‘Certificate of Typographic Excellence’ by the TDC, the school sponsored the printing of an additional 10 copies of the book to be showcased at the TDC exhibition. This time, I had the opportunity to take more time and prepare the books with greater care and attention to detail.

-/\

[=]

[!]

-/\

Cover and the content page

-/\

(%)

-/\

(&)

-/\

($)

(#)

[=]

-/\

(%)

-/\

[=]

-/\

[+]

-/\

[*]

I’m so happy that it received the TDC and the Red Dot in 2021!

-/\

[!]

[*]

-/\

(%)

[!]

Bảo Anh as visual designer and copywriter Chen Michael as instructor

Yellow Type Foundry for Xanh Mono & Darker Grotesque typefaces

Design Boom for interviewing content

AIGAEyeonDesign for interviewing content

Ligature for interviewing content

Work done at LASALLE College of the Arts

Printing done at Pixel Tech Pte Ltd

Individual Credits

Bao Anh

Chen Michael

Group Credits

LASALLE College of the Arts, SG

Pixel Tech, SG

Vietnamme Magazine

Works at Tusitala

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 .--. ** --*

(&)

-/\

[!]

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

[!]

(#)

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

Nam Bắc Một Nhà

2023-01

-/\

($)

[*]

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

(&)

(%)

[!]

Transform Google Translate into a platform battling against censorship!

Google Translate: Uncut

2023-01

[+]

-/\

($)

-/\

A website with its navbar in the middle?

The navigation bar that is in the middle of nowhere

2022-08

**********************************************************************************************************************************

--^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~-

-/\

Site is built on Next.js with Tailwind CSS. CMS is from Notion API with react-notion-render ↗︎ by @9gustin for data rendering and upload-notion-images-to-cloudinary ↗︎ by @guillermodlpa for hosting images form Notion to Cloudinary. You can view the database on Notion here notion link ↗︎. Other dependencies include Prisma + PostgreSQL, Framer Motion, probe-image-size, seedrandom, react-lazy-load, ... See the Github repository of the site here github link ↗︎.

Typeface is Alegreya ↗︎ designed by Juan Pablo del Peral, Huerta Tipográfica. Mono typeface is Select Mono ↗︎ designed by MICHAEL McMASTER.

The idea of the site can be observed via the 3D View of the developer tool of Microsoft Edge. Inspect the site to see.

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.

1/ Material gathering:

2/ Design process:

3/ Production:

Individual Credits

Group Credits

Previous

Next

Other works

Victoria Hertel Velasco website

Nam Bắc Một Nhà

Variable-Case modular font

Measure a machine’s heart

Google Translate: Uncut

The navigation bar that is in the middle of nowhere

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