Design Principles for Developers: Processes and CSS Tips for Better Web Design

It's technically true that everyone can cook. But there is a difference between truly knowing how to cook delicious dishes and throwing several ingredients into the pot to try your luck. The same is true for web development. You may understand "ingredients" - background-color , .heading-1 - but not everyone knows how to convert these ingredients into beautiful and easy-to-use websites.

Every time you use HTML and CSS, you are designing—giving content form and structure so that others can understand. People have been designing for hundreds of years and have developed some principles in the process that also apply to today’s digital interfaces. These principles are reflected in three key areas: how text is displayed (typesetting), how content is arranged (spacing), and how personalized addition (color). Let’s explore how to use these web design “ingredients” from a developer’s perspective, leverage CSS properties and guides to eliminate guessing ingredients in web design.

Table of contents

• typesetting
• spacing
• color

typesetting

Easy-to-read websites are no accident. In fact, Taimur Abdaal has written an article on this topic, which contains a lot of advice from developers dealing with typography. We will focus on two basic design principles that can help you display text in a more pleasing and easier to read: repetition and hierarchy.

Use duplication to achieve consistency and maintainability

Due to the importance of reusability in software, repetitions appear quite naturally on the network. For example, the CSS class allows you to define a specific style for text and then reuse it throughout the website. This results in duplicate and consistent text styles of similar content, helping users browse the website.

For example, if you are working on the style of a new paragraph, first consider whether there is existing content with a similar style and try using the same CSS class. If not, you can create a new class with a common name that can be reused elsewhere on the website. Consider using .paragraph--emphasize instead of .footer\_\_paragraph--emphasize , or using .heading-1 instead of .hero\_\_site-title . The first few examples can be used on your website, while the latter is limited to specific components. You can even add a prefix, such as text- , to indicate that the class is specifically used for text styles. This approach will reduce the size and complexity of the CSS file while making it easier to update global styles in the future.

In design, there are countless ways to experiment with styles. Designers sometimes get addicted to font styles, creating many slightly different similar styles. However, in code, it is very valuable to limit text styles to a minimum. Developers should urge designers to combine similar styles to reduce the amount of code and improve reusability and consistency.

Hierarchy provides clear visual order for content

Hierarchy is something you will only really notice when it doesn't exist. In typesetting, hierarchy refers to the visual differences between various texts. It is the difference between titles, paragraphs, links, and other text styles. This difference is achieved by selecting different fonts, colors, sizes, cases, and other properties for each type of text content. A good hierarchy makes complex information easier to understand and guides users to browse your content.

HTML itself provides some hierarchy (for example, the font size of the title is from<h1></h1> arrive<h6></h6> gradually decreasing), but CSS opens the door to greater creativity. By<h></h> Tags give larger font sizes, and you can quickly create larger dimensional differences between title levels – thus forming more hierarchies. To create more changes, you can also change the color, text-align , and text-transform properties.

Instructions for font selection

======================================================================================================================================================================================================= ======================================================================================================================================================================================================

========================================================================================================================================================= ========================================================================================================================================================= ========================================================================================================================================================= =========================================================================================================================================================

When it comes to typography, we need to make sure it is as easy to read as possible. The overall factor with the greatest readability is the font you choose – it’s a huge topic. Many factors determine the "readability" of the font. Some fonts are designed specifically for titles or short lines of text; these are called "display" fonts, and they are often more personal than the fonts designed for text. Unique decorations and quirks make it harder to read when displayed fonts in small sizes and as part of large paragraphs. As a rule of thumb, a more intuitive font should be used for text and only display fonts for titles.

If you're in short supply and need a readable font, try Google Fonts. Add a piece of text to the preview field and resize it to the approximate size displayed on your site. You can then narrow the results to serif or sans serif fonts and scan the font list for easy-to-read fonts. Roboto, Noto Sans, Merriweather and PT Serif are all very readable options.

CSS properties for improving readability

• The font size of the main paragraph should be between 16px and 18px (1em and 1.25em), depending on the font you choose.

• Manually set the line height (the vertical space between two lines of text) to make your text less crowded and easier to read. For titles, start with line-height: 1.25 (i.e. 1.25 times the font size), and the paragraph is at least 1.5 (but not more than 1.9), and adjust as needed. The longer the text line, the larger the line should be. To maintain text flexibility, avoid adding units at row height. Without units, the line height you set will be proportional to your font size. For example, line-height: 1.5 and font-size: 18px will make your line height 27 pixels. If you change the font size to font-size: 16px on a smaller screen, the calculated line height will automatically change to 24 pixels.

• Note how many characters are contained in the text line, with the goal being 45 to 75 characters long (including punctuation and spaces). Doing so reduces user reading fatigue by restricting eye and head movements to track text lines. Due to the variability of the network, it is impossible to control the length of the line, but you can use max-width values ​​and breakpoints to prevent the text lines from getting too long. Generally speaking, the shorter the text line, the faster the scan speed. And don't worry too much about calculating the number of characters per line. After you finish a few times, you will feel about what looks right.

spacing

After viewing the layout, you can step back and check the layout or spacing of the content. Movement and proximity are two design principles related to spacing.

Movement is about content process

Exercise is how your eyes pass through a page or the flow of the page. You can use movement to guide the user's sight, tell a story, point to the main action items, or encourage them to scroll. This is done by building content within each component and then arranging these components to form a page layout. By paying attention to how your eyes pass through the content, you can help users know where to look when scanning the page.

Unlike books (which often have very linear structures), websites can be more creative in their layout – in countless ways. It is important to make sure you have a purpose in how to layout your content and to make it layout in a way that guides users through your content as easily as possible.

Consider the above three examples. Which one is the easiest to understand? The arrangement on the left moves your sight from the screen to the left due to the position of the image, which makes it difficult to find the button. In the intermediate option, it is easy to ignore the title because the image is too large compared to the title. On the right, the title first attracts your attention and the image is constructed to point to the main action item, the button.

Blanks are useful tools for creating powerful movements, but they are easy to use too much or too little. Think about how you use it to guide the user’s eyes and divide your content. If used properly, the user won't notice the blank itself, but will be able to better focus on what you are presenting. For example, you can use blanks to separate content (rather than colored boxes), which will result in a less cluttered layout.

Proximity to establish relationships

When objects get closer, they are perceived as relevant. By controlling the spacing around elements, you can hint at the relationship between them. Creating a spacing system to help build consistency through repetition and avoid using random numbers may be helpful. This system is based on the default browser font size (1rem or 16px) and uses different values ​​covering most scenarios:

• 0.25rem (4px)
• 0.5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4rem (64px)

You can use Sass or CSS variables to keep these values ​​consistent throughout your project. The system might look like this—but use anything you feel comfortable with because naming things is hard:

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

Color conveys personality and attracts attention

Color greatly affects the personality of the website. If used properly, it will make the page full of vitality and emotion; if used improperly, it will distract from the content, or, worse, make it inaccessible. Color is closely related to most design principles. It can be used to create motion by guiding the user's line of sight and can be used to create emphasis by drawing attention to the most important action items.

Instructions for color selection

With color, it can be difficult to know where to start. To help, you can use a four-step process to guide your color selection and build a palette for your website.

Step 1: Understand your emotions

Before choosing a color, you must understand the tone or attitude of your website and brand. Check out your content and decide what you are trying to convey. Is it fun, informative, retro, loud, gloomy? Generally, you can summarize the tone of a website into several adjectives. For example, you can sum up The North Face as adventurous and rugged, while Apple is minimalist and beautiful.

Step 2: Find your main color

Remember your emotions and try to imagine a color that represents it. Start with the saturation of the color (intensity of the color) and brightness (the degree of proximity of the color to white or black). If your mood is optimistic or gorgeous, lighter (more saturated) colors may be the best. If your emotions are serious or implicit, darker (not too saturated) colors are better.

Next, choose a hue. Hue refers to what most people think of as color—where does it fall in the rotation of the color wheel? The hue of color gives it the greatest meaning. People tend to associate hues with certain ideas. For example, red is often associated with power or danger, and green is associated with money or nature. It may be helpful to check out similar sites or brands to understand the colors they use – although you don’t need to follow their leadership. Don't be afraid to try!

Step 3: Add auxiliary colors

Sometimes two or three main colors are required, but this is not necessary. Think of different brands of colors. Some use a single color, while others have a primary color and one or two auxiliary colors. Coca-Cola uses its unique red color. IKEA is mainly blue with some yellow. Tide is orange with some blue and yellow. Depending on the mood of your website, you may need several colors. Try using tools like Adobe Color or Coolors, both of which allow you to add main colors and then try different color relationships, such as complementary colors or monochromes, to quickly see if anything works well.

Step 4: Expand your color palette

Now that you've narrowed down and found your main colors, it's time to expand your range with a palette that provides versatility and constraints for your projects – a method I found useful. Tones and shadows are the trick here. The shades are made by mixing your main color with white, and the shades are made by mixing with black. You can quickly create a well-organized system using the Sass color function:

 <code>$main-color: #9AE799; $main-color-lightest: lighten($main-color, 20%); $main-color-lighter: lighten($main-color, 15%); $main-color-light: lighten($main-color, 10%); $main-color-dark: darken($main-color, 40%); $main-color-darker: darken($main-color, 50%); $main-color-darkest: darken($main-color, 60%);</code>

To perfect your palette, you will also need several colors, such as white and black. Try creating a "rich black" with dark, almost black shades of your main color and at the other end of the spectrum, select a few light grays that are colored with your main color. Coloring white and black will add more personality to your page and help create a coherent look and feel.

Last but not least, if you are dealing with interactive products, you should add colors for success, warning, and error status. Usually green, yellow, and red are suitable for these, but consider how to adjust the hue to make it better suit your palette. For example, if your mood is friendly and your base color is green, you may need to lower the saturation of the wrong state color to make the red feel less negative.

You can do this using the mix Sass color function by providing your base color, the default error color, and the percentage of base color you want to mix with the wrong color. Adding the desaturate function helps to reduce the tone of the color:

 <code>$success: mix($base-color, desaturate(green, 50%), 50%); $warning: mix($base-color, desaturate(yellow, 30%), 5%); $error: mix($base-color, desaturate(red, 50%), 20%);</code>

When it comes to the network, there is a color principle you must pay special attention to: contrast. This is what we will introduce next.

Contrast

Color contrast—the difference in saturation, brightness, and hue between the two colors—is an important design principle that ensures that the network is accessible to people with low vision or color blindness. By ensuring that there is enough contrast between your text and any background on its website, it will make it better for all users with normal vision to access. When viewing accessibility, be sure to follow the color contrast guide provided in the W3C's Web Content Accessibility Guide (WCAG). There are a number of tools to help you follow these guidelines, including the Check Panel in Chrome Development Tools.

Now, it’s time to put these principles into practice! You can use these processes and CSS tips to help eliminate guessing elements in your design and create better solutions. Start with what you are familiar with, and eventually, the design principles mentioned here will become second nature to you.

If you’re looking for more practical tips, Adam Wathan and Steve Schoger have written some articles about their favorite tips.

The above is the detailed content of Design Principles for Developers: Processes and CSS Tips for Better Web Design. For more information, please follow other related articles on the PHP Chinese website!