Inspired by Gwern Branwen’s design outline, this page documents the design philosophy behind not only this website, but also every other project I work on.
Lagomor.ph is implemented as a static website, compiled via Hugo from Standard Markdown, and hosted on a cloud server in Toronto.
“Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.”
It is designed to be readable, pleasing to the eye, and easy to navigate. The logo, which is often the singular image on each page, was drawn by Rek Bell.
Affordances Should be Obvious
Donald Norman’s book The design of everyday things highlights the concept of affordances in design, refering to the properties of an object that indicate how it can be used - essentially, the possibilities of action presented by and object. In good design, these affordances should be evident, enabling users to understand at a glace how an object can be interacted with.
In the context of this site, there is no hidden content, drop down menus, or “hamburgers”. Hyperlinks are inline, underlined and made clear. Where symbology is used instead of text, it is clear what icons represent, and tooltips appear on hover with text explaining action.
Be Brutal, Be Minimal
Use as Little Computation as Possible
Computers have become extremely powerful and capable, but good design should strive to use as few resources as possible. This design philosophy means speed and efficency of use are highlighted over features, but it doesn’t mean I don’t take full advantage of new and experimental browser features. This webpage can be opened in almost any browser, including terminal ones. 3
Everything Should Do Only One Thing, and Well
Multitaskers are the bane of my existence. A smartphone can do anything and all of it poorly. In attempting to build a tool useable by everyone, you make something that sacrifices usasbility for anyone.
Frequently people debate this with me. “What about a kitchen knife? A kitchen knife can cut anything, is useable in many circumstances, and therefore is a multitasker.” No. A knife (should) do one thing - cut - and nothing more. What it can cut is up to the end user, but it’s clear its purpose and can’t be used to say, boil pasta.
- Any UI element that can be clicked should be styled in the same way a hyperlink is. 4
- Information should be conveyed as succinctly as possible, at expense to SEO. 5
- Information over the author.
- Whatever you’re building should work on the smallest device in its category.
- Anything that is taken for granted must be scrutinized.
- Strongly consider if the device you are building actually needs a clock display in it.
You can argue this definition with me endlessly, I understand it is a very brief, not-all-encompassing definition. ↩︎
It does not work in NetSurf, because NetSurf doesn’t support all of HTML5’s spec, and no CSS3. This is a deal breaker for me and I won’t adjust my website to accomodate. ↩︎
barring buttons, which are skuemorphic enough to be clear in their affordances ↩︎
I’m looking at you, every recipe website ever. ↩︎