PAID INTERNATIONAL WORK
UIUX Designer with experience working in rive needed
Anyone with experience in rive, hit me up with stuff youve done @just_tem. attach screen recordings/show reels and your ui/ux portfolio in the same message. Please share with anyone that you might find fitting for the position.
(No Hi and Hey pls to save both our times🥲)
UIUX Designer with experience working in rive needed
Anyone with experience in rive, hit me up with stuff youve done @just_tem. attach screen recordings/show reels and your ui/ux portfolio in the same message. Please share with anyone that you might find fitting for the position.
(No Hi and Hey pls to save both our times🥲)
Rive is an awesome tool, let's see how a typical animation set up goes (the process I follow, when I feel like being organized, which isnt always lol)
First Step. Collect all needed assets
For me, it is a figma file that contains SVG versions of all characters we have. copy as>copy as noscript
Paste that in rive, then organize for the canvas size that we have. I always scale my characters (contain them in a root group ofcourse) to 383% because that is the best fit for the canvas size that we have.
Since this isn't a rive tutorial but more of a delve into "my process", won't discuss technicalities in depth.
For me, it is a figma file that contains SVG versions of all characters we have. copy as>copy as noscript
Paste that in rive, then organize for the canvas size that we have. I always scale my characters (contain them in a root group ofcourse) to 383% because that is the best fit for the canvas size that we have.
Since this isn't a rive tutorial but more of a delve into "my process", won't discuss technicalities in depth.
This media is not supported in your browser
VIEW IN TELEGRAM
Second Step. Layers should be named, relevant elements grouped together. I avoid naming every shape, but name groups of elements.
The general rule of thumb is, if it is keyframed, it should be named
NB: the bone above the charater on the right is for animating gravity for stuff like hair and beard
The general rule of thumb is, if it is keyframed, it should be named
NB: the bone above the charater on the right is for animating gravity for stuff like hair and beard
Work on rive now briefly pauses. we go on pen and paper to story board.
The way I storyboard rive animations is a bit different from aftereffects projects.
The way I storyboard rive animations is a bit different from aftereffects projects.
Third step. Pretty messy, but, I figure out the state machine interaction first. With it, common layer animations that stay the same across animations get decided (bouncing, secondary animations to the bouncing like bobbing etc)
Next, initial state, then the climax of the animation get decided (what will happen, what are some major elements that need to be animated, and what is the main action/story that all the animation should direct towards (through grids, direction, composition and movement etc)
Once climax is animated, then we got the viewer’s attention, that is when we jump to steady state, idle animations (talking/not talking for this specific case)
Once again, in doing all those, it is important to note all major animated parts/elements on the bottom. Reason is to move quickly as we will not be skipping attention to detail but still won’t spend time on deciding small animations
Next, initial state, then the climax of the animation get decided (what will happen, what are some major elements that need to be animated, and what is the main action/story that all the animation should direct towards (through grids, direction, composition and movement etc)
Once climax is animated, then we got the viewer’s attention, that is when we jump to steady state, idle animations (talking/not talking for this specific case)
Once again, in doing all those, it is important to note all major animated parts/elements on the bottom. Reason is to move quickly as we will not be skipping attention to detail but still won’t spend time on deciding small animations
It is also important that we keep the principles of animation in mind to make sure we won't end up on a dead end later when working on the details
Sporadic Attempts at Design and Life
bill splitter web app made on react using claude, fully with prompts (I didn't write a single line of code)
Fucked around and made the V2 of the bill splitter, you can find it at bills.tem.works
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Fun fact that I learned today: you can drop a folder with subfolders in it on figma to import everything in the folder and it's subfolders.
Sporadic Attempts at Design and Life
Fucked around and made the V2 of the bill splitter, you can find it at bills.tem.works
Media is too big
VIEW IN TELEGRAM
Meet Split/it!
The cleanest bill spliting app that saves friend groups from splitting up😂
Find it at bills.tem.works
Some of the things you can do:
- Add an unlimited amount of friends, list out what they each had
- Option to add what you used inclusive/exclusive of VAT (for those times where you see what you had on the bill but the bill calculates VAT at the bottom, not per item)
- Ability to compare to the total price that came up (and to figure out who's capping😂)
- Ability to put in who had what but then still split the bill equally (three friends split what four people had, the broke friend will love this one)
- Include Service charge/ if you tip in percents like americans
- Download a summary as a png
The cleanest bill spliting app that saves friend groups from splitting up😂
Find it at bills.tem.works
Some of the things you can do:
- Add an unlimited amount of friends, list out what they each had
- Option to add what you used inclusive/exclusive of VAT (for those times where you see what you had on the bill but the bill calculates VAT at the bottom, not per item)
- Ability to compare to the total price that came up (and to figure out who's capping😂)
- Ability to put in who had what but then still split the bill equally (three friends split what four people had, the broke friend will love this one)
- Include Service charge/ if you tip in percents like americans
- Download a summary as a png