Brown-orange diary with public $Diary written on it

Case study: Blog on a paper

This post was in my virtual drawer for some time. Some things have changed since then. Today I would still start with same philosophy but I would do things differently.

Blog on a paper is my personal blog which I sometimes neglect and redesign whenever I have the chance. I am almost never content with it’s design because I like to try on it the new techniques I learn. Most of the designs didn’t make it because it is a my side project and because of my executive function problems.

There are trends in the web design like mobile-first, offline-first or, looked down upon, desktop-first. In this project I wanted to try a little bit different approach about which I heard when I was watching over my twitter feed, I wish I remembered who it was. Two designers were talking about a recent project and one of them mentioned that they began with the footer. This intrigued me. This project uses footer-first method.

The first thing I did were wireframes. Normally I would do more research trying to figure out what the specific purpose was, what was the client’s goal, who would manage it, etc. In this case I was the client and I wanted a new theme for my personal blog.

I do wireframes on paper, the reason for this I explained in a different post. First element I sketched down was the footer. Decision to use three columns instead of two or four was practical. Two columns can’t hold as much information as three unless I would want to stack the information and four columns can hold too much. 1

picture of wireframes

The next picture is the home page. The decision to use only one featured image comes from the minimalist approach in this redesign. My design solution prefers usage of excerpts instead of full posts but it doesn’t enforce it because it can be rather ugly. I have considered a sidebar where archive widget would appear but I decided against it for now.

The picture on the right side shows the comment section. There is a clear hierarchy when it comes to comments until a certain depth because making comments even smaller would make it hard to read. The comment form is designed in a specific way where the message is the first thing the visitor will see. The reason for this is ease of commenting. The visitor is able fill the name and e-mail address later but what is on their mind is temporary.

The next came Sketch and choosing colors. Before I tried to do skeuomorphic design and tried to imitate paper preferably on a wooden table. Those were quite heavy designs because of the wooden texture alone2. In the sense of minimalism I chose only black and white colors, black #101010 and white #fdfdfd. The reason for those two colors was simple, I dislike using strong black, #000, and white, #fff, because they cause me problems focusing on the text.

Font selection was based on my own preferance which fonts are easy to read. One of those fonts is Merriweather, a serif font. The main reason why I chose it were styles, 8 versions of the font which is an exception among freely available fonts. When I was looking for sans serif font I couldn’t see any good I would like to use. So I settled on Merriweather Sans. It may look boring but it does the intended job.

I don’t really like using child themes of themes I don’t know inside and out which rules out using Twentyfifteen theme as a parent theme. Sometimes I like to use underscores or, my own, dotchi themes as a barebone project. Underscores has the advantage that it can be generated with text domain name automatically and has more functions. I have to change the text domain manually when I work with dotchi. 3

As I have said in the beginning this post is more about thinking about my design process than anything else. I will tweak the design sooner or later because since the time it went up and now I learned new techniques and my skills are better too.

  1. When CSS grids appear in other browsers it’ll be easier decision than it is today
  2. Note to myself: It might be possible to create a JavaScript script which would generate an svg for this.
  3. Text domain is usually name of theme or plug-in. It helps translating the theme into different language when files with translations are available. Simple example which prints “Hello, World!”: _e( $text, $domain ); (This works only in WordPress, $text and $domain are variable which have to be set before the function _e() is executed) If there is a set different language than default, usually English, WordPress will retrieve translated phrase in that language.