• Add to Collection
  • Tools Used

    Tools

  • About

    About

    Designed the website of Ryan Yu, who is a frontend engineer. The main focus of this project is to deliver the high quality UI component design. I… Read More
    Designed the website of Ryan Yu, who is a frontend engineer. The main focus of this project is to deliver the high quality UI component design. I especially focused on developing the design system with Sketch. Read Less
    Published:
The Portfolio of Ryan Yu 2018

Date: March 2018 - Now
Client: Ryan Yu
Role: Web designer

Designed the website of Ryan Yu, who is a frontend engineer. The main focus of this project is to deliver the high quality UI component design. I especially focused on developing the design system with Sketch. Also provided the animation for the better interactive UI experiences. The design work has completed and at the moment, the development is in progress, scheduled to launch in late May 2018.

Skill & Tool: Sketch, Adobe Illustrator
Design story
After a long discussion, Ryan and I decided to make a grid layout for animation like below image. All images or screen transitions are based to move these lines. I will upload animation video soon. 
4 patterns are looped automatically.  
Design System 
Basically all pages are designed 3 kind of layout, desktop, table and mobile. 
As I mentioned before, this website is designed using my own design system.  
D/T means desktop and table. And M means mobile. I am happy to share some part of my library. 
Interaction design
I highly focused the micro interactive design to make a simply but different for the best user experience.
Thank you 🦊🎉🦊