Designer’s weekly digest of development UI animation (release #1)

or my involvement into Daily UI challenge

Now that a bit more than a week has passed, I decided to get involved into a designer adventure! Daily UI is an optional challenge for any professional graphic developer. New design every day. Anything: buttons, panels, headers, cards, any item up to an entire section. At the end of this “marathon”: first, your skills are boomed; secondly, your good karma and followers are boomed; thirdly, you never know what intriguing consequences it may lead to. Such a marathon usually lasts 100 days.

However, I`ve sort of adapted the terms of this personal competition for myself. The number of days is unlimited, I have a rest at the weekend and the result of each day will not be *.sketch / psd sources, but HTML/CSS/JS files. And, yes, you can download and use all that for your needs. That is why I relax at the weekend! Is all that clear? :)

Then read on…

I wanna draw your attention to the fact that I work in Axure and the code will be according. That is, I will not be able to please you with the ideal semantics. However, the code is valid and cross-browser. I take responsibility only for the visual component, the rest is made by the software. By the way, the issue of a good code is opene in the framework of the competition. That is, if you, like me, are an enthusiast and are willing to “brush” all that, I’m waiting for you kamushken@gmail.com

What you will most likely appreciate:

• Striking modern design for your products

• Elaborate styles for all active elements

• Neat indents in the 10 pixel grid

• Google Fonts & Icons

• Some interactivity

How you can use this material:

• Just as a source of inspiration

• As a tool for everyday tasks

• Making your own resources

For me, it’s been a week and a few days since the start, so I can show and tell you what and how I`ve made.

Day 1: I’ve got to start somewhere

What direction should I go? Something easy and business? Or material? And maybe I`d better cover current western trends? I need versatility! A little bit of everything, to fit everywhere. In addition, I want the design to evolve depending on feedback. To begin with, I collected neutral and business font pair out of a few popular Roboto / Montserrat fonts. The first will do for paragraphs the second — for headings and action elements. On the first day I released three options for the vertical menu, a chart and some strange “half-card” :)

Live preview & Download: http://www.dailyuikit.com/14_03_table_and_nav

Day 2: Social cards

In fact, they do not necessarily have to be social. If you have imagination, you can use them for different purposes. The most right, for example, is suitable to make a mosaic of the latest news on the media website. Or generally under a product card in the online store. Several types of buttons were additionally worked on. So far, everything is pretty basic.

Live preview & Download: http://www.dailyuikit.com/15_03_profile

Day 3: Horizontal navigation

Three types of menus. On the left, there`s a temporary logo, you can insert your own one. You can also enter the name of your project by text. In the dashboards style on the right there`s an avatar + an example of notifications. The blue one will do for the cell menu or somewhere else. At the onhover on three points, you will get an animated popping up menu. I could pin the disappearance on the onMouseOut event in the pop-up, but that night I did not want to reach perfectionism. I will get it in the following days…

Live preview & Download: http://www.dailyuikit.com/16_03_menu

Day 4: Inputs and text entering

I have to go back and make basic items that are used more often than a set or a module. So, on the fourth day I issued inputs (with mild impression). Such was the effect of the gradient. By the way, I’m still in the “trial and error” about using gradients. It seems they are in trend again, but only in stunning contrasts. And this can backfire on a pure business interface. So, I`m still thinking about it. All styles, soft fade-onhover and other details are taken into account. By the way, here’s the biomic link to introduce some fashionable gradients — https://webgradients.com/

Live preview & Download: http://www.dailyuikit.com/17_03_inputs

Day 5: Modal pop-ups

That day I was again drifting from the simple to the complex and started doing modal pop-ups. I think there`s a successfully implemented appearance in my example: modality goes from below along with the pop-up. It will look good if the previous action was somewhere at the bottom. Otherwise just change the slide effect in the code into appearance from above. Of course, if the event triggering the pop-up was there. Clicking “Exit” or “Stay here” will show the animation of the blocked window. Potentially, it`s possible to hang any item. I don`t claim to be original, but then I was exploring how to do it in the Axure environment.

Live preview & Download: http://www.dailyuikit.com/20_03_modal_popup_animation

Day 6: Modules to login

Two types of widgets for login. I included a variety of roles as well. If you don’t need it, you can just cut it out from the code and nothing will be damaged. For password reminders, I did a flip effect, click Forgot. Clicking on reset, you will get another flip with the confirmation of a positive experience. Something similar can be cloned to confirm a successful login, by the way.

Live preview & Download: http://www.dailyuikit.com/21_03_login.html

Day 7: Selection. Checkboxes and radio buttons.

That day I first felt some positive boom from the previous days. Sometimes I can be carried out by the work on details instead of the overall concept and then I understand that I spend my time ineffectively. But that day, I quickly devised a plan for details implementation: I group checkboxes or radio buttons in certain sets, and associate each element with a click on the line to the right. And all this is with a quick flip-animation. I also hang the unlock status for the Submit button right after the first click in the radio button. In the end, I think it turned out to be positive and unobtrusive. The central unit is an already developed component, executed according to the same principles. Click in the avatar selects the entire line with the same animation for a photo.

Live preview & Download: http://www.dailyuikit.com/22_03_selection

Day 8: Shopping item card

It`s good to have a plan for several days ahead. Actually I planned to work on dropdown elements that day. But the idea of animation appeared in my head and then I figured out which component it`s gonna match. The slide effect to change the button status works well if the item is added to the cart. Also the fade effect is applied to the photo when added. And hovering on the XS round button XS shows a one-time tip. Here comes a secret hint!

Live preview & Download: http://www.dailyuikit.com/23_03_shopping_cart_item

Day 9: Drop-down lists

I go back to basic elements. I`ve set the goal of making dropdowns. I couldn`t do it easily, because I wanted soft opening for them. I started with a seemingly complex module: concluding recommendations / recent searches when you click on the search bar. Due to the fact that there are events onFocus / onLostFocus for inputs, all animations are tied to them. I then moved on to seemingly obviously simple elements — the usual drop-down list, but it only seemed to be so. As I didn`t use inputs there, I had to look for other triggers for the animation. And I wanted to make the best element: it is necessary to minimize the expanded list without requiring a click. Just on the onMouseOut event. In the endб I got that if there was no action in the window, it will minimize if you move the mouse aside. You don`t need to click anymore! But many events had to be hung on to one element in onClick.

Live preview & Download: http://www.dailyuikit.com/24_03_dropdowns

That’s all that has been done over a week and a half. I would be glad if it was helpful. I definitely want to understand the demand and interest of the reader. And maybe in a week I’ll be back with the new release.

Sources for Axure 8 available to download ($)

Thanks for reading!