documentation

Refugium

A secret is bound to get out. The moment you utter it or write it down, the secret ceases to be a secret. If you really wish to keep a secret until the very end, only dying silently will do.

Keywords

  • the gaze
  • protecting your sanctuary
  • silent love
  • inner journey
  • taboos
  • freedom of thought
  • law and technology
  • privacy in the digital age
  • borders crossed
  • media and the public
  • unreliable memories
  • the inaccessible

Favourite Pages

Milestones

  • first multi-year shrine to be finished
  • addition of info boxes, purchase notes and definition tooltips
  • animated link hover effect
  • grunge brushes for transitions

Making of

Design

  • A lot has already been said in Editor’s Note.
  • Natural Successor

    From the perspectives of technique, design and content, Refugium doesn’t really introduce many new elements, but is continuation and refinement of the shrines that have come before. Like the revamped Dornenkaefig, it includes graphical elements in the footer (though as a spontaneous decision). Like Dornenkaefig and Sway, poetry is an essential element that conveys mood and message, and is even an element of presentation this time around. (Going forward, I want to weave poetry into my sites much more and much more strongly.) Like various other shrines, several topics I want to talk about are united under a common theme to be discussed in relation to each other.

    Most notably, the shrine is a successor to In Another Dream, which was conceived as part of the new Six Chances collective from the start. Like its predecessor, Refugium strives to offer an element of surprise as to how content is presented with every new segment (page) while keeping a cohesive design. Therein lies much of the joy of designing the shrine, and I hope that it’s just as pleasant for a visitor to browse, whether or not they read the shrine. Also like its predecessor, it aims to show off the beauty of manga panels, though it accomplishes that to a lesser degree, or rather differently, by putting emphasis on its header rather than on individual images.
  • Newspaper Style

    Newsflash, the page that introduces the story and its character, is one of my favourite pages of the shrine because it was so much fun to work on every aspect of it. I knew from the beginning that I wanted to introduce the story by way of a newspaper-like report, to keep in tune with the steady stream of news in the story and the important role of the media. In terms of content, that meant that I adapted a deliberately different writing style for this page: as succinct and factual as possible, dispensing with flourishes and analysis entirely. I wrote each sentence very carefully and rewrote things multiple times until I was satisfied with syntax and flow, which really is the essence of playing with language — pure joy!

    In terms of design, this is actually the page that determined much of the shrine’s design. I knew that I wanted this page framed and in columns, to represent the newspaper, and that I wanted the main heading to be off-set and break through the frame. I also knew, however, that I did not want all pages framed; in fact, Refugium was intended to be a one page shrine at first, with alternating framed and unframed sections. I did not know then, however, that each page would receive such a distinct look in the end, with the h3 style in particular taking on four different forms.

    Though this was one of the first pages to be finished in terms of content, it was not until 2022 when I worked on coding the layout that it occured to me to include the profile pictures in the column view as well. The plan in my mind up to that point had been to just insert a row of images at the bottom of the page, without caption aside from the characters’ names. In practice, that looked quite detached, and I’m glad I spontaneously came up with the vertical arrangement. (It somewhat reminds me of Altruism, an old Subaru Sumeragi shrine, with its vertical gallery thumbnails woven into informative pages.) The image styling, in turn, influenced a row of things, as I will get to in a moment. The subtle half-tone pattern of the images was fun to include, as was trying to come up with short captions of uniform length. And the image hover effect, which is supposed to mimic cutting out newspaper articles of interest, is entirely unnecessary and thus self-indulgent.
  • Manga Panel Experiments

    As becomes evident when leafing through the pages, images are integrated in a variety of ways, in contrast to their more consistent integration in my previous works. There are two explanations for this that go beyond choosing a presentation suitable for the content of each segment. Both explanations come from the same place: I had no idea how to integrate any of the images into the content before and even while working on the shrine. Actually, aside from the Newsflash introduction page and the Macaulay sequence, no images were planned for the content, as I wanted visitors to see Shimizu’s artwork in its original context with their own eyes. (This is also the reason I made the deliberate choice not to make any images enlargeable, even though I very much wanted to show off her beautiful art. Potential readers should get the full experience that is so dear to me from the manga itself, not from my site!)

    The first explanation is that I wanted to experiment with different methods of presenting the majesty of b/w manga panels specifically, rather than treating them like any other image, in preparation for the manga projects that are planned for Six Chances. I’d been very impressed with Lucas’ latest network layout (which had already inspired In Another Dream), and Aku’s layout for her Kageyama shrine, Long Live the King. Though I had no access to either while working on this shrine, their memory inspired me and spurred me on. The second explanation is that I was working towards the Macaulay sequence, the final image element on the shrine to take shape, and a key moment in the pilot and in the shrine both. I had high expectations for it, and wanted it to be visually impactful out of respect for Shimizu, but had absolutely no idea how to present it.

    In the end, I came up with 4–7 methods (depending on how you count it, including the footer) while toying around. The image on the MRI scanner page was one of the first graphics to be made (in 2022), with the intention of breaking up text and making that page less boring to look at. It is not quite in line with the rest of the shrine’s visuals, and reflects the uncertain visual style I was flirting with at the time. (I thought blue watercolour blotches and gold sprinkles as a dominant theme for the shrine’s graphics might work.) I decided to keep the graphic as is because I was so proud of it though (it stitches two unrelated manga panels together), and the (decorative) text I had covered its odd shape with became a returning element in the pages that followed. On another front, the newspaper format for Newsflash defined the profile pictures (intended to represent photos), which in turn shaped the tilted “photos” on In the Eye of the Beholder, until finally, the presentation of the Macaulay sequence — that I’d been so afraid of botching — became a natural continuation of that.

    Speaking of poetry, there is such a poetic quality in the composition of Shimizu’s manga pages, i.e. in the arrangement of her panels… The Macaulay sequence on the shrine was initially named “poetry in motion”, and my ambitious self had wanted to edit a big collage of the panels that would take up the full width of the window, to mimic how the man seems to jump out of the page in the manga. I’m very happy about how it turned out in the end though; it looks organic, and I love that particular CSS snippet very much!
  • Font Questing

    I spent a ridiculous amount of time on font selection for this shrine. I have no doubt I had already spent quite some time on the main body font back in 2018. When I resumed work on the shrine in 2022, I spent over five hours crawling several big font sites to gather newspaper- and typewriter-like fonts (serif fonts in general), and then some more hours on narrowing down the selection while experimenting with them in Photoshop and Brackets’ live preview respectively. (In fact, I hit up Yuuka with no less than four different header fonts to vote on.) I ended up cutting many fonts from the final version so as not to overload the site, but it’s still nine fonts (plus one more for the link buttons) in total — nine fonts that you see the moment you open the shrine at that! It was hilarious to talk to Andrea and to complain about the font selection part of shrining, which we both dread, despite our great love for typography… It paid off here though, and my personal favourite, aside from the header’s main font, is the one used in the header’s hidden message.

Content

  • Extra Guidance

    I added information boxes and definition tooltips for manga- and community-specific terms for the first time, and retroactively applied the latter to existing shrines. They serve the purpose of informing visitors not as familiar with certain terms so as to make the site’s content, and shrines in general, more accessible. The reason I thought of that only after years of making shrines is because I had not shown my sites to RL acquaintances much before; now, several newer acquaintances of mine, who are not at all acquainted with manga and fansites, have shown an interest in browsing my sites. The information boxes, while serving as an additional method to break up blocks of text, were more a necessity due to the subject matter though. (Firstly, the shrine mostly revolves around the self-contained pilot chapter, but provides glimpses into the series as a whole. Secondly, I needed to write a definition of oneshots and pilot chapters anyway, as that blurb shall be reused in future projects under the new collective.)
  • Purchase Note

    In the same vein, I have also provided an explicit purchase note as a brief introduction to localized editions of the manga for the first time. As Six Chances will focus on manga, I want manga — physical manga as a medium — to receive more focus in such details, too. I initially added the purchase note post-release in the credits section, but, seeing how many lovely visitors and friends messaged me to say they’d like to check out the manga (at least its pilot chapter) before or after reading my shrine, so as to derive more enjoyment from it (the kind of compliment that honours me greatly!), I decided to move the note to the index — in anticipation of doing the same for future shrines, and most likely retroactively applying this to existing shrines.

    Something I feel conflicted about is that I don’t want to blatantly mention or link to scanlation, which I do not want to publicly endorse on a site accessible by anyone. As before, I prefer to leave it at the nod (and link) to the scanlation group(s) that I refer to only as a fan translation, though that mention has always served a different purpose: declaring what source (translation) my analysis is based on, and sourcing quotes. It’s a pity that I can’t provide clearer reading guidance than that, because, unfortunately, the manga depicted on my sites are frequently not officially available in English. I have decided to leave that kind of search up to the visitor though, and trust that friends will poke me to ask for more information if they are lost.
  • Translation

    Due to the great love I feel for the poetry imminent in Shimizu’s works, and this pilot in particular, language was even more important to me than usual — if that was even possible — when writing this shrine. I mention on the shrine how the melancholic mood of the pilot’s final pages captured me, which extends to the ending’s English translation by the scanlation group Dragon Voice. Still, I made the deliberate choice to edit most lines while comparing the official French translation with the inofficial English translation. I wanted both to refine the delicate text (also in its phrasing and conciseness) and to work in the French interpretation to offer another look, since visitors who are interested would get to read the inofficial English translation either way. I don’t know about others, but to me, seeing different phrasings of the same lines highlights the beauty of translation and elicits pure delight!

Retrospect

Long Creation Time

Refugium is my first shrine after an unintentional, but necessary break from shrine-making. Not counting two revamps in 2017 (Awakening and Dornenkaefig), it has been nearly 5.5 years since the last entirely new project (In Another Dream was released on 31 October 2016). It is the first shrine to be completed in my very new stage of life, and is the first overall to have taken this much time until completion. It’s baffling, but not at all surprising, to look back at my output in 2015–2016 (11 released shrines, 2 of them incomplete, on top of various WIPs and other sites), which only goes to show how different the life I lead used to be.

Refugium’s long creation time was grueling, differently so between the first few years and then the final two months. As I have outlined in Editor’s Note, the timeline was approximately as follows:

  • 2018/09: wrote all the parts directly related to the pilot (page 1–4, and page 5 up to the end of “Forbidden Feelings”); created an empty b/w header featuring Reed’s hands and Kevin’s profile only; coded a skeleton text body
  • 2021/04: added a panel of Kevin’s mother to the header; applied textures
  • 2022/02: slightly shifted the right part of the header, filled its empty spaces with poetry, selected appropriate fonts to finish the header; designed and coded the rest of the site after selecting and finalizing all fonts (footer, navigation, headings); edited all of the text again, fine-tuned a lot of transitions, especially on Front Page, re-added previously cut passages to In the Eye of the Beholder; wrote Editor’s Note
  • 2022/03: finished writing On Taboos and Trespass and wrote On Singularity

After all the work I had done in 2018, I was convinced that it would “only” take finishing 1–2 “short” thematic pages and coming up with the layout to cross the finish line. What I didn’t anticipate was hitting a graphics, design and writer’s block so severe that it blocked me for three and a half years, to the point that I had severe doubts that I would ever finish the shrine — even though it was constantly in my thoughts during all those years, and blocked me from fully committing to other projects. Any time I had breathing room in my everyday life during those years, I would be haunted by the self-imposed obligation to use all resources necessary to work on this shrine. Naturally, that kind of attitude was detrimental to the creative process, and made me too intimidated to even open the project. At the same time, I knew I had to finish it in order to move on, because I was too much in love with what I had already written (my favourite page of the shrine in particular, In the Eye of the Beholder), and the subject was too dear to me to let it all have been in vain.

Looking back on it now, the time spent struggling with this shrine and the time I spent on my life outside of that struggle have been full of valuable lessons. In some way, the long creation time was inevitable, both because I was busy with life and thus did not have the free space to think the shrine to its end as I wanted to, and because I was struggling with very similar things offline. In any case, I am also glad that this shrine could take all the time it needed to mature — along with me.


Expectations and Limits

In terms of content, my motivations and thus goals for the site consisted of two desires: firstly, to sort out my feelings regarding the pilot’s ending, to make an attempt to understand its protagonist, and to digest the ache that the story has left me with; secondly, to pursue the question “does freedom of thought necessitate inaccessibility of the mind?” to its end. In terms of design, my ambitions were also twofold: I wanted to recreate the final pages of the pilot so as to convey the ending’s mood and my own heartache, and I wanted to render the Macaulay sequence in a way that does Shimizu’s artistry justice. In retrospect, I hold that I could not have done it any other way because I did not and do not want it any other way, but I concede that it was too heavy for that particular stage in my life. In the following, I’ll address my main struggles with this project based on these goals.

Content-wise, I struggled most with the thematic parts because they were so complex, and because I wanted to analyze them in detail. The sections that touch on law in particular blocked me because I felt so self-conscious, and it was the same kind of struggle that I was experiencing regarding my PhD thesis. My respect for law often makes me feel inadequate as a lawyer and researcher. I knew that I was writing to a layman audience on the shrine, but as I was spelling out things that are basics to fellow lawyers in my daily life, I kept wondering whether there was a point to any of the text. Not to mention there was just SO MUCH TEXT, on single pages at that, and it got me all worried about the visitor’s perspective again, even though I’ve dealt with these same worries before on many other shrines. (It’s ridiculous that I initially thought this could be a one page shrine.)

The sheer amount of text on the shrine, especially the long thematic sections that all flow into each other and had to be precisely delineated so as to avoid repetition, coupled with the long creation time are chief reasons for dragging out the project. Firstly, it meant that anytime I went back to the project (which was probably over ten times over the years), I had to reread the whole thing, and think everything through from the start. My notes and outlines couldn’t save me from that, since my thoughts on the delineation of the theme sections were muddled. (It wasn’t until the end that I knew what exactly to put on the On Singularity page. For most of the project, it was a catch-all page, but I didn’t want to think about how to unite all the leftover themes. I shuffled things around a lot, entire paragraphs even, to get there.) The thing is, having the attention span to read all of it, think about all of it, and then write it all from start to finish is a rare luxury when you’re working and simultaneously writing on your PhD thesis, which requires the same set of cognitive resources.

Secondly, it led to the text to be edited to death over the years. I have revised each text as many times as I returned to the project. Though it means that the result is very polished and concise despite the length, I must admit I’ve got mixed feelings about it. On the one hand, there are cases where returning to a text you’ve allowed to rest for some time leads to pleasant surprises with great pay-off: I’d always thought that the initial texts I had written were perfect already, but some years later, I saw the seams, and added many passages to connect the paragraphs better, especially on the landing page. On the other hand, perhaps this could also have been caught during a minor revamp years down the line. You are bound to keep finding more things, a word or a sentence that you can improve. But at some point, you need to finish the project so you can let go of the text! You need to invest the attention and time to the parts that need executing, rather than get hung up on details. It’s the age-old issue with perfectionism and the pareto principle, really.

I must admit, by the end, I was so sick of it all, I finished writing the thematic pages and hardly even read through them anymore at the end. Though that sounds like I didn’t care anymore, that was actually a good thing, otherwise I’d have had more time for doubts again!

Design-wise, the navigation, the header and the Macaulay sequence had me in a design block for years. The Macaulay sequence I have largely already addressed above in the making of. I felt like I had to build the whole shrine around it (the climax of the story and shrine both), in anticipation of it, and as though I couldn’t move on with anything until I had its design figured out. Though this blocked it, it ironically ended up being pretty much the last thing to be designed and coded… As for the header: It took years to ripen, as I had a specific mood and elements in mind (mentioned in “Editor’s Note”), but no idea how to pull it off, especially due my own perceived lack of skill. I was also confronted with empty spaces I had no idea how to fill. There are so many things I now look back on in bewilderment as I have no idea how the idea came to me, and how I made them happen, such as the photo frame and the sea in the back. I’m sharing the following making-of screenshots with their dates in the file name; they’ll speak for themselves.


The Force of Commitment

I didn’t only struggle with writer’s and design block coupled with self-doubts. Behind it all was a supreme fear of committing myself to the shrine — to rethinking and reworking the long complex texts, to confronting the empty space on canvas, to devoting my being to the creation of it all. That fear grasped me with regard to my thesis as well. I was afraid that if I gave in to the brilliant joy of creation and allowed myself to be immersed, to indulge in what I love most, I would… not resurface, and risk dropping out of the new life I had carefully built. Devoting yourself to something means excluding and neglecting some things in that time, and I wasn’t sure how much neglecting the new structures and bonds in my life could stand.

My mentor eventually helped me see the light, and explained that my fears were based on misassumptions. Back when I had been fully absorbed in making shrines, I didn’t have anything in the physical world; rather than being the cause of the limbo I had been in until a few years ago, however, it was all that I loved that had saved me from that limbo. Therefore, I mustn’t be afraid to live out my passions out of fear that I’d fall back into limbo, no — I must absolutely pursue them, and that would show me how everything else in my life will thrive right along with them. He was right with that encouragement: Every time I now fully commit myself to shrining, I enter the creative mode necessary to engage with my thesis-writing at my best. Creativity sparks creativity, and passion feeds on passion.

All my struggling with this shrine? There was one answer only: commitment. Doubting isn’t fruitful. Agonizing isn’t fruitful. You have to pursue, without restraint, what makes you truly happy first, and then return and sit on it, fully prepared to bear the initial void that is a necessary phase of it all. You have to start up Photoshop even when you have no idea what you’re going to do, and how you’re going to make your ideas work. You have to look at your text even when you don’t know yet how you’re going to split up all the sections.

I didn’t know how any of the shrine would look until I sat down and did it: the composition of the header; the navigation; the different pages; the inclusion of images. As I tweaked Photoshop layers and code, the design elements influenced each other and spilled over to other pages, eventually leading to the Macaulay sequence that had previously put the design task on hold for so long. Many other elements on the site were also spontaneous experiments rather than the result of a bigger plan: the photo frame, hidden message and poem in the header (I had planned newspaper scraps at first), the navigation, the arrangement of photos on Newsflash, the background images with overlay text.

Motivation, encouragement and momentum sometimes come from strange places, but most effectively from love. What eventually gave me the creative burst necessary to finish this shrine was Kate hitting me up early 2022 for recommendations as to what manga to buy. I had so much fun compiling the manga purchase recommendations, it filled me with the irrefutable call to create. I took that strong desire welling up in me as the catalyst for the completion of this shrine, and set myself my birth month March as a deadline. I knew finishing it was feasible then, but whether or not I’d actually manage to was a different question. Still, I went into it with a “now or never” mindset, and, lo and behold, pulled it off!

(Speaking of unexpected things that keep you going: The quote by Ocean Vuong that sets the mood for the shrine came as a surprise to myself when I opened the project again after a long time. I didn’t remember the quote, much less putting it there, and it hit me, hard. I knew that I absolutely wanted to see the shrine through, just to show the world this perfect combination.)


The Importance of Community

In Editor’s Note, I’ve laid out plenty about the encouragement and help I have received by friends in various ways specifically with regard to this shrine over the years. I’d like to highlight part of one such instance here because it’s the kind of thing that should absolutely be talked about more often, especially in the absence of a visible and freely accessible community where such discussions may be recorded long-term.

At that crucial moment early 2022 when I pulled myself together one last time to finish this shrine, I reached out to Andrea, whose creations I admire very much, and asked her about her graphics creation process. More specifically, I asked how she went about looking for resources, whether she has any go-to resource sites, whether there are go-to platform for the aesthetics of our niche sites (seeing how the traditional graphics sites barely exist anymore), and how she organizes her resources to remember them. See, when I browse other people’s credits section, I get the feeling they are almighty beings who know exactly what kind of nooks to seek out to retrieve the perfect resources for their project; or that they have been hoarding a stash of resources since the height of DeviantArt, linking to pages and sites that no longer exist. Both sound intimidating to someone less experienced.

Andrea did share a few links with me, and has indeed accumulated a stash over the years. The surprising answer, however, was that for specific projects where you have a vision in mind, it still boils down to Google. Which is to say: Finding graphics resources isn’t witchcraft, and they do not come from ancient sources that you have somehow missed out on. Having to invest some time into the search for project-specific resources and stumbling around on Google is a natural part of the process and you’re not the only one who goes through it. Hearing about the process in detail from someone I admire so much emboldened me as I worked on finishing the shrine’s header, finally in the knowledge that I didn’t miss out on anything, or miss something obvious, and that it was alright to take my time.

I received encouragement from friends not just during and between the creation process, but also immediately after its release. After so many years of hiatus and having struggled immensely with the project, I was floored, and immensely touched, by the responses to this shrine, and most of all the love that my friends showed me in so many different ways. Multiple friends messaged me on the very day, be it to yell a little before going about their day, be it to offer preliminary feedback; several even read the entire thing right away (WHAT!) and sent me long reactions; others messaged me they wanted to read the manga. They even read the parts I was fighting with for so long and had no confidence in, the parts that I thought would deter people from reading the shrine, and commented on them with sincere enthusiasm. All of this truly unravelled a knot in me, and I know I will draw from this gratitude and energy for years to come.

Andrea loved the shrine so much, she compiled two long documents with some grammar and spelling corrections, and many, many stylistic suggestions to polish the shrine’s language even further. She even followed up on it by taking the time to co-edit the documents with me to address and clarify things in response to my comments. I have never received proofreading this valuable and this loving before, much less unprompted. I was equally touched by Yuuka, who unerringly stayed with me for hours to help fix a complex piece of CSS (the layout was not displayed as intended in a resolution of 1280x720, which I had not noticed) while I was very distraught. These intense moments with my friends are some of my favourite things to have resulted from this project! Truly, creating this shrine would have been far less enriching without all of them.


One last thing to note: In the documentation of my last shrine before the hiatus, In Another Dream, I talked about how bad I am at making graphics and how discouraging it is to feel so limited in my expression. (Imagine, I was sometimes so afraid of ruining things with my poor skills before, I would not set a site title on some headers!) I carved something good out of it by learning how to work around it. After Refugium, however, I feel as though I am brave and well-equipped enough to venture beyond that comfort zone and dare to reach for more. I have my friends to thank for that, and I have proven to myself that I am capable of it.

Finishing Refugium is a tremendous achievement that I can be proud of for the rest of my life. It was a complex project in every regard, one that demanded far more from me than expected, and I managed to push through to the end by sheer willpower. Rather than a miracle, it shows me that I am capable of much more than I often give myself credit for. Believe in yourself, Lethe!

— 25 July 2022