INDEX / COLOPHON
I handcrafted this website using years of observation, curation and setting ideals on the concept of an online home. I see it as a tool than just a portfolio showcase. I landed on this design after several versions, tightening my design language¹ at each iteration.
The objective is to build a system that is flexible and scalable. Flexibility in terms of responsiveness without degrading the experience. Scalability is pointed towards content and accessibility. My principles are much in alignment with that of Frank Chimero's².
Creating a good product is an exercise in holding visions and constraints together until the output stands least falsifiable. A major inspiration was the McMaster-Carr website³. Their approach to web design is a fine example of interaction design. This isn't a product of a pursuit of an aesthetic⁴, but an optimal path to communication.
I took a very simple approach: feel first. After knocking out the visuals on Figma, I would speed-build it crudely to check its feel on the prototype. Then as I build, I would set issues in Linear to keep the momentum⁵ going.
For tweaking, I would go back and forth until the desirable quality was achieved. This was repeated in chunks until enough design debt⁶ was accumulated, and doing things "right" was necessary.
Part of a skillset that photography offers is sequencing⁷. It is essential to not sacrifice user control without relinquishing narrative sequence. This justifies the sticky navigation component on the far right.
To maintain cadence, I limited the response times⁸ primarily to 0.1s. Animations are quick, minimal⁹ and based on user feedback. I was quickly humbled by performance hits several times, but each review helped me build better.
The principle typeface used is Graphik, designed by Christian Schwartz¹⁰ of Commercial Type. Its extreme versatility comes from the low contrast and the large X-height. I wanted something that communicates identity, without getting frigid in appearance and calling attention upon itself.
Its beautiful and restrained look comes from "the B-list of European sans-serif typefaces", according to the official type specimen¹¹. To take the austerity of this neo-grotesque font further, I have employed only two weights with two color styles.
To enforce distinctness between the written text, the side-notes come with a typeface of its own. It is set in Newsreader, designed by Hugues Gentile of Production Type. It is an open-source serif typeface hosted in Google Fonts¹².
It features contemporary characters, yet is modern in its stance. It is bookish, but unlike most serifs it does not lose personality in small optical sizes. That makes it an ideal font pair with Graphik, considering it's function. It also comes with beautiful italics.
Writing is an important facet of the design of this website. Good typography truly flourishes¹³ when it is supported with suitable language and style. Moreover, readers pay back in attention when you pour your heart in holding an authentic conversation.
Pulling out a pen and paper forces you to think better¹⁴, and it complements other elements within the page. Public accountability incentivizes you to create better. I tend to write longer sentences but I try to use plain language¹⁵ as often as possible.
The type leading and column-width govern the content's appeal. Josef Müller-Brockmann¹⁶ advises 7-10 words per line with sufficient leading to maintain clarity. My application isn't strict on theory, but the three-column segmentation is fairly consistent across pages.
One of the distinct applications often noticed are the tiny references¹⁷ on the left. They reflect rationale of design decisions without interrupting primary content.
If you are familiar with publication design, or are exposed to fine quality print media, this is not an uncommon concept. Owing to my modest collection of literature books, this came as an obvious inspiration.
It's implementation is rather challenging. It called for stacking each reference point to it's appropriate content layer, flexing them to either ends. The responsiveness is another case for problem solving, but with enough persistence, I managed to list them at the bottom for tighter breakpoints.
Design, Writing, Research — Ellen Lupton
Calligraphic Type Design in the Digital Age — Hermann Zapf
On Book Design — Richard Hendel
I maintain a monochromatic palette while highlighting project work with accents. The occasional splash of colors adds a tinge of character overall.
The website follows automatic light and dark modes, honoring user's system preferences. Besides accessibility, dark mode comes with its array of perks. I contrasted the colors according to Material Design¹⁸ guidelines to maximize readability.
Just as writing, good imagery¹⁹ is the soul of a website. I try to produce my own images as much as I can. When using mockups, I prefer to keep them least distracting while being informative and coherent.
Approximately 0.14g of CO₂ is produced every time someone visits this webpage. That's cleaner than 87% of the websites²⁰ out there. I try to use CMS and reusable components to keep the code optimized on the backend.
According to PageSpeed Insights²¹, this website scores a full 100 under the "Accessibility" and "Best Practices" categories.
The modular approach taken allows sustainable scaling. Once the foundations are set, it affords the patience necessary to improvise and scale²². A physical version is in the works, inspired by 'the Flipboard for iPhone²³'.
If you've read this far, I request you to use my email offer some feedback. Thanks to all the people who reviewed my first drafts and informed my design process.
rishi@nighot.com
All good things end.