davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Redesign: Wants and Needs (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://frankchimero.com/blog/2020/wants-and-needs/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Redesign: Wants and Needs</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://frankchimero.com/blog/2020/wants-and-needs/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>Let’s oversimplify for a bit to help get down some goals for the site redesign.</p>

<h3 id="the-website-spectrum">The website spectrum</h3>

<p>Websites sit on a design spectrum. On one end are applications, with their conditional logic, states, and flows—they’re software. The design challenge here is to create designs that support everything the product could contain and become. Google Maps in the browser is probably the most purely appy application I can imagine, but any design system supporting variable content and conditional states is going to be pretty appy and have exponential complexity.</p>

<p>Large systems, unknowableness, and unseeableness come together in the same carriage. When this joins up with a designer’s natural desire for control and comprehensiveness, it creates fertile ground for unwarranted impostor syndrome—playing the right game by the wrong rules. (If this line of thinking is interesting to you, give Robin Rendle’s <a href="https://www.robinrendle.com/essays/systems-mistakes-and-the-sea">Systems, Mistakes, and the Sea</a> a read.) More on this in a bit.</p>

<p>On the other end of the design spectrum are documents; sweet, modest documents with their pleasing knowableness and clear edges. They only need to achieve readability with hierarchy and layout—they’re writing and records. The design challenge is to make it look like what it is, because the content is all there in front of you. If you’re looking for a purely documenty document website, I’d nominate blog-based personal websites as the platonic example.</p>

<h3 id="hiding-in-docs">Hiding in docs</h3>

<p>I love personal sites because you can get your head around what you’re doing. Their design challenges are primarily typographic—what are the typefaces, how do we use them to express hierarchy, how is the text block set to support reading, where do those text blocks go on the page, and how does that layout change across viewports? These challenges exist in the design of apps, but the approach is haunted by hidden complexity. When designing a document, you can check and see how your choices hold up. It’s 1:1, without much need to project decisions out into the fog of complexity.</p>

<p>I’ve redesigned my site a lot in the last decade. A <em>lot</em>. Too much and too frequently, most certainly. The stated reason was to practice using new methods (trying CSS grid, taking a new typeface for a spin, and so on). But that isn’t the full story. Too often, I’d redesign because I needed to feel capable at my job, which required a design challenge that wouldn’t drive me nuts. The simplicity of redesigning my personal site became a way to hide from the crazy-making and humbling (humiliating?) complexity of systems design. The redesigns were a happy little bubble of sensibility and control, a way to practice and use technology at work without feeling trapped.</p>

<p>For better or worse, I am a document lover. All of my best intentions to try new digital tools eventually devolve to their most stable ur-forms of text files and spreadsheets. I think back to what hooked me on the web in 1996—our expectations are so often defined by our first loves. The primitive parts of me will always want websites to be editable documents with legible, marked up text on servers. I began making websites when mastery seemed so possible that people called themselves “webmasters.” Those expectations are laughable now.</p>

<p>This is the context where I fell in love with design and the web. It is a love story, but it is also a ghost story.</p>

<h3 id="carving-out-a-space">Carving out a space</h3>

<p>Still, personal websites are personal before they are anything else. You can carve out a space in whatever shape you’d like, even one of a ghost. I anticipate this personal site redesign to follow a path back to basics. Here is where I’d like to end up:</p>

<ul>
<li><strong>Good fit</strong>: Make it look like what it is—a place to write and keep records. A collection of documents. Website as filing cabinet.</li>
<li><strong>Modest elegance</strong>: Think elevated defaultness. Premium vanilla ice cream, top shelf ingredients used modestly and well. Tight focus on typography for better reading and suggestion of craft and quality. No tacky razzle-dazzle.</li>
<li><strong>Feeling of lightness</strong>: Simple design, clear patterns, shallow hierarchy. As little javascript as possible, preferably none. Clear markup, no junk. The inside of the site looks like the outside.</li>
<li><strong>Whim</strong>: Achieve all of the above without being austere or over-serious. Have some fun. Smile a bit. No black turtleneck design.</li>
</ul>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>