Designing My Personal Website (Version 0)

Project Overview:

• This is Version 0 of my personal website.
• I used Figma to create a basic design system and wireframe.
• I used Jekyll to build a static website.

Ideation

I started off by thinking about what I wanted to have on my personal website.

• Pages: About me, hire me, projects/portfolio, etc.
• Blog: Articles and a blog archive
• Newsletter: Maybe not now, but sometime in the future?

In any case, this personal website is mostly a content-based website. I planned on using Jekyll since I want to have a static website and I’m interested in Jamstack technologies.

Next, I also considered the various aspects of the website’s layout.

• The layout needs to be responsive.
• The sections of the layout should include:
  • Header section with a nav menu
  • Footer section that sticks to the bottom (I did this with CSS flexbox)
  • A sidebar, but maybe only for blog posts?
• Types of containers to help arrange and space the layout when I do the CSS

Designing in Figma

I designed some reusable parts of my website such as typography, sizing, colors, images, and buttons. In hindsight, this project doesn’t really involve that much of my design skills, since a personal blog is mainly just text and some buttons when you strip it down to the basics.

Throughout this process, I got better at using Figma. I became a lot more comfortable and confident in using the software.

• I made a wireframe to test out my layout ideas.
• I also learned and got used to using Figma’s layout columns and auto layout features to align everything.
• I decided to finish the rest of the design and development work in the actual Jekyll project.

Building in Jekyll

One of the things I learned from this project is how design and development fit together.

• I learned to use the design system I made for myself as a guide when writing CSS.
• Design made me better at frontend development because I was able to clarify my own thinking through design.
• Frontend development also made me better at design because I thought about what to communicate via design.
• There are some parts of the website’s CSS architecture that are poorly implemented or messy. This is a lesson for me to be more thoughtful about my design process next time, so I can have a better design system and avoid repetitive CSS.

Other Notes

• The final website didn’t come out exactly like the sketch or wireframe. That’s partially because I changed the design along the way, but also partially because of some limitations in my abilities to build out my vision. But hey, being a bit flexible is part of the fun with building personal projects.
• This is “Version 0” of my website because it’s my way of putting out a “rough draft”. Some mess and flaws are okay for now.
• My goals for Version 1: Use Jekyll to build a new website with an improved design, better (and more reusable) design components, and better CSS.