I’ve finally wrapped up on a few minor tasks that have been sitting on my desk for awhile. Revisions to some posted comic pages. First draft pencils for the rest of the 1st chapter. Most exciting was a fun little photoshoot I did for some of the buttons I sell at events. For a brief period of time, I felt like I was being exceptionally productive and on task. But that went awry fast. Whim and Circumstance ambushed me; and it made me want to work on something else for a while. So I let my brain roll the dice. Naturally, I pivoted to doing more work on the website. After all, what better way to cheer myself up after death than with a little web design?
Please bare in mind that this post is written from a quadruple?-retrospective point of view. Me1, looking back at a me1 that’s looking back at me2‘s past experiences with the internet. Many of the sites I link here, won’t look the same today? as they did then1, then1 and then2. It’s okay if that was confusing. The internet is this great LIMINAL SPACE of suspended TIME and CREATION that we actively shape with our very fingertips. This nebulous, intangible thing we magick around, here and about, all the time. Losing track of the present is easy here.
That said, also bare in mind that this entry isn’t only about recent changes to the site. I’m also using this space to reflect on my past experiences browsing online; and my original goals for this website. Then, I’ll deconstruct which goals I’ve met so far; and how the remaining goals are presently changing moving forward.
An Internet, long lost to the past?
A Lurker, Lost in the Backgrounds
Before social media apps became a staple of online interaction, web-communities gathered in more disparate forms than those common today. “Internet Forums”, “Yahoo! Groups”, Chatrooms (MSN, AIM, IRC), MMORPGs, and many other forms were common. If you were chronically online enough, you probably dived head first into internet rabbit holes following some niche interest. Eventually, those rabbit holes lead to community. These forms of digital community still exist today, but they’re less popular now. And you can still find those rabbit holes, but there are new and different dimensions to them now.
It wasn’t only about the people you met, though. The phrase “escheresque” loses meaning attempting to describe the imaginary, liminal geography of the old internet. Old web pages, abandoned for years without updates. Secret hyperlinks, hidden in the punctuation marks of some suspicious paragraph (or in the source code). Messages in the alt-text (before we all realized it was a bad practice). The internet felt like a digital wilderness littered with cyber funhouses and niche digital archives. Many webmasters would bridge their sites together in networks called webrings and compete for top list spots.
Sometimes, I lament over this internet as though it were an old thing long lost to the past. An ancient internet. Buried under digital layers, formed by social media, clickbait articles, useless Google search results, and Top 10 whatevers websites. However, maybe it’s more likely that I’m lagging behind, in some form of ongoing cyber-shock. If Social media is a sprawling digital city, I want to escape into the electric wilderness. With so many responsibilities piling up, I haven’t been online in the same ways as when I was growing up.
It’s been awhile since I wandered out deep into those old woods.
Web Design by a 90’s Kid
Nostalgic for a cyber world from long ago
In my online wanderings as a smaller human, I mainly sought out Sonic the Hedgehog and Super Mario Bros content. Sprite comics, fanart, fangames, fanfiction, music. Many nights in my youth, spent tirelessly combing through various online archives in search of treasures. Fan content for that stuff wasn’t particularly scarce back then, but every little crumb felt still like a precious jewel. There were other pursuits, but those were my main obsessions when I was younger. I remember crawling through all sorts of strange and …interesting websites.
Some of my favorite creators established webcomic sites and online communities using early Angelfire/Geocities web builders with external forums.
Angelfire’s old web-shell site editor
I learned a magic little string of runes for the first time
<html>
<head>
<title>Slick the Hedgehog</title>
</head>
<body>
</body>
</html>
Typing out the HTML in a text note and seeing it come to life in a web browser changed me. I fell in love with web design on the spot. Combing through some hard drives, I might find some old “websites” I made in my highschool web design class. Pure HTML sites, crafted in notepad. I loved that class and the teacher that taught it. I jumped ahead as far as I could so I could nab some free internet time. Teach didn’t mind thanks to my fascination with experimenting in HTML.
I felt like an apprentice learning sorcery.
Let’s Learn Macromedia Flash??!
Dissociating through a mostly fruitless college “web design” course
Eventually, I left Angelfire behind to experiment with other platforms that popped up for posting art online. With college responsibilities eventually weighing down on me, my love for web building wavered a bit. Yearning to return to my old hobby, I took what I mistook for a web design course. In actuality, it was a “Digital Portfolio” class; taught by an overly traditionalist Oil Painter?
In the first few weeks of class, our professor insisted on teaching us Macromedia Flash? It was weird? We were a mixed class of fine art, animation, and illustration students. So while I could understand how Flash might be a great presentation medium for some, it’s not universally applicable. As the professor fumbled through teaching us how to present our portfolios online professionally, I revisited old web design projects.
Though I feel more like a hobbyist, I considered including web design as part of my graduating skillset/portfolio. Even at a beginner level, it seemed like a skill/interest worth showing off. Most of the class saw their websites as vectors for just presenting their works online. Most professors told us that our work should speak for itself. On the other hand, I saw my site itself as another project worth showing off.
Eventually, I tuned that class out and did my own thing.
Deconstructing Old Web Design Inspirations
While Lollygagging In Web Design Class
Throughout my time on the internet, I found so many websites of varying styles and genres. I’ve explored and forgotten many of them over time. However, the web design on a few still influence some of my own design decisions for this site, even today. Before really getting started on my own website, taking a closer look at some of my favorites was important. The goal being to take what I loved about them for myself; and leave behind whatever didn’t fit my needs.
Sure, some basic portfolio or social media site might suffice for simply displaying my hard work. It’d be like confining my work to plain black frames with plain mats; and hanging them in some gallery. No fun at all. Later in the quarter, that professor repented on insisting we use Flash; and showed us Wix.com instead. I made the Wix site and then promptly abandoned it.
By this point, I already had a fairly solid idea of what I really wanted to do with my website.
For the sake of some brevity, I’m only looking at three websites in particular for this post. I’m also narrowing it down to just webcomic sites, whose general aesthetic and function suited my needs at the time. They were like vivid snapshots of a final result I wanted to achieve.
These sites were:
- DresdenCodak.com
- Rice-Boy.com
- SSSScomic.com
Dresden Codak
Shaping an Infinite White Void
This site felt like the whole thing was drawn by hand and uploaded as is. A simple header introduces the cloudy motif that’s used cohesively throughout the site. The navbar felt a little more haphazard, however, comprised of little character portraits and spot illustrations. Some of which seemed, at least vaguely, relevant to the pages they linked to.
Below, blue color blocks formed the main content section. A three column layout on the homepage that switched to a single column on the other pages. The thumbnail link for the latest comic, notably framed by a little “sign post” background image on the homepage. The whole site is a fairly compact block, requiring minimal scrolling overall. Disappearing down into a cloudy white expanse made it feel like something solid and tangible.
There was a sense of finding and exploring this small but dense thing in an infinite cloudy white void.
Rice Boy
Giving Voice to the White Void
Rice-Boy also used a simple header image similar to Dresden Codak. However, this header didn’t establish any design motifs for the site. Instead, it subtly established the main setting of most comics on the site: Overside. Below the header, were two main navigation menus whose illustrations were a little more purposeful in execution.
The first used illustrated menu links to some of the various stories or collections available on the site. Each image acted as mini “covers” for their stories, which also displayed the respective comic’s update schedule or completion status. Thus, making this first menu readily informative to readers, old or new. The second navbar was much simpler, featuring handwritten text links for other main sections of the site. Combined with a “newest comic” header, the top portion of this site was a solid navigation block.
The rest of the site maintained a super minimal design overall. Rice-Boy.com instills character within the infinite white space, with a simple serif font and hand drawn drop caps. When reading any of the comics on the site, all other site elements went away. No header, no site navigation. Only a comic page and links to navigate between the pages or back to the comic archive.
This ensured minimal distraction from the most important content on the site: the comics/stories.
Stand Still, Stay Silent
Banishing the Empty Space Altogether
Stand Still, Stay Silent is a bit different from the previous two influences. The header uses a large splash image as a background for the top portion. A secondary bottom portion continues down beneath the main content of homepage, all the way to the bottom. Atop the header section, sits three image links stacked vertically centered. Respectively, they are: A thumbnail link to the newest comic. The title logo for the comic, which links to the homepage. And thirdly is a thumbnail link to the very first page of the comic. At the bottom of the header section sit social media links with custom logos that match the overall site aesthetic. Next to that is a simple text menu for navigating the rest of the site.
Whereas Dresden and Rice-Boy incorporate white space into their site designs, SSSS mostly banishes any white space throughout the site. The main content of the site is backed by a parchment (#fdf9e7) colored background. Beneath that lies the rest of the header image acting as a secondary background image. It creeps up behind the site as you scroll down. A subtle allusion to the things that creep in the shadows throughout the comic.
Aside from just the comic and header image, spot illustrations and photos throughout the pages break up bodies of text. On some pages, entire segments of content/info are presented as illustrations with text incorporated directly; rather than relying on hypertext. Every element of SSSScomic site contributes to the sense of immersion that draws you into the alternate world presented.
Hand Drawing My Own Website
Web Design on Paper
Before settling on the publication method for my website, I made sketches of some ideas I had in mind. Then, I made a little mockup in Illustrator. I wasn’t really thinking things through properly before beginning and it showed. With a big splash image and some overly detailed menu bar illustrations, it was this odd amalgam of incomplete ideas. Once I put all my pieces in place, I realized my “design” left a lot to be desired. This mockup helped me realize that I was going a little overboard with my ambitions. Thankfully I made this before wasting too much time on the actual website.
Web Design done wrong.
Starting off a little overboard.
It felt messy, unclear, overdone. I thought I wanted a site that was dynamically themed for whatever story arc was currently updating in the present. But once I was done with my mockup, I quickly realized how unfeasible that would be for me. I’d gotten too far ahead of myself in concept before I even uploaded my comic online. My inexperience and excitement collided. The resulting mess was a header section that felt a little too discombobulated and busy.
Dissatisfied with my initial results, I trashed the idea and started over again. This time I’d work with the intent of conforming to any set infrastructures of the site builder I decided on. My thinking was that maybe I should let the web builder take the reins on some things. The one thing I didn’t completely scrap from my original plan was the menu bar illustrations I created. Since, they were too detailed for their original purpose, I figured I could find another use for them somewhere. In the meantime, I opted to use the default ComicPress navbar for a while instead.
Re-starting off simple. Nostalgic.
Fondly regarding the Past
For a short while, I bounced around different web-builders until settling on a WordPress site with ComicPress installed. This solution felt like it offered the most flexibility in terms of ease and functionality. Out of the box, ComicPress already worked like I needed it to, so that was great. I uploaded my art/comics. Installed some plugins. And started teaching myself CSS. I was still familiarizing myself with all of it; and so I didn’t want to overcomplicate things too much.
At first, my main priorities were functionality and readability. Making something that isn’t easy to break was a bonus. I focused on things like layout, fonts, colors. Elements of the website that were easy to change in WordPress without having to code in CSS (much). Since I was just getting started, I limited drawn graphics to things like headers and backgrounds.
What I really wanted was to create an internet home for my work (and digital self also). Something (mostly) removed from the social media internet, without being completely exorcised of it. It wasn’t only about meeting graduation requirements; it was also about setting down a foundation for the future. This site was something that I wanted for myself, well before I pursued an art career/education. Having my own website (My own …Space?), grants me a certain freedom that’s difficult to attain on other planes.
Laying down good bones for this internet abode.
Building my Digital Witch’s Hut in the Woods
Scrolling through the blog archives you’ll come across some of my “devlog” update posts. It’s not the most thorough or detailed “devlog”; and it probably reads drier than a mouthful of sand. But at the very least, it’s a good checkpoint marker for some of the website’s growth and development over time. Those posts mostly focused on things like layout changes, CSS updates, new content, or even pitfalls encountered while tinkering about. I probably made a lot of it way more complicated than it needed to be as I figured things out. In some of those update posts, I mentioned artwork that I wanted to finish for the site.
Eventually, I wanted to seamlessly weave together web design and illustration in my own way. Though, I don’t remember if I mentioned that outright in any of my previous posts.
WordPress natively lets me set the header to randomly cycle through any number of pre-selected header images. I drew a couple of different header images based on different contexts and comics on the site. Along with those, I also made various background images to match. At some point I installed a plugin that let me set page-specific backgrounds and headers. I wanted to create a more immersive reading experience for different sections of the site. Especially for certain chapters of the comic. By this point in time, I felt comfortable saying I had a foundation down for everything.
Then, it was time for the next step.
Revisiting My Web Design on Paper Again
No Going Overboard This Time
There were still some planned changes that I haven’t had the chance to implement yet, but those could wait. One day, while slacking off at work, I drew a new wireframe of some of those tentative plans. These aren’t necessarily a blueprint of what’s to come for Mage Punk Archives. Rather, these drawings are an exploration of everything I’ve learned up to this point. Looking back at the things that are working and looking forward to possibly making them better.
One such example of this is this set drawings that I did to use as navbar images. They eventually resurfaced in these plans, as expected. They were too big and detailed for their original purpose. Instead, I can not implement them into vaiour pages of this site as spot illustrations.
That’s Enough Web Design
A Good Stopping Point; for now.
From the beginning, through the many years of not having enough time, learning WordPress has been an interesting challenge. I had fun, tinkering around and learning some of the ins and outs of how to work this platform. Currently this site feels like a Chimera-esque menagerie of plugins and self-taught CSS. I still have a lot to learn but I’m at a good enough stopping point for the time being. Now, I want to take a break from web design for while to focus on putting up some actual content.
Site Updates as of Present
A Look at Some Recent Web Design Changes
For the past few weeks, driven by Whim and Circumstance, I’ve been hard at work at some new updates.
A short list of the most recent updates to the site:
- New icons for the menubar
- Reformatted the website.
- Removed the sidebar
- Changed the site width.
- Made it a little more compact.
- Recent posts on the front page are now more compact in appearance.
- Added a Gallery and a placeholder page for the Shop.
- Revised the About section a little.
- Might just move this info to the bottom of the front page and turn this space into a Profiles section.
- Tidied up the Archives page a little.
- Uploaded comic revisions and wrote full posts for each one
- Created new comic title cards (seen on the front page)
- Added published dates to the comic page titles to account for reordering.
While the sidebar was useful for displaying a lot of info, it made the front page feel a little busy. I like the simplicity of this no-column layout and the challenge of giving everything a fair chance at being seen. I still have to re-implement some of the widgets that were there into the current layout of the front page. But I think that it can wait for now.
Future Updates to The Archives
Things That Aren’t Just the Website
Unfortunately, I only ever have enough time for one project at any extended period of time. I’ll do my best to find a good balance between working on projects and posting here consistently. I still have a handful of small spot illustrations and banners that I want to draw for the site. It’s nothing too numerous or complex, I just have to find and set aside the time for them. This coming Sunday, I want to try to post the 1st draft pencils for the rest of Chapter 1. I’ll also be writing one last post explaining what I have planned for the future of Mage Punk Archives. I also have a ton of older art that I’ll be uploading in the coming weeks. After that, blog entries should hopefully be a little more succinct than these have been.
Keep an eye out!
