I just redesigned my website.

I did it all myself. It’s a lot better than the old one, but I suspect it will still look unprofessional to some (I’d love your feedback on where the pain points are!)

I’m still pretty much a newbie at graphic design. I got into this because I was inspired by a professional design for my company website, and wanted a personal website that showed my personality a bit more.

The professional designer’s work was super good! I spent a while studying it in detail paying attention to use of typeface, color, backgrounds, whitespace, etc., noting what I like and don’t like about it. It was handy to be able to study a Sketch file rather than a website, but you could do this with a website too.

In particular, I noticed that they used a lot more whitespace, large graphics, large text; the background images/patterns were sparing but created interest on an otherwise blank background; and there was usually a block of solid color wherever there was text. I also noticed they used two different typefaces, one for large/headline text and one for body.

I dug into my own site. I decided to start with the blog page, because that’s easier (less stuff on it). I cracked open Sketch and drew a rectangle, filled it with a dark color. Put some sample content – my name at the top of the page, a blog post title and first couple paragraphs from an existing blog post. Picked some foreground colors that seem to go with my background color. I was interested in typography, so I decided to start with that. I opened Google Fonts and browsed around for a bit, collecting typefaces until I found ones I liked. Put them into Sketch to see how they looked in my (barebones) layout. I went through three or four typefaces before settling on a pair that I liked.

Moving onto the layout, I decided to mess with the rectangle – in particular, I liked my name on a dark background but wasn’t happy with Inria on the dark background, so I finally decided to use a solid block of light foreground color – my name would be set on the dark background but the blog title and body would be on the light. Then, I added rounded corners to my blog rectangle because I liked the way they looked with the Quicksand font (which has kinda rounded tips of letters).

And that was that for the blog! I wish I had a screenshot, but it was ultimately pretty similar to what you see today.

Next was the home page. To emphasize the design, I wanted to get rid of most of the copy, so I started by taking only the highest-priority things I wanted to keep from that page. I also did some searching for examples of other people’s personal website designs; mostly they had a big picture of the person next to some large-font text so I decided to start with that. Plopped a big picture of myself on the right side and then was like “hmm, what goes next to it?”

I figured my name could stay in the top left and I could use the space for something else – I saw some people with “taglines” and I thought that might work. Especially since my old website started with “entrepreneur, technologist, effective altruist” and I felt that could make an OK tagline. I put it next to my name in big lowercase letters.

Ok, turns out that looks really pretentious :P. I showed it to a friend who was absolutely horrified. So I bailed on the tagline idea. After thinking for a while, decided to just move my name next to the photo. The problem was that the space was oddly sized (it was kinda tall and narrow, since it’s next to a photo) and a name is inherently horizontally shaped. If I make the text big enough then it can wrap on two lines, but when do you ever see a name wrapped on two lines?

And that’s how I got the idea for the form fill-out motif that I ended up with. First and last name on separate lines, because I’m filling out a form. I don’t claim it’s great, but it’s at least kind of unique :P

To fill out the rest of the page, I first prioritized what I wanted to see. I decided on:

  • Design should convey practicality, project-orientedness, my hobbies, and a bit of caring about products and design.
  • Name and photo
  • My job and quick bio
  • How to reach me
  • Blog posts
  • Some kind of product/service recommendations
  • Housing idea

Then I thought about it and still felt that the bio was the correct next thing. (I think if I were looking for a job I would want to link to a resume here.) A bio naturally comes with contact information, and I was tempted to pull my Twitter, Facebook, etc., but I don’t really like or use those services very much and so it felt off for me to be linking them so prominently. To solve this, I first thought I would use a parenthetical: “(I don’t really use my Facebook or Twitter so please email me!)”

Then for some reason the sidebar idea jumped into my head. I was thinking about Wait but Why, a blog with a lot of side-notes, and thinking “gosh I wish I had a way to do side notes! But I don’t like popups.” Magazine articles have sidebars though, so it seems easy enough to do something similar. It seemed to work, so I kept it.

The backgrounds: I thought it would be a neat design to use a lot of whitespace on the foreground, but then have the background of the page be interesting on its own, and I realized I could suggest more things about my personality using photos. So I looked for some free stock photos and found a pretty decent collection. Picked a few out that I liked. They worked.

I decided to keep the rough content ordering from my old site, putting recommendations next after the bio, because that was the bulk of my old site anyway. I realized that the recommendations would probably have more impact if they were accompanied by images and summaries, focusing on the “why” of the recommendation. My first design didn’t really go through much iteration – what you see there is pretty much how I designed it.

Lastly, the blog. In Sketch, I built a really basic blog index design, and then added whimsical “in which I…” subtitles to each blog entry. I ended up liking that, so I kept it. The left-hand-side design with the ovals was inspired by the shape of the background ovals – I wanted to reuse that shape.

The color scheme was actually the last thing I decided to refine. The other piece of feedback I got from my friend was that the colors didn’t pop. I used a color scheme generator and played around with it until I found some colors I liked. Ended up trying three different color schemes before settling on this one.

Building it was fun too, especially learning CSS flexbox – it was my first time doing HTML and CSS in years, and it was nice to start afresh.

My process improvements / takeaways from this:

  • Start with whatever is on your mind (in my case, typography) and work from there
  • It makes a big difference to test out designs with your actual content and layout, even if it’s very basic. When previewing fonts on Google Fonts, I didn’t learn much compared to when I had those fonts in Sketch.
  • Search for examples of the sorts of things you are trying to create, and figure out what you like and don’t like. It’s hard to spend too much time doing this. I am sure I didn’t spend enough time.
  • Show your stuff to people early on and see what they think!
  • Reuse things from one place in another: the ovals, the borders of the “cards”, the typography.