Redesigning my website

I'm going to talk about how moving my website from VuePress to Gridsome has allowed me to have more freedom with my blog and how I was inspired to completely redesign my website.

(Originally posted on https://michaelbrooks.co.uk)

My initial thoughts

Over the past week, I migrated my website from VuePress to Gridsome. This migration has now given me more freedom of design and development.

I was inspired by Jack McDade's awesome website and wanted to create something that was more personable to me.

I like funky designs, but I'm always less motivated to design websites for myself. I never know what I want and I'm not sure if what I'm doing is overboard to a point where my viewers will dislike it.

Determined to move past my anxieties

This is in part due to my anxieties and lack of self-confidence, but speaking to other's about their experiences and gaining inspiration has given me the confidence to push past my own anxieties. I went ahead and created my design using Figma. Once I was happy with my creation, I decided to share it with a Slack group. Those that gave me feedback were very positive which gave me more confidence to share it to a larger audience.

I took a deep breath and posted it on Twitter who generally have more negative thoughts, but the responses were still very positive. It was time to transform my graphic into my actual website.

Designing my website

After about a day, I had most of the design complete and I was super impressed with my work. This is something I've never felt confident about. I love developing websites, but designing a website was something I constantly struggled with.

As you can see from the image above (and from looking at my website), I used black as my background colour with yellow as the main colour. The dark blue adds some sort of separation between blocks and my social icons follow the lines like they're walking along a field at night.

My blog content is still the same white background with black text since it's easier to read. My "Latest Post" has been moved further to the right and has an angle which follows the angle of the yellow square. This gives my website a little more character and breaks it up quite nicely.

The search is also using a yellow border to help make it stand out, and the results also do the same thing. Hopefully, my results can be read clearly, but if you struggle and have suggestions, then I'm open to feedback.

Closing thoughts

Please explore my newly created website and send me plenty of feedback if you have any. I'm always open to suggestions and would love to hear what works and what doesn't. You can add your own comments to this post here, or you can @ me on Twitter.