Whether they like it or not, every developer will have to manage the design of their creation at some point. Whether it is a matter of making decisions about the appearance of a site, or managing the user interface, knowing how to code is not always enough.
Indeed, perhaps your company does not have a full-time web designer and it is up to you to make decisions about aesthetics or IU.
I can already see you looking up to heaven: “But I’m a developer, not an artist! ». Relax, we offer you some advice to improve the design of your interfaces with technique rather than talent, even if you don’t know anything about web design.
Use different colours or font attributes to show the hierarchy of your site
It is quite common to use the size of a font to highlight the order of importance of the different elements of a page.
“Is this element important? I’ll write it in bigger. »
“This text is secondary? I’m going to write it down as a smaller one. »
However, there are other solutions. Try to use the colours and attributes of your font wisely, you will get the same result!
“Is this text important? I’ll write it in bold. »
“This text is secondary? I’ll put it in a lighter colour. »
To do this, define two or three shades and use them:
- A dark colour (but no black) for the primary content (such as the title)
- A grey colour for the secondary elements (the date of publication of an article)
- A light colour for minor elements (copyright, legal notices)
Also, choose 2 attributes:
- A normal font for most of the text
- A bolder font for important elements and titles
Do not use grey on a coloured background
As we said, using grey is a good way to reduce the importance of text on a white background, but grey writing does not really look good on a coloured background.
It is simply because it is not the grey colour chosen in itself that reduces the importance of a text, it is the effect of low contrast on a white background.
To recreate this effect on a coloured background, you have two options:
- reduce the opacity of white writing
- find a light colour based on the background colour by playing on saturation and contrast
Shift your shadows
Rather than using large blur effects, use a slight vertical shift to bring out your elements.
This will seem much more natural since the light will seem to come from above, as in “real life”. This advice also applies to embedded shadows (e. g. in form fields).
Use less border
It is time to get rid of this bad reflex: although effective, borders are not the only way to separate two elements.
On the contrary, if you use too much, you risk making your site too crowded, not airy enough. Here are several other solutions:
- Play on the shadows to bring out an element in a more subtle way
- Use slightly different background colours
- Increase spacing to better delimit the different elements without using a border
Do not make your icons larger than they should be.
There are many online resource sites to find icons related to your different sections, for example the features of your application.
So here you are with your little icon in vector format. You say to yourself, “It’s vectorial, I can resize it as much as I want! “, and you end up with icons the size of a hand on your page. It is a serious error.
Although it is true that the quality of vector images remains the same by increasing their size, icons drawn between 16 and 24 pixels will never be very professional if you enlarge them to 3 or 4 times their original size. They will lack detail and will be messy.
If you only have small icons, try adding them within a shape or adding a background colour. This will allow you to fill the space without losing the original design of the icon.
Use accentuated borders to add colour to a dull design
You don’t need to be an artist to add a little originality to your UI!
Add colourful borders to your designs to make them stand out. This simple tip will help you make a difference in no time.
You don’t need to be a graphic designer to add a coloured rectangle to your user interface, and this can greatly contribute to giving your site a more “designed” look.
Having trouble choosing your colours? Discover the different tools to help you create colour palettes.
Be aware that it is not always necessary to add a background color to your buttons
When there are several actions that a user can perform on a page, it is easy to fall into the trap of designing call to action buttons based solely on semantics.
Of course, semantics is an important element in the design of buttons, but there is a more important dimension, generally forgotten: hierarchy.
You say to yourself, “Is this a positive action? I turn the button green. “Does this erase the data? I put the button in red. »
Most pages contain only one call to action, two smaller secondary call to action and a few rarely used tertiary actions.
When creating the buttons that correspond to these actions, you should base yourself on the hierarchy you want to highlight:
– The primary actions should be obvious. Solid and contrasting background colours generally work well here.
– Secondary actions must be clear but not prominent. Contour styles or less contrasting background colours are excellent options.
– Tertiary actions must be available, but discreet. A simple clickable link is usually the best approach.
I can hear you from here: “But! The buttons that destroy data or cancel an action are supposed to be red! ». Well, not necessarily. If the destructive action is not the main action of the page, it may be preferable to assign it secondary or tertiary treatment.
Keep your big red button for the main destructive actions, such as account deletion confirmation.