Yunsoo

Contact

What
I do/use

Tools Responsive web design Vector graphics CSS/GSAP Animation Lottie Animation 3D Graphics Motion Graphics
  • Figma
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe After Effect
  • Visual Studio Code
  • Blender
  • Procreate
  • Adobe Dimension
  • Adobe XD
    • -----------------
  • Lottie Animation
  • GSAP
code

Responsive Webdesign

Making sure my webpages look good on different devices is always important part of the process for me. Before handing off my HTML pages to developers, I check how they appear on the browsers the client and I agreed upon. I also give them a run on various devices to make sure everything works smoothly.

Relative Tools & Skills that I use:

PostCSS, BEM, SVG-Sprite, icon font tool
Visualstudio code, CSS(SASS: + PostCSS, using BEM, Mediaquery), Responsive HTML, SVG-Sprite, Creation and implementation of icon fonts,
Javascript (level of modifying with an absolute basic knowledge), GSAP
WordPress, Github(basic use for hosting)
interests

Illustrations & implementation of vector graphics

Illustrations are powerful way to convey the message. And since users now see your webpages through various devices, the visual elements on your web pages should be flexible and resizable to be perfect to any level of resolution. That means you have to know how to produce proper vector images and choose the right way of implement them on the pages. Whether they are for hero images, icons, motion graphics or background images will determine which way should be chosen.

Relative Tools & Skills that I use:

Adobe Illustrator, Figma, Adobe XD, SVG
animation

Animation with CSS and javascript library such as GSAP

There was a time when the Macromedia Flash(now Adobe Animate) was prevalent on the web. Now you can animate your design elements into a seamless animation using CSS or javascript library such as GSAP. From simple interactive animations on icons, buttons and charts to story-telling animations for a potent visual section, you can create effective and maintainable animations for your design.

Relative Tools & Skills that I use:

Visualstudio code, CSS Animation, GSAP, Magic scroll
auto_awesome

Lottie Animation

There was a time when the Macromedia Flash(now Adobe Animate) was prevalent on the web. Now you can animate your design elements into a seamless animation using CSS or javascript library such as GSAP. From simple interactive animations on icons, buttons and charts to story-telling animations for a potent visual section, you can create effective and maintainable animations for your design.

Relative Tools & Skills that I use:

Visualstudio code, CSS Animation, GSAP, Magic scroll
deployed_code

3D Graphics / Rendering

Turning my 2D design into 3D object is still giving me an overwhelming joy. When I have them get the "right" lights and perspective, they just become something more in depth. Yet being on a learning curve, I am still in awe and eagerly diving down rabbit-holes of this learning on any given chance. đŸ˜‰.

Relative Tools & Skills that I use:

Adobe Illustrator, Adobe AfterEffect, Adobe Dimension, Blenderă…ˆ
play_circle

Motion Graphics / 3D Animation

Other than code based animation with CSS and Javascript, I really enjoy creeating motion graphics with some animating tools such as After Effect or Blender. Animating what you draw or illustrate definitely brings them to life. Thanks to the Blender and AF(importing 3D model is currently available on a Beta version) you can also enjoy splendid effects to your 3D objects as well. There are still tons of technics to learn for me, but the more I learn, the more fun I'm finding.

Relative Tools & Skills that I use:

Adobe AfterEffect, Blender