[ad_1]
This text options a number of the most used textual content results in UI design—from textual content truncation to rotating round textual content—together with design suggestions and Figma tutorials.
Textual content truncation is usually crucial in UI design to make sure content material matches inside area constraints whereas nonetheless being understandable and visually interesting.
Design suggestions:
- Guarantee essentially the most crucial a part of the textual content (e.g., the beginning or key phrases) is seen earlier than truncation.
- Use ellipses (
...
) to point truncated textual content. It is a normal conference that alerts to customers that there's extra content material. - Enable customers to view the complete textual content with minimal effort, resembling by way of a tooltip that seems on mouse hover or inline “Learn Extra” hyperlink / button.
Sliding (or scrolling) textual content is one other approach that generally utilized by designers when there's not sufficient area to point out full textual content. As a result of human eye naturally attracts to shifting objects, sliding textual content generally is a visually partaking option to convey data.
Design suggestions:
- Use sliding textual content solely when crucial, resembling for information tickers or dynamic content material like inventory costs or sports activities scores.
- Make sure the scrolling pace is neither too quick (making it laborious to learn) nor too gradual (inflicting frustration). A great rule of thumb is that customers ought to have the ability to learn the textual content comfortably in a single go.
- Enable customers to pause scroll the textual content (for instance, pause scrolling on mouse hover) in order that they will learn the textual content with out issues.
- Keep away from jerky or abrupt actions. Utilizing clean transitions with linear animation curve.
Glowing textual content can create a visually putting and dynamic impact in UI design.
Design suggestions:
- Don’t overuse this impact. Reserve glowing textual content for particular functions, resembling drawing consideration to key components (e.g., promo messages) or making a futuristic, neon, or sci-fi aesthetic in themed designs.
- Use tender, diffuse glow results moderately than harsh, sharp edges.
- Keep away from making use of glowing results to lengthy paragraphs or physique textual content. It may pressure the eyes and scale back readability.
Rotating round textual content is one other instance of visually interesting impact, however not like glowing textual content, rotating round textual content needs to be used sparingly.
Design suggestions:
- Rotating round textual content works properly for logos or branding components, and ornamental headings or banners.
- Keep away from utilizing rotating round textual content for big blocks of textual content. It’s greatest suited to brief phrases or single phrases.
- Make sure the textual content is legible in any respect factors within the rotation—use easy, sans-serif fonts to maximise readability and keep away from extreme letter spacing or advanced typefaces that make studying troublesome.
[ad_2]
Source_link