Today I started making the Low-fi wireframes and also the High-fi’s. I had already started the mobile Low-fi’s a few days ago, but today I made them for the desktop version as well. I didn’t do all the pages, just the home page and the page where all the posts will be. I was a bit impatient just doing the low-fidelity wireframes and wanted to see the blog take some shape and color to get some motivation, so I haven’t done the remaining pages yet, but during the week I should take some free time to sketch and assemble those wireframes too.
The first thing I did for the high-fidelity ones was look for a font.
It took me a bit of time, browsing through Figma fonts and looking for inspiration on Pinterest to see if I could find one that matches the site. Fonts are always tedious to choose because, even though there are so many, there is always only a small amount that actually look good with each site, since the aesthetics and vibe influence things a lot.
I still noted down a few that I thought looked good, like Questrial and Oxygen Mono. However, I wanted a slightly more “computational” vibe, since it is a blog to record the development process of sites, programs, and even games, etc., that I make from now on. Additionally, I intend to use pixelated images to decorate the blog, emphasizing this “computational” vibe.
That’s when I had a brilliant idea: why not use Courier New, which is the font used in IDE editors? There is nothing with a more computational aesthetic than code and programming. I selected the font and saw that, after all, I liked it there, and it matched what I had in mind. Therefore, I kept it. The font you are seeing now while reading this is exactly that one.
I still intend to play around and test the layouts I have. I like how they are, but I need to consider a few other things like how to grab attention or how to make the objective of this blog explicit, as well as introducing myself and what I do. Do I leave everything exposed on the homepage? Do I use some strategy to draw attention to a button that leads to another page? I’m not quite sure, but these are things I will be thinking about and implementing in the design and the code.