- 11 Easy UI Design Tips for Web Devs
- Written by Danny Adams
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: 5 having
- Proofread by: Kimhooo, KimYangOfCat
11 simple UI design tips for Web development students
When we started learning Web development, most of us had no design-related experience and no UI designer to fall back on. Therefore, this article will share 11 simple and practical UI design basics to help your projects look more organized and stylish.
This post was originally published on DoableDanny.com. If you think this article is well written, consider following the original author’s Youtube channel!
Keep your style consistent
In the example above, you can see three ICONS with very different styles and colors:
- The calendar icon is made up of gray and green lines
- The lock icon is based on a solid orange ring, with a white fill in the middle, no line outline
- The “like” icon has a thin black outline, giving it a curved feel
The three ICONS don’t have a consistent theme — they vary in shape, color, size and outline thickness.
In the lower half of the example, the three ICONS appear to have the same style. They all have a simple black and grey outline, and remain uniform in height and width.
Also, in the lower half, text and ICONS are aligned to the left. Of course, I can also center them. Alignment is not important, the key is to keep the style consistent.
In my experience, when we need to display long text such as blogs, align it to the left. This makes the text easier to read. When working with short content, left or center alignment is a good choice.
2. Use high-quality graphics
Decals like the one in the top half of the example diagram may be great for teens, but using such materials makes the site look particularly unprofessional.
You can download professional, quality images for your projects for free from www.unsplash.com.
3. Focus on contrasts
If the background is light, we should use a dark font. Conversely, use a light font on a dark background. It’s a simple truth. One of the most common problems I see when browsing the web is that some web developers use a fancy image as a background and then put text on top of that dazzling background, which makes the content of the site very difficult to read.
Solution:
- Use image overlay. For example, if you are using light text, overlay the background image with a dark layer (using RGBA’s translucent div background color) and lower the opacity. This will dark the image and make light text clearer. Remember to give the text a higher Z-index than the image overlay, so that the text is at the top!
- Select the background image for this example. There should be a uniform area of the image to show the text.
In addition, there is another point worth noting in the example diagram. The logo in the navigation bar, the body on the left side of the page, and the “Start My Journey” button are vertically aligned to the left. It’s also a matter of consistency in design, and these details are key to keeping your pages organized.
4. Leave blank
In the top half of the example, the “SomeCompany” logo and the gap at the top of the page clearly do not match the text on the right side of the navigation bar. In the lower part of the example, the gap between them and the upper part is the same.
In the image above, the body is too close to the title and buttons, and it looks very cramped. The image below has some gaps in the same section, which looks much better.
In the figure below, we can also see that the title is closer to the body than the distance between the title and the logo. The closely related parts should be closer together to show the correlation. Of course, you can’t get too close like the wrong example above.
5. Use font size to create visual hierarchy
Your eye might be drawn to “The Road Less Travlled” in The previous example. Obviously, this is because of its large font and sharp outline. Also, colors can be eye-catching, such as the “Start My Journey” button above.
A common mistake is to make the navigation logo too big, or to make the navigation color too bold.
Let the reader focus on the content, not the logo or the navigation bar.
6. Use the same font
It’s best to keep the font consistent. We don’t need to make font Settings too complicated. Avoid “Times New Roman” (too many people use it) and “Comic Sans” (it’s old-fashioned).
Nunito, Helvatica, or Sans Serif are suitable modern fonts.
Of course, if you feel that your design is a bit boring, you can use a second font for the title (as in the title section of this blog!). .
In terms of font size, text is usually 18 to 21 pixels.
7. Colors and shadows
Be careful not to use too many colors. Too much color can make a page look cluttered and unprofessional, especially if you have no idea what the design is. Remember to keep your design simple.
Choose a color as the base, then use palette (add white) or shadow (add black) to fine-tune.
Then choose a primary “motivational” color to highlight the area and look for “complementary color schemes.”
I will use Coolors to find the right colors and mix them.
Rounded and acute angles
Sharp angles and sharp edges can draw people’s attention, such as the sharp corners in the chat bubble above.
What can we do with this technique? Set the button to rounded corner. You should focus the user’s attention on the content in the center of the button, not the four corners.
9. Stop using outdated borders
In the early days of web apps, borders were almost everywhere. These days, it’s best not to use too many borders — they make the page feel cleaner. Borders are often redundant.
This is not to say that borders can’t be used at all, of course; they can still be useful when you need to separate different parts of a page. What I want to say is, do not use frame excessively, too multifarious, the frame that catches an eye is not beautiful.
10. Don’t use underscores in navigation
Scrolling down lines is old-fashioned, and pages without underscores are much cleaner.
It’s better to hover, underline, or change font color or size.
In order to identify hyperlinks and make it easier for users to jump to, links in the body should be decorated with underscores. I would say avoid underlining text without hyperlinks.
11. Download a design program
I used to start a project agonizing over how to style it. Experimenting with different colors, experimenting with the placement of elements, and tweaking the code took years off my life.
Using design software can help you iterate on ideas faster. I now use free AdobeXD to drag and drop elements into place, quickly get a UI design draft and start writing code. Figma is also popular, but it’s not free.
Excellent article I refer to
- Psychology in the application of good web design www.doabledanny.com/persuasive-…
- Turn the rotten into magic and reconstruct a terrible design www.youtube.com/watch?v=0JC…
- Stunning UI techniques medium.com/refactoring…
- The science of good UI design www.youtube.com/watch?v=nx1…
If you like this article, by subscribing to the original author’s Youtube channel: www.youtube.com/channel/UC0… Or visit his blog to say thank you and keep up with new posts.
You can also reach the original author on Twitter!
Thank you for reading!
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.