When I started this project I always knew that the design was meant to be simple, and that thought hasn’t changed at all. I always have liked simple designs that encourage getting focus on the content rather than visual effects that entertain and distract you from what actually matters. But, I also have read other sources of inspiration and I got to understand that a little design is also an improvement that boost the experience and helps understand better.

My previous design had things I didn’t like that much:

• The light theme with black over white felt way too plain.
• The generic font and lack of structure by missing mono, serif and sans-serif.
• The site title with my name felt too impersonal.
• The sections were too random.
• The home page had just the list of articles and it felt too empty.
• The lack of design led me to have an unstructured site.
• The unclear distinction between the summary and the description.
• The inline code was too disjoint from the block code sections.
• An unclear taxonomy.

But not everything was that bad. There were other things that I really liked and I wanted to preserve in this new design:

• The social links using nice solid SVG icons.
• The layout for the articles list with the date, title and summary.
• The summary, reading time and date of publishing date.
• The management for bibliography leveraged on bibtex files.
• The coding with language syntax highlighting.
• Image responsiveness.

There were other things I adapted by myself and were a nice first attempt and I also really liked:

• OpenStreetMap integrations. I usually add maps of places I’ve visited and setting the pinpoint it’s super easy. It has levels of zoom depending on the value I set.
• OpenSheetMusicDisplay integrations. This is, perhaps, my favorite integration. I’ve managed to make music sheets in an XML-like format out of MuseScore sheets.

The Redesign

After reading several blogs, that unfortunately I didn’t noted, I came up with four key elements:

1. Typography
2. Color scheme
3. Logomark
4. Layout

Let me break them down.

Typography

I wanted to have three key fonts to highlight different concepts:

1. Serif: A font intended to display titles.
2. Sans-Serif: A font for legibility intended to be used for most of the content.
3. Monospace: A font intended to display code content in both inline and multiline blocks.

With this in mind I chose the following fonts:

Serif

Glock is a contemporary high-contrast serif typeface intended for display use. It draws inspiration from newspaper’s headlines but with a contemporary approach. It’s used for H1 to H6 titles.

Sans-Serif

Fira Sans was designed to integrate with the characters of the Mozilla FirefoxOS. The Fira typefaces also aim to cover the legibility needs for a large range of handset varying in screen quality and rendering. The Fira font family is used for main content text.

Monospace

Fira Code is used as programmers needs a lot of symbols, often encoded with several characters. It’s a monospaced but readable font. Here an example:

 1package main
 2
 3import "fmt"
 4
 5func main() {
 6  s := "World"
 7
 8  if s != "x" {
 9    fmt.Println("Hello, World!")
10  }
11}

You can notice the “not equal” symbol depicted as !=. Pretty cool!

Color scheme

The inspiration for the final color scheme decision came from my coding environment. After trying several color schemes, I got to know Nord, it’s not a new theme, it’s been around for some years now, and the project is a really well structured one, it’s available at https://www.nordtheme.com/.

The theme is comprised of four groups:

• Polar Night
• Snow Storm
• Frost
• Aurora

Aurora is a warm group, and despite I’ve coded it in my styles, I hope not to use them as I decant for cold colors.

What I like of this color scheme is its versatility to easily change between light and dark schemes. Actually you can play with it clicking the top left button to toggle them.

Logomark

This one was a hard one to come up with. I wanted to mix concepts from coding and writing in a symbol that also integrated my name. I’ll left a link to the redesign pdf at the end so you can see the evolution. But you already can see the final result at my site’s header.

Layout

The new design keeps the single column idea for the main content with an F reading pattern and navigation style. This keeps the natural eye movement and poses an advantage as the reading pattern lies on the reader’s scanning behavior by placing important information along an imaginary line formed by the eye movement.

I also made an improvement to the layout for articles. The idea is to keep the single column view, but the “Table of Contents” is now always present as a direct menu at the right of the article. It provides easier navigation, but also keeps the reader in context of what they are reading, it’s almost like a zoom out to the general picture and a zoom in to the detail for the section the reader is at.

Improvements

OpenSheetMusicDisplay with dark and light support

One of the things I spend some time improving was the OpenSheetMusicDisplay to support both themes dark and light.

Here’s the dark theme. Notice how the music sheet is fully integrated to the theme for reading easiness.

And here’s the light theme for the same section. Notice how the music sheet is fully integrated for the light theme.

Bibliographic styling

A minor fix was also done on the bibliographic styling to integrate better with the new design.

Asciinema player

I also fixed a problem when loading an asciinema recording. In the old design you had to reload the entire page to view the recording, but now it loads the right player from the beginning without having to reload the page.

Keyboard keys combination

I also improved the styling to show a nice “key” effect when showing actions that have to be performed in the keyboard. For example, Ctrl + S.

Upcoming work

I think I’m almost done with the redesign, but I’m sure there are still some things that can be improved. For instance, one change I still have to perform is the history layout. It would be nice to group articles by date of release.

For now, I hope you to enjoy the new design as much as I am 😃.

As promised, here’s the Redesign PDF