Junior UX/UI don’t waste your time
Disclaimer: this is a Junior to Junior advice. Ok we can start!
I recently started learning UX/UI rolling the Google UX Design Course on Coursera, after years in Sales struggling to understand what I really want to do as job.
I always been passionate in technology and videogame, and I spent my childhood dreaming about designing platforms adventure. I grow up in a small village in northern Italy, and words like UX/UI were never been sent. In the High School I growth interest in website and app making. I had a technology class but it was only about fundamental/rudimental of coding.
When I was almost 30 I finally discovered that the job I was looking for in all my life really exists and it’s called UX/UI designer.
Making my first personal project was fun but it really took a lot of time, part of it was because I had no idea that I could make some things in a very simple way, but that is part of the process right? Yeah, but maybe I can help other juniors like me save a little bit of time and also learn new skill.
I spent a lot of time making some button interaction, where for each variation I duplicate a page. This took me hours and the result was a well working prototype (you can try it here), but a very messy wireframe.
Don’t worry, there’s a solution
What I recently discovered is that you don’t actually need to duplicate each page to emulate an interaction, but you can just create a component.
You can see a component as a sort of tool or an item that you can put in your page.
In my new personal project I started designing the components I need for that page, connect each variation to each other and then I’ve put the component in the page.
Let’s dig out how to do that!
Create in a new frame the object that you want to animate.
Now duplicate it and design what need to change in this variation.
Now select both object.
And set them as a component set. (You can also set them as component separately and then click on “combine as variants” in the component menu.
Now go to the Prototype menu.
Connect each object with the others and set “change to” and select the animation that you prefer.
Now back in the Design menu copy the first component and paste it in the page where you need it.
Test your prototype and you will see your animation working!
One of the best thing is that you can even create the animation in another page (like the sticker-sheet page) and paste the components in the project page.
I hope you’ll save a little bit of time with this hint and thanks for reading!
Follow me on Beahance and check my website!
