223 private links
Just a great collection of resources with useful demos and tutorials
Two circular navigation demos
A demo of 3 types of navigation menu with sublebels:
- Overlapping levels
- Covering levels
- Overlapping levels with backlinks
Best toggles:
- Inactive button coincides with the background / Active button has a highlighting background. "we suggest you use a combination of saturated lively color (ideally corresponding with your CTA color scheme) and a light grayscale neutral color. "
- Active button has a check sign
- Active button has bold text (a bigger font size helps too)
About the 5-second and 20-second tests:
The results confirmed our expectations since the average error rate was lower in the 20-second tests and the Success-Confidence score was higher. However, these differences were not significant.
There is a difference of 0.5% in the error rate and 2.5% in the confidence score.
The ticks could be perceived as outdated (akin to a physical form more than a website). As for radio button icons, you might as well use a radio button instead.
Some texts for a circle loader
In short, when designing a toggle button, for the sake of your users, it’s good to hold on to these basic principles:
- Use them only when they have an immediate effect
- Apply them when the setting has a default value.
→ part 2: https://shaarli.lyokolux.space/?iAYVOg
Research shows that the more different a new view is visually, the more likely it is to be perceived as a separate page by users. With it comes the expectation that the “Back” button will bring a user to the previous “page,” even though, technically, it might not really be a separate page.
That's why it's good to adjust the URL as much as possible :)
Moreover it allows to share this "state" of the page
Nice project
Un dashboard d'accessibilité reprenant un bon paquet d'outils. C'est bien fait, complet, et ça rend la démarche d'accessibilité approchable
The way it is written is smart 👍
.hover-1 {
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 calc(-1*var(--_t, 0em)) #000,
0 calc(var(--h) - var(--_t, 0em)) #1095c1;
overflow: hidden;
transition: .3s;
}
.hover-1:hover {
--_t: var(--h);
}A floating possum flying through the window 👍
I like the theme picker here :D
Instead, we can mix 3 or 4 designs together to create something unique. For example, maybe I’ll take the color scheme from one site, the general layout and spacing from another, and the typography styles from the third!
When I’ve mentioned this strategy to actual designers, they laugh and say that it’s what they all do. I think this is their version of the “joke” that programmers spend half their time googling things.
A collection of UI patterns from different libraries. It shows their similarities!
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.
A library to create fancy animations on the web.
It uses a Lottie file under the hood.
A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets.
Listed advantages of the website:
- small file size
- infinitely scalable (based on SVGs)
- multi-platform support and libraries
- interactivity
It is used by Duolingo, animated stickers on Telegram
Funny to see.
I ike the one with the DVDs :D