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.
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.
Gallery View
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:
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.
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 | $px = 0.0625rem |
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 🌈.