How I designed and coded my static blog
Disclaimer: You probably shouldn't do this type of design style if you can't do prototypes rapidly in HTML+CSS. In this case take a look at Figma for your design needs.
The design
I have the utmost respect for the professional designers out there. Design is hard. I'm not a designer and I'll probably never look at myself that way. So when I need to design something I have my own self taught processes and steps.
Structure
The programmer in me always wants to know the specifics, so I plan the big picture first.
- What specific pages are there?
- What are the content types I need to handle?
- What systems do I need to implement?
After I got this planned out I start to think of solutions for the specific problems I need to solve. So probably I will decide on the stack first, then I start to nitpick the details.
Visuals
I did not want to use any UI kit on my personal site, so it won't feel right away like any other site on the internet. I opted for Tailwind as a CSS framework for it's rapid prototype capabilities and because I use it often and I'm very familiar with it.
Colors
I went bad practice here to experiment a little. Usually webdesign only uses 4-6 colors for a website, instead here I use a 16 color palette. Admittedly I use several shades of my primary color and they dominate the site. So I try to use the other colors to complement primary ones where they can.
Prototypes
I had a layout in mind and I had my content types in front of me, but had no idea how to put them together. This is where rapid prototyping comes in. This is a technique that I learned in game development.
The motto is: Iterate fast and iterate often.
So I tried many component versions until I had a combination that worked for me.
Shapes and colors
The human mind has a thing with shapes and colors. We identify things by them to decide they are a threat to us or not. It's in our genes.
I did not want to manually create images for each of my posts. (Did that for a long time in the past) But I wanted to visually separate my content, so I used our genetic coding and returned to shapes and colors.
Posts on my website have 3 colors randomly assigned to them and I use various shapes to complement those colors and display them in several ways. That way my posts have a unique visual marker so I (and you) can identify them better.
Animation
I have overdone it several times in the past, so I wanted to avoid that now.
Motto is: Just because you can do it, doesn't mean you should.
So I decided for a simple text and logo animation that complements the content the user is reading right now. Because the logo adopts the posts unique colors, this also helps with the recognition programming I mentioned above.
My main hero on the index site has a little text effect too. Nothing fancy, just some lightweight javascript magic.
Choosing the right technology
The visuals are done, but what technology should I use to make this site?
The choice for me was fairly simple. I used Nuxt for several years and when it dropped Nuxt Content, their own static site generating tool, it was obvious for me I will use it for this blog. This is also not the first time I use or write about static site generation. My old Hungarian blog was made in Jekyll, so I had some experience.
Nowadays every JS framework has it's own static site generation option. So the best bet is to stick with something you like and enjoy using.
So how did it go
Not gonna lie, it was bumpy at first. There is a reason why usually I don't use fresh tech right away. Bugs are frequent, documentation lacks depth and when you search for a specific problem Google does not have the answers.
But these hurdles soon went away after I gained more insight and I did not regret going this way.
What's next
Planting seeds in this garden and watch them grow. And probably iterate a few more times as I go.