Ensuring visual consistency on our website(s) #4833
joostdecock
announced in
Announcements
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I just made a bunch of changes to the site in an effort to provide a consistent user experience.
Things are by no means perfect right now, but I think we're moving in the right direction. To help others understand what things should look like, I'll try to write down some things here:
Links
When using a link that is styled as text you should use the various component in the
sites/shared/components/link.mjs
file:Links are (currently) underlined, and the decoration gets thicker when hovering.
However, that might change. But using the component/classes above means you don't have to worry about that.
Buttons
When adding a button that looks like a button (other things can be buttons to) make sure to be consistent in how you use colors:
A button that takes an action. Specifically the primary action you want the user to take (the call-to-action button) it should be the primary button.
If alternative actions are also possible, use another primary button, but in outlined style
When a button does not make an action/change but more acts like a link, it should be a secondary button.
A button that does something but that something is harmless should be a neutral button
A button that does something and that something is making changes the user may regret, use a warning button
A button that irrevocable destroys things should be an error button
In addition to this, buttons should have an icon that illustrates the action.
When using mulitple buttons, make certain they are all the same width, and spread the icon and text over the horizontal space.
To make this easier, you can apply the
horFlexClassses
you can get from the shared utils fileInputs
Inputs should be consistent, and use the inputs in the
shared/components/inputs.mjs
file.Each input on the site should have contextual documentation so that users learn that the little docs icon will open the documentation.
For lists/choices, use either the
ListInput
or if you need more control, use theButtonFrame
component to render the choice buttons:Hover/Active states
Both hover and active states must use the secondary background color, with 10% and 20% opacity respectively.
(image shows the active state)
The hover is lighter (10%) because at that moment the user is paying attention to this area.
The active state is darker (20%) because it needs to be more scanable of visible from the user's peripheral vision.
Workbench things
The workbench is a bit more complicated, but we at least want to ensure that what is there is not contradicting the rest of the site.
So where there is extra stuff, the shared stuff should behave in the same way.
So the docs icon should be in the same place, and so on.
As a rule, anything that deviates from the default should have the accent color:
Vs the default value that should be shown in secondary:
List choices should look/feel like the rest of the site:
And if there is not much text, they will be fitted on a single line:
I'm sure I'm forgetting a bunch of stuff, and the site has a bunch of work to be done. But I wanted to share this so it's more clear what we're aiming for.
Beta Was this translation helpful? Give feedback.
All reactions