An Attempted Beginner’s Guide for Creating a Personal Website

Before you start, consider what it is you want to communicate about yourself, who you want your audience to be, and why. This is your framework for everything from here on out, so write your ideas down.

Step 1: Get inspired

For many, one of the most important parts of designing a personal website is to see how others have approached the medium for their own purposes. In that vein, here’s an assortment of examples to help jumpstart your creative process.

Handpicked examples (of varying complexity)

Cesar Torres, Designer
Allen Tan, Designer
Gabriel Dance, Editor
Allison Stadd, Marketing/Communications
Ike Edeani, Photographer
Ellen Riley, Designer
Hope Reagan, Designer
Joshua McCartney, Art Director

Directories

SiteInspire
Awwwards

Step 2: Pick your poison

There are a lot of confusing things to pick through at this point. For beginners, it can feel like walking through a grocery store in a very foreign country. So let me try to simplify. Your next step is to choose a starter service to help you get things up and running (of a varying degree, depending on which service you go with) or to build everything from scratch.

Choose between a SaaS (software as a service) platform or a kit

The most popular contenders are Squarespace and Wordpress. Squarespace is a full-fledged SaaS platform, whereas Wordpress is more of a do-it-yourself kit (you buy hosting, you update the software, you are your own technical support, etc). I recommend using a platform instead of a kit — it’s the simplest way to get your site up and running. To illustrate the pros and cons of a platform versus a kit approach, see how Squarespace stacks up against Wordpress. Also, here’s why someone decided to leave Wordpress for Squarespace.

If you’re interested in other platforms, this review pits Squarespace against a few of its competitors, but omits some niche platforms like Cargo Collective and Portfolium.

Wordpress is many things to many people. No other kit is quite like it, but here are some others that you might want to check out. If you’re looking to do more tinkering, check out Bootstrap or Foundation. But regardless, if you decide on a kit, you’ll need to buy hosting, too, which is explained later.

Build it from scratch

If you are looking to make a single-page website with very few frills and want to learn how to code, you might as well try to create it from the ground up. Dash is an excellent educational tool and its first lesson happens to focus on building your own site. The folks behind Dash, General Assembly, also host a wide range of events in NYC (and on the web), including immersive courses. For online-only tools like Dash, you should also visit Codecademy and Treehouse. I’ve heard that Macaw and Sketch are good solutions for designing the visuals of your site without having to code.

Oh yeah. Regardless of whether you pick a platform or a kit, make sure you’re able to create something that is responsive.

Step 3: Register a domain

A domain name (e.g. alexmiller.info) is how people get to your site. Namecheap is considered to be the best place to purchase a domain.

Regardless of how you decide to build your website, you should buy your domain separately and integrate it into your preferred service(s) later. If you want to switch to another service, this keeps you from staying locked into an agreement with your current provider or potentially losing your domain.

Step 4: Find a host (if you aren’t using an SaaS platform)

A host stores everything that makes up your website in a place where people can access it. If you’re using a platform like Squarespace, they’ve probably taken care of hosting for you. If you downloaded a kit or are building your own site from scratch, you need to find a host. Here’s a short list of good ones. A Small Orange isn’t on it, but I hear they are pretty good. Managing a relationship with a host can be nightmarish, so choose wisely. Or just go with something simple like Squarespace and forget it entirely.

Step 5: Build!

Sketch a few concepts out on paper. Outline your site. Pass around your preliminary efforts for constructive critique to keep your project grounded. Try not to get locked into a certain approach — it’s better to abandon something that doesn’t seem to be working than sticking with it. And if you have any questions, send me an email.

Appendix

Resources

If you…

  • Aren’t a photographer but want decent, free imagery, search Pexels.
  • Want to build out a coordinated color scheme for your site, Kuler is great.
  • Need temporary text while you’re designing layout, try Not Lorem Ipsum.
  • Want to use nice typography but don’t have Squarespace, check out this article and this Google web fonts showcase.
  • Have had your website hacked, go here. This is less likely if you use a platform that has a business interest in protecting its userbase. Kits like Wordpress don’t care so much.

Further reading

Sidebar
Hack Design
Smashing Magazine
A List Apart (also check out A Book Apart)
Web Design Ledger

Show your support

Clapping shows how much you appreciated Alex Miller’s story.