CAST.CMS is a product developed by Castcom. During its creation and further modernization, the current requirements for the CMS were taken into account, so the finished system is modern and…

Continue reading →

If you compare sites developed 10 years ago and modern Internet resources, you will find very few similarities. And the point here is not only the active development of technologies,…

Continue reading →

How to develop a large online service or portal and avoid mistakes
Creating online services requires serious knowledge and skills. We have extensive experience in this matter and a considerable list of satisfied customers with successfully functioning portals. That is why today…

Continue reading →

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
ui design

Elements that are usually taken to deepen:

Text input fields
Pressed buttons
Switches (unselected)
Check buttons
Elements that typically project above the surface:

Buttons (Unpressed)
Copy Slider
Drop down buttons
Button part of the selected switch
Pop-up notifications
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.

Every modern company promoting its services and products on the Internet should have a high-quality corporate portal. Such a site will be useful for both company employees and its customers.…


Before you decide to order the creation of sites, you will certainly have a question about whether to use the existing CMS in the development or if you need to…


Good customer service skills that you should learn
For successful customer service, you need to master several skills that directly affect the quality of service and the sense of customer satisfaction of your products or services. The skills…


Free Resources for Designers E-literacy is unthinkable without the literacy of publishing electronic content. And the publication includes the processes of selecting an audience and tasks, creating, checking, editing and…