Creating Great UI Designs: Tutorials and Examples
So let’s get it in order. This guide is not for everyone. And for whom?
For developers who want to learn how to design their own attractive user interfaces if necessary.
For UX designers who want their portfolio to look better than a PowerPoint presentation. Or for UX designers who are confident that they can sell an awesome UX product as part of a nice UI package.
If you have unlearned at the art school or already consider yourself a UI designer, you will most likely find in this manual some combination of a) boring, b) incorrect and c) annoying material.
And this is normal. Criticized – and good. Close the tab, pass by.
Let me tell you what you learn from this guide.
This article is not a theory. This article is pure practice. We will talk about how we learned from our own experience, and then from thoughtful, unhurried practice.
Here they are:
Light falls from the sky
Black and White First
More clean space
Learn to overlay text over images
Zoom in and out on text
Use only good fonts.
Steal like an artist
Rule 1: Light falls from the sky
Shadows are invaluable clues to the human brain about which elements of the user interface we are looking at. This is perhaps the most important and non-obvious thing you need to know about UI design: light falls from the sky.
Light falls from the sky so often and consistently that from below it looks strange. When light falls from the sky, it illuminates the upper surfaces of objects and casts shadows under them. The top of the objects is always lighter, the bottom is darker.
You won’t think that people have lower eyelids darker. But if you shine a flashlight in their face, directing the beam from below – you will come from the next world. Exactly the same thing happens with the UI design.
Just as we have darkened the lower boundaries of facial features, shadows are present on the lower borders of tons of UI elements. The screens are flat, but we did put in a ton of art and craftsmanship so that so many elements could be seen in 3-D format.
Or, for example, buttons. Even in the case of a “flat” button, you can provide a bunch of details regarding light:
An unpressed button has a darker border. The sun does not shine there, son.
The uncut button is slightly lighter on top than on the bottom. This is because light mimics a slightly curved surface. As you tilt the mirror to see the sun behind you, the inclined surfaces reflect the light a little more strongly from the sun towards you.
A not pressed button casts a slight shadow – it may be easier to see on an enlarged scale.
A pressed button, even if it is darker from below than from above, generally darker, is because it is on the plane of the screen and it is not so easy for the sun to hit it. Someone can argue that all the pressed buttons that we meet in reality are also darker, because our hands block the direction of the light.
It was just an example with a button – and as many as 4 light lighting effects. There you have a lesson. Now just apply it to everything.
And here, for example, a couple of settings for iOS – “Do Not Disturb” and “Notifications”. Nothing special, huh? But let’s see how many lighting effects are hidden in them.
The top edge of the control panel tab casts a slight shadow
The ON slider is a little deeper
The “ON” slider is deepened and its lower edge reflects more light.
Icons are slightly outlined. See the bright border on the top? It is a surface perpendicular to the light source, and therefore a lot of light falls on it, and therefore it reflects a lot of light into your eyes.
The dividing line is darkened in places where it deviates from the angle of incidence of sunlight, and vice versa
Elements that are usually taken to deepen:
Text input fields
Elements that typically project above the surface:
Drop down buttons
Button part of the selected switch
Now you are in the know, and all these elements will catch your eye yourself, wherever you look.
Wait, what about the flat design?
For the past 5 years, the trend of “flat design” has not given up, which is … well, flat design. This is a visual style in which elements lack a simulated indentation or protrusion above the surface. These are just solid filled lines and shapes.
I like everything that is clear and simple, like everyone else, but I’m not sure that this trend will be long-lasting. A barely noticeable imitation of the 3-D effect on interfaces is too intuitive to be neglected so easily.
We live in the golden age, here, in this happy gap between the difficult to understand skeuomorphism and the practicality of flat design. The plane is still simple and straightforward, but we still have a drop of shadows and hints about where to click.