Making a Website (by you and for you)

Order a Copy Here

About

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.

Why create this?

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.

Who is this for?

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 up 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.

And while perhaps not everyone needs a website, I do believe that many people can benefit from exercises in knowing who they are and how to better communicate that with the world: the core of this comic's story.

Developing a curriculum

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.

1. Discovery

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.

Activities

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.

2. Research

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!

Activity

This section includes a moodboarding activity to encourage seeking inspiration and refining your aesthetic vision.

3. Prototyping

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.

Activities

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.

4. Building it out

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?

After you have a vision for a site, building it out explains the next-steps for bringing your website to life. This section focuses specifically on breaking down what a website is, what it takes to host one on the internet, and the different paths one could take (whether in coding it by hand, or using a template-driven website service). I also give my recommendations for resources to learn HTML, CSS, or JavaScript.

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.

Activity

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.

The workshop

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.

Future work

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.

Get a copy

Interested in a physical copy? Send me an email!