Thinking about the importance, focus, and hierarchy of elements. Can be divided into 3 levels: Main (needs to be clear and attractive), Secondary (can be clearly seen but not attractive), Unimportant (can be detected but does not catch the eye)
Padding/Margin should be spacious so it is pleasant to look at, and even to press if it is a button.
Main content is given priority for display. And important content in the main content (eg summary, price, balance,…) will be placed first and highlighted in a separate area.
Don’t use Border because it causes trouble. To make Boxes easily identifiable, use Box Shadow and add vertical offset. Instead use Box Shadow, or Background with slightly different shades, or empty space between Elements.
For some card-shaped content, it is possible to give it a Border on one side with a decorative color. Like the Navigation is being Hovered or Clicked.
Color combination: Choose 3 color palettes including: Gray colors, Main colors, Accent colors. Don’t use too many base colors because it will cause confusion.
— Neutral: Choose 7 or 9 shades of gray from light to dark for easy adjustment and added contrast
— Primary colors: Choose a “brand” color then create 7 or 9 shades from light to dark
— Accents: Select “message” types such as Danger, Warning, Good to choose the main color for it. Usually Red, Yellow, Green. Then each color chooses 5 or 7 or 9 shades from light to dark. Sometimes dangerous actions just need to be lightened, not a separate base color.
— – In the color scale, its base color is placed in the middle, then the two sides will be light and dark. So choose the lightest and darkest colors. Then choose colors in the middle of the three colors in a shade scale.
— – The lightest and darkest colors in a scale are often reversed as Text or Background for good contrast without having to think too much. According to the tailwind color frame, shades 100 and 900 have very good contrast. Can use 0-50-100 in combination with 900-950-1000
Text: Contrast combined with Weight to classify titles and text will be more beautiful than using multiple sizes or fonts. Weight 400-500 is basic. 600-700 is emphasized. Avoid using other values, at other levels change the brightness and darkness. Note, gray text should only be used on a white background. If you want to reduce the importance of the text, make it close to the background color, which is why the background color and text color are on the same color range.
Labels: Overusing labels before content will cause confusion, the presentation will be dry, cumbersome, with many formats, and very tiring to read. In many cases the content (e.g. email, phone number), or context (e.g. contact information) already indicates the meaning of the content without labeling. Or you can write the value with a label after it (e.g. 12 products in stock instead of Inventory: 12. Or “3 bedrooms” instead of “Bedrooms: 3”). For labels that cannot be removed, such as creating context for content (for example, “Contact information”), they should be blurred or minimized to reduce emphasis. The label should only be emphasized when the user is searching for the label, in which case the label should only be made bolder.
Font: Usually you should use system fonts, for example font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji” , “Segoe UI Symbol”. This makes loading speed fast, no need to download Fonts, and safe.
Icon:
— Small icons should not have prominent colors or look unpleasant.
— Do not scale small icons larger than their drawing size, because it feels very lacking in drawing details. If they are small but want a big shape, give them another big shape (round, square) to wrap.
— Button: Not all buttons need background and border colors. Their background can be the background and has no border. Especially when it’s non-target nodes. Furthermore, too many buttons with different colors also create clutter. And so, if the importance of the button is low then it is just like a Text.
