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

Commit 2b45f8ec66

Commit `2b45f8ec66`