Using an object model helps while designing some web pages or content.

An object in a web project is something that has structure, instances, and purpose. Instances are all the specific occurrences of an object.
An instance of the object link can be "When to choose a progressive web app".

So, as we make our user experiences more object-oriented, we also make them more intuitive.” - Sophia Prater, ooux.com.

With this practice, 4 unintuitive objects are identified. The author use the example of a zoo website and they are:

• isolated objects: they are disconnected from related objects. The penguin animals are not related to the demos and habitat from the list of all the animals. The habitat is also included on the map view of the zoo, but there are no links to the Animal or the demo on this map view either.
• broken objects: ones that are not directly manipulatable. Demos are useful to show events to the user. As someone who would like to attend the penguin demo, I want to click on an individual demo to see more details, but it is not possible.
• masked objects: styled to look the same, but are actually different. On the DisneyPlus web view, there is no way to differentiate between a series or a movie. As you want to see a movie (one shot) instead of a series (multiple shots), you have to check on the detailed view in a panel.
• shapeshifter objects: opposite of masked ones, they are styled to look different, but are actually the same. Date formatting, links, and so on should look and behave the same across the website or the experience platform. They have to be consistent.

Réalisé par l'Arcep, il regroupe des critères formulés en questions sur des thématiques. Le critère est accompagné d'un niveau d'impact et d'une fiche pratique est associé afin de mettre en oeuvre et de tester ledit critère.

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.

Le guide d'Orange contenant un certain nombre de ressources

A consistent set of design tokens already defined

A workflow or framework with methods for each step

Another personal website that has a navigation similar to an app. Its content is straightforward.

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.

Some cards are mixed to create a new type of user.

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 good example is Amazon’s Basics range. Amazon buys white label products from multiple manufacturers and sells them under the Basics brand.

White label design services follow a similar concept. A creative agency builds tools, apps, and websites (templates) that companies can purchase and rebrand.

Challengs of White Label Design are multiple:

• white label products must be re-brandable: the design should fit everyone, and everyone should be able to customize it.
• flexible information architecture: the white label product provides many page layouts and navigational possibilities while maintaining the flexibility to adapt to the brand’s requirements.
• accessibility: UX designers must also consider accessibility, so products comply with WCAG (Web Content Accessibility Guidelines) standards.

In order to define a white label system, we can extend atomic design (atoms, molecules, organisms, templates, pages) with a new elements category: it contains colors, typefaces, grids, spacing, brand assets, etc... They are all the design tokens :)

Ready to use design tokens

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Source code: https://github.com/htmlstreamofficial/preline