UI design tutorial: adding visual dynamics into a static prototype

8 simple tricks to turn your design layouts into the eye-catching mode

The material of this article is the result of my design experiments and conclusions for the last year or year and a half of continuous design grind. I’ve been tirelessly raising Figma design systems, experimenting with content in placeholders, styles, shadows, texts and states to see if this affects conversion any way. In other words, to see if I can increase sales of UI kits if I add some visual dynamics to static design layouts to make templates more interesting and functional.

Below I`ll show some simple techniques to add some useful effects to ordinary static prototypes. That won`t affect quality, a visual variety in the repeating elements will be added up. Perhaps this will help to make your best shot on Dribbble or win a few points in the eyes of the customer or the team-lead, because of the use of these techniques positions you as a performer attentive to UI details.

Figma templates UI kit - Mobile, Dashboard, Websites, React & Angular

Alas, I haven`t yet found a way to determine the metrics of certain visual techniques that I regularly experiment with. I tried to analyze all my UI design developments and organize them from my subconscious into a convenient and understandable list of simple tricks to make the design a little more fun. Maybe it’s just fun and catches the eye, maybe this causes more subscribers to come, maybe it’s something from the near future, and maybe it doesn`t make any sense. As I said above, I can’t be sure that the attendance and browsing performance of my site is growing thanks to these techniques of adding “visual dynamics” to static layouts. But I like to believe that the UI effects I`m describing below directly or indirectly influenced my overall progress.

So, I’m going to talk about how adding a variety of states to a static prototype adds a little bit of dynamics to it, showing some event

Slightly raised

If your artboard uses a lot of cards, blocks and other similar elements, one of the sample can be “raised” by a shadow. This technique is appropriate both for large elements, such as cards, and for small UI components, such as menu sections in the side navigation. It seems that we`ve put the cursor on the card and can click it:

Hovered or activated

For example, navigation to several depth levels is often used when prototyping dashboards. To give it some dynamics, I made the first level of Getting Started activated and added the onHover style on one of the unfolded submenu elements. In addition, it`ll help developers to get all the necessary menu states and see how integrally it looks holistically and in the context of navigation:

I left the “empty” option on the right on purpose, so that you could compare and decide which one is most attractive:) Although the focus is shifted to the option on the left, for it to seem even MORE attractive. A kind of design micromanipulation.

A simple table can be made more dynamic if the hovered cursor state is simulated on one of the cells, and some other is painted light yellow, showing something conditionally important on it. If it catches the eye, the goal is achieved.

Useful rubbish

The circles, squares, crosses, blobs and other visual rubbish flying at the background are an integral part of the UI design craft, especially if you want to promote your profile on Dribbble. The only thing that is changing is the geometry and shape fashion. I started thinking about how to give it more sense and use it for the benefit of the user experience:

Does it look like the blob under the blue button makes it larger and more attractive in the truest sense of the word?

Running some useless element as the background sometimes becomes useful if it helps to delimit the objects:

As you can see in the option on the left, the green spot adds shape and dynamics to the card, although the stroke or shadow are also appropriate to use here as some options.

Selected or highlighted

Simulating the ability to make a selection or highlighting an element as active is a great way to add variety to a prototype. Even if there is no logic in this choice, in the end, such a technique will at least show you as quite competent in understanding of the UI components states after a fictional interaction with them:

Nothing happens on the screen on the left, while the selection is allegedly made and the element changed its state on the right and center screens.

Power of emoji

From time to time, Emoji is found in apps as a way to amplify a message to the user or as part of a design language. When prototyping, you can quickly assemble a logo, taking any icon as a basis or strengthening the message of the Empty state screen. By the way, sometimes it is faster to stick an emoji symbol than to select an icon from the library. Figma renders them perfectly well, but if you overdo it with the text height, pixels pop up. Anyways, Emoji will help to add some personalization and positive, or even meaning to your layout:

Former highlight

We face some situations where design pushes us to make a choice that is beneficial for business every day. Basically, this is done by highlighting or prioritizing the desired area, block, button, or any other part. According to these principles, you can somehow highlight or contrast one of the repeating objects in the group. Some column in the table or a speech bubble with the product review, unendingly drawing attention to it:

Active input

When you design a prototype that uses many text fields, it looks great if one of the inputs is highlighted as active. This can be a focus, an error, or a validation state when something has already been entered. Use your imagination, reproducing the real situations that are possible when filling in inputs, and it will help you to simulate the most realistic picture:

The Game of Shadows

Every designer should understand the physics of space. Now the shadows from UI objects have returned to our service, but they`ve come back reinterpreted after several years of oblivion, being replaced by the flat-trend. Now they are more realistic and more organically used in the design to create the desired effect. Therefore, you should have a good idea of the objects on the canvas in space and make the blur and transparency of each shadow logical, depending on the effect you want to get:

It’s simple: the “higher” the object from the zero plane (background), the greater the transparency, blur and offset of the shadow. By the way, in Figma, it`s often more convenient to create realistic shadows with the usual Rectangle, which I`ve rounded corners and applied blur >200 to in this example. Next, I brought it to the most realistic view, creating the effect of navigation “soaring” over the dashboard with the simple Resize. Fortunately, you won`t see that in production. You have to resort to such tricks to understand which Dribbble posts the audience reacts better to. But that`s a separate topic of the design product promotion, we`ll talk about it some other time.

Conclusion

Today’s design is damn interesting. Over the last year of constant UI experiments, it seemed to me that design is like an open-source product: everyone in the community can bring something of their own to it, and if this fork turns out to be promising, the rest will pick up this wave and carry it to distant shores.

Now, looking back, I can honestly admit to myself: all my previous years of design experience weren`t worth a penny. Switching to my own products and creating one UI kit after another, I managed to make a huge leap in my practice, simultaneously polishing the experience of the organization and improving the architecture of design systems in Figma. But now I have a huge repository of components and their possible states in my head. And if you wake me up at night and ask me about Tabs, for example, I`ll instantly tell you everything about them:

If you are wondering whether to build your UI kit and try to sell it, I`ll tell you that it`s definitely worth it. It turned out to be much more interesting to invent design tasks for yourself than to wallow in a lot of clueless edits from another customer. In the worst case, you`ll gain more experience. With a good combination of circumstances, you will get the first sales, which will probably spur and motivate you even more.

Go for it! 🤙

Follow me everywhere: Dribbble, Behance, YouTube, Uplabs, Twitter, Reddit, Telegram, Instagram