UI design #1 Handwriting Animation with SVG

These days, I am designing a website for an artist, NamSin Kwak. This handwriting UI animation was designed for the intro page of the website. I would like to share how I designed and handed over it to the front-end engineer, Ryan Yu.

Let’s get started.

① Layout design in Sketch

First of all, I designed all static pages; intro, main, about, content, etc. And discussed them with Ryan how it would work, for example, transition, micro animation, etc. Ryan Yu and I decided to draw the intro page using handwriting effects with SVG animation.

② Select the image and export it as SVG.

③ Open that SVG file in Adobe Illustrator.

I changed colour white to black but you can ignore this because we are going to delete fill colour in the next step.

④ Delete fill colour and give a stroke 1px. I am going to name these layers as a “mask” layers.

⑤ Draw a path with the Pen tool inside each mask layer. The animation will follow the path you draw.

⑥ When you draw the path, you must draw it a bit off from the edge of each mask layer like the image below.

⑦ If some mask layers are grouped together, ungroup them and rename the layer accordingly like below image.

⑧ Select the two layers, ‘mask layer’ and ‘path layer’. And then do the clipping mask.

object > Clipping Mast > Mask
or 
command + 7

⑨ Export the entire artboard as SVG format like below images.

Export > Export As... 

10. Open the SVG file in the code editor you use. Copy and paste in the HTML file.

That’s a wrap!!!!!

I have completed this design and handed over this SVG file to the front-end engineer, Ryan Yu. He has already finished writing a code. Check it out from CodePen.IO.

Also, I am going to write a tutorial on how to code this UI animation so please stay tuned and gives me 👏loves if you liked it.

🎉🎉🎉 Happy codesign today 🎉🎉🎉

Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.