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
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 was scarce way back then, so every little crumb felt 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.
Then, one day, I found Angelfire’s old web shell site editor and learned this magic little string of runes:
<html>
<head>
<title>Slick the Hedgehog</title>
</head>
<body>
</body>
</html>
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 the form of notepad files and scanned artwork. I loved that class and the teacher that taught it. I took the elective with my prior Angelfire experience so I could jump ahead and nab some free internet time. Teach didn’t mind thanks to my fascination with experimenting in HTML.
As if I were an apprentice learning sorcery.
Eventually, I left Angelfire behind to experiment with other platforms that popped up for posting art online. With college responsibilities later 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?
Dissociating through a mostly fruitless college “web design” course?
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.
Eventually, I tuned the class out and did my own thing.
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.
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.
Deconstructing Some of My Web Design Inspirations
Lollygagging in my Web Design classes (all of them), 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.
For the sake of brevity, I’m only looking at three websites in particular as primary initial influences on this site. 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 the final result I wanted to achieve.
Specifically, my favorite thing about some of these sites was how well they weaved together illustration and web design.
These sites were:
- DresdenCodak.com
- Rice-Boy.com
- SSSScomic.com
Dresden Codak and Rice-Boy shared some similar web design sensibilities with a few notable differences between them. Both sites used simple headers with illustrated menus overlapping them. I loved the artwork for the links on both menu bars and the different purposes they served. Both sites also made good use of simple white space in varying ways. Stand Still, Stay Silent stands out by not doing either of the things I liked from the other two sites.
All three made good use of hand drawn artwork without feeling too overloaded or cluttered or sacrificing clarity.
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 Light of White 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. Possibly a subtle allusion to the creepy nature of the dark creatures that hide throughout shadows in 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 Website
Starting off a little overboard
Before I settled on how I’d publish my site, 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.
It felt messy, unclear, overdone. I thought I wanted a site that was themed after whatever story arc I was active at the present time. 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 even uploaded my comic online. My inexperience and excitement collided. The resulting mess was a header section that was too discombobulated to be easily navigable.
The set of navbar image that I made were too big and detailed for the size they’d be displayed at. So I used the default ComicPress navbar for a while instead. You’ll probably still see a few of these make their way into the pages of this site as spot illustrations. It’d be a shame to let them just sit in the gallery.
Dissatisfied with my initial results, I trashed it all and started over again. But with the intent of conforming to the set infrastructures of the site builder I planned on using.
Restarting off simple. Nostalgic.
For a short while, I bounced around a different web-builders until settling on a WordPress site ComicPress installed. This solution felt like it offered the most flexibility in terms of ease and functionality. It wasn’t a straightforward process by any means. Out of the box, ComicPress already worked like I needed it to. 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.
My main priorities were functionality and readability. 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 them to things like headers and backgrounds.
What I really wanted was to create an internet home for my work (and digital self). Something (mostly) removed from the social media internet (without completely exorcising 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.
My main concerns/goals were balancing flexibility and structure. Inspired by various webcomics and manga scanlations I was reading then, I focused on building a webcomic site at first. However, I also wanted a blog where I could write about my work and various subjects that I’m interested in.
Laying down good bones for this internet abode.
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 weave together seamlessly web design and illustration. Though, I don’t remember if I mentioned that outright in any of my 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 some immersion for different sections of the site. Especially for certain chapters of the comic.
I thought it would make for a more immersive reading experience.
Once I had the foundation down, it was time for the next step.
Web Design Using Pencil and Paper
Sometime before I started working on the site again, I started work on some little icon illustrations as a break from some beetle and flower studies that I was doing at the time. Before I knew it –(no, actually, it took about a week of work. I totally knew the whole time.) –before. I. knew. it. I’d made a whole set of illustrated graphics for the site.
A Good Stopping Point
From the time I first dipped my toes in it, to the many years of not having enough time, it’s been interesting tinkering around and learning WordPress. It currently 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. I’ve spent as much time as I could working on this site for the past two weeks. (counting illustrations and image editing). It’s been an experience.
Present Site Updates
- Created new icons for the menubar
- Reformatted the website.
- Changed the site width. Made it a little more compact.
- Removed the sidebar
- 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 revision 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 putting out a lot of static info at once, it made the front page a little too busy/cluttered. I like the simplicity of the no-column layout and the challenge of giving everything a fair chance at being seen. I still have to re-implement many 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 Web Design Here
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 but nothing too numerous or complex. 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 Mage Punk and how I hope to present it on this site. I also have a ton of older art that I’ll be uploading in the coming weeks. After that blog posts should hopefully be a little more succinct than these have been.
I do love to ramble.