Introduction

Eversince I moved my blog to Hexo, I have been thinking to work on the design of my own theme. So here comes Frame - a minimal Hexo theme inspired by traditional paintings and their frames. I spent several weekends designing and coding on this theme, and it was first published on Github on Aug 29, 2021.

👉 Demo Site

👉 Github Link

Now that I have released a second version (v1.1) of Frame - added some new features, fixed some small bugs and did some improvements, I decide to do a review on the overall design and development process.

Flat & Minimal

I followed a flat and minimalist design principle when I am working on the layout design of Frame. There is no shadows, decorations or flashy animations, the web pages are simply consist of text, image and lines. I am aware that those flat designs might lose its uniqueness, however, for a blog theme, being minimalist allows the viewer to focus more on the content of the blog, which is more essential than just being pretty.

About Typeface

I decided to use Inter almost without a second thought. It is one of my favourite sans-serif typeface, it is well-crafted for computer screens, it is neutral but not too cold - it is perfect for blogging. For Chinese and Japanese typeface, I chosed the Noto Sans Family to pair with Inter, and they work well.

typeface

One of the main features of Frame is the Gallery View. Originally, hexo only provides a List View or a Archive which lists all post titles, there is no space designed for images. As a designer, showing a featured image or cover for each post is really a need, since I sometimes showcase my works on my blog as a portfolio. Therefore, I designed the Gallery View to showcase posts with their covers:

gallery view

Also, I added solid lines around the webpage, those lines are the “frame” that decorates the “masterpieces” inside them (and that’s why I use works from Claude Monet on the demo site). This special design can also be seen in the website of Anyway FM and another hexo theme Paper.

Colors

I designed 3 color modes for the theme: default, classic and dark. The default mode and dark mode are designed for the day-guys or night-guys. I am more like a day-guy - I use light color mode in my computer, smart phone, and my Visual Studio Code color theme.

I also designed an old-school color mode - classic, with a light yellow background and dark blue text. The classic mode is my favorite, those colors are taken from the classic hand-writing notebooks, and they adds some warmth to the neutral design of the blog pages.

color mode

Design + Code

Being both the designer and the programmer of a web design project is really amazing, though tiring. It is a great comfort when everything is in my control since I am the one who codes. I am able to test my design immediately through programming, so that the code might not always follows the design file, in fact, sometimes they work the other way around. I had to be aware of the front-end structure even in the very early stage of UI design.

Dealing with pixels

One small detail that worth mentioning is the design scale. I used Sketch to do the UI design, and pixel px is used as the design unit. However, when I get to the codes, it would be better using rem as the unit so that I could easily tune the scale of everything on different screen sizes. But one drawback of using rem is that it is difficult to approximate the size of objects, for example, I can easily tell how large 12px is, but I can hardly imagine how large is 0.0225rem.

An elegant solution is to use an “imaginary pixel” unit​​​​​​ $px = 0,0625rem, so that even the more flexible unit rem is applied, we can still approximate the actual size of objects. For example:

1
2
3
4
5
6
$px = 0.0625rem

$font-size-heading-h1 = 28*$px
$font-size-heading-h2 = 24*$px
$font-size-heading-h3 = 18*$px
$font-size-heading-h4 = 16*$px

Finally

Although designing and coding for a blog design is tiring, the joy and satifation that comes would worth the effort. If you like Frame and would like to know more about it, you can go to its Github page or its documentation to find out more. Also, if you have suggestions on how to improve this theme, please don’t hasitate to issue on GitHub or contact me 🌈.