7 Silent UI Hacks That Web Designers Use for Websites
Web and app design is not just about choosing colours and fonts. There are many subtleties and tricks behind creating an attractive website that is not always obvious.
In this article, I’ll share some of those ‘little things’ I’ve learnt over the years. You may already know some of them, but many techniques are rarely discussed. Nevertheless, they can significantly improve the visual experience of a website and make its interface look more professional.
1. Inspiration Board
Before you start working on a design, collecting references on a so-called’ inspiration board’ is always a good idea. It can be a collection of screenshots, design examples or individual elements that appeal to you. Such a collection will help you not only to find creative ideas but also to determine the stylistic direction of the future project. Services like Pinterest or Dribbble are great for finding inspiration.
Typically, inspiration boards are used to define the visual identity of a design. But your board can include:
- Words that express the tone of voice for further UX copywriting.
- Marketing ideas.
- Interaction design patterns.
- Inspirational screenshots.
All of these can be used to create a style guide in the future.
2. Unique Font Family
Choosing the right font is one of the most critical tasks. Instead of relying on standard fonts, try using a Unique Font Family. These fonts give websites and apps a personalised look and help them stand out. However, don’t go for overly decorative fonts — it’s best to balance originality and readability.
5 Best Free Fonts for Modern UI Design in 2024
1. Inter
Inter is a free, open-source sans-serif typeface designed by Swedish designer Rasmus Andersson.
2. Satoshi
Satoshi is a popular modernist and geometric sans serif font created by Deni Anggara, a Jakarta-based typeface and graphic designer.
3. Hubot Sans
Hubot Sans is Mona San’s ‘robotic sidekick’ with clean and geometric accents.
4. Switzer
Switzer is a unique neo-sans serif font that was originally introduced as Volkart on Indian Type Foundry’s website and made its debut on Fontshare’s platform in 2021.
5. Geist Sans
Geist Sans, launched in October 2023, is the new brand font from Vercel, which builds products for developers and designers.
More free fonts can be found here:
3. Line Height
Novice designers often ignore line height, although it is vital in readability. The correct line height should provide a comfortable perception of the text, making it ‘airy’ but not broken. As a rule of thumb, the ideal line height is 120–150% of the font size.
Experiment with this parameter to make the text look light and structured.
4. Font Kernelling
Kerning is the adjustment of the spacing between characters in text. A visually pleasing text experience depends not only on your font choice but also on how well you adjust the spacing between letters. By changing the kerning, you can avoid text that is too tight or, on the contrary, too sparse.
Adjusting kerning in headlines and logos is especially important, where every detail matters.
5. Choosing colours
Colour is a powerful tool in a designer’s hands. However, choosing the right colour palette is not always obvious. A good practice is to start with one or two primary colours and add additional shades for accents.
Here are some useful tools for finding the perfect colour combinations:
⊚ Palette Maker
⊚ Realtime Colors
⊚ UI Colors
6. Gradients
Gradients add depth and dynamics to a design. They can be used for accents, emphasising essential UI elements.
Trends and examples of gradient designs in 2024
Some gradients are always on trend and are great for various websites and apps. You can use these gradients in your UX design.
Here’s a list of 12 gradient combinations you can find to use in your designs:
- Blue Raspberry
- Crystalline
- Pink Fish
- Dusty Grass
- Sand to Blue
- Relaxing Red
- Sublime Light
- Megatron
- Yellow Mango
- Juicy Grass
- Sea Lord
- Cherry Blossom
Best 4 Gradient Tools
Grabient. It offers a wide range of pre-made gradients you can quickly and easily customise and download.
Mesh Gradients. With Mesh Gradients, you can download 100 free mesh gradients in different formats (.sketch, .png, .ai, .jpg, .eps).
CoolHue. It’s a tool that allows you to create great project colour palettes.
WebGradients. It’s a free collection of 180 linear gradients that you can use as backgrounds for content on any area of your website.
7. Micro Animations
Micro animations are small animation elements that make the interface more lively and interactive. They can be smooth transitions when hovering over a button or loading animations. Such details improve the user experience, making interaction with a website or app more pleasant and intuitive.
However, be careful: too many animations can distract users and overload the site.
3 Cool UI Animation Tools
- Snappify is a user-friendly code design tool that lets you create stunning animations of your technical content.
- Lottie Creator is a web-based animation tool that allows you to create highly customisable and interactive animations.
- Rive is an interactive animation tool for designers and developers, allowing them to create functional graphics for mobile apps and websites.
Conclusion
These little tricks can significantly improve the visual experience of your website or app. You can create a more attractive and user-friendly interface by working on each of these elements, from fonts to micro-animations. Remember, the success of web design often lies in the details, and it is these that make the overall impression.
Don’t be afraid to experiment and be inspired by the best examples!
