Speaker A
So this is a pretty average nav design that we see everywhere.
Learn simple techniques to fix boring UIs by adding color shades and shadows to create depth and improve visual hierarchy.
Key Takeaways
- Adding multiple shades of the same color and combining light and dark shadows creates realistic depth.
- Depth and layering improve UI hierarchy and make elements stand out without overwhelming the design.
- Simple shadow techniques can transform basic and boring UI components into visually appealing ones.
- Light mode should not be ignored as it is the default for most users and benefits greatly from these techniques.
- Small design improvements like shadows and color layering require minimal code but yield significant visual impact.
Summary
- Start with creating multiple shades of the same color to layer UI elements and increase lightness for depth.
- Combine soft light borders or glows with dark shadows to create realistic depth effects.
- Use shadows of varying sizes to emphasize or deemphasize UI components based on context.
- Apply layering and shadows to common UI elements like navigation bars, profile cards, tabs, dropdowns, and radio buttons.
- Enhance UI hierarchy by adjusting background shades and removing borders on lighter elements.
- Add subtle gradients and inner shadows to simulate light sources and improve visual appeal.
- Improve typography and spacing to create a clear hierarchy and better user experience.
- Use hover effects with bigger shadows to add interactivity and depth in light mode.
- Avoid over-designing insignificant elements but add small depth enhancements where it matters.
- The video includes a sponsored segment promoting Brilliant, a learning app for hands-on problem solving.
Full Transcript — Download SRT & Markdown
Speaker A
But some users may find it boring or too basic.
Speaker A
To fix this, all we need is a few shades of the same color.
Speaker A
And then layer them like this.
Speaker A
The idea is pretty simple: we are increasing the lightness value by 0.1 and then add the lighter color on top to create a sense of depth.
Speaker A
I have covered these concepts in the colors video, so feel free to watch it before or after watching this video.
Speaker A
But for now, let's take things to the next level.
Speaker A
Level one would be a small shadow that is created by adding a light border or glow on top and then some dark shadow at the bottom, combining soft and dark shadows gives a much more realistic feel than one basic shadow.
Speaker A
Then we can just bump these values by a few pixels to add more depth.
Speaker A
These two shadows are enough for most use cases, but you can always go one level higher by pushing these values by a few more pixels.
Speaker A
Then it's up to you to decide which shadow works best for which element.
Speaker A
For example, out of these three shadows, the small one feels much more natural than the other, so to recap, it's a very simple two-step process: first create three to four shades of the same color and then create some shadows.
Speaker A
Now start playing with depth.
Speaker A
We have a pretty standard profile card here, nothing wrong with it, but some may find it a little boring.
Speaker A
So let's follow our two steps: first create layers by adding a lighter color on important elements, then add the small shadow to add more depth.
Speaker A
We can make it a bit more interesting by adding a bigger shadow on hover.
Speaker A
Works best on light mode, the default theme for most people, so never ignore light mode just because you never use it.
Speaker A
Now that we have the basics down, let's fix some boring UIs.
Speaker A
We are going to start with this clean and simple design and increase the complexity as we move forward.
Speaker A
As always, we start by adding a background color that's a bit lighter than the page itself.
Speaker A
Then let's highlight the selected tab by adding a lighter shade, but that's made the text and icon color a bit muted, so we got to increase the lightness on those two as well.
Speaker A
Again, if this seems a bit confusing, I highly recommend watching the colors video.
Speaker A
Now let's highlight these drop-downs as well, as they are the main elements of this UI.
Speaker A
This is already working, but we can add more depth by combining a gradient with a lighter inner shadow on top, the shiny highlight up top complement these kinds of linear gradients really well, like as if the light coming from the top and that's why the top part is lighter than the bottom.
Speaker A
But this was too easy to fix.
Speaker A
Let's try a very common and boring UI element: radio buttons.
Speaker A
First of all, we are going to wrap everything inside a lighter card, then highlight the options and add a bit of spacing, also we need to emphasize the selected option as well, now let's improve the typography and rearrange things to create hierarchy.
Speaker A
The design can be further improved by adding a bit more depth to the selected card, this is the same small shadow we used in the beginning, where we used a light inset shadow up top and a dark shadow at the bottom, again, we are trying to sell the effect of light hitting this card because it's elevated and closer to the user, making it more important.
Speaker A
This is a pretty brilliant technique in UI design.
Speaker A
You know who else is brilliant?
Speaker A
The sponsor of this video, Brilliant is a learning app designed to be uniquely effective.
Speaker A
Each lesson is filled with hands-on problem solving that lets you play with concepts, a method proven to be six times more effective than watching lecture videos.
Speaker A
Brilliant starts you with mastering the foundations, then helps you level up to increasingly challenging problems, it has a perfect mix of engaging problems, competitive features and daily encouragement that keeps you motivated and on track.
Speaker A
Plus, all content on Brilliant is crafted by an award-winning team of teachers and professionals from top tier institutions.
Speaker A
Whether you're learning to code, build formulas, design electrical circuits, run simulations, or explore cutting-edge topics like AI, you can try it all for free.
Speaker A
Just visit brilliant.org/Sajid/ or scan the QR code on screen or click on the link in the description, Brilliant has also given our viewers 20% off an annual premium subscription, which gives you unlimited daily access to everything on Brilliant.
Speaker A
So here is the before and after of last UI we did.
Speaker A
Now let's do some in light theme as well.
Speaker A
This is kind of overall big picture UI, again, pretty familiar and basic style, a sidebar, two cards on top that contains big and bold text, then some kind of graph and finally a table.
Speaker A
Right now, everything is kind of blending in together, there is no hierarchy.
Speaker A
Let's choose a darker shade for the background and leave these four main elements as it is, and immediately these four elements start popping off the page, like they want your attention, but that's also the problem, so the next step is to deemphasize few of them, let's start with this table at the bottom.
Speaker A
Then a bit darker shade for the graph as well, but notice it's lighter than the table, and because we are using color to create different layers, we can remove borders on the lighter elements.
Speaker A
We can create even more depth by adding a small shadow on the smaller card and a big shadow on the bigger one, of course, they could use the same shadow or the smaller one have the big shadow, depending on the context.
Speaker A
The main idea is to raise or lower certain elements, on that note, we can add a dark inset shadow on top and a light inset shadow at the bottom of the table, like if it's deeper than everything else, we can also add a slightly darker background color to really sell this effect, and the design is changed so much by just using four shades of gray and some shadow.
Speaker A
To take it to the next level, try adding some color, of course, the color will depend on the context, but most colors will work if done correctly.
Speaker A
Now let's use whatever we have done so far and try to fix this UI.
Speaker A
Again, nothing wrong with it, it's clean and simple, but just too basic and maybe boring for some users.
Speaker A
We have a light background color, let's use it to create a darker and lighter shade to create three shades in total, as we have seen so far, we do this to create layering of top, middle and bottom elements.
Speaker A
Step one would be to change the page color to BG dark, as it's the base for everything that comes on top of it.
Speaker A
Then we can separate these three sections by applying the BG color, let's start with section one, nice round curves can make anything beautiful, and using BG light for the interactive elements makes sense as they are the elements that actually make this interface.
Speaker A
Finally some shadow, and we can move on to section two.
Speaker A
Round corners, padding, and a shadow to start things off.
Speaker A
Now that we have a card, we can rearrange some stuff to improve the design, and if you notice, we have also removed the border from the pro tag, as we can just use a lighter shade to highlight it, so let's do the similar thing with this progress bar to match our overall design.
Speaker A
If you notice, we are using dark and light inset shadow to push it into the card, so the actual progress bar appears slightly elevated.
Speaker A
And while we are here, this text seems important, but the typography is lacking, so let's fix that as well.
Speaker A
Perfect, let's move to the final section, you might think there is little to no room for improvement, as they are just two radio buttons, and why even bother wasting time on this, when you can be designing or building much important things, and I agree, don't waste time perfecting every little detail when the outcome doesn't worth the effort.
Speaker A
But adding depth is so satisfying and literally takes a few lines of code that makes it worth it.
Speaker A
Let's start by highlighting both options, and as we did earlier, we can do better than this basic version.
Speaker A
Why not add some icon to complement the option, you can find these anywhere online, all it takes is one click to copy the SVG.
Speaker A
Now this button feels out of place, so let's send it to the right and use the same lighter background to make it part of the section, also, this heading is not necessary as this section is self-explanatory.
Speaker A
Now, let's bring everything together to see how they look as a whole UI.
Speaker A
This is nice, but let's expand the billing section to match the model section.
Speaker A
I hope you can see the night and day difference between before and after, speaking of night and day, this works on dark theme as well, and all the dark theme examples we've seen earlier will work on light theme as well.
Speaker A
You just need to use color and shadow variables to assign background and box shadows, again, watch the colors video if you haven't already.
Speaker A
The idea is very simple, you can turn an average design to good design just by using depth.
Speaker A
Of course, we could have done tons of other things to further improve the design, but let me tell you a design secret, it takes a lot less effort to take an average design to good tier than it is to take a good design to S tier.
Speaker A
It's kind of like how in video games, there is big graphics change when you go from normal to high settings, but when you go from high to ultra, there is a huge loss in FPS, but you don't really see it in graphics quality, the high setting is the sweet spot for good graphics and playable FPS.
Speaker A
And as I shown in this video, depth is that easy way to fix boring UIs.
Topics:UI designcolor shadingshadow effectsdepth in UIvisual hierarchylight mode designprofile card designnavigation barradio buttonsUI improvement tips
