1st September 2023 • 6 min read
Tinloof focuses on key principles to consistently create pleasant and practical designs.
We're not tied to any specific style - Swiss, Linear-like, neobrutalism, a certain typography or color palette.
Instead, we stick to basics that make our process smooth, please our users, attract business, and keep our team happy.
The principles are:
Simple is beautiful, and achieving simplicity is ironically hard.
However, the best designs we come up with are not complex and ensure coherence across the site.
This gets reflected in:
We aim for simple color palettes that unify a site and are easy to apply. While we're open to using multiple colors for specific brands, we don't see the need for excessive shades of the same color unless they serve a purpose.
Tinloof colors
What so many companies' color palettes look like (unfortunately)
The above is summarized in this post:
Our goal is not to build animation-heavy glitchy websites that would collect Awwwards.
Instead, we like subtle animations, and ideally we keep them contained within the content structure, without applying nasty tricks that would bloat the DOM and make the developer's life a nightmare.
Using as few fonts as possible that go well together helps users focus on content and avoids slowing down website loading times.
Layouts should be easy to scale, simple to use, and quick to set up. Complex layouts don't help anyone—they're hard for developers to build and don't work well on different devices.
Scalable grid on Petratools
Scalable carousel on Watershed
Scalable grid on Loop
We aim to make content easy to find and access, without hiding it behind popups or dropdowns.
Our goal is to let users get to what they need quickly and with minimal clicks.
How we display FAQs without chevrons on Tinloof
Most websites work well with about 15 blocks, not 50+ with multiple variations. This speeds up design, helps the content team work more efficiently, and makes it easier for developers to maintain the code.
The rule is clear: if making a design work on different devices needs hacks, we drop it. For a design to be responsive, it should adapt easily to any screen size.
We aim to have a design that scales well without having to design it for multiple breakpoints, and we ensure that the website looks good as well on large screens by applying a max-width.
Here are some layouts we like to use:
Tony's Chocolonely grid
LAK Gallery's grid
Tony's Chocolonely hero
Jennifer Fisher's hero
We don't try to start from scratch for every project, since most websites use similar content structures. We pull blocks from our internal UI Kit, add the specific look we want, and quickly have it ready for the project.
Our UI Kit includes a basic structure for each block. For example, let's style the Testimonial block in a few different ways:
We find sense in the tweet below, in the way that we should leverage copy-paste and spend more of our time with creative tasks, rather than recreating a footer 10 times in a year.
The era of copy paste with last-mile tweaks has indeed begun with AI more generally. This probably spells the end for packages that were the wrong abstraction, but had an ergonomic benefit. (Many such cases in npm)
The era of copy + paste components has begun. LFG.
We steer clear of small fonts, hard-to-read text, and epilleptic animations. To make our designs more accessible, we use Stark's plugin to simplify the process.
Stark plugin in Figma
If a design element takes a developer more than two days to build or requires complex web APIs, we skip it. We also focus on best practices that won't slow down the website.
Design handoff is critical at Tinloof, and we aim constantly aim to improve it with the ultimate goal of reaching a "0 questions asked" handshake. While designers and developers should definitely communicate and brainstorm for better outcomes, a well-defined UI allows developers to easily follow instructions and implement designs effectively.
While some might see these principles as limitations, embracing simplicity can actually drive our designs forward. By choosing simple layouts, limited color palettes, and understated animations, we can put more emphasis on composition and the highlighted assets.
After all, these are some of the elements that truly capture attention.
Watershed homepage
Jennifer Fisher collaboration
Chord homepage
A web designer's gig isn't just about picking cool colors and fonts.
They should know the ropes of site structure, get the lowdown on usability best practices, and make life easier for developers by keeping things straightforward.
Too many designers are still playing in an A4 graphic design world—newsflash, the web's a whole different ball game.
We're always in contact with clients, presenting ideas and getting feedback. Even so, we stick to our design principles and style, despite outside opinions.
That doesn't mean we're stubborn. We're open to change, but we remember that we're the experts who know what's best for our clients.
