Graphic Design Portfolio—Bao Anh Bui

Contacts: → Email: [email protected] → Instagram: @bao.anh.b Bao Anh Bui—Portfolio →Facebook:BaoAnhB → Behance: Bao Anh Bui My name is Bao Anh Bui, an emerging graphic designer. My dedicated expertise circulates within the intersection of editorial design, illustration, website development & graphic design irrespective of any medium whether print, digital or experimental. Thank you for spending time viewing this portfolio. 01

Portfolio Content See more of my works here: → Instagram: @bao.anh.b → Behance: Bao Anh Bui P g . 0 4 The most recent collection ofKasperFlorio–AtypicalVisualAnalysis works created during PV ietnam gme Ma.ga zi1ne 4 the year 1 C.E. (Covid Era) from 2020–2021 including : vpiusbualicl iadteionnti,t y , SPu p erhe g ro:T a b.ao T2am m y5 w& ecbasleitned, aillur,stration, most of which are done as parts of the school submissions. Pg. 32Remeasure the Liturgy – 2022 Liturgical Calendar 02

Next –> Kasper Florio—Atypical Visual Analysis 03

KAatysppiecraFl Vloisriuoa—l AnalysisDNeocveemmbbeerr 2020 – 2020 Background fig.: Cover 04 of the book.

Kasper Florio—Atypical Visual Analysis November 2020 – December 2020 Observational research writing Principal Typefaces used: Dimensions: Finishing: Client(s): Art direction – Darker Grotesque. 170 x 240 mm (close size.) 104 pages with soft cover, die-cut – School Project— Editorial design – Xanh Mono. and open-thread binding. LASALLE College Book design of the Arts. Book binding 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. It was selected by the judges at TDC – Type Director Club to receive the “Certificate of Typographic Excellence” in student category. All figs. above: Book cover. 05

Kasper Florio—Atypical Visual Analysis The publication content is divided into By applying the knowledge 2 main sections: researched from the designers, – I/ In-depth personal analysis: the publication is designed with a Personal observation of the coherent typographic and grid system designers' works in relation to a in order to provide an in-depth source variety of typographic & printing of information for the readers. criteria. Images and graphic elements – II/ Interview with Kasper Florio: are carefully thought in terms of Public interviews of the designers placement, size and quantity. Special with magazines and publishers. organization of information utilizes cross-references and interconnected captions. All the physical features in this publication like the flaps and slanted pages are intentionally planned to control the readers' reading flow efficiently. Fig. above: Book cover. 06

Kasper Florio—Atypical Visual Analysis All figs. below: Featured pages 07

Kasper Florio—Atypical Visual Analysis All figs. below: Featured pages Fig. 1 08

Kasper Florio—Atypical Visual Analysis All figs. below: Featured pages 09

Kasper Florio—Atypical Visual Analysis All figs. below: Featured pages 10

Kasper Florio—­ Atypical Visual Analy- Digital View All figs. above: featured pages in digital display. 11

Kasper Florio—Atypical V-Process Documented The process is taken from step to Fig. 1 Fig. 2 Fig. 3 Fig. 5 step within 2 months: – Structuring information flow Fig. 4 researched about the selected designers. Fig. 6 – Transferring all the collected information from ideas and points into textual materials. – Researching what visual approaches & references would be appropriate for the content. – Constructing digital layout in Adobe Indesign. – Printing process including color prototype, final printing and book binding. See my Notion for more of my Fig. 1: Mapping of information Fig. 2: Textual content material. Fig. 3/4: Prototype of the publication Fig. 5/6: Prototype of the publication researching, writing and design collected from personal observation. to check the color as well as the in 1:1 scale to check the readability, process via the following URL: correct order of it. legibility of the text, the clarity of www.notion.so/dautruongthu/Kasper- pictorial materials, as well as other Florio-Atypical-Swiss-Visual-Analysis- graphic elements. d9eb5b7265694a098371d86adadc cd94 12

Next –> Vietnamme Magazine 13

JSaenputaermyb2e0r221020 – 14 VMieatgnaazminmeemagazine.vietnamme.me Background fig.: The Vietnamme Magazine website.

Vietnamme Magazine magazine.vietnamme.me September 2020 – January 2021 Web-based publication design Principal typefaces used (for the Dimensions: Additional credits: Client(s): Digital Illustration website & brand identity): N/A (Digital). – Dieu Ly Nguyen (Co-designer of – Vietnamme Maga- Website development – Work Sans. the website). zine from Project – Fraunces. Vietnamme. Vietnamme, an art organization in Vietnam, had been proposing the idea of a web magazine platform that focuses mostly on how the youths define, and challenge the boundary of art regardless of form. My responsibility is to create digital illustrations for the 2 articles of the magazine. Additionally, I with another teammate were asked to develop the website from scratch due to the unwanted lack of web developer. Packed with an entry-level background of HTML (let alone CSS), I managed to learn while successfully developing a full- fledged website. Fig. above: The Vietnamme Magazine website on Computer Lab at LASALLE College of the Arts. 15

Vietnamme Magazine Article Illustration Article: Not Just Art – An introducto- Visual Direction: Principal Typefaces used: Tool(s) used: ry article to our freshly-baked maga- Visualization of higher-dimensional – Monotype Bodoni. – Cinema 4D with Corona Renderer. zine platform. geometry. – Linotype Univers. – Adobe Photoshop. For a unique welcome to the Fig. 1 Fig. 3 magazine, the concept of hyperspace visualization, to be clearer, visualizing 4D objects is ideally selected. The mathematic complexity of multi-dimensional geometry really resembles the digital idiosyncrasy of the magazine spirits, thereby triggering the curious minds. All of the images are made based on my own understanding of various 4D visualizing methods and higher- dimensional theories throughout online articles, publications and researches which can be found via the following URL: http://eusebeia.dyndns.org/4d/vis/vis I am neither a scientist nor a mathematician. Therefore, the works only serve its display purpose. Fig. 2 Fig. 1/2: 4D equivalent of a cube Fig. 4 – Hypercube Fig. 3: 4D equivalent of a tetrahedron 16 – Pentachoron Fig. 4: 4D equivalent of a sphere – Hypersphere Fig. 1 (next page): \"We observe the world with 4d anime eyes\" Fig. 2/3/4 (next page): \"The slices of reality from my perspective\"

Vietnamme Magazine Article Illustration Fig. 2 Fig. 3 Fig. 1 Fig. 4 17

Vietnamme Magazine Article Illustration Article: A Compassionate Perspec- Visual Direction: Principal Typefaces used: Tool(s) used: Fig. 1 tive from the Arts – How \"Ròm\" – Stretched & broken pixelation. – Xanh Mono. – Adobe Photoshop. bridges the societal wealth gap. – Sharp-angle & deconstructed – Chapman Condensed. shapes. For an article focusing on the relationship between Arts & Humanity, my art direction is inspired by the pixelated deconstruction of acid graphics fused with film stills from the referred movie – \" Ròm\". It is to suggest how the Arts harmonized with the humane morality & ethics. Fig. 1/2 & Fig. 1/2/3 (next page): Some Fig. 2 screenshots of the article illustration pieces on the website. 18

Fig. 2 Vietnamme Magazine Article Illustration 19 Fig. 1 Fig. 3

Vietnamme Magazine Website Design Principal typefaces used (for the Dimensions: Tool(s) used: website identity): Digital Screen (Various) – HTML/CSS/Javascript. – Work Sans. – Wordpress. – Fraunces. – Adobe Photoshop. Tremendous efforts have been spent in this website. Luckily, me with my teammate could save more time by utilizing Wordpress layout to design the website without any coding experience. However, to make the website more experimental since it is the first time I had ever done such a thing, I had spent quite much time learning some basic Javascript on my own and incorporating it into the web. It is purely vanilla Javascript without any industry-standard frameworks. Fig. 1/2/3 & Fig. 1/2 (next page): Some Fig. 1 Fig. 2 screenshots of the website interaction Fig. 3 and interface. 20

Fig. 1 Fig. 2 21

Vietnamme Magazine Website Design Fig. 1 Fig. 2 Fig. 3 Responsiveness is one of the quality Fig. 1/2/3: The layout and the logotype Fig. 1/2/3 (next page): Interactive necessary for a magazine website. adjust themselves in response to the stickers on the website by clicking. Since we made use of Wordpress screensize. flexbox-based layout, the various size of digital screen is not our problem. I also did a jQuery responsive logotype for the magazine that decreases and increases the number of letter 'm' according to the screensize. You can view it under the footnote of the website front page. 22

Vietnamme Magazine Website Design Fig. 1 Fig. 2 Fig. 3 23

Next –> Superhero: Tabao Tammy 24

STuapbearohTearom: myMJaanrcuhar2y0220121– 25 Background fig.: Drafted printed poster for the school project.

Superhero: Tabao Tammy January 2021 – March 2021 Visual identity design Principal Typefaces used: Dimensions: Client(s): Typeface design – System85 Pro Mono. Various – School Project— Digital Illustration – Custom typeface. – 297 x 420 mm (for poster). LASALLE College Character design of the Arts. For the second half of level 2 Design 26 Communication at LASALLE College of the Arts, we are asked to create a visual identity for a fictional character, a superhero with superhuman abilities. The outcome must involve not only the usual identity assets like logos or typeface system, but also an illustrated character design in action printed on an A3 poster. The concepts as well as the names of the superheroes were assigned by our lecturers so that we only needed to choose 1 out of 4 provided characters to develop more from that. My selected figure is Tabao Tammy who is described in the bio: “A packer by day and a vigilante by night, Tabao Tammy goes hunting for trouble makers and catches them by immobilizing them with her high pitched screams, and then wrapping them up in rolls of cling wrap. Her weapon of choice? Cling wrap!” Fig. above: Drafted printed poster and visual identity submission for the school project.

Superhero: Tabao Tammy Visual Identity The visual identity is designed based Main logomark Compact logotype: Extended logotype: on the modular typefaces around the Colors: 2000s. The logomark is developed to mimic the image of a pulp/plastic food container. It is also the custom lowercase letter 'T' for the logotype. The color scheme palette includes complementary scheme of yellow & purple as well as the neutral black & white duo. #ffd056 #3d1cfc #000000 System85 Pro Mono by Colophon Typographic system: foundry is selected for the system of typography. I had actually gone System85MonoPro-Regular through a few other monospaced ! \" # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A fonts but only System85 can deliv- B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \\ ] ^ _ ` a b er the raw feeling of an outdated c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ computer operating system like Windows 95. 27

Superhero: Tabao Tammy Custom Typography I also crafted a custom display '0123456789 .,- 0123456789 .,- typeface that matches the feeling of abcdefghijkl abcdefghijklmnopqr the logotype. However, I don't have mnopqrstuv stuvwxyz much time; therefore, the glyph list is wxyz ' sort of limited, only the Latin letters 77pt size and numerical characters. 86pt leading The typeface is characterized 'tabao tammy' tabao tammy by the short x-height in relation 77pt size to the body width, mimicking the 'tabao tammy' tabao tammy computer graphics look back then. 97pt size The typeface also introduces a tabao tammy blackslanted structure that would make it even more like an extra- extended font. 'tabao tammy' 117pt size 28

Superhero: Tabao Character Illustration (Poster) Fig. 1 Fig. 2 Character features: Poster concept: The poster is – The character is warped in a full- developed as that the character is reflectance and glassy skin capable a plastic action figure toy which is of invisibility. commonly sold at the supermarket. – Her shoes are designed with a The idea is around the self- dynamic look indicating speed and actualization of the hero as only a adaptability. toy, as well as the self-referencing – Her long ear is also an indication of the 3D toy packaging box as only of her identified pronouns – she/her/ a 2D printed poster. Despite the hers. 90% cynicism, there is still a 10% of – The overall form is mostly made of sincerity in which the superhero will blobby, organic and dynamic shapes. try to protect its owner at all cost (The advertising line at the bottom of the poster.) Fig. 1: Finalized digital poster. Fig. 2: Details of the poster. 29

Superhero: Tabao Tam- Character Development Experimentations with character faces, hairstyles, sneakers, hand gloves, ... See my Notion for more of my researching, writing and design process via the following URL: https://www.notion.so/dautruongthu/ Superhero-Tabao-Tammy-brand- identity-e0983dfa92004e178bafa41d 708b6185 All figs. above: Drafted digital poster. 30

Next –> Remeasure the Liturgy—2022 Liturgical Calendar 31

RRt2hCee0emam2Llee2eitnauaLdsrsitgauuuryrrre—egitchaelAMparriLlc2h022012i1–turgy—2022 Liturgical Calendar Background fig.: 2022 Liturgical Calendar 32

Remeasure the Liturgy—2022 Liturgical Calend- March 2021 – April 2021 Calendar Design Principal Typefaces used: Dimensions: Finishing: Client(s): Editorial Design – Adobe Jenson Pro – 200 x 340 mm (closed size.) 65 single-sided pages, o-wire bind- – School Project— ing, translucent paper. LASALLE College of the Arts. In light of the world's ever increasing cynicism due to myriad of chaotic events from 2020 up to now, faith has never been so seriously demanded. Scarcity of trust in human has opened the doors for us to once again believe in God. Particularly, spiritual beliefs have aided people to reinstate their well-being, keeping them mindful and resilient and in turn, addressing the trust issues in the human-to-human relationship. Christianity is among those influential belief systems today. However, Christian belief, from my perspective, has to be re-contemplated by oneself in this modern world. Rethinking the notion of Christianity is the purpose of this 2022 Liturgical Calendar. It is to uphold alternative ways to reread the meta belief system and review the experiences of observing calendar in relation to God. Fig. above: Calendar Cover with a few representative spreads. 33

Remeasure the Liturgy—2022 Liturgical Calendar This week-based calendar is crafted to effectively indicate various dates for celebrating saints and the Lord Jesus Christ in the Roman Rite of the Catholic Church. It is also a calendar for those who believe to commemorate the divine experiences God had been going through, to witness the life and work of Jesus Christ. Besides observing it, the other important objective of this calendar is to encourage us to live our life in parallel with God's life. That being said, every page is printed single- sided so as the calendar users will be able to make textual notes or stick images onto the other unprinted pages, constructing a lively and personalized relationship with themselves and with God, equally. Although being a Liturgical item, this calendar embraces very little Christian Iconography to suggest the detachment of the worshippers from Christian pictorial representations and visuals, which are dominantly manipulated by the White culture. The way the users take note or decorate the calendar will define its own representation of God. All figs. above: Representative pages. 34

Remeasure the Liturgy—2022 Liturgical Calendar All figs. above: Representative pages. 35

Remeasure the Liturgy—2022 Liturgical Calendar All figs. above: Representative pages. 36

Remeasure the Liturgy—2022- Special Features In order to relive the Christ's life, the flipping flow: counterclockwise 01: the past week 02: the following week calendar is designed to be inversely flipped through, in which it has to be 01 02 02 flipped from rear to front side when 02 01 01 entering a new week (adding a new page each week, opposite to the direction of a regular calendar.) By this reverse flipping, the experience of measuring time in Liturgical context is also reimagined. The refulfilment and the regeneration of life is implied by the completely and fully stacked pages at the end of the year when you have been going through all the days and nights. For that it is the gift that Lord give us at the end of Time to see what we had done instead of the expected emptiness of a few last pages usually seen from other regular calendars. translucent paper Moreover, the calendar can be seen 37 through by the usage of translucent paper, and because the pages of the past is stacked below the present page, so that the past and the present will be merged and observed all at once. See my Notion for more of my researching, writing and design process via the following URL: https://www.notion.so/ dautruongthu/Remeasure-The- Liturgy-Liturgical-Calendar-2022- 32fde3e0e9154c7aa01dfc11c ee30451

The end—Thanks for viewing Contacts: → Email: [email protected] → Instagram: @bao.anh.b → Facebook: Bao Anh → Behance: Bao Anh Bui 38