Welcome to Feuillu the website layouts newsletter !

Dear ,

In today's issue :

• studyhall.design website, a brutalist and minimalist homepage.

• ressources about web components, icons library.

The case study: studyhall.design

In short — An uncommon use of svg's, serif font, bicolor color scheme.

Typography — The sans-serif is Neue Montreal, a versatile Grotesque font with the spirit of a display font. It feels very modern and polished. The serif is GT ALPINA, a font that resurrects old-style shapes (the V and the H are particulary impactful) and gives an aerian style to the page. Serif fonts works particularly well in italic like on this layout contrary to sans-serif that always feel weird when displayed in italic.

SVG's — They seem to be handmade by the designers of the company. It works very well because they are simply added to the meaning of the sentences so the reader don't ask himself what they mean.Matching their color with the serif font and placing them in the same group make it more coherent. On the web, using symbols/icons allow simplicity and evocation rather than complexity.

Colors — Only two colors are used : green and white. It feels brutal but works well with a dark background. Notice that the green is not neonesque or bright but an appeasing tone-green.

Layout — The hero section come with a succession of left and right sided text. A rarely seen bold choice that allow to create breathing space and avoid redundancy.

Cursor — The circle replacing the cursor is made through a library like Cuberto's mouse follower, it's a quite simple JS program that lets you manipulate the color, the shape, the offset, the delay... to create a custom made one. It always works well on creative website but would not recommend on most "classic" websites due to accessibility issues and impact on performance.

Webdesign ressources

1. Google just released Material Web Components

Why it's interesting — Material Web is a library of web components that follows Google's Material Design guidelines. Web components are custom HTML elements with encapsulated styles and behavior. They work across many different frameworks (such as Lit, React, Vue, and Svelte) as well as web environments (such as Eleventy, Wordpress, and Ruby on Rails). Very rare are the UI Library that don't use a CSS Framework like Tailwind or Bootstrap. Here each components is vanilla CSS, it keeps the maintenance and styles much simpler and sustainable. Every component is coherent and there are no CSS hacks in sight

Go test it ↗

2. Phosphor icons

Why it's interesting — These icons feels polished and modern. The website doesn't require to have an account to get the icons and it's 100% free. Integration is really easy with native Web, React, Flutter copy/paste. Almost all icons comes with 6 styles from Thin to Duotone. The icons feel great on UI elements or event att greater sizes.

Let's see the icons ↗

And that's all for this month !

If you liked this issue, please consider forwarding, sharing on social media. You can also follow me on Twitter, my website, Github