cmc/cleberg.net

  1#+date:        [2025-09-05 Fri 10:21:00]
  2#+title:       Website Redesign 2025
  3#+description: An overview of the 2025 redesign of this site.
  4#+slug: human-website-design
  5#+filetags:    :web:
  6
  7#+begin_quote
  8/Please note that this redesign is a work-in-progress and is not complete. The
  9content below describes the beginning of this journey and where I think it may
 10take me next./
 11#+end_quote
 12
 13#+caption: The Old Theme
 14#+attr_html: :alt A screenshot of the old theme for cleberg.net.
 15https://img.cleberg.net/blog/20250905-human-website-design/before.webp
 16
 17#+caption: The New Theme
 18#+attr_html: :alt A screenshot of the new theme for cleberg.net.
 19https://img.cleberg.net/blog/20250905-human-website-design/after.webp
 20
 21* Inspiration
 22
 23I've written numerous times on this blog about minimalism, so it shouldn't
 24surprise any readers here that I've redesigned my website again for even more
 25minimalism. However, it's a bit different this time as I've historically
 26designed my website to be very computer design driven (think monospace fonts and
 27sharp contrasting colors), rather than focusing on designing a website for human
 28readers.
 29
 30I felt inspired recently to minimize my website yet again, but I couldn't figure
 31out why I wanted to do so for a while. Finally, I think I figured it out. I have
 32been inspired lately by concepts, such as [[https://en.wikipedia.org/wiki/Wabi-sabi][wabi-sabi]], [[https://en.wikipedia.org/wiki/Shikata_ga_nai][sho ga nai]], [[https://en.wikipedia.org/wiki/Brutalist_architecture][brutalism]],
 33[[https://en.wikipedia.org/wiki/Minimalism][minimalism]], and related concepts.
 34
 35This piece specifically inspired me to cut out elements on my web page that did
 36not add value. In other places, I simply redesigned how that information was
 37presented (e.g., creating an "About" page rather than putting that information
 38on my home screen).
 39
 40However, that was not the only motivation for redesigning my website. I have
 41also recently found an interest in crafting a more human-centric design for my
 42website.
 43
 44In the past, it has largely been a monospace-only, sharp contrast, bold colored
 45blog. As I grown older, I find myself more interested in naturally-occurring
 46color palettes and focusing on legible content.
 47
 48This blog post will explore the decisions I made and why I chose those
 49decisions.
 50
 51* Function
 52
 53The first step in this journey related to the functionality of the site itself.
 54While my site has not used JavaScript for many years, I have focused on the HTML
 55itself.
 56
 57A common question I challenge myself with is: "Does this element serve a
 58function? Is it useful? Does it provide more value than distraction?"
 59
 60With the most recent redesign, I decided to:
 61
 62- Keep the navigation bar to five elements.
 63- Move the "contact" details from the home page to a dedicated =/about/= page.
 64- Minimize the footer to remove the build timestamp, donation links,
 65  security.txt links, and webring links.
 66
 67This left a focus on navigation, my blog posts, and a short list of links to
 68relevant pages on my website.
 69
 70* Colors
 71
 72Previously, I used a very direct color palette for both light and dark modes, as
 73seen below in the CSS snippet. This used sharp colors and relied heavily on
 74"pure" colors without tints or shades.
 75
 76This allowed for plain blank and white contrasting elements, with basic red and
 77blue accent colors for inline code and links, respectively.
 78
 79#+begin_src css
 80:root {
 81    --bg: #fff;
 82    --bg-bright: #eee;
 83    --fg: #111;
 84    --link: #00f;
 85    --code: #f00;
 86    --border: #ccc;
 87}
 88
 89@media (prefers-color-scheme: dark) {
 90    :root {
 91        --bg: #121212;
 92        --bg-bright: #1e1e1e;
 93        --fg: #e0e0e0;
 94        --link: #8ab4f8;
 95        --code: #f28b82;
 96        --border: #333;
 97    }
 98}
 99#+end_src
100
101After the update, the focus of the color scheme is focused on a more natural,
102paper-like effect. The light mode focuses on a yellow/orange-tinted paper-like
103substance, with a dark red accent and straightforward design. Likewise, the dark
104mode scheme uses a charcoal-like color scheme with very similar accent colors.
105
106#+begin_src css
107:root {
108    --bg: #EDEDE7;
109    --bg-bright: #E8D3BE;
110    --fg: #201E1D;
111    --link: #810208;
112    --code: #810208;
113    --border: #E8D3BE;
114}
115
116@media (prefers-color-scheme: dark) {
117    :root {
118        --bg: #201E1D;
119        --bg-bright: #2F2F2D;
120        --fg: #EDEDE7;
121        --link: #D9C2A6;
122        --code: #D9C2A6;
123        --border: #2F2F2D;
124    }
125}
126#+end_src
127
128I am still working on the color scheme and don't believe I'm done modifying this
129yet. Expect more changes, as always.
130
131* Space
132
133While I haven't updated the margins and padding much /yet/, I did make a few
134changes that affected the spacing of the site. The intent of this redesign is to
135keep the focus of the reader's eyes on the intended content, as well as creating
136a comfortable and intentional page layout.
137
138That being said, let's dive into the changes I've made so far:
139
140- *Font style*: I've updated the font style from a monospace font stack to a
141  serif font stack. This created a more natural flow across the screen and less
142  rigid constraints on the area of the fonts.
143- *Font size*: Related to font style, I naturally had to update the font size as
144  well. This allows for natural reading breaks for the eyes, spacing between
145  lines, emphasized and larger headers for visual cues, as well as fewer words
146  being displayed on screen at once.
147- *Date format*: I have moved the visible dates on my pages from the ISO
148  standard (=YYYY-MM-DD=) to a legible, human date format. The new dates
149  describe the months in full words, as well as the day of the week on post
150  pages, so that you may read it as you would say it out loud. The underlying
151  date tagging within the =<date>= element itself still follows the ISO
152  standard, as that's meant for computers to read.
153
154With these changes, I'm pleasantly surprised at the quality improvement when
155reading the pages on the site.
156
157* Looking Forward
158
159As I said at the beginning of the post, I'm not done yet. However, I wanted to
160stop and reflect on the changes so far.
161
162I will continue to think about changes, specifically with the following already
163in mind:
164
165- *Color palettes*: The current scheme is good but not great. I'd love to find a
166  color palette that feels like reading natural paper.
167- *Emphasized text*: Are links legible enough? Is there enough contrast between
168  quotes, inline code, links, etc.?
169- *Spacing*: Font sizes, padding, and potentially reducing content.
170- *Layout*: Is there a better structure to this document that would allow for
171  more comfortable reading?
172
173With this phase done, I am content and am joyful at the thought of continuing to
174refine this website. If not for any readers who may or may not even exist, at
175least for myself.