Summer 2019 · Comic guidebook & curriculum
In the summer of 2019, I had an opportunity to propose a workshop called "Website Design as Personal Storytelling" for BUFU (By Us For Us)'s WYFY School.
I, myself, also decided to attend a summer class at SVA's RisoLab on developing and printing mini-comics using their Risograph printers.
Combining the two opportunities, I created a 28-page comic/zine titled Jackie's Guide to Making a Website: by you & for you over the course of the summer. In addition to making something tangible to take away from the workshop, I decided to create this zine to organize my ideas and share it with a broader audience.
This comic is meant to guide people who have little visual design or web programming background through creating their first personal website. It’s told through my perspective as hybrid artist/designer/programmer, and what has worked for me, personally, to tell my story and craft a space for myself on the internet.
It also captures my philosophy about personal websites! I believe in co-opting technological processes to create more ways to advocate for ourselves, especially for people who are underrepresented and marginalized in technology. I believe in the value of turning "user-centered design" around to instead know ourselves intimately, and reclaiming (now extremely commercialized) web technologies to create spaces for self-expression, community-building, and story-sharing.
As someone with background in web programming and design, I've gotten a lot of questions from my friends about how to make and put up a personal website! These inquiries have come from my friends of varying backgrounds: biology, mural painting, mechanical engineering, and even web development!
I saw an opportunity to create an approachable - yet holistic and comprehensive - guide to creating a personal website. From what I've seen before, many existing resources for this task end up skipping some key piece of the puzzle.
Many resources on the coding side give in-depth, hands-on instruction, but neglect the question "What story am I actually trying to tell in this site?".
Many resources on the design side focus on how to craft a story, but they skimp on the next steps of understanding it takes to bring your creative vision to life.
Finally, website builders (like Squarespace or Wix) guide people through picking a format that tells their story and accelerate the process of bringing a site to life - but in doing so, compromise hands-on engagement and creative flexibility.
Navigating through all of these partial - and sometimes conflicting - information sources can be daunting! My aim was to hollistically bridge these knowledge gaps and streamline information overload for beginners, to either code or design.
Part of my philosophy is that you shouldn't need to be a web designer or programmer as permission to put your own website! Anyone who wants to share what they've been up to, what they're passionate about, or what their story is, can explore how a personal website helps advocate for themselves.
A huge part of this project - in both the workshop and the comic side - was to define my own framework for creating a website, from start to end. This domain is so vast, so I compiled a survey of the most important steps I see in creating a personal website: discovery, research, prototyping, and building it out.
How can a website help me and my goals? What is the story I want to tell about myself? What is worth including in my website?
Discovery is about developing a deep inner understanding of yourself, and asking the key questions that will help you identity the story you want to tell.
In my process, intimate self reflection is necessary to extracting a narrative. How might we take a step back from what's immediately visible to look at our overarching experiences, interests, and personal strengths that might contribute to our stories? How can we make thematic connections (or conflicts!) across seemingly disparate aspects of our lives, to tell narratives about who we are and what values we stand for?
For me, this process helps me think through how I want to be perceived, and allows me to give justice to the value I offer. As someone who struggles with self-image, I find it easy to get trapped into thoughts like "I don't have enough to offer or show" - but often, we have more value to share than we think.
In addition to explaining out this thinking, this section of my comic includes two hands-on activities to assist in discovery: creating a mindmap, and writing a personal summary.
What's out there already? What are common patterns in web design? What inspires me? How can I make or break patterns? How can I incorporate my own style and personality?
Research is complementing an internal understanding of how you want to communicate, with an outward understanding of how websites communicate. In this section, I give a crash-intro into web design patterns: describing design concepts like hierarchy and navigation, outlining some most popular formats for personal websites, and mentioning how aesthetics factor in. In this phase, I encourage you to see what's out there, find inspiration, and get a discerning eye for how design choices communicate different stories!
This section includes a moodboarding activity to encourage seeking inspiration and refining your aesthetic vision.
How can I explore designs for my websites? What are easy, accessible tools for prototyping? How can I evaluate what design serves me best?
Prototyping is about exploring alternate possibilities for your site, and continuously iterating on it until it fits your needs! In this section, I wanted to share best-practices of prototyping that designers are well-versed in, as well as how you might transition from quick, conceptual sketches to using digital design tools.
This section contains two activities - the first one is called "Quick 'n Dirty Website Design", outlining how to sketch out various ideas quickly on paper, evaluate, and iterate on a design. The second one guides the process of refining the design in higher detail, using digital tools and keeping in mind digital constraints.
What goes into a live website? What are all the steps of bringing a website to life? What are all my options, and which option is the best for me? What are resources for learning to code my site?
Since including actual coding instruction would've made this zine have a encyclopedia-level page count (maybe that could be Volume 2 in this series!), I decided to wrap up by using infographics to lay out options for next-steps. While I always advocate for others to learn how to code, sometimes that's not immediately related to people's goals - so I emphasize the ability to choose which methods are best for you.
To help decide what process is right for you, this section includes a quiz that helps you decide whether to use a website builder or code and host your site using one of several tools.
Creating the comic was super helpful for thinking through how I wanted to teach the "Website as Personal Storytelling" workshop. For the event, I focused on facilitating the group through three exercises, covered in the first part of the comic: mindmapping, writing a personal summary, and sketching a first draft of our websites on paper.
I consider this first printing of my comic to be a first draft; I'm hoping to do a second round of revisions, editing typos and reflecting more updated information about resources. I also hope to refactor the curriculum and comic structure to include accessibility on the web - a topic that wholly deserves additional research and future work.
Interested in a physical copy? Send me an email!