Introduction

Over two years ago I completed one of my first personal programming problems, which was my original website — just a humble vanilla HTML, CSS, and JavaScript site, one of the first I've completed start to finish.

There are reasons I've upgraded; the code quality is ok, but I've learnt a lot since in terms of code styling, frameworks, and UX design. It was also lacking in flexibility, changing or adding content was more of a task than it needed to be, and so it didn't end up being worth the effort.

Design

I've always been interested in design. There's nothing more satisfying than a beautiful design that fits all of its elements together perfectly. And while I've known the fundamentals of design for some time, I've only recently started learning about interface design, usability, and the like.

Most of the process I've taken is based on what I've learnt from university and from recreational reading I do from time to time.

Sketching

Sketching is one of my favorite parts of working on a project. This is when you get to be a little daring and creative to come up with some fun designs.

Some of my favorite exercises to come up with ideas include the following.

• Crazy Eights: I love these — you give yourself 8 minutes to draw 8 ideas. With idea generation I find quantity is better than quality, and I find this method helps achieve just that.
• Mockups: Once you have an idea you're set with just put it on paper. You'll be able to think about the details more than before, but watch you don't get too carried away

Styling

I wanted to create a style-guide that I could use for more than just my website. So I did. And I've ended up using it for my resume and cover letters and I'm sure I'll apply it to other things down the line.

View the full version of the style guide on Behance

Sprototyping

Sorry. I was just really enjoying the alliteration going on... anyway, once I made all my base design decisions it's time to start prototyping. When I make a prototype I use a tool like Figma to create a replica of the finished product without any functionality (apart from going between pages).

Once I'm done with designing and have fiddled around with how things look I'm ready to start...

Development

I had a pretty basic tech stack for development. It looks a little something like this

• Netlify: For web hosting and domain name management
• React: As the framework for development
• Marked: For presenting markdown files

Yeah, that's a short list. But I believe it's better to do a lot with a little than add crazy bells and whistles that will wow visitors with awful load times.

Most of my development was done on the bus ride to and from work, making the process very drawn out and sometimes frustrating. But when summer came and I had a short break available to me, I was able to smash out the last half of development in a matter of a few weeks.