Open Q&A: Eric on Secret Files and Originson June 27, 2012 at 12:01 am
I figure that you lot are less interested in the me-typing-bits-of-CSS part of the creation of Lady Sabre. So, while this comment thread is open, like the others, I’ll skip asking myself questions (although you should feel free to ask me anything — I know you all know Rick and Greg from their other comics work, but I’m mostly anonymous).
Instead, I want to share some early wireframes / mock-ups for the site. These are dated March of 2011 in my files, and I think Greg and Rick officially brought me into the fold on Lady Sabre in January of last year (they were kind enough to wait until after I’d passed my comprehensive exams). By July, we’d launched, as you well know!
You’ll notice that lots of bits, big and small, were changed or tossed out in the final version. At the time, we hadn’t fully planned the content of the site beyond the comic, so much of what was in the wireframes was conjecture on my part. And you’ll see an early placeholder version of the logo by Rick. There are a few ideas here that I’d forgotten about, actually, that I might revisit in the future — navigation to the left and right of the comic, for instance….
Here’s the email I sent to Greg and Rick that originally accompanied these images:
Attached is a zip file containing six wireframes in .png form. These are very bare-bone, greyscale mock-ups, designed to figure out the architecture of the site and the different arrangements of content we’ll need. I’ve mocked up six different kinds of pages:
1. Index Wireframe – This would be the main page you’d see when coming to the site. This design also doubles for each individual strip’s page.
2. Multiple Screens Wireframe – This could also be the main page, with multiple tiers of screens if we wanted, or again, the individual strip page.
3. Blog Wireframe – For browsing only the blog.
4. Single Blog Entry Wireframe – For browsing a single blog entry. Note that comments section design would also be part of individual strip page.
5. Comics Archive & Market Wireframe – Doubles for both the archive and the market (where, instead of “Chapter One,” there would be “Prints,” “T-Shirts,” Etc.)
6. Authors & Characters Wireframe – Not sure if we wanted a characters section, but this design doubles for both your credits and character write-ups.
There are other potentially needed page designs that I’d like to talk to you about, like links, email, etc. But these six should make the bulk of the site’s architecture.
I’ve also included a greyscale graphic showing a first foray into the graphic design portion of the process. The wireframes look very clean and modern, but I’ll be using shadows, textures, vintage graphics, Victorian ornaments, typefaces, etc. to make the site feel as diegetic to the comic as possible.