When to use a GUI Toolkit, is it more native than the web? It means some criteria the author defines. Also what level of WCAG conformance can someone hope for?

The 4 examples are from the WAI, Deque, U.S. Web Design System et Tommy Feldt.

with the UX tips https://www.uidesign.tips/ux-tips

In this micro-book I take a historical look at interfaces to build an understanding of how they allow us to utilize information in such powerful ways that they can fundamentally change what it means to be human.

A website that embraces Brutalist Web Design is raw in its focus on content, and prioritization of the website visitor.

A website is about giving visitors content to enjoy and ways to interact with you.

Guidelines:

• Content is readable on all reasonable screens and devices.
• Only hyperlinks and buttons respond to clicks.
• Hyperlinks are underlined and buttons look like buttons.
• The back button works as expected.
• View content by scrolling.
• Decoration when needed and no unrelated content.
• Performance is a feature.

The only limitation of brutalist web design is that it is designed for content and not interactions. So this design method does not fit dashboards of real-time data for example. Am I missing something here?

I appreciate the guidelines that can be reused on every usable and accessible website or applications.

A quickstart tip:

Start with left-aligned black text on a white background, and to apply styling only to solve a specific problem

and more tips:

• Understand the semantic meaning of HTML elements.
• Learn about typography.
• Try designing for a small screen by default.
• Learn from designers about their choices and why they made them.
• When in doubt, do what Tron does: fight for the users.

The summary/details pattern is the best way to hide and show content.

It handles CSS grid and flexbox

There are hundreds of touch point sizes.

This isn't a problem if you build in a fluid, flexible manner. That is illustrated in this diagram. If however, you tend to build with very specific breakpoints and hard values for typography, sizing and spacing, you might find that even with the best intentions, you’re not providing the optimal user experience.

A viewport is the window size of the browser, not the screen size.

The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports.

it looks good :D

Examples of UI patterns that does not need JS

Using numbers for the spacing token names improve flexibility.

For example, adding a token between space-100 and space-200 can be space-150. This has an advantage compared to the xs, s, m, ... variant.

1. Plan your color use: avoid or limit white to pure black colors. Black can be used but dim the text slightly.
2. Brand the dark color with a gradation of a brand color. Black and white only is also a kind of branding.
3. Reduce color saturation
4. Communicate depth through a scale of lighter colors to translate the elevation: the brighter the higher.
5. Check dark mode contrasts.
6. Design light mode first by default.
7. Use bare colors to design dark mode: transparent color can help.
8. Use the system default setting or user preference to set the mode.

In short, don’t try to make something beautiful. Try to make something well-organized, and watch the beauty emerge!

Some best practices to design interfaces.

• centering in a box: leave at least half its shortest dimension as a minimum margin.
• vertically centering text

  Why is it called ‘x’ height? Because the letter ‘x’ is the only letter in the alphabet that has all its terminals touch both the baseline and the meanline, with no extending points.

• when centering text inside a box, you need to use the height of the lowercase letters to do the centering and make sure there is the same amount of space all around the text.
• when centering a polygon, center the circle passing by each point instead of centering the box around the polygon.
• when putting a rounded box into another one, a mistake I have seen often is to use the same border-radius on the box outside and the box inside. You need to use a proportional radius when doing such rounded box nesting.
• repetition is key to a rhythm: go for the design system.
• not so justified: use manually justify content instead of this ugly automatic one.
• a contrast ratio of 4.5 or higher is recommended.
• the contrast between each heading level should be high enough for the structure to be visible. if possible, a consistent ratio between different header levels usually looks more elegant.

A page builder for keycloack.

Customize the look and feel of your login and registration pages without having to mess with FreeMarker.

Arguments against modal windows

Build components for desktop apps, but also for the web.

Proposition: footer sitemaps. Why not?