Hi there! If you're on this page, you probably came across my Making a Website Zine. This is meant to be a summarizing (in-progress) list linking to relevant resources, going deeper than I can possibly do in the comic. It's also for directing you to supplementary, online activities I'll develop for my comic!

If you haven't read my zine, I hope that this can still be a repository of helpful resources to guide you to wherever you need to go.

***This page is in-progress, stay tuned for writing updates!***

Part 1: Discovery

On mind mapping:

  • Here is a blog post sharing how mind mapping can be a useful technique for artists - but IMO, also useful for anyone who wants to dissect their work.

Part 2: Research

Resources by type of personal site (writing-in-progress)

  • Blogs

  • Gallery

  • Portfolios

  • Simple

Getting inspiration:

  • Even if you don't plan to use a website builder like Squarespace or Wix to build your site, browsing their templates can be a good way to get inspiration!

  • Bestfolios has a user-submitted showcase of portfolio sites, geared towards digital designers

  • Awwwards has a lot of fancy, beautiful websites. A lot of them are developed in a commercial setting, rather than being personal sites, but it can be nice for inspiration.

Part 3: Prototyping

On prototyping:

On typography:

  • Kerntype is a neat game that lets you test your kerning ability by adjusting letter spacing.

  • Google Fonts is a useful resource for finding and integrating free, web-friendly fonts.

On colors and palettes:

  • Coolors is a fave color palette tool of mine. Generate color palettes with the hit of the space bar!

  • WebAIM's Constrast Checker is an easy way to tell if your text and background colors have enough contrast for visual accessibility. They also have a lot of other articles on web accessibility.

Tools for digital prototyping:

  • Figma

    • Free for personal or educational use (the only case when you need to pay is if you need special team/workplace features).

    • Runs in browser, or as a Mac or Windows app.

  • Sketch

    • About $100 for a one-time license, or ~$50 for educational licenses.

    • Works on Mac only.

  • MarvelApp

    • Free for one project.

    • Works in the browser.

  • Adobe XD

    • Free for one project.

    • Works on Mac or Windows.

  • Google Slides

    • LOL not exactly an interface design tool, but it can do a lot if you really think about it. You can choose any color, choose from google fonts, and set the slide dimensions to whatever you want...

    • Freee

    • In the browser

Part 4: Building it Out

On using a website builder:

Sometimes it's not in our best interest to code our websites by scratch at this moment - maybe we have other stuff to prioritize! If that's the case, here are some avenues that can help you get a good looking website up! Note that all of these will be more $$$ (beyond the fees of getting a domain name), naturally.

  • Squarespace is a super popular service for good looking, templated websites. They will help you get a domain name and you can incorporate an online shop into your site, if you want. Learn more about their plans here.

  • Wix is another popular service. A lot of similar features to Squarespace, but I'd say the customization feature are more robust. Learn more about their plans here.

  • Wordpress.com pricing is a bit more affordable than the other two. Customizing is most possible if you have a bit of HTML and CSS knowledge to go in and make tweaks. Also, you might have to search around to buy a template that you really like (they'll be $30-$60 ish). Learn more here.

  • Webflow is meant to go deeper into customization - it's supposed to provide more control over how the design translates to code more thoroughly. There is a higher learning curve though. Learn more about Webflow plans here.

  • Another option is to commission a web-savvy friend to build it for you! It can be a great way to co-design your site with someone who knows you well, while supporting a pal instead of sending off your money to the wallet of a corporation 😊.

On Coding-It-Yourself (writing-in-progress):

I've identified three main flavors to coding and hosting your own site:

Flavor 1: Code your site with HTML, CSS, JavaScript and host with web tools for beginners

  • A good option for "I don't know how to code websites at all" to "I can code a little bit" people.

Flavor 2: Code your site with HTML, CSS, JavaScript and host with

  • A good option for "I have some comfort with web coding"

Flavor 3: Use a static site generator to create your own website publishing system!

  • A good option for "I'm very comfortable with web coding"