Most of these websites are a rebellion from the predominance of the Bootstrap UI, with its clean, responsive designs, and to the more and more senseless diktats that digital media had to abide by in order to make a profit in the early-to-mid 2010.
Websites look coherent even if they don't have "clean" UIs.
[Brutalism] is kind of taking everything that you don’t see on the internet that you still see in print or vintage design, if you will, even kind of a nod to the past, blowing it up and bringing it back on the web,” said Blake. [...]
This experimentation comes from seeing the internet as a medium for making (and not just showcasing) art.
Infinite Scroll checklist
*If in doubt, always prefer pagination.
- With infinite scroll, always integrate a footer reveal.
- Consider separating “old” and “new” items visually.
- Provide an option to continue browsing later.
- Consider using “load more” + infinite scroll together.
- Consider using pagination + infinite scroll together.
- Change the URL as new items are loaded in and expose it to users.
- Allow users to jump to any page with a pagination drop-down.
- Consider using scrollbar range intervals.
- Consider allowing users to pin or bookmark items/areas of interest.
- Make sure accessibility and performance are major considerations in the implementation.
A curated gallery of patterns by awesome designers & illustrators
Typography, layout, color, patterns — vintage magazines provide an endless source of inspiration. If you’re up for some eye candy, the folks at Present & Correct have collected a selection of print design goodies over time.
A collection of websites or design resources. There is a lot to explore !
A way to generate a gradient color depending of a main color. Applied with https://www.opensourcecolorsystem.design/system, it can be awesome :)
Ready to use 3D background effects
Skeuomorphism relies on real-world aesthetics to make the UI intuitive and familiar. The app logo of YouTube on iPhone was a TV for example.
Flat and Material design has dominated the web UI landscape since the early days of responsive design
The dream of a more tactile-looking 3D web UI lived on, and it resurfaced in 2020 as Neumorphism.
A mix of Skeumorphism and Material Design.
Neumorphism also has serious accessibility flaws. The poor contrast made the UI unusable for users with poor vision or color blindness, and it’s difficult to perceive visual hierarchy if the effect is overused. Moreover everything, including cards and other non-interactable elements, looks like a button.
Claymorphism builds on top of Neumorphism foundations. Although both use rounded corners, they differ in how they use backgrounds and shadow.
The design of this personal website is punky and original :)
I totally agree :)
Stylus on the Chrome Web Store has more than half a million users. Stylish has over three million. That’s a lot of people modifying the web to get what they want.
After looking at the available options I definitely prefer number 2 in the list above: the name of the language as text in the language itself, possibly followed by the name of the language in the language of the current page.
After thinking about it, this is what is the most explicit, even if it is not shiny 👍
Do not use flags to represent languages. Explications are provided in the article.
TL;DR; Use hsl isntead of RGB to create a gradient. This will avoid a grey zone. But using hsl is not available in CSS for now, so we can use a linear-gradient from a multiple of colors instead. Each color have to be similar to its neighbors... and it works !
and here the tool: https://www.joshwcomeau.com/gradient-generator/
The collaborative library of tips among design professionals. Share and learn from your peers.
I will wander around this site in my spare time and learn a few things here and there :)
A source of information about accessibility
Why even use shadows ?
Shadows imply elevation, and bigger shadows imply more elevation. If we use shadows strategically, we can create the illusion of depth, as if different elements on the page are floating above the background at different levels.
Here's the first trick for cohesive shadows: every shadow on the page should share the same ratio. [...] To ensure consistency, each shadow should use the same ratio between these horizontal and vertical offsets.
By matching the hue and lowering the saturation/lightness, we can create an authentic shadow [same color style] that doesn't have that “washed out” grey quality.
Ideas are:
- Creating a cohesive environment by coordinating our shadows.
- Using layering to create more-realistic shadows.
- Tweaking the colors to prevent “washed-out” gray shadows.
I will think about it the next time I will have an interface to build.