In the last post of this series, I wrote that I tend to get bored with creating designs at some point in the process and want to start coding. I now have reached that point.
My joy of creating designs lasted shorter than I thought and currently, I have designs for three pages: The homepage, the blog overview and a single blog post. While this is a lot less than I aimed for, it will give me enough of a base to start coding and even design other parts of the page in code. I might come back to Figma later in the process if I get stuck.
Before going into the details of what I did with the pages, here's the link to the Figma project, if you want to look around: Link
It's not super clean, I don't use components everywhere I want to, but its what I could do in the time and with the motivation I had.
Now, let's jump into the details.
The homepage
Not a lot has changed here. I cleaned up the spacings to get a feel for which dimensions I want to go for. Currently, I'm using multiples of rem, which means all spacings are multiples of 16px. I've done this in a lot of other projects and it worked fine.
The one thing I did change were the underline-background-hybrids I used for the "Continue Reading" and "Project Details" links. They felt too playful and somewhat forced, almost as if the page screamed "look how cool I am". And if there is one thing that does not make you cool, it's saying how cool you are. Here's a direct comparison:
Color-wise, I like the neon green in the header, as it draws a lot of attention to the email I want people to contact me at. Using the green in that many other places on the site made it loose its value. I went with the orange instead and used a pale version of the green on the divider instead.
Looking at the page now, I feel it looks like a more confident design. I might even go back and remove the color on the links altogether. Not sure about this, though.
The blog post overview
Not much to talk about on this site. I feel like the only big question on these sites i wether you want to display
- Only the titles
- The titles and an excerpt
- The full posts
I went for only the titles (and the tags, more on them later) here. Partly because that's the way it is currently implemented and I like it, partly because I like an overview to be clear and give an... overview on which articles one can find here.
I originally added the tags because the site looked bleak and I wanted it to be more colourful without adding arbitrary elements. In addition, the tags give visitors a quick overview of the topics of the blog, even though they might not understand the titles of all posts.
There is no pagination in the design, even though I will need one. A pagination seems to be the one of the things that you design and then you end up using it and it feels weird. I will prototype that in code and then make it look good.
Single post
The content did not change a lot compared to what I currently have. The date was moved to the top, that way all the meta data of the post is at the top. The images now are wider than the content. I've always liked that and this is why that's here. Sometimes, that's enough justification.
The "written by" may feel weird at first, because I'm the only author of this blog, but I added it in preparation for micropub and having a author card on my content.
There is more that I'll need to add on this page regarding webmentions, but I have not read into that topic enough to make design decisions on this yet. This will have to happen later, either in code or in Figma if it turns out to be complex.
The bottom section (I don't want to call it CTA) is more present because I want RSS to be cool again and also I want to be bought coffee.
Other post types
I though about other post types in this context. What I currently think of are link posts (like on daring fireball) which I had in earlier blogs of mine and want to have again. Photo posts might be a possibility as well (even though they would live in notes, I guess). I decided to have those post types as distinct feeds and not mix them with longer posts.
Now what?
Now I will go ahead and do a git init, set up Gatsby and a naive blog and then read into micropub and webmentions and try to get those to work as a first step.
Well, now I will go to bed. But sometime in the future, git init and things.