Starting a Blog III – Design

The previous post was about the technical viewpoints of this website. However, creating a blog is more than just the computer science perspective focused on code and organization. I think it is important to separate how it is built technically, from why is it built like that. Engineering and design go hand in hand in many aspects, as good engineering also answers design questions, but the goals that two disciplines pursue are completely different.

Designing a Webpage

For me, design has different aspects that need to be merged into one final style. In the next sections I will go through each of the aspects that have influenced the design of this blog. As I consider myself as a hobby artist and not a professional designer, feel free to send me a comment when you find some bad designed aspects, I should rethink.

A Chaotic Act of Self-Expression

Designing the blog, I dealt with the question, what mood do I want to archive with the content I create. What are the core feelings I want to share in this blog? Honestly, thinking quite a lot about it, I still do not have a good answer. I do not want to create a brand of myself, focusing on one core philosophy. What I rather like, is to merge the different aspects of my interests into one picture. Will it be chaotic? Sure, I think it has to be. Will it be perfect? No, but it has not to be perfect to be good. Will it be personal? Yes, it should resemble my thoughts and feelings at one point of my life. Do I have to agree with it in the future? No, I will grow and learn (at least I hope so) and so will my opinions. The old thoughts are not bad, they will show me where I come from. What I want it to be is a patchwork of my thoughts. A picture of my interests in one moment at a time. A time machine to my feelings of the past. A collection of statements, each counting for themselves, but still being part of a greater work representing myself.

Functionality and User Interaction

The main goal of the website is readability of one single blog posts at a time. On top of that, easy navigation would be nice, as well as filtering and search of posts. The blog should become an online repository of my work. At the moment, I focus on a blog, but I have some other ideas where I might take it in the future. Keeping the functionality minimal, I have the potential for expansion and freedom to change it when I want.

As a blog is static, there will not be much interactive content on this website for now. I just want those pages to be straightforward to navigate, so the clickable elements should be clear and simple, and easy to identify. This is the only focus point regarding user interaction for the moment.

Semantic Structure

A website persists of different sections, each fulfilling their own roles. The header and the footer should be separated from the main content. This is archived though a thin horizontal line and some spacing. Moreover, this content should not dominate visually, so it is kept as simple as possible. This especially counts for links, which appear as a bordered button in the header, and in a list at the bottom. In the list over the blog entries, the different posts should be easy to identify. This is archived by boxing them, in the same way as the navigation buttons of the header. This similar design stays minimal, while creating a decent accent, that those elements should be clicked, to go to the corresponding side.

General Layout

Nowadays web suffers from the issue, that a website can be accessed from a narrow phone screen, as well as from a wide angle monitor. As a consequence, this leads to the following problems: First, if the content is displayed on a narrow screen, the elements that would be nice to have next to each other, now should be rendered below each other. Second, as we want to create a blog, where the common reading direction is vertical, even with bigger font sizes, all elements should not expand the view horizontally. Websites that expand horizontally are hideous to navigate and read. Third, if the screen is wide, the elements should not get lost in different corners of the screen. Instead, they should stay in the center of the screen inside a column that is comfortable to read. Fourth, if we restrict the column width on a wide screen, this column width should be scalable though the font size.

These are the goals, with which I designed this page. Probably there are much more, but for a beginning this should be fine I think.

Fonts

At this point, I want to share some thoughts about the selection of the fonts I use. The mayor goal of the blog is readability on a screen, which leads to the following restrictions: We want a font that has no serifs. Fonts with serifs are good for printed content, but misplaced on a screen. Also, the font should be clear and simple, leaving the focus on the content. In the end, I settled for Plus Jakarta Sans, but there a surely much more fonts that serve these properties. For the titles and headlines, I settled for Space Grotesk, as it is still a serious font, but adding a character to the side. The font is still clear, rather technical, and at the same time playful here and there adding some nice accents to the content. I think, using two fonts is totally fine for the beginning, so it does not get too messy. We have a shared look between the different pages, preserving some of its identity.

Colors

Colors play a crucial role when designing a website. They do not only affect the readability on the content, but also direct focus, influencing the mood and style. Nowadays, you have at least dark and light mode everywhere to adapt to the users preferred style. Maybe I will implement different themes in the future, but for now I settle for the dark and minimalistic style. It is comfortable to read, and does not flash in your face. Also, I just like black – people say. Moreover, I thought about adding at least an accent color, to the webpage, to highlight essential element. However, this color should be used rarely to strengthen is significance. About the selection of this accent color, I will just choose one I like.

Title and Header

Surely, you have noticed the symbol next to the header. It is a Celtic knot bearing traditional and personal meanings. For myself, it represents infinity going hand in hand with chaos, but still having some kind of order. Honestly, I also just like its shape and the idea of an infinity line behind the ancient art fascinates me. It bears some personal significance too, so it is the right choice to use it on this webpage. As most symbols have different meanings though time – positive and negative – I want to note that there is no more meaning to it than stated here. Only if you know me personally well, you can try guessing about the private meanings.

Titles are rather hard to find, as they should be short, but still wear enough meaning to be specific. For the whole project, I struggled between ‘Brune’s Home’ and ‘Robert’s Blog’, where first is my family name. I finally settled for the second, as I wanted to make it personal firsthand to myself. However, when others of my family create a website, one could link them under the former title.

The remaining elements of the header should be the core navigation links. As this website only owns one category, namely the blog posts, this is a little useless at the moment. However, as the website might grow more suitable categories might arise.

Footer

In my opinion, the role of a footer is to provide shared information to all sites. In my case, this contains a list of core navigation elements, as well as a list to the legal sites of the webpage. Both lists have a small headline, while being represented as a list of links.

Language

My mother tongue is German, And as I am hosting this website in Germany, I will have some legal obligations in that language. Otherwise, I want to practice my English, so I write my posts and content in that language. Additionally, choosing English should allow more people to read the blog – with greetings to you my international friends. Last, as my English is more serious than my German, you can expect less bad jokes.

Accessibility

Accessibility is one topic which is often neglected, when creating a visual focused website. I hope, that by using meaningful HTML tags and providing alternative descriptions to images, this website becomes accessible. However, as this is a hobby project, I do not have the capacity to test and verify everything. If you identify an error or some bad organization, please give me a note and I will be happy to fix and improve it.

Closing thoughts

Writing this third post, I still have the feeling there is much more to say about design, meaning, and functionality that I can not put into words for now. However, as this is just the beginning of this project, I am happy that I finally put it so far, that I am able to share it. For sure, it is not finished, but neither have I finished learning, so I am exiting to see what it will become.