design for web.

← index


discoform blog logo

numberzs is a video blog that was built and continues to be developed by me using a blog-aware static web system called Jekyll. The site files are stored on my GitHub account with continuous deployment through a CDN by Netlify.

The blog is a personal project, and its need was, and is, purely a way of keeping track of, and sharing, work that interests or inspires me and the people close to me.

Posts are written in Markdown, “a lightweight markup language with plain text formatting syntax” and all styling is handled by the stylesheet, which means that posting new content is quick, as blogging should be.

Design & Development Tools

Wireframes and Mockups

Original HTML/CSS mockup

image of discoform blog mock up version two
Fig1. - The numbers blog layout was a mockup I created for an earlier, abandoned project, the purpose of which was to simply place ads into a mock website for prototyping purposes.

Expanded, now using Jekyll

image of discoform blog mock up version two
Fig2. - numbers was then adapted to Jekyll and greatly expanded while still maintaining the blog spirit when it comes time to create a new post. During development the site was deployed via GutHub Pages and titled blog.discoform

YouTube API embedded thumbnail

image of discoform blog mock up version two
Fig3.1. - blog.discoform / numbers is heavy on motion graphics pulled from YouTube, so embedding the already existing thumbnail images via the API was necessary to save time when creating a post.

Fancybox viewer

image of discoform blog mock up version two
Fig3.2. - Videos display in a darkened jQuery fancybox.

Animated header

image of discoform blog mock up version two
Fig4.1. - Officially branded and deployed as numberzs, an animated header and footer has been added with a, ahem, number of floating boxes in an atmospheric space.

Animated header

image of discoform blog mock up version two
Fig4.2. - And finally, numberzs, a slideout menu is added to replace the top navigation, with the branding applied


VT323 is used only once as a throwback to the original design and concept of the site:


Else, it's all about System Fonts

System fonts have come a long way in the past few years, and some of them might even be considered elegant. I've decided to utilize system fonts on my homepage and on the numberzs blog for simplicity, speed, and consistency between the two sites.

Here's what my current system font-stack looks like:

body {
font-family: -apple-system, BlinkMacSystemFont, 
"Avenir Next", "Avenir", "Segoe UI", 
"Lucida Grande", "Helvetica Neue", "Helvetica", 
"Fira Sans", "Roboto", "Noto", "Droid Sans", 
"Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", 
"Century Gothic", 
"Liberation Sans", sans-serif;
p {
font-family: sans-serif;
font-size  : 90%;

Writing posts

Front Matter

Posts are written in Markdown, a lightweight markup language with plain text formatting syntax. A typical blog post can be written almost entirely in front-matter, with as much or as little description as I like in the main content area, and might look something like this:

layout: post
title:  "Piotr Kamler: Chronopolis (1983)"
subtitle: "+The Heart (1973), +THE HOLE (1968)"
date:   2017-04-26 09:36:52 -0600
author: discoform
author-url: http://discoform.com/
published: true
slug: "Piotr-Kamler-Chronopolis"

 - b6LcCp6nJZs
 - TfRB17xTpGk
 - YcqTf9YjjhE

*"Chronopolis is a 1983 science fiction film directed by Polish animator Piotr Kamler with music composed by Luc Ferrari and narration by Michael Lonsdale. It was Kamler's first and only full-length film."*

{% include youtubeLoop.html %}

From here, the ' youtubeLoop.html ' will loop through the array of video IDs and includes each of them in another loop called ' youtubePlayer.html ' like this:

{% for youTubeID in page.youTubeIDs %}

{% include youtubePlayer.html id=youTubeID%}

{% endfor %}

The ' youtubePlayer.html ' loops through the ID array, utilizes the youTube API to gather the full URL and thumbnail image for each, wraps them in a Fancybox, and print them to the post layout.

Each post is then looped through by an include called ' article-by-date.html ', now stored in a folder called _posts, and prints their title, thumbnail image (selected by me, this time), and post date as an unordered list in a grid arrangement to the home page, most recent first.

This is done with a simple forloop, an example of which looks like:

{% for post in site.posts  %}  {{ content }}  {% endfor %}

Throughout the blog are additional if/else statements and forloops, as well as standard page layouts and includes which allow me to work dynamically, but still be able to serve a fast and secure collection of static web pages. All my code gets processed by Jekyll and compiled into a hands-off folder called _site. The processed files in _site are then deployed.

Social Media

Following options

For numberzs I'm linking to my own social media accounts. As a personal project, it's intended to be a way of signaling my own interests, so a share by or of one is a share by or of the other.

Optimised for sharing:

Every post and page is ready to be shared with appropriate metadata using Twitter Cards and Open Graph protocol.

I want to go to there: numberzs logo


← index