Tabs: primary navigation

The essence of this implementation is to show that you can achieve the “light off” effect for the inactive tab text. I selected the colors so that I got something similar and at clicking the “light” would turn on. So, if you look closely, when you hover and click on the tab, there`s a little glow from the text. It`s a very old and boring technique from the latest 2000s. But if you apply it almost imperceptibly, it is possible to achieve an interesting effect. Programmatically, there is simply group selection for 4 tabs and use of Set selected = true in the onClick event. And in general almost the whole prototype is based on this simple method: grouping the sample and changing the status by clicking.

Submenu: secondary navigation

This additional menu is analogous to the standard menu in most software: File, Edit, View, etc. The text is white with 60% transparency and when you hover the mouse, it becomes 100%. It was supposed to imitate the effect of illumination. Well, I agree, there`s nothing new; but the designers rarely remember about dotted borders. I confess, I should have finished a turn with a click. But I was afraid of excessive perfectionism, because I’d have to consider deploying additional sections to the right in the submenu …

User’s controls: icons and avatar

My main animation fantasies in this concept are concentrated in the upper right corner. If you hover on the icon of the messages, a red circle will turn and the event counter will count +1 new. A quick idea after I figured out the Rotate effect: you can move the center of rotation from the center of the axes intersection of the object and to teach it to do anything on the monitor. The figure changes at the time of maximum acceleration, so it is not visible for your eye. By the way, this microiteration can increase the importance of new events in any interface, but only if required by the business. Click on the user pic will spin it around its axis, causing the appearance of a round (!) submenu. This is a continuation of experiments with the Rotate effect. Well, I agree that far from every product would require such pop-ups and such animations. However, such “interface gamification” can be used, for example, in promotional products or gaming systems. By the way, click Logout to collapse the submenu and it will collapse similar to the way it appeared. I need to notice that such a complex animation in prototype is fast and it does not slow down or interrupt the receipt of the rest of the experience. The secret is only in the right timings and nonlinearity of what is happening. In short, there are two basic rules: the object disappears faster than it appears and the speed may not be linear.

Left column

Vertical navigation: pages or categories

It is suitable for any components with a dynamic number of elements inside. You know, actually it was very difficult to come up with a nonexistent interface: there are no scenarios and so there`s no problem — and we have nothing to solve. I was drawing where was designing, so I took the panel with abstract pages that can be created. I keep on playing with color for icons daringly as well: creating a new one is the most important, so that`s bright green. Search is tertiary, so the icon is black. It turns out that the search functionality is almost unnoticeable, but if you urgently need to find some page — you will have the motivation to find a magnifying glass. And you’ll do it quickly! Similarly the Save / Rename / Duplicate controls are made. They have the lowest priority of delivery and very contrasting lighting on hover. The scroll bar coming from the right is a reminder to myself how good it is to hide the excess from the interface until the right moment.

Tools: toolbar

In this widget of my concept I was dealing with the state changes for the group of objects. I need to trigger all state styles for it at the same time (Properties > Trigger Mouse Interaction Styles). Therefore, the effect of activation at clicking works for all elements: the icon, the substrate, the signature. It was more difficult to make onhover not for the entire group, but for one by one. For example, some element is on top of a bigger one and we need to activate first its state and then for a smaller one. Accordingly , when the cursor is formally over both objects, then both should be “lighted”. And as soon as we partly ascribe the cursor, only the small object goes off. In my concept there was no such a task, but in practice there are cases when it`s necessary. For instance, the product card in an online store + the “add” button. You want to have a shadow when you hover on the card and then the style of the button changes when the cursor is formally over both objects. So the standard MouseOver for the two objects in the group is not going to work — as soon as you hover the cursor over the card, then both objects are lighted at once. I managed to escape this problem using JS function onMouseHover/Out — once it`s triggered for the button, it gets the Selected state and change the appearance via CSS:

It’s an example from another project

Right column

Properties: or object options

The right part of this conceptual interface was supposed to give an answer to the question “How far can I go in the Inputs design under the condition that the text input should work?”. With the usual HTML input and its appearance my attempts to go far failed. But you can cheat, if you disable its border and create the entire design on the rectangle below it. Then when focusing on input we have to change the styles for the substrate: for onHover and onFocus events. Few people will notice it until going into the code. By the way, the code is machinery and it is not recommended to get there, especially if you just had lunch. I complicated each input to a dynamic panel with different States. This allowed me to achieve their change softness with the fade effect. You hover the cursor over the input — and dotted border appears smoothly. Do a click — it gently goes out and the input gradually darkens. These are small things, but to implement this without knowing coding, I had to do some work. In Interaction subsection I played with the SetText action: when you hover over the icon a tooltip appears. I’d certainly like to add animations there, but all the effects had to be removed. If to move the cursor over the row of the icons at once, the animations continued to occur with a lag, even when the mouse was long gone. The approach is quite standard with the drop-down list — I had often seen microiteration for anchor by clicking on the list. I had only to learn to play it myself in the Axure environment.

Notifications: a very important popup

Important means visible, so it has such a color. I`m playing with the color wheel again. I badly wanted the popup to disappear in the direction from which the “close” click was made. Basically it will be the upper-right corner, and I have all the tools available to send there a bright window with a green Burger (!). To do this, I reduce the popup size to 0x0 when PC with the approximation point on the top right (the SetSize). And with the same timing of 300ms and ease in effect, I reduce the transparency to zero. So I get the two effects simultaneously, which together give a reasonable result.

Center

Not to go to perfectionism too much, I did not work much in the center. Just once again reminded to myself — the product should not have “empty” places. If the user starts with a blank sheet in your system, you do not need to show him this sheet. Literally. You need to entice him to action. Therefore, in the center I make a simple onboarding in the general style + noticeable Create button and which, when pressed, will enable placeholder rolling out.

Here I finish my prototype. I found answers to many of my questions during this study.

As a conclusion

I sometimes heard about the teams where animation for a web product after designers was made by the developers. It should not be so! We, designers, should come up with the logic and rules to move objects on the screen. A good designer must know the rules of animation use. I’m looking for inspiration among the objects in the real world. After all, if the animation in the interface seems real — it does not cause dissonance and contributes to the quality of your product. Finally I will say that I do not stop practicing to feel the proper timings for events depending on the specific scenario.

Thank you for taking the time to nonexistent interface!

Now you can click it on this link and download it if you want…

Axure RP 8 source available to buy & download here

P.S.:

The problem of a really clear and easy export of animation specification is still open on the market of instruments. I have not heard of a single editor that would allow optimal transfer of the settings for all effects, timings and objects associated with them. It only remains to explain all the nuances to the developers in simple terms.

I really want the export of semantically-correct code in Axure to be done. Then development will proceed more optimally. I also want them not to forget about mobile prototyping. Of course it is possible now, but not perfect, as in any instrument that is not forgotten. I want them not to insert PNG crutches where it is possible to use pure CSS (for example, the color of the shadow and dashed-borders). And to make a normal export of specifications, the market has a lot of software that perfectly collects UI kit together. And, surely, measuring the indentation between objects in the source should not be a serious problem. Now low fidelity prototyping is already on the decline and if the Axure team does not reconsider its priorities, soon they will leave..

That`s how I`ve spent several evenings…

Created with Material prototyping system 🔨 for Figma

❶ Explore the system → http://setproduct.com/material

❷ Components overview → http://setproduct.com/material/components

❸ More videos → http://setproduct.com/material/videos

❹ Purchase & download → http://setproduct.com/material/download

❺ 998 material icons → http://setproduct.com/material/icons_pro