Applied design philosophy
This is the philosophy that has lead the redesign of this website.
Before starting the project, I formulated these ten principles. They are mainly thought for websites, but most apply to all aspects of my creative activity.
They are based on many of my reads, including Resilient Web Design ↗ by Jeremy Keith and the principles of the United States Graphics Company ↗ (formerly Berkeley Graphics). They are inspired by their ideas, and I am very grateful for their work.
Principia
Function over form
Maintain the functionality of the site as the main goal, as so will do your users. Keep your purely decorative requirements to a minimum and always think of the purpose of every element that you add. The graphic elements should always show or communicate something.
High density
Avoid empty spaces and make your layouts as dense as possible without compromising legibility. Use spacing sparsely, think of why and what does it tell to the end users.
The less the better, but not too less
Remove everything that is not strictly necessary. Question why you have every single element on the page, which will potentially lead to removing many. On the other hand, keep all necessary elements.
Single typography, focus on legibility
One font and a strong hierarchy, disclosed through font size and font weight are paramount. Reject usages of typography that are not meant to communicate textual information. Do not use underline unless it is inside of links.
Minimise color, maximise contrast
Aim for polar opposites on the color space. My personal choice is usually black and white, but others are ok as long as the perceived contrast is as big as possible. Do not use color to communicate, for example, possible errors or other state.
Responsiveness with minimal change
Avoid drastic changes between the different views of your site. Avoid navigation repetition if possible, and study how the users interact with your site to avoid making them feel lost while browsing it.
Interaction should be visible and obvious
Underline links, signal whether links will open on a new tab or the same window. Buttons should look like buttons. Navigation should show which is the active link in an obvious way. Similar ideas apply to every interactive element.
Animation only for delight
Animation is a powerful thing, but it is commonly overused to the point that it becomes annoying. Keep it to a minimum and generally avoid those that just make the user wait. Allow them to keep browsing even while the animation is ongoing.
Performance is bliss
Optimise images, bundle and tree shake javascript assets. Look at download times, use content delivery networks and everything you can to increase performance. It is all for the best. Try to measure and improve it on the field with real visitor statistics, sometimes lab tests like Lighthouse can be misleading.
Use the full power of HTML
Use the capabilities of HTML and its established visual conventions to express the information. Avoid using tags and elements in non-standard ways and use semantic tags when possible. Map navigation to the URL structure and use proper metadata.
Redesign
I redesigned this website by applying this ten principia.
The first decisions made were regarding the font and the color scheme. I chose a font which I deemed very legible (Berkeley Mono) due to it being monospaced and passing with flying colours the classic readability test in which the glyphs “1”, “l”, “L” and “I” should be easily distinguishable, a test that to this day many fonts would not pass, even some very famous ones.
The chosen color scheme was black and white, using black for the background. This combination provides a contrast ratio of 21, which is enough to pass the highest requirement levels of the Web Content Accessibility Guidelines (WCAG) ↗ for all font sizes and weights.
The navigation was simplified, from a hamburger menu in all screen sizes to a CSS flexbox ↗ enabled collection of buttons, which makes it seamless throughout all different screen sizes. The current navigation supports two levels, which map one to one to the different URLs that can be found on the site. The final design was carefully researched and many benchmarks were found and documented. I rejected the idea at this point of clicking the title of the page to go to the home page, and instead added a “home” button to the navigation.
The footer was removed, as it was considered useless. This decision was the last to be made. Space was added at the end of the site in order for the users to be able to comfortably scroll through all the content of the page. During this process I also removed the contact form, which I substituted by a mailto ↗ link in the navigation, that allows users to send me an email directly by clicking on it.
Finally, the content was reworked to be shorter and easier to read. Some of the textual information was formatted into tables in order to be easier to understand and faster to read.
Development
The site is hosted on Vercel ↗, and uses the NextJS ↗ framework to render static pages, which are served via a content delivery network (CDN) ↗. A minimalistic design system emerged from all this work, which is part of the codebase of the website. It includes metadata, layout and content elements, currently 13 components, all of which can be reused on the site as React ↗ components created with the TailwindCSS ↗ framework for styling.
Other tools in use include Storybook ↗ for the local testing of these components and ESLint ↗ to enforce a code style and avoid errors. The programming language used is Typescript ↗.
The future
I hope these thoughts are useful for someone else than me, even though at the end of the day are very personal. My expectation is to keep expanding and evolving these over time as I gather more experience. The web is in a continuous evolution, so this is a never-ending process in which I will never stop learning.