diff --git a/assets/css/site.css b/assets/css/site.css index dcbf9b5..ca7991e 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -922,6 +922,64 @@ body#legacy } } +/* single page documents */ +body#design { + grid-template-rows: 5rem auto auto; + + main { + grid-template-rows: auto; + justify-content: center; + + > article { + background: var(--bg); + border-top: none; + display: grid; + grid-template-rows: min-content auto; + justify-items: center; + width: 100%; + + > header { + grid-column-start: 1; + grid-column-end: 3; + justify-self: start; + padding: 2rem 10dvw 1.5rem 0; + + .lede { + margin: 2rem 0 0; + font-size: 1.6rem; + font-weight: 400; + line-height: 1.4; + } + } + + > section { + grid-column-start: 1; + grid-column-end: 3; + font-size: 1.125rem; + + > :first-child { + margin-top: 0; + } + + p { + margin: 0 0 1.5rem; + + em:first-child { + color: var(--text); + display: block; + font-style: normal; + font-weight: 700; + padding-bottom: 0.5rem; + } + + &:not(:has(em)) { + margin-top: -0.75rem; + } + } + } + } + } +} /** * display queries */ @@ -1242,6 +1300,16 @@ body#legacy } } } + + body#design main > article + { + > header { + padding-bottom: 0; + } + > section { + grid-column-start: 2; + } + } } /* desktops */ @@ -1277,6 +1345,13 @@ body#legacy } } } + + body#design main > article + { + > header { + padding-bottom: 3rem; + } + } } /* displays */ diff --git a/content/philosophy.md b/content/philosophy.md new file mode 100644 index 0000000..8148ceb --- /dev/null +++ b/content/philosophy.md @@ -0,0 +1,29 @@ +--- +title: "Design philosophy" +layout: "document" +slug: "design" +summary: "How I think about design, particularly for the browser, and the values I hold close. Good design can't happen without respect for the user and their system. Taste and personality matter." +footnotes: + - symbol: "†" + note: "There are exceptions, especially for truly application-like experiences, but my default position is progressive enhancement whenever possible." +--- + +I design for the browser first. This is true even in an age of mobile-first and push-them-to-the-app-at-all-costs. I think the web browser is a great equalizer and perhaps the greatest preserver of the open internet. + +I care deeply about how something looks, but aesthetics are never the point on their own. Good design should feel thoughtful, trustworthy, and calm; it should reduce cognitive load, never add to it. The goal is to make software more useful and easier to use. If a visual choice, interaction, or animation does not improve the experience, it probably doesn't belong there. **Dark patterns are an abomination.** Delight matters and it should come primarily from responsiveness, clarity, and personality. + +I believe good interfaces should respect the user and their system. The browser, HTML and CSS are already an extraordinarily capable platform, and I try to stay as close to the browser's native strengths as possible. If something can be done well with HTML and CSS, I will always do that rather than reach for JavaScript as a crutch. + +I am not opposed to frameworks or complex client-side applications when they're justified, I just think they rarely are and too often introduce more usability, accessibility, and performance problems than the ones they solve. **JavaScript should enhance an experience, not become a requirement** by default.† + +That same respect extends to semantics, controls, and data structures. A button should be a button. A checkbox should be a checkbox. Tabular data should (almost always) be shown in a table. I do not believe in reinventing familiar controls when the native version already communicates the right thing and behaves the way users expect. **Page load times, payload size, memory use, and rendering cost all matter too.** These are not just engineering's job or an anachronism from the past—**they are a foundational part of the user experience**. + +I don't believe products need to wait for perfect alignment before they improve. Some of the most harmful thinking on product teams comes from the idea that everything has to be redesigned at once in order to be worth doing. Consistency matters, but so does momentum. If something is broken, confusing, or clearly improvable, **it's often better to make it better now than to wait for the ideal future state that may never arrive**. Many interfaces stay bad for years because teams are too concerned with doing every related piece at the same time. + +In an org, good design starts from a strong brief. Every good design effort needs a clear understanding of the users, the problems that need solving, and the constraints that shape the solution. On larger teams especially, the brief is what keeps the work focused when opinions multiply or strong personalities have outsized influence. Designers should be part of that conversation early. The quality of the brief often determines the quality of everything that follows. + +I prefer interfaces that are minimal, but not anonymous. White space, alignment, and typography can solve an enormous number of visual problems. At the same time, software should not lose all of its personality in the name of reduction. A product can be clean, efficient, and quiet while still feeling specific to the team, company, or people who made it. Off the shelf systems like shadcn are amazing but **every app doesn't need to look the same.** Minimalism is useful when it sharpens the experience, not when it makes every interface feel interchangeable. + +Type is just as much a part of the design as everything else. I often design around or with the words on the screen, and it's ok to add another line of text or force everything to be a single line when it makes the design and usability better. + +Finally, I believe design benefits from collaboration, but not from design by committee. Everyone has opinions about interfaces because everyone uses them. That's normal and often useful! **But not every opinion should carry the same weight**, and not every preference should become a product decision. Good design requires judgment: knowing when to listen, when to test, when to defend a choice, and when to change course. My job is not to impose my taste, **my job is to make informed decisions in service of the user and the product, but my taste does matter** and I will rely on it too. \ No newline at end of file diff --git a/layouts/_default/document.html b/layouts/_default/document.html new file mode 100644 index 0000000..4b04f91 --- /dev/null +++ b/layouts/_default/document.html @@ -0,0 +1,16 @@ +{{ define "main" }} +
+
+ {{ with .Params.eyebrow }} +

{{ . }}

+ {{ end }} +

{{ .Title }}

+ {{ with .Summary }} +

{{ . | markdownify }}

+ {{ end }} +
+
+ {{ .Content }} +
+
+{{ end }} \ No newline at end of file