Tab bar liquid animation / Design Tutorial

hi everybody your favorite kuberto agency is in the house again to share some insider tricks and hacks first just a few words about the sweet site we just launched for the uber popular app flipaclip more than 30 million users enjoyed the app all around the world but it didn't have a site they entered the production stage ambitiously and audaciously first to showcase the product's potential and second to attract a wider audience it's worth pointing out that all the site animations were made without webgl the site itself weighs around five megabytes to check it out for yourself the site link is in the description in this master class we're going to follow up with the liquid animation concept and use one of the applications as an example for working with the lower tab bar first up let's start with the main screen ux and ui of the home workout app we'll start this off by opening up the figma app and creating an artboard that measures 375 by 812 let's set the interface structure i'm adding the header for the main block text spacing that's between lines and blocks is best changed to percentages right away i'll add a hamburger menu on the top right i'm creating a rectangle with rounded corners this will be the workout card where you'll see all the important information name title duration and difficulty down below we'll place the cards indicating [Music] categories [Music] even lower down i'm outlining the tab bar [Music] this is is i'll duplicate the frame by dragging and holding the option button this is going to be the stats screen in the other section of the app let's remove what we don't need now i'll draw a rectangle for the user picture and name below we'll have statistics which show on which days and for how long the user was working out all of this can be sorted by days and months [Music] underneath let's add a motivation block where we'll show the user's rating in the system and how many points they earned for their last sweat session yes i'm adding the following button the screen prototype is all set let's dive into visuals by selecting colors and fonts while evening out [Music] indents [Music] [Music] duration and difficulty are getting a three-point scale [Music] so [Music] [Music] [Music] [Music] [Music] so in the categories block let's add a relevant photo as an example categories can be navigated by horizontal scrolling [Music] [Music] [Music] so [Music] so [Music] so [Music] let's move on to the lower tab bar all the icons should have a uniform style and be the same size an outline style will make sense here [Music] so [Music] so [Music] so [Music] [Applause] [Music] [Applause] [Music] [Music] now i'm evening out the icons one more time it's important to make sure that there's the same amount of space above and below the block the icons are [Applause] in moving on to the second screen it's smooth sailing from here i'm using the same color spectrum adding more realistic graphics and adding an avatar [Music] [Music] [Music] [Music] [Music] the design for both screens is complete i'm renaming all the icons wherever there are multiple layers i'm creating groups and renaming them [Music] let's also rename the artboards and export them at three times the size i'm dragging the images we just saved to after effects right clicking and selecting new comp from selection i'm highlighting the layers with the icons i renamed and exporting to after effects with the aeux plugin as usual the plugin isn't working perfectly so i manually polish up the icons in after effects [Music] i'm dragging over the second screen and transferring the layer itself to the bottom of the layer list [Music] now i'm highlighting the layer beneath the icons and using the ellipse tool to draw a circle beneath the central icon [Music] let's add keyframes size and position to the ellipse i'll do the same with the rectangle tool adding a rectangle beneath the circle [Music] let's add more keyframes so that the circle with the rectangle rolls up from the menu while the rectangle gets narrower the circle should vanish at the conclusion of the animation let's adjust the timing and we're done with the animation blueprint now it's time for the liquid effect let's try to make it look like a drop in effects and presets we'll find roughen edges let's set the parameter border to 80 and edge sharpness to zero i'm immediately adding the fill effect since the latest version of after effects has a bug which makes the color not uniform when you choose roughen edges i'm setting the fractal influence parameter to zero and also adding the levels effect let's select alpha channel and adjust the parameters so that the edges of the tab bar and drop are crystal clear i'm doing this selectively and it might affect other settings [Music] [Music] so since the initial tab bar color is white i'm also adding keyframes to the fill effect so that the background color changes during the animation if you forget to do this the animation will just merge with the background [Music] now we create keyframe size and position for the tab bar background i want it to bounce back when part of the tab bar separates from it [Music] [Music] so next up is the central icon which will shift with the circle and vanish [Music] [Music] [Music] [Music] do [Music] the icon should have an active setting when you tap it this will be color filled [Music] let's adjust the icon a bit [Music] i'll duplicate the layer of the central icon to make it appear in the same spot [Music] [Music] now we have to add animations for the remaining icons they'll behave just like the background they'll get narrow and then bounce back i'm starting with the icons on the left [Music] so [Music] do [Music] [Music] [Music] [Music] let's repeat the same process with the icons on the right [Music] now all we need to do is make a transition animation for shifting between screens [Music] [Music] we've completed our animation for the final result we can also animate the other menu items [Music] most tab bar animations are aimed at animations within the button while using the application you tap the icon and your finger blocks whatever is happening underneath in our version the animation has been carried beyond the tab bar limits you tap the icon and see the full interaction obviously you can simplify the animation but here i wanted to show you all the options so the motion is a bit more elaborate [Music] stay creative and see you next time [Music]

Channel: Cuberto Design

Views: 289,792

Rating: 4.9610085 out of 5

Keywords: Liquid, design, cuberto, web design, learn, ui ux, figma, after affect, ux design, ui design, graphic design, ui ux design, figma tutorial, ui tutorial, ui animation, ux, ui design tutorial for beginners, cuberto design, digital design, digital, course, after effects, after effects уроки, product design, after effects animation, liquid swipe after effects, uxd, liquid, ui design tutorial, figma уроки, figma web design

Id: QM3z4IEc4I0

Length: 25min 39sec (1539 seconds)

Published: Thu Jul 01 2021