kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add more tags

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-10 18:32:35 +02:00
parent f31ff508f2
commit f4e8f98012
10 changed files with 68 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/content/journal/2020/new-website-2020-design.mdx
View File

@@ -4,7 +4,7 @@ date: 2020-07-21T08:00:00+02:00
slug: new-website-2020-design
author: Stefan Imhoff
description: This is the second of three parts in a series of essays about the process of creating my new website. This one shows the design process for my website.
tags: ["design"]
tags: ["design", "book"]
series: new-website-2020
---
@@ -41,8 +41,8 @@ The next thing I moved my attention to was Typography. I always loved Typography
I even own a copy of the 650 pages strong [Decode Unicode](https://www.goodreads.com/book/show/17186505-decodeunicode), a book listing all 137,374 typographical characters, from the Armenian capital letter _Ayb_ to the Khmer Letter _Ka_. There is even a [complete website](https://decodeunicode.org/) showing all characters and a [two-and-a-half-hour-long movie](https://vimeo.com/48858289) showing all characters.
<Bookshelf>
<AmazonBook asin="0881792128" alt="The Elements of Typographic Style" />
<AmazonBook asin="3874398137" alt="Decodeunicode – Die Schriftzeichen der Welt" />
<AmazonBook asin="0881792128" alt="The Elements of Typographic Style" />
<AmazonBook asin="3874398137" alt="Decodeunicode – Die Schriftzeichen der Welt" />
</Bookshelf>
### Typeface
@@ -58,7 +58,7 @@ I like in particular the italic font with the beautiful loops and curves. I pick
Next, I picked a Typographic Scale. A scale is a way to pick font sizes based on a fixed set of rules, for example, a specific harmonic number or formula to create a harmonic visual image. I decided to go with the [golden section](https://www.modularscale.com/?1&em&1.618) (ratio 1:1.618).
<Figure caption="Typographic Scale" size="wide">
<Image src="/assets/images/posts/typographic-scale.png" alt="Typographic Scale" />
<Image src="/assets/images/posts/typographic-scale.png" alt="Typographic Scale" />
</Figure>
I picked 20 Pixels as the base font size. Furthermore, I’m in my forties and websites pick fonts far too small. The company iA Inc. wrote 2006 the essay [The 100% Easy-2-Read Standard](https://ia.net/topics/100e2r), but still, fonts below the recommended 16 Pixels of browsers are a standard.
@@ -82,15 +82,15 @@ I wanted my website to have the color of Japanese _Washi_ (和紙) paper. Early
I picket the HSL color space, to be able to quickly create variations of my colors. In HSL, the first value **H** stands for Hue. Red is 0°, and then each color is represented by a value on a circle. The **S** stands for Saturation and is a value between 0% (gray) and 100% (full saturation). The **L** stands for Lightness and is a value between 0% (black) and 100% (white). With all three values, I was able to create the colors I wanted: First, I picked the color hue I wanted to go for. Next, I reduced the Saturation to a value below or around 10% which I found made any color instantly look _Shibui_ (one of its identifying features is desaturated colors). To get all the other colors, I moved the Lightness value down for a dark color or up for a light color.
<ColorStack>
<ColorSwatch color="#E7E6E4" title="Light Background" />
<ColorSwatch color="#0E0D0C" title="Light Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
<ColorSwatch color="#E7E6E4" title="Light Background" />
<ColorSwatch color="#0E0D0C" title="Light Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#1B1A18" title="Dark Background" />
<ColorSwatch color="#E7E6E4" title="Dark Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
<ColorSwatch color="#1B1A18" title="Dark Background" />
<ColorSwatch color="#E7E6E4" title="Dark Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
</ColorStack>
---
@@ -102,15 +102,15 @@ Additionally, to the main colors, I created 3 other color themes: A green one fo
#### Green
<ColorStack>
<ColorSwatch color="#858679" title="Light Green Background" />
<ColorSwatch color="#0D0D0C" title="Light Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
<ColorSwatch color="#858679" title="Light Green Background" />
<ColorSwatch color="#0D0D0C" title="Light Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#353630" title="Dark Green Background" />
<ColorSwatch color="#E7E7E4" title="Dark Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
<ColorSwatch color="#353630" title="Dark Green Background" />
<ColorSwatch color="#E7E7E4" title="Dark Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
</ColorStack>
---
@@ -118,15 +118,15 @@ Additionally, to the main colors, I created 3 other color themes: A green one fo
#### Brown
<ColorStack>
<ColorSwatch color="#988F81" title="Light Brown Background" />
<ColorSwatch color="#0E0D0B" title="Light Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
<ColorSwatch color="#988F81" title="Light Brown Background" />
<ColorSwatch color="#0E0D0B" title="Light Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#38342E" title="Dark Brown Background" />
<ColorSwatch color="#E8E6E3" title="Dark Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
<ColorSwatch color="#38342E" title="Dark Brown Background" />
<ColorSwatch color="#E8E6E3" title="Dark Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
</ColorStack>
---
@@ -134,15 +134,15 @@ Additionally, to the main colors, I created 3 other color themes: A green one fo
#### Blue
<ColorStack>
<ColorSwatch color="#787D87" title="Light Blue Background" />
<ColorSwatch color="#0C0C0E" title="Light Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
<ColorSwatch color="#787D87" title="Light Blue Background" />
<ColorSwatch color="#0C0C0E" title="Light Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#303236" title="Dark Blue Background" />
<ColorSwatch color="#E4E5E7" title="Dark Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
<ColorSwatch color="#303236" title="Dark Blue Background" />
<ColorSwatch color="#E4E5E7" title="Dark Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
</ColorStack>
---
@@ -154,19 +154,19 @@ I didn’t invert colors but needed to make sure to create good contrast, which
Next, I moved my focus to the logo. A logo is always a difficult topic. Do I need one? Why? What should it be? My initials? An image? It’s easy to create a cheesy logo. I used a _rakkan_ (落款), a Japanese artist seal, for at least 10 years. An artist carved it for me into stone, using the oldest Chinese font, the _small seal script_, introduced by the Chinese Emperor _Qin Shi Huang_, 2200 years ago. It gets pressed into red ink and then applied to the artwork as the signature. I choose the characters of my internet pseudonym _kogakure_ (木隠), meaning “hidden behind leaves”.
<Figure caption="Rakkan">
<Image src="/assets/images/posts/rakkan.jpg" alt="Rakkan" />
<Image src="/assets/images/posts/rakkan.jpg" alt="Rakkan" />
</Figure>
I created a few sketches of other possible logos, but eventually, I discarded them all and moved back to my _rakkan_. Likewise, I decided to simplify the vector form and reduce the number of points and make it more performant and easier to recognize in smaller sizes.
<Figure caption="Logo Scribbles" size="wide">
<Image src="/assets/images/posts/logo-skribbles.png" alt="Logo Scribbles" />
<Image src="/assets/images/posts/logo-skribbles.png" alt="Logo Scribbles" />
</Figure>
But after finishing the logo, I decided in the interest of simplicity and austerity that there is no reason to use a logo at all. I even removed my name from the header, as it’s obvious on what website the visitor is. My name is written enough around the site. The logo will appear in parts of the website, for example as an icon for the app, or on other locations, a logo fits.
<Figure caption="Rakkan Logo" size="wide">
<Image src="/assets/images/posts/rakkan-logo.png" alt="Rakkan Logo" />
<Image src="/assets/images/posts/rakkan-logo.png" alt="Rakkan Logo" />
</Figure>
## Grid
@@ -174,7 +174,7 @@ But after finishing the logo, I decided in the interest of simplicity and auster
Early on I got obsessed with the [Golden Canon Grid](https://youtu.be/fWfD0EfiXcE) and my early designs used a complicated and sophisticated version of it.
<Figure caption="Golden Canon Grid" size="wide">
<Image src="/assets/images/posts/golden-canon-grid.png" alt="Golden Canon Grid" />
<Image src="/assets/images/posts/golden-canon-grid.png" alt="Golden Canon Grid" />
</Figure>
But gradually I decided this would end in a nightmare when moving to code and migrating to a modular grid. However, I didn’t recognize my error of using a fixed-size module for the grid—an error I had to correct later.
@@ -204,7 +204,7 @@ And working with [Affinity Designer](https://affinity.serif.com/designer/), [Aff
I decided to use Aaron James Draplin's method of designing. He is a talented designer inspiring millions with his artwork and author of <AffiliateLink asin="1419720171" text="Draplin Design Co.: Pretty Much Everything" />.
<Bookshelf>
<AmazonBook asin="1419720171" alt="Pretty Much Everything" />
<AmazonBook asin="1419720171" alt="Pretty Much Everything" />
</Bookshelf>
As he shows in the fantastic free video, [Aaron Draplin Takes On a Logo Design Challenge](https://youtu.be/zOPA0NaeTBk), he starts in the middle with an idea and then duplicates the whole version and iterates on it. If he reaches a dead end, he moves back to the last junction and moves from there in another direction. In the end, he has one giant board with dozens of variants and ideas, none of them worked into good craftsmanship or details, but keeps everything loose and ungrouped to be able to manipulate the individual pieces.
@@ -212,11 +212,11 @@ As he shows in the fantastic free video, [Aaron Draplin Takes On a Logo Design C
I followed this technique on all my designs and created dozens of variations, sometimes entire pages, sometimes a small detail as the footer or a meta section.
<Figure caption="All Artboards of the base design" size="fullsize">
<Image src="/assets/images/posts/base-design.jpg" alt="All Artboards of the base design" />
<Image src="/assets/images/posts/base-design.jpg" alt="All Artboards of the base design" />
</Figure>
<Figure caption="Variants of the Meta section" size="fullsize">
<Image src="/assets/images/posts/meta-section-design.png" alt="Variants of the Meta section" />
<Image src="/assets/images/posts/meta-section-design.png" alt="Variants of the Meta section" />
</Figure>
Designing was the part that brought the most fun to me. Designing is like a concert: It starts with a cello, but then more and more instruments get added until the full [concert ends in a massive crescendo](https://youtu.be/XpT-92HS11I). The start is always the hardest, with the designer staring at a blank, white screen. But then things fall into the place and ideas multiply and in the end, everything is obvious, and the next screen is easy to create.
@@ -224,23 +224,23 @@ Designing was the part that brought the most fun to me. Designing is like a conc
I started designing the blog detail page headline and moved out from there, creating text, header, footer, and small details.
<Figure caption="About Section" size="fullsize">
<Image src="/assets/images/posts/about-design.jpg" alt="About Section" />
<Image src="/assets/images/posts/about-design.jpg" alt="About Section" />
</Figure>
Then I moved into color variations for the pages. I designed error pages, navigation, special pages, and the homepage last. I didn’t design every detail, but quickly moved from idea to idea, leaving behind a mess of unnamed layers and incomplete or outdated ideas.
<Figure caption="Color Variants" size="fullsize">
<Image src="/assets/images/posts/color-variants-design.jpg" alt="Color Variants" />
<Image src="/assets/images/posts/color-variants-design.jpg" alt="Color Variants" />
</Figure>
I created a giant design for all layout variations I wanted to support on a page (e.g., the combination of an image and a text). I moved quickly to [CodePen](https://codepen.io/) to create prototypes for these variations to validate my ideas where feasible. You can see all my prototypes on my CodePen account.
<Figure caption="Homepage" size="fullsize">
<Image src="/assets/images/posts/homepage-design.jpg" alt="Homepage" />
<Image src="/assets/images/posts/homepage-design.jpg" alt="Homepage" />
</Figure>
<Figure caption="Haiku Section" size="fullsize">
<Image src="/assets/images/posts/haiku-design.jpg" alt="Haiku Section" />
<Image src="/assets/images/posts/haiku-design.jpg" alt="Haiku Section" />
</Figure>
In the fall of 2019, I finished my design and left it for a few weeks untouched to see if I start disliking it. On the 25th of November 2019, I finally started coding.