Day 1
So, sometime on today I decided I needed to update the color scheme on my website. My plan was to literally just update the colors and call it good.
Fast forward to this very evening when I’m working on the color updates and I decide I should also readdress the sites vertical spacing and rhythm. Then I realized the horizontal spacing could use some attention… Then I realized I was just redesigning my website. So I decided to blog about about it!
Part of the overall goal here, is to make the theming structure MUCH more simple. So I started like any good developer, I opened up some issues against my site repository, and created a simple Github project to juggle all my ideas as they came up.
When I decided to get started I had a rough new color scheme…. Things clearly needed some fine tuning.
I decided to use this post as part of my re-design process, its going to get published and updated as I go! So I think the next thing I’m going to tackle is wrapping up this color change branch, so that I can get it merged. Then I think the next thing I’d like to tackle is the spacing and layout questions. I may need to break into Affinity Publisher and work out a spacing wire-frame to build the spacing system.
New color scheme published! I don’t hate it, but I think it could still use some fine tuning. Now its time to get started on the new spacing changes. This one came up because I’ve noticed over time as I’ve changed things spacings have gotten a little weird and inconsistent, especially between different components. Lets see if we can get some consistency here.
I think I have a solid spacing plan. My goal is to keep it simple until it can’t be simple anymore. I think I’ll need a small padding, and potentially a large padding. I did a whole lot of spacing clean up, its gotten pretty late, I’ll follow up and continue tomorrow.
Day 2
Alright its morning! Digging back into it, I think I want to tackle the link and button consistency next. I think I want to simplify my styles further alongside this work.
Okay, so I abandoned the new style sheet plan. I revisited what I was doing before, and my previous strategy of component CSS is still valid. I like it! So instead I choose to tackle some issues I was having with images, the margins were a bit weird when images were aligned right or left. This left odd bumps along the page margin that I did not care for. So I reworked the containers a bit, so keep the margins flush and even.
Additionally I addressed link styles site wide. This was in order to bring some more consistency to the usage of color and style. More work and likely be done here.
I think the next thing I would like to tackle is actually the page margins. When on mobile or narrow desktop experiences, the page margin is too tight for my tastes. I think additionally I’m going to audit and make sure we have clean margins across the entire site.
Wrapped up that change… Look at those margins. Those are some handsome margins. I’m realizing that with the rest of my life happening in the background, I will likely not get through this entire redesign in two days. But thats okay! I’ve made good progress and generated a ton of tasks to help me continue moving forward. In the future I’m intending to:
- Redo the entire navigation component.
- Fix the Code Highlighting colors
- Create a Light version and toggle between the two
- Update and make font-sizes more consistent
- Update Favivon
- General Content Updates
- Redesign site header
- Finally add a dang contact form
- Refine blog content & reading experience
I will likely make a few more small updates over the next few days. But I’m really happy with where I’ve landed so far!