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:
Stop Talking and Start Sketching: A Guide to Paper Prototyping is an article on the MarvelApp blog on the benefits of paper prototyping.
What do Prototypes Prototype? is a paper written by Apple engineers in the 90s. It really breaks down the various purposes and goals that prototyping fulfills!
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:
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.
About $100 for a one-time license, or ~$50 for educational licenses.
Works on Mac only.
Free for one project.
Works in the browser.
Free for one project.
Works on Mac or Windows.
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"