6 posts tagged with "design"

How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text readability, use rich colors, create natural layers, keep images within bounds, add the finishing touch, and ensure continuity.

This is Part 2, see Part 1

Rich Colors​

• From a designer's perspective, the HSL color wheel is more useful than RGB because its parameters are perceivable by the human eye:

  • Hue refers to the position/angle of a color on the color wheel.
  • Saturation indicates whether a color is gray or vibrant; 0% is gray, and 100% is the most vivid.
  • Lightness indicates whether a color is black or white; 0% is pure black, 100% is pure white, and 50% is pure color on the hue.

• You need far more colors than you think; five or six are far from enough.

  • Overall, divide into three categories, each with seven color choices:
    • Grays
    • Primary colors
    • Accent colors

• Select from predefined colors.

  • Defining a color palette is a true test of skill, as it requires a good eye and experience.
  • Start by finding the darkest and lightest colors, then look for the intermediate ones.

• When searching for dark colors, you can slightly adjust the hue within 30 degrees to compensate for the lack of color caused by changing the other two parameters.

• Similarly, gray does not need to be pure gray; you can add other colors. Some grays are cool-toned, while others are warm-toned.

• To address accessibility, you don't necessarily need to only adjust saturation and lightness to make elements clearer; you can also adjust hue as long as it remains relatively clear, allowing you to maintain aesthetics.

• Don't rely solely on color to distinguish elements; there are many other methods that can achieve even better results.

How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text is easy to read, use rich colors, create natural layers, avoid excessive imagery, and add the finishing touch.

This is Part 3; see Part 1 and Part 2.

Natural Layers​

• Why do some elements appear to have depth? Because they have a natural shadow effect. But is it really worth spending hours tweaking this?

• When elements are raised on the z-axis closer to the user, they attract more attention, which is also achieved through shadow.

• Advanced shadow techniques may even involve two shadows: one created by ambient light and another by direct light.

• Flat design can also convey depth; one way is through color—brighter colors appear closer, while darker colors seem farther away. Another method is using vertical offset with a solid color shadow without blur, such as box-shadow: 0 4px 0 hsl(220,8%, 80%);

• Overlay elements to create depth.

  • For example, use negative margins like margin-bottom: -72px; to overlap two background elements, or even three elements with margin: -72px 0 -72px 0;
  • Similarly, images can overlap two background areas, but to make the image clearer, you can add a solid color border for distinction.

Avoid Excessive Imagery​

• Elegant design pays attention to the use of every image; you should use high-quality images, and adhere to guidelines for their use.

• When placing text over images, to enhance clarity, you can:

  • Overlay a gray layer for a gray background.
  • Reduce the image contrast for a white background.
  • Adjust the image to a single color for a deeper background.
  • Add shadow to the image.

• Images have their own suitable sizes; do not arbitrarily change their scale.

  • Do not enlarge icons; you can add a solid color circle around them.
  • Do not shrink screenshots, as the text will become unreadable; instead, you can:
    • Take screenshots on smaller screens.
    • Focus the screenshot on key areas.
    • If you must take a large image, use lines to replace small text to avoid readability issues.
  • Also, do not shrink icons; redraw them as needed.

• Be mindful of user-uploaded images.

  • If sizes are inconsistent during display, it can look chaotic; use backgroundSize: "cover", backgroundImage: url(...);
  • Images blending with the original background color can look strange; in this case, using inner or outer shadows is more appropriate.

The Finishing Touch​

• You don't always need to add new elements to enhance design; modifying default settings can make it look great, such as:
  • Changing bullet points in lists to icons.
  • Adding color and weight to hyperlinks, or using a stylish bold underline.
  • Altering the default settings of elements like checkboxes and radio buttons.
• Add a colored border to one side.
• Add color to the background, or low-contrast textures and illustrations.
• Design unique empty states.
• Reduce the use of borders; to differentiate color boundaries, use box-shadow, color, or spacing.
• Be unconventional; lists don't have to be single-column; they can be multi-column cards. Tables don't have to be single-row; they can be complex and colorful. Single selections don't have to be radio buttons; they can be cards.

Continuous Evolution​

Design is everywhere in life; view the world through a designer's eyes, continually recording and analyzing.

How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text readability, use rich colors, create natural hierarchies, keep images appropriate, add finishing touches, and ensure sustainability.

Focus on the Details​

1. Start with functionality, not layout.
2. Begin with the details and work from grayscale; this forces you to clarify the hierarchy, layout, comparisons, and sizes before considering color.
3. Avoid over-designing, as a product that users can actually use is far more important than design.
4. Iterate in small steps; people often underestimate the difficulty of implementation.
5. A product's personality is determined by elements such as font, color, border radius, and voice. For example, round shapes feel lively, while straight and thin shapes feel serious; blue is safe, gold feels expensive and complex, and pink is playful. Be careful not to borrow too much from your competitors :)
6. Limit choices by pre-setting common parameters; this makes it look better and easier to implement.

Distinguish Between Primary and Secondary Elements​

1. Human attention is limited; having too many focal points is equivalent to having none.
2. Size does not equal importance; consider using two to three font weights and two to three colors.
3. You can use gray text on a white background to downplay text, but avoid using gray text on a colored background; instead, use colored text on a colored background.
4. Mix weak and strong elements rather than relying solely on one or the other.
5. Try to avoid labels (label: blah); sometimes you don't need a label and can go straight to the value; at other times, you can form a short sentence with the label and value; strengthen or weaken according to the importance of the label and value.
6. The size of document tags does not equal the size of the UI; for instance, while you often use h1 for page titles, the actual importance of a page title may not warrant such prominence, so use regular size and font instead.
7. Weight and color can both serve to strengthen or weaken elements; consider them together.
8. If there are three parallel buttons for actions, distinguish between primary, secondary, and tertiary.

Maintain a Clean Layout​

1. Start with a loose layout, as reducing spacing is easier than increasing it.
2. Select spacing from the design system.
3. You don't need to occupy the entire screen; you can center elements or add columns.
4. Some elements should not use proportional sizing but fixed widths, such as a left navigation bar or the width of an icon occupying a column; forms should not be resized unless absolutely necessary.
5. Avoid scaling all parameters of a component uniformly; instead, design specifically for different sizes.
6. Related items should be grouped together, while unrelated items should be spaced apart.

Ensure Text Readability​

1. Choose font sizes from the design system; avoid using em as it is a relative value based on the current font.
2. Select a good font; starting with system fonts or popular fonts is always a safe choice; some fonts are designed for headings, with shorter horizontal spacing and shorter lowercase letters; others are designed for small sizes, with larger horizontal spacing and taller lowercase letters; learn from excellent designs and develop your intuition.
3. Ensure that text paragraphs are not too wide.
4. Align different text at the same level using baseline alignment (align-items: baseline) instead of centering.
5. Line height affects whether users can easily shift their gaze to the next line; use 2x line height for wide paragraphs and 1.5x for narrow paragraphs; use larger line heights for small text and smaller line heights for large text.
6. Not every hyperlink needs color or underlining.
7. Short paragraphs can be center-aligned, while long paragraphs should be left-aligned; numbers should be right-aligned.
8. If the distribution of single-line text in a paragraph is awkward due to word length, consider using hyphens: auto;.
9. Adjust letter-spacing as noted in item 2 above; if increasing it for small-sized fonts, be careful to reduce letter-spacing.

One common mistake that website builders make is designing their sites like a product brochure. They go to great lengths to provide visitors with extensive details, but in reality, such websites fail to retain users.

The reason is that most people do not want to spend a lot of time figuring out how things work. They prefer to find answers through trial and error or simply by clicking around.

From a user's perspective, a good website allows them to discover what they need through their own exploration and experimentation. Based on the content from Don’t Make Me Think, Revisited, we have summarized four essential principles for designing a good website.

Start with a Clear and Simple Navigation Bar​

When users first visit a website, they often struggle to understand the scale of the site. Without knowing the website's structure, they may choose to leave. This is why a navigation bar is so crucial. On every page, users should be able to locate their current position, return to the homepage, search for keywords, and find information on how to use the site. Most importantly, the navigation bar must be clear and straightforward.

Design an Impressive Homepage​

The homepage is typically the most frequently visited page on the entire site, making its importance undeniable. Users' first impression of our website also depends on the homepage. Therefore, it is essential to design a visually striking homepage. Additionally, we need to ensure that the homepage conveys the most important information to visitors—our website's vision and goals. For example, we could include a tagline next to the website logo that describes the site's vision.

Use Visual Hierarchy to Present Information​

Users generally do not read text line by line when visiting a website; instead, they skim through the text to retrieve the information they need. If we want to convey specific information to users, we should learn to utilize visual hierarchy. The rule is simple—highlight key information. This way, users will understand what to focus on and where to click.

Improve Loading Speed on Mobile Devices​

A few years ago, creating responsive web pages was just a nice-to-have feature, but now it is essential. With the rapid advancement of mobile devices, users have increasingly high expectations for mobile websites and tend to spend more time surfing on their phones. At the same time, users are more likely to lose patience when loading speeds are slow. On one hand, we need to continually enrich and enhance the content and interactivity of mobile pages; on the other hand, we should strive to improve the loading speed of mobile websites to create the best user experience.

A common mistake many website builders make is creating a website like a product brochure. Website builders spare no efforts to provide the most detailed information for visitors. However, this kind of site cannot keep users.

That is because most people don’t want to spend much time learning how things work. Instead, they prefer to try and figure things out on their own simply by clicking around.

From the users’ perspective, a good website allows them to find what they need by playing around. Based on the book Don’t Make Me Think, Revisited, we have summarized four guidelines for creating a website of good usability.

Start with clear navigation​

When a user lands on a website for the first time, he can hardly estimate the website’s scale. He will probably choose to opt-out for not knowing how the website is organized. That’s why a navigation bar is so necessary. On each page, the navigation should enable users to locate where they are, how they can get back to the homepage, where they can search for keywords and other extra information about how to use the website. Most of all, navigation must be simple and straightforward; otherwise, users may get confused and just click away.

Make an impressive home page​

The home page is likely to be the most frequently visited page of a website, and its importance is self-evident. Users’ first impression of a website is determined by their first impression of the home page. An impressive home page is a must.

Besides, we also need to make sure that we have delivered the most important message to visitors, which is the goal of our website. The book suggests an effective way to communicate with readers on the home page would be placing a tagline describing our mission next to the website logo.

Use visual hierarchies to present information​

When we visit a website, we don’t read the text line by line. Instead, we often scan the text to retrieve the information we need. If you want to convey a specific message to visitors, you should learn to make use of visual hierarchies. The rule is simple. Key messages should be highlighted. So users can understand where to focus on and click. Hiding important information will only annoy visitors.

Improve mobile loading speed​

A few years ago, being responsive was only a plus, but nowadays, it has become a must.

1. Due to the rapid development of mobile devices, users expect more from mobile websites and tend to spend much more time on mobile surfing.
2. Users easily get impatient if the loading speed is slow.
3. We need to enrich the content and interactivity on mobile pages. (tailoring contents for mobile devices.)

Problems with Comic Sans:

1. Unbalanced visual weight in both the letter-level and paragraph-level.
2. Bad kerning (spacing between characters).
3. It gains undeserved popularity nowadays with an aged design for on-screen display in 1994, during which Windows 95 does not have anti-aliasing.
4. Average people mistakenly think they can design well with the ease of modern technologies, while professional designers fight back intensively. And Comic Sans is one of the fiercest points of conflicts.