Case Study
Sang Noire Webcomic
About the Project
Sang Noire is a mystery webcomic set in a 1920s-inspired dark fantasy world. Its art style is influenced not only by other contemporary comic artists but also by the juxtaposition of the Art Deco and Art Nouveau styles popular in the early 20th century.
As the webcomic creator, I write the script in collaboration with a team of contributing authors. I then draw thumbnails, create art, design layouts, and add typographical elements for each page. Below is the process I followed for creating the cover of the first book and an example of how I adapted my original book-style layouts for vertical-scroll-format platforms.
Book Cover
I began the cover design process with a research phase, compiling references from contemporary graphic novels as well as vintage graphics and advertisements from the 1920s. I also referenced art created by one of the contributing authors as inspiration.
Both the organic motifs of Art Nouveau and geometric forms of Art Deco influence Sang Noire’s art style, so I wanted to explore both styles when considering my approach to the first volume’s cover. Ultimately, I decided on one of the Art-Deco-inspired layouts for the first volume. My intent was to use angular, geometric Art Deco motifs to express the story’s relatively grounded beginning in contrast with its descent into darker and more surreal themes in later volumes. At that point, I plan on incorporating more Art Nouveau elements to convey the thematic shift.
Book Layout
I begin every page of Sang Noire by rereading and annotating the script that I created for the chapter. I then draw some of its key beats as expressed through character action. After establishing the forms and motion that I want to highlight, I create several thumbnail variants for the page and compare the options.
This page represents a downbeat between action-packed scenes, so I used a full-width horizontal panel at the top to create breathing room. I used a vertical panel to highlight the uncertainty the characters felt descending the stairs into darkness. While it’s unconventional for a vertical panel to be on the right side of the page, I felt this layout conveyed the sense of foreboding I was looking for.
Scroll Format
Even though I draft my pages in book layout, it’s important for me to be able to adapt them to vertical-scroll-layout to reach the widest audience possible. For this page, I had to change the horizontal full-width panel at the top of the page to something else—unaltered, it would have been far too small to be legible on platforms such as Webtoon. This also allowed for the opportunity to see the character’s mannerisms more closely.
To achieve the same “breathing room” effect in a narrow aspect ratio, I needed to create a longer vertical wait time. I approached this task by breaking the first panel into three separate panels and staggering them on the horizontal axis.
The next two panels didn’t stray far from the page’s original layout. However, since one of them was irregularly shaped, I had to extend the bottom right corner of the image and draw in new details to preserve the composition. The fourth panel extended down to reach the bottom of the page in the original layout, but since there is no height requirement for any given panel in a vertically scrolling comic, I was able to crop to the characters and focus more on their expressions.
The new layout served the final panel well. Extended to full width, it could take up all the space on the phone screen and convey a sense of looming danger. To accomplish this, I extended the wall to the left of the panel.
Finally, I redid all the typography and speech bubbles on the page. I scaled up the text to be legible on a small phone screen and moved the speech bubbles further off each panel into the break space, where they would cover less of the character acting.
While converting the page between book layout and scroll format certainly presented some challenges, it also created new opportunities to complement and emphasize new story beats. Thoughtful adaptation decisions allowed me to make the best of challenges and opportunities alike.
