Website Redesign: It’s Finally Happening

Six and a half years ago, I sat down for my first day of freelancing as a web designer. The first thing I did was set up a Harvest account so I could track my working time. The second thing I did was start the timer as I began my first client project.

The third thing I did? Start building this website.

And very little has changed since then. In fact, the front-end has not changed at all. Aside from general WordPress maintenance or switching hosts, I haven’t spent a lick of time on my personal website.

I want to change that, so I have decided to make my first feeble attempt at a redesign. I’ve done it plenty of times for my own clients, but have never carved intentional space to do it for myself. Recently, I sat down and plotted “vacation” days I could use to work on it. I’ll spent a few four-day weekends between now and the end of the year to make it happen and blog about it as I go.

A new website and a new reason to blog. Score! ????

First task: Decide what the heck I’m doing

It’s tough to work on something when you’re not sure what it’s supposed to be. A redesign for the sake of redesign is both super vague and something I’d avoid doing in general. I mean, this is a personal site, so I can do whatever I want, I suppose, but certainly not the best use of money for a commercial site.

So, I took a moment to figure out what I needed from a new design. Here’s what I decided:

• It needs to be more of a personal site and less of a sales pitch. I want the vibe to be more like a piece of web property; something that tells people where to find me and things I’m doing.,
• It needs to be more accessible. The field of accessibility has become one of the more important aspects of web design and the existing iteration of this site is terribly inaccessible. I’m want this design to level up my personal understanding of accessibility.
• It needs to be more performant. It’s actually not that bad right now! It could be better simply by relying on fewer third-party dependencies and coming up with a much simpler style that encourages reusable patterns and slimmer CSS.
• It needs to stay on WordPress. I toyed with the idea of going full JAMstack or going with a single-page application using Vue. I even started toying with some rough ideas with the assumption I’d be using Vue. However, I quickly realized that I was over-engineering what should be a simple blog and talked myself back into a straightforward WordPress approach.

That’s about it!! Nope, no specific functional requirements. No crazy user stories. This is just gonna be an excuse to invest in myself.

Second task: Sketch it out

I’d normally opt for paper and pencil when wireframing or drawing a site, but I went straight into Sketch for this go-round. However, instead of aiming for pixel perfection, I’m leaning toward mockups to inform my general direction rather than a law that needs to be followed.

I started with this.

Then thought about something like this.

But these feel super heavy-handed to me which is counter to my goal of simplifying things. Now, I’m thinking of stripping everything back and going for something closer to this.

Never mind the different orange values for the outside border and GG logo at the top. I’m going with the darker orange and didn’t bother updating everything. The darker orange is not only better contrast for accessibility, but happens to be the exact Hex code for the San Francisco Giants. ⚾️

That’s it for now!

I’m planning to blog much more about this as I make progress. Now that I have a good idea of what I’m making, I’ll be setting up my development environment with a workflow that’ll help me build this thing while getting the basic scaffolding in place for a WordPress setup.

More to come!