A Practical Guide To Convert Your Sketches To Working Prototypes
Creative process, tools & techniques
--
Motion, a seemingly new art form of design, is actually a crucial part of today’s design spectrum . Take the Material Design language — motion is a huge chapter and visibly plays an important role in the material aesthetics. Much to our delight, we’ve seen designers on MaterialUp embrace it and create excellent examples every day. So we ought to explore this art a little further. Shall we?
Meet Yaroslav Zubko, a designer from Ukraine whose craft and signature motion design intrigues many! We chatted to learn more about his toolset, techniques and mindset. Lucky for us all, he’s very open about his design process and shared a whole lot of good tips and references to create great Motion Design. Enjoy!
Hi Yaroslav! What’s your toolkit to design, prototype, etc.?
Even though occasionally I still use photoshop and illustrator, my main tool set includes:
- Balsamiq Mockups — For very rough wireframes. I think this is a pretty good tool to start with right after information architecture was decided on. It’s fast, simple and clickable if needed.
- Sharpie and paper — For rougher wireframe, especially considering I’m not good at hand drawing.
- Sketch — my main tool, that’s where I store all my mockups and most of the work is done.
- Principle — really fast and intuitive for animating wireframes and mockups, even though relatively restricted in functionality, it’s totally paid off by its speed. For example this prototype, excluding the general idea, was created in just a few hours:
- After Effects — comes in when more complicated animation needs to be designed.
- InVision — Where static mockups come together in a clickable prototype;
- Adobe Photoshop — Recently just for saving and tweaking gifs.
- Illustrator — for its very purpose, illustrations. So linked up with After Effects, I can have something like this:
- Ezgif — Nice tool for reducing the gif size. Sometime it makes the gif two times lighter at pretty acceptable quality.
Do you use any plugins?
I have a bunch of plugins installed and tested by time in my Sketch. Among those: Distributor, Font Awesome, Select Layers with the Same, Sketch Palettes, Craft (of course), Zeplin and Runner ⤵
Awesome, we might start using Runner too! Let’s talk about your work — do you have a design process you follow?
In the company I work for, there is “Design Thinking” or “Design First” approach we apply to our projects. It’s at some point similar to Google’s “Design Sprint” but we have different methodologies based on our enterprise projects.
Whatever project size is, it all might be broken into a few general steps:
1. Define what it’s going to be — whether that is a huge project and I need to start with figuring user and business needs or just a small dribbble animation resolving some navigation issue, first step would be to understand and define what that issue is. If it’s an existing project (or issue), that’s the stage where I research it.
What might come out of this stage:
2. Start off broad and narrow down along the way — when I have enough understanding of the problem I can start sketching up some ideas in representation of a rough wireframes. Those might be some parts of the interface, or pieces of the workflow, or still slides showing user’s journey when using the app. For me it’s often (although not always) paper first. Like I mentioned im not any good at drawing so my sketches are pretty ugly, although they do the job — explore as many ideas for the shortest time as possible. At this stage, it’s quantity before quality.
This stage is over when I have a clear idea what to animate, prototype in more details (big projects) or to start working on architecture (bigger projects). So basically, throughout this stage I just run through as many ideas as possible, some of them stay on paper, some don’t, some don’t even get a second thought coz they are pretty stupid as I see them, but they still do their prior job — leading me to a better ones.
From first sketches... to final prototypes:
3. Get the idea into pixels — when the solution is chosen among others, it’s ready to be digitized. Depending on a project size, different tools come handy at this point.
If project is big it might be Mindmap or Draw.io. If architecture is clear and I can skip building it up, I jump to more detailed prototyping using Balsamiq or just the Sketch right away. So I don’t start animating till I have at least a decision on the layout.
The second and the third stages reiterate till all open questions are tested and validated with the users, approved with customers or, if it’s one of my personal shots, till I’m just satisfied with the result myself. But even so, I guess I validate it with the audience on Dribbble and UpLabs by receiving a valuable feedback afterwards, and for this opportunity I’m very grateful to you guys by the way.
Process deliverables from my another project:
Can you share some techniques you have developed to improve your craft?
I’m not sure I can call these techniques but i’ll try to share some thoughts on the topic:
1. I’d say, it’s all about coming up with the right solution. So in order to relatively succeed at that, I often need go through many possible options to find a better one. When I have a user need to fulfill and ideas are stuffing my head, it’s productive to lay them on paper quickly so I catch as many as possible till they are gone.
2. For me, there’s always a reasonable stop to being a perfectionist.
Even though I pay tons of attention to details in my design, I think that perfection is not something that exists in the real, material world. Rather, it’s something in people’s heads, it’s subjective.
There are tons of factors that take place like a person’s mood, what they’ve heard about this object, how it helps them solve their own problems, how you present, even the weather outside and the lighting in the room. All of that matters, so sometimes I just ask myself a question “Would I compete with all those factors using 800*600 resolution!?”…I can try but if it takes too much time, I know I better just drop it and move to the next thing. There’s something more valuable than a “perfection”, this is an education and learning at every step I take.
3. My most productive time for creativity is in the morning so usually I try to start working in a period of time from 6:30 am to 9 am. That’s a time where all the communicators get switched off and everything is exclusively for my brain’s activity.
4. I like to design following the material approach, and it’s all about natural movements and views of objects. Sometimes I just notice objects on the street that throw a shadow, move or just look. I hope that doesn’t sound too strange but you just try to take a look at commercial billboard on a wall of the supermarket at about 8am (when the sun is still low and shadows are blurred) and you’ll know what I’m talking about. So I just try to reflect all of that in my design.
Also, there are no sharp corners on the street so even if I don’t want to highlight rounded corners too much in my design, usually I prefer to round those corners for 1–2px so it looks more natural and kind of friendly. Unless, of course, the whole thing of the design is about sharp corners and colors:)
Sometimes I also use barely noticeable gradients to make the controls pop-out and make user “want” to click it :)
5. I don’t like (understatement) to use ready-made icons. So in my designs I usually go “pixel perfect” on those.
6. Also, in my animations I try to sustain people’s attention. In order to do that I may spend a while adjusting a proper speed, catchy colors, the movement of elements etc. Even if it’s a UX problem, I try to include some aspect of entertainment. And, of course, it’s always looped up :)
7. Speaking technical, I love hot keys. When I started learning After Effects I printed and hung a shortcut lists over my workplace so I’d memorize them faster.
Can you run us through the creative process of this animation:
This particular shot is a part of an “Interaction Library”, which is one of the reasons I wanted to create it in the first place. You can find out more about it in the description for this animation.
My second reason was that the issue of filtering through complex tables on mobile has existed for a long time now. As I faced it myself in one of my projects, I decided to give it more thoughts.
1.Paper — to sketch up the idea and workflow I was going to animate.
2.Sketch > to find a proper colours, decide on spacing and see how it correlates with other pieces of the “Interaction Library”.
As you can see it stores some pieces of “Interaction Library” along with some of the future ideas. That where I tried to incorporate this shot to the big picture in terms of colors, spacing and content.
3.Principle > most of the work was done here.
4.Photoshop > even though sometime PS can play really funny tricks with saving your gifs, it’s still the best tool I know for converting .mov into .gif. It also has pretty vide variety of options for tweaking it.
5.Ezgif.com > this amazing tool might reduce your gif size dramatically. You can see below what optimisation method I used for this particular design.
How do you keep up to date with the latest trends, tools and techniques?
Firstly books, among others the most influence had:
Secondly, of course, internet resources are my every day tool for staying tuned. Aside from all the social networks, I also follow amazing services like Medium, UXPin, uxdesign.cc, UX Mastery, UX for the masses, Creative Bloq.
And lastly, considering that I work in the global company where they have about 40 other designers, I get lots of related information from our internal channels in Slack, Skype or just from people sitting right next to me.
Thank you Yaroslav! It was very instructive :)
Thank you for the interview, I hope that was any valuable.
And if you have any additional questions left, you can contact me at any social profile and i’ll gladly answer those :)
More about Yaroslav
My name is Yaroslav. Originally I’m from a small city called Kaniv, located in the middle of Ukraine. I’ve been based in the capital of Ukraine, Kiev, for the last 10 years for now. I work as a designer at an international company called SoftServe and have some occasional side work as well.
Given that I graduated law school (that was my main education), I can call myself pretty much self taught designer. I’m sure, it is one of the best types of education one can get :) After graduation I didn’t want to work as a lawyer, felt just wrong for me. So I tried to remember what I liked to do when I was a kid and here we go, back then I was really into coming up with ideas and laying them out on paper. Transformed to modern demand and job market, I knew exactly what I needed to become.
Follow Yaroslav on UpLabs, Twitter and Dribbble.
UpLabs curates the best resources to help you create awesome apps and sites, daily. Check out today’s showcases on UpLabs!
