Designers have always strived to show beautiful pictures to customers. They added stylish effects to pictures, found cool photos in the photo stocks, casted inconceivable shadows from the objects (sometimes against the physical laws in the real world) and resorted to other tricks. Probably they often did not care how it was feasible into a functioning product. The pictures in such a beautiful wrapper were sent to the customer or supervisor and the designer was prepared to lap up the cream…

It used to be so and it did work. I myself resorted to such tricks more than once. However, the world around is changing rapidly. Modern product is so complex that one picture does not give people understanding and answers to the question “How does it work?”. Schematic or wireframe prototyping is also gradually fading into the sunset as black and white lines and rectangles do not give the customer full understanding. Today more and more people are willing to see the live prototype, but not a series of pictures…

Interactive or high fidelity prototype is the golden mean, because it is not a static picture and it engages in the interaction. Buttons can be pressed, forms can be filled out, you can get the events and confirmation of interaction experience in any scenario. If you put more effort, you can develop a prototype that can be immediately pass to the usability testing department. As a result, the product has higher chances of success, because we managed to correctly debug all scenarios for the prototype and then pass the baton to developers. Moreover, they will quickly catch the essence of the task, having such a prototype before them. It’s more productive than to deal with screenshots from the project requirements, trying to establish the relationship between them.

Fictional design

I want to consider the process of interactive prototyping at the example of my conceptual design development. This is a fictional case. This prototype, although it will be available for download below and free, hardly has a standard business style. It was created in the process of research and learning a new tool for design. Once I turned out to have a couple of free evenings that I decided to devote to creativity and expanding my horizons. I was fiddling with Axure for some time and realized that it has everything necessary for a full graphics editor. It only had to carry out the experiment for self-study — to understand some of the functions, events, styles and relationships between the elements. I did not restrict my imagination, so the style would be corresponding 🙂

Style concept

All the most trendy designer tricks are always on the surface. You just open Dribbble, sort out the best over the last month and here you are: blurred shadows, gradients, huge headings, tinsel around the layout from the memphis style — all that will be at the top of issue. So if you need to collect likes in the design communities, you need to use all the relevant techniques. So I approached it creatively, because today I am my own customer and owner. I used the colors that I wanted. The same about the fonts, buttons and styles in general. That`s why I`m going to work in the “complete blue”, remember about the dotted border, write both white and black text on the same background and cast totally blurred shadows. And for dessert I`m going to serve all sorts of animations right in the browser. However, it will still be like an abstract tool. Or even something from the gaming…

Color scheme

Statistics show that blue sites are dominant. Therefore the color scheme will basically be blue. And there will be a few shades: one monochrome for visual separation and hierarchy and the second one will be contrast, close to analogous one, so that you won`t miss something important. Below I will write more about it in more detail. Working with the color wheel can produce very interesting and rich color combinations. And I will set this almost green as the secondary color.

Typography

Typography and playing with fonts are in trend now. A couple of interesting fonts can help to convey conventional message of the product and to show the mood. For example, the heading can be written with sans serif font and a paragraph of the text — with some consistently relevant Roboto. However, often there are also opposite combinations. Although the sans font gives a feeling of something printed or bookish, but there are some examples of successful combination in IT solutions. In my prototype there are a little different moods, so took both the sans fonts — Montserrat (for headings and buttons) and Roboto (for the “body” and the rest).

Header

I’ll start with the description of all the elements and their essence right at the top. The header was rich in imagination, so I will try to describe it with some structure.

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…

P.P.S.:

Open for cooperation! Contact me in Skype: creativiter / or email: [email protected]

Kamushken at Dribbble (for more interactive stuff of mine)