December 11th, 2024, posted in for_founders
by Adelina
This article is part of the Original Design & Functionality series of our UFOs UI/UX Framework. The framework is a tool we created based on our 10+ years of experience in building complex software and thousands of hours of design meetings and feedback. Developers, designers and entrepreneurs can use this framework to gain a better grasp of the UI/UX process and build awesome apps as a result. To learn more about the UFOs UI/UX Framework and each framework component, please go here.
This article is part of the “O” from UFOs, the framework component that talks about what makes a design stand out, whether it's the small touches or highly customized features.
Original design seems to have a lot in common with a magic routine. Well, it seems magic to an untrained eye, but what it relies on in fact is a “bag of tricks”. In UI/UX design these tricks are hundreds of smaller and bigger tips, replicable strategies that can be used to solve common and less common design problems.
These can vary from specific problems, like how to turn a boring table into a card-based design, to more abstract design problems, like how to make something look fresh and original overall. Bottom line, there are things you can do to make your design stand out. Things which are guaranteed to work because they follow core design principles such as hierarchy, contrast rules, spacing and UX best practices.
The “Basics” section lists some of the most common do's and don'ts when designing or redesigning an app interface. “The extra mile” focuses on those small tweaks that can make a big difference. The things that show your users you took the time to give a visual twist to what's already there. Ultimately, that's how original design is born.
Basics
These are some of the most common mistakes that prevent your UI looking as good as it could. And some quick ways to avoid them.
Problem: text is hard to read
Don`t: increase font size
Do: increase contrast. This might mean darkening up the text if it's on a light background or making it lighter if it's on a dark background. This also applies to text placed on images. The best way to increase the contrast between text and image is to use one of the following methods:
- set a full image overlay
- if the text is placed only in the bottom part of the image for example, go with a subtle gradient overlay, darker at the bottom to accommodate the text and lighter at the top to display the image.
- lower the image contrast and maybe combine this with some subtle text shadow
Problem: elements are not clearly defined from the background
Don`t: increase drop shadow size or put a thick border around everything
Do: avoid huge, muddy drop shadows by using two shadows instead of a single one. Make the first shadow larger and softer and the second shadow smaller and darker. This second shadow is most distinct when elements are very close to the background and grows increasingly invisible as elements become elevated. You can also use this second shadow as a very subtle border, since it's a shade darker than your bigger shadow.
Problem: your UI looks disorganized. Your users don't know where to look first and they can't tell what the main actions are or what should be considered important information.
Don`t: use various fonts or colours to highlight differences or importance. Also don't rely exclusively on size to single out significant information.
Do: work on your interface`s visual hierarchy to differentiate between various elements and sections of the page and their importance. Besides size, a sense of hierarchy can also be achieved through weight and contrast. Just like bold text, solid icons cover a lot more surface area and hence look heavier on the eye. Similarly to weight, you can make elements stand out by increasing their contrast or you can make them less visible by decreasing the contrast. For example, when you put an icon next to some text, the icon tends to automatically feel emphasized. A simple way to create balance is to lower the contrast of the icon by giving it a softer color.
Problem: input forms are a pain to fill out.
Don`t: put everything in one screen hoping the user will scroll through to the end.
Do: give your users a sense of progression, like they are working towards a goal. You can include an indicator to show what step the user is at. If the process requires many steps, assure them along the way that they are making progress towards their end goal. Rather than overwhelming your users with dozens of input fields from the get-go, hide the ones that depend on other input fields. You can then display them only when the parent field has been filled out.
Problem: your design looks cluttered.
Don`t: put everything in tabs and hope for the best
Do: use more whitespace. Although it`s also called “negative space”, whitespace can definitely have a positive impact on your designs. Spacing elements a bit more it's actually one of the fastest and simplest ways to improve your design. Whitespace allows screens to breathe, makes them look more polished and it's also a great way to balance UI elements and organize your content. Whitespace can help improve the page structure and guide the user through the page`s content.
The Extra Mile
Sometimes you don't need a full-blown redesign to make your design really stand out. Small adjustments can make a big difference. They also show your users you went the extra mile in terms of polishing your design.
Make your design more visual
This can range from replacing steps with a progress bar to replacing bullets in a list with icons. You can also turn existing elements into something more visually appealing, like transforming quotation marks into visual elements by increasing their size and colour. Styling UI elements can also add a nice visual twist, like custom checkboxes and radio buttons in the brand colour.
Make your background stand out in a good way
We know...backgrounds are supposed to stay in the background. But sometimes a design will look plain no matter what you do. That's when you can add a nice visual twist by making your background stand out a bit more. Play with the background colour, add a slight gradient or maybe a subtle abstract pattern. It doesn't have to be across the entire background, you can add just some small repeating patterns.
Add a distinct personality to your design
Similar to the small, repeating patterns in the background, small, colourful accents can add personality to your design. For example, you can include colorful accent borders to various parts of your interface, like the top of a card or alongside an alert message. A design`s personality is made up of such small, repeating visual elements and it's something your users will come to recognize and identify your visual identity with.
Cut down on the borders
Find alternative ways to separate elements and organize content. Instead of inaesthetic borders, you can add extra whitespace, use different background colours or use subtle drop shadows. Shadows, colour and spacing are the best ways to create a distinction between elements and are a great alternative to borders, which only make your designs look like wireframes.
Cut down on the copy
Sure, you want to give your users all the information they need. But if the text is doing the heavy-lifting and you literally have to explain how to use the app, then you`re doing something wrong. Also, if your users are on mobile or a small device, chances are they don`t want to spend a lot of time reading. Plus, too much text takes away whitespace, that thing we agreed allows designs and users to breathe. In short, check your copy for repetitions, long phrases or outdated information and see if you can remove any of it or revise it to be more succinct.
Original design is a creative way of using not so original (but tried and tested) methods. These methods work because they follow core design principles which, if you ignore, it will only make your designs (and users) suffer. To paraphrase David Ogilvy, “give me the freedom of a tight design rule.”
If you want to make your UI stand out and avoid some of the most common pitfalls, contact us.
