How I learned to stop worrying and love the process
KEY
Documenting the process of redesigning my old blog
Research
Design
Development
Where I started
The why of this project
Where I started
The why of this project
In 2020, I spent weeks looking for a space to publish my writing. The experience of publishing online was, and still is, quite distracting.
I wanted to find a calm and non-intrusive place, focused on legibility and centering the content of the writing as the main piece of each page.
At the time I had just finished a course in HTML and CSS, so I set out to exercise my design and developer skills and created a website for my writing. I published it using GitHub pages. I loved it, and surprisingly after four years, I still do.
The challenge then became publishing. In my old setup, that meant hand formatting every paragraph in HTML, pushing to GitHub, add a new title in the index which frankly took away some of the fun. So I stopped and found another place for my writing.
2020
Case study
Design process from 2020; From my GitHub page
The project started by spending a lot of time browsing through blogging platforms and drawing insights from how they are built and what their main purpose is.
In my decision-making process, I decided to place a higher priority to the text, and figure out the best way to translate this into the website user experience.
I realized that the experience of reading online has become distracting. It is frustrating to navigate the amount of buttons and popups in every platform, from blogs to news sites. I asked myself, what would be the minimal version of a blog website?
My process always starts with pencil and paper, sketching by hand allows me to think free of technical constraints and get a feel of what the main structure will be. I started by recognizing the basics elements: body of text, title, date and navigation.
Because this was my second time designing and building a website, I had to learn and research the technical aspects of what I wanted to do. Having a clear concept in mind made the process simpler.
With the mid-fi wireframes, I organized the elements and negative space was one of my priorities. Before moving into the final website, I did prototypes in Codepen to make sure everything was working correctly.The title design in the home page makes it easy to find content. Linking the ideas together was a fun way to show a general overview of the content.
Chartering new territory, one of the more challenging aspects of the build was the blue dot as a back button. It is also one of my favorite things for this project. It was hard to do while I figured out what was possible but this was a simple yet challenging project that served as a consolidation of what I learned in HTML and CSS at the beginning of 2020. Sharing the project in public was helpful for accountability.
September
2024
Now
Creating a minimal blog
Now
Creating a minimal blog
The web continues to be crowded, distracting and confusing. I no longer use my new blog and I'm back to square one in finding a place to consolidate my writing. I want something enjoyable, simple, intuitive.
Now more than ever, I continue to believe that we need calm technology.
The driving question behind my old website continues to be strong: what would be the minimal version of a blog?
This document is a (close to) real-time log of the process of redesigning my blog. Writing, pictures, links, readings that explain my thought process, design decisions and the overall process of making a thing on the internet.
Principles of calm technology
From calmtech.com
Developed by Amber Case
Principles of Calm Technology™
Technology should require the smallest possible amount of attention
Technology should inform and create calm
Technology should make use of the periphery
Technology should amplify the best of technology and the best of humanity
Technology can communicate, but doesn’t need to speak
Technology should work even when it fails
The right amount of technology is the minimum needed to solve the problem
Technology should respect social norms
Log 18 Sep.
Start|Create|Research
Log 18 Sep.
Start|Create|Research
Creating and publishing this leaflet document
Create categories and assign color coding
Research
Design
TBD
Copy previous case study explaining why and how I designed the first version
Researching, reading and taking notes about the story of blogs
What is a blog?
"
A blog (a truncation of "weblog")[1] is an informational website consisting of discrete, often informal diary-style text entries (posts).
Source
Posts are typically displayed in reverse chronological order so that the most recent post appears first
The emergence and growth of blogs in the late 1990s coincided with the advent of web publishing tools that facilitated the posting of content by non-technical users who did not have much experience with HTML or computer programming. Previously, knowledge of such technologies as HTML and File Transfer Protocol had been required to publish content on the Web
As of the 2010s, the majority are interactive Web 2.0 websites, allowing visitors to leave online comments, and it is this interactivity that distinguishes them from other static websites.
Popular blog options
Wordpress
Not much to say about Wordpress as a blogging platform, some of the templates are cool, that's their biggest strength imo. I'm not particularly drawn to it, mostly because of their blog editor.
I really liked this theme, it is simple and customizable, reminds me of my original design.
Medium
What I like about this front page is that is offering me a sneak peak of everything. At a glance, I can see info from the writer, bio, and a sneak peak of each article.
There's too much going on. For me, it is irrelevant to know how many comments and likes it has. There's a social aspect to blogs, but it could be removed from the front page.
Substack
Seeing them side to side, it is similar to Medium, a header, a list of posts, and a sidebar with additional information.
The posts list is way cleaner and they use a clever hover state to display the likes, comments and additional functionalities. I like this better.
Listed / Standard Notes
What I liked about this platform is that you can publish from a notes app. I had my drafts organized and it was easy to publish from my desktop instead of copy/paste from my text editor to the blog in question.
My choice of blog for the past few years, it is simple but I'm not satisfied with how the info is displayed at the front page.
Takeaways
The front page needs to present basic information, in reverse chronological order:
Sep. 19
Research|Moodboard
Sep. 19
Research|Moodboard
Research about blogging platforms (what I like, what I dislike, interesting features from current blogging platforms and other conceptual resources)
Starting of moodboards
Sep. 20
Moodboard|
Sep. 20
Moodboard|
Started looking for references. I was looking for web references at first but then realized that the web is a different medium. Yes, this is a blog that will be on the web, but likely the issues across blogging platforms come from the fact that they're driven by different goals.
So coming back to my main goal with my blog, namely legibilibity, what could be the best way to read and publish on the internet, I decided to gather inspiration from the medium in which text have been published for decades: editorial design.
Moodboard
Editorial and printed design have been around for decades. There are no popups and modals on magazines, plenty of ads but they want their own space. Mostly, text and images, formatted in a beautiful way, in clear grids and sometimes unusual ways but never losing their main goal: legibility. I wasn't thinking about this when I designed the first version, but in this more intentional redesign, editorial and books are the main source of inspiration.
Sep. 21
Moodboard|
Sep. 21
Moodboard|
Writing and uploading pictures to the moodboard canvas
Sep. 25
Design
Sep. 25
Design
From the research, I gathered the main characteristics that the front page needs to have:
Date, organized in reverse chronological order
title
snippet of what is the post about (optional)
Additionally, each post needs to have
Title
Date
Body of text
Images/video
Navigation
With this information, the moodboard and my previous design, I have enough for starting drafting a new version in Figma.
Onwards!
Design Process
Sep. 26
Design
Sep. 26
Design
thumbnail sketching with abstract elements
replace with content
Also started building the Framer version!
Sep. 30
Design | Development
Sep. 30
Design | Development
Designed the blog pages
Iterated on front page
Created framer page for the blog pages
Design
Framer development
Concept
October
Oct. 1
Design
Oct. 1
Design
Small edits to writing
Finished building Framer page
Started brainstorming for footer design
Design | Iterations
Sidebar, hover and pop over
Framer development
Time based concept
Oct. 8
Design
Oct. 8
Design
Iterate
Explore variations and time structures
Oct. 10
Design | Development
Oct. 10
Design | Development
Framer development