25 useful advices for thinking about website design
In the creation of websites and software, high quality is required in terms of design as well as functionality. There are many good things and bad things about design, but Mr. Anthony Hobday, a product designer, explained about the design rule that ``if you follow it for the time being, there will be no problems''.
Visual design rules you can safely follow every time
01: Avoid pure black and pure white
Hobday says that pure black looks unnatural on screen, and pure white is too bright. Instead, it is recommended to use a gray that is close to pure black or pure white.
◆ 02: Add a neutral color (achromatic color)
Neutral colors generally refer to black, white, and gray. If you use some color in the interface, use that color in addition to the neutral color to make it more coherent. Below are examples of gray plus red and black plus blue.
◆ 03: Use high contrast for important elements
Key elements are buttons, content, and anything else that your users pay attention to. High contrast is useful for important elements, because the higher the contrast, the more attention the element receives. On the other hand, it is also effective to reduce the contrast as much as possible for elements that the user does not need to pay attention to.
◆ 04: All designs should be intentional
Hobday points out that all design should be intentional. When someone asks me why I chose a particular design, such as white space, placement, size, spacing, color, and shadows, I have to be able to answer correctly. Otherwise, the design will feel inconsistent.
◆ 05: Visual alignment is often better than mathematical alignment
Even if the design is placed in the mathematically correct position (left), it may actually look unbalanced due to the left/right or top/bottom bias. In such a case, it is important to create a visually well-balanced design (right).
◆ 06: Narrow the character spacing and line spacing when the characters are large, and widen them when the characters are small
The rule that applies to any text is that the larger the letters, the less space you should have between each letter and each line. The reverse is also true, otherwise large characters may appear spread out and small characters may appear too close together.
◆ 07: The border of the container should contrast with both the container and the background
As you can see from the image below, if the border between the container and the background is ambiguous (left), it will look quite blurry. The border should be a different color than the container and background to provide a clear demarcation between the container and the background.
◆ 08: Arrange all elements in a straight line
Hobday points out that if some element is not in line with other elements, it feels like something that is not suitable for design. I said that ideally each element should be aligned with the others based on some logic
◆ 09: Change the brightness of the color
Colors with different lightness values give the impression that the lightness is not just the hue, but also the lightness.
◆ 10: If you modify the neutral color, you should use only one of warm color or cold color
Using both warm and cool colors to tweak a neutral color can lead to disjointed color schemes. In the example below, the background on the left is a warm color and the foreground is a cool color. The one on the right uses warm colors for the background and foreground. The left one looks slightly floating, and the right one looks subdued.
◆ 11: Give mathematical relevance
Hobday says the spacing between elements and the size of elements should be determined by some kind of scale to ensure consistency in design. The example below uses multiples of 8 for all elements.
◆ 12: Arrange elements in order of visual weight
If you have several elements in a row or column and some of them are visually heavy, place the heaviest first and the lightest last. A caveat is to put heavy elements on the outer edges. For example, if you want some elements to line up on the right edge of a web page, you want the heaviest element to be on the right edge.
◆ 13: Arrange in 12 columns when dividing the design vertically
The 12-column grid can be divided into 1/2, 1/3, and 1/4, so it is characterized by a high degree of freedom.
◆ 14: Place the margin between points with high contrast
If you have a black paragraph of text on a white background (left), the point of high contrast is between the end of one paragraph and the beginning of the next. On the other hand, if you have a white paragraph on a black background (right), the points of high contrast are from the end of the paragraph to the beginning of the black background, and from the beginning of the black background to the beginning of the paragraph. There should be proper padding between these points.
◆ 15: Brighten the elements in front
Makes on-screen elements brighter as they get closer to the user.
◆ 16: The drop shadow blur value is double the distance value
For drop shadows that cast shadows on elements such as letters, set a blur value of 8 pixels to create a shadow that extends 4 pixels on the Y axis as shown below. Hobday also recommends lowering the opacity of shadows as elements appear to come closer to the foreground.
◆ 17: Simple things over complicated things, complex things over simple things
If the foreground is a simple color scheme such as text, it is most effective to place a background with a complex color scheme. Conversely, a complex foreground works well over a simple background. If you don't do this, you'll end up looking plain or messy.
◆ 18: Reduce the brightness difference between the background and the container
The brightness difference between the background and the container should be within 12% for dark interfaces and within 7% for bright interfaces. This ratio refers to the brightness value in the HSB color system.
◆ 19: Make the width of the outer padding (margin) equal to or greater than the inner padding
In the image below, the inner padding is the part surrounded by the red frame. The margin between B and C when element B and element C are in container A. The outer padding is the part surrounded by the blue frame, and it corresponds to the margin between container A and element B or element C. The width of this outer padding should be the same or wider than the inner padding.
◆ 20: Body text should be 16 pixels or more
16 pixels is the default text size for most browsers. Text below this size is difficult to read and should be avoided in body text.
◆ 21: Line length should be about 70 characters
It doesn't matter much if the line length is 60 or 80 characters, but too much of one or the other can lead to subtle readability issues.
22: Button horizontal padding should be double the vertical padding
A standard button pattern is wider than it is tall. Hobday points out that if you want an element to be recognized as a button, follow this pattern. In the example below, the label has a top and bottom padding of 30 pixels and a left and right padding of 60 pixels.
◆ 23: Up to 2 types of fonts to be used
Different typefaces can emphasize the concept behind the design or add variety to your design. On the other hand, overuse is not good, Hobday pointed out, ``There's little need to use more than two, and it can lead to a visually confusing design.''
◆ 24: Round the corners appropriately
If you want rounded corners to look visually pleasing, make the radius of the inner corners smaller than the radius of the outer corners. Specifically, if the outer corner radius is 30 pixels and the inner corner is 20 pixels away, then the inner corner radius is 30-20 = 10 pixels.
◆ 25: Do not put conspicuous borders nearby
By placing a border, you can clearly indicate the break in the background or container. However, if you draw a border like the red line in the image below, the borders are close to each other, causing visual clutter.
Related Posts:
in Design, Posted by log1p_kr