Basic UI Rules Every Front-End Developer Should Know
As a Front-End developer, you should also understand some basic design principles and be able to combine them with UX knowledge. This knowledge can be highly valuable when building prototypes, so you don’t have to wait for a designer every time.
I’ll divide this article into two parts. The first part will cover theoretical design knowledge, and the second part will describe some CSS and HTML best practices.
Design principles:
Font pairing
Understanding the basics of fonts is crucial. In the past, web designs typically used five to ten basic fonts (such as Times New Roman, Arial, and Sans Serif). However, now we can include any Google font in our web apps and create custom styles. But, as the saying goes, “With great power comes great responsibility.” The rule of thumb is not to combine more than two font types. You can use tools like Archetype to help you find fonts that pair well with each other and provide contrast.
Spacing
Spacing can be defined scientifically. The human eye naturally detects patterns with exact spacing.
When creating designs, it’s essential to consider rhythm and maintain regular spacing for items and components in your design. Here’s an example.
Colors and contrast
To create a great and useful product, it’s important to understand color theory and contrast theory. There’s a wealth of information on the internet about this topic, so I won’t attempt to summarize it. However, I’d like to emphasize the importance of considering color blindness. You can find more information on designing color-blind-friendly websites here. Some useful tools for working with colors include Color Hexa, Coolors, and Box-Shadow.dev.
Responsiveness
The choice of where to start designing your application depends on your target audience. If your app is for a broad audience, consider starting with a mobile-first approach, beginning with the phone perspective. Then, scale up the design for larger desktops, or create specific desktop approaches later. On the other hand, if your app is intended primarily for desktop users, start the design process with the desktop view and adapt it to smaller screens.
Visual communications — icons
For developers, using an icon font is a great practice. Personally, I recommend Google’s icon font because it provides a wide range of icons that can be easily customized. You can find these icons at Google Fonts. When choosing an icon, consider its:
- simplicity, clarity,
- familiarity
- metaphor.
Hierarchy
Hierarchy is a visual design principle which designers use to show the importance of each page/screen’s contents by manipulating these characteristics:
- Size — Users notice larger elements more easily.
- Color — Bright colors typically attract more attention than muted ones.
- Contrast — Dramatically contrasted colors are more eye-catching.
- Alignment — Out-of-alignment elements stand out over aligned ones.
- Repetition — Repeating styles can suggest content is related.
- Proximity — Closely placed elements seem related.
- Whitespace — More space around elements draws the eye towards them.
- Texture and Style — Richer textures stand out over flat ones.
Practical:
CSS Definition
It’s a good practice to use REM units, which are relative to the document’s font size. The default document font size is 16px, so 1 REM is equivalent to 16px. To simplify calculations, consider decreasing the document font size to 62.5% with this CSS code:
/* CSS Variables */
--main-background: #fff;
--main-font-color: #2a2a2a;
html {
font-size: 62.5%;
}
/* Most important global settings */
body {
font-family: "Helvetica", Sans-Serif;
line-height: 1;
font-size: 1.2rem;
color: var(--main-font-color);
}
/* Typography */
h1 {
}
h2 {
}
h3 {
}
p {
}
b {
}
/* Global classes */
.success {}
.warn {}
.error {}
The rule of thumb is that the body should have the global style that other components would inherit, if you want to know about it to details, please check those great articles:
https://www.freecodecamp.org/news/html-page-width-height/
https://css-tricks.com/html-vs-body-in-css/
CSS Rules — Style vs. !important vs. Inline Styles:
Understanding how cascading works in CSS is essential. The cascade algorithm determines which property takes precedence. Avoid using !important and rewriting styles with inline styles. You can learn more about this topic in this article.
Creating Shared CSS Files for Common Components: After defining variables and body styles, it’s good practice to create root CSS files for components that are used throughout your application. For example, you can create CSS files for components like buttons, inputs, and tables.
Conclusion: In conclusion, understanding and implementing these fundamental UI rules and best practices are essential for every front-end developer. By incorporating these principles into your work, you can create easily maintainable applications that are both enjoyable to work on and deliver an excellent user experience.
