cmc/cleberg.net

My personal web garden & blog. blog personal website https://cleberg.net

Commit 2b45f8ec66

2b45f8ec669ccf1e180122384ae7c7f8994c19c5

parent: 26a300c71e

Unsigned

cmc <hello@cleberg.net> · 2025-09-05 15:30 UTC 

fix: forgot to format last post

Layout: unified · split

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