Web design for Ryan Yu

Date: March 2018

Client: Ryan Yu, frontend engineer

Role: Web designer

Skill & Tool: Sketch, Adobe Illustrator

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.

Go to website

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. 
 
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu

Design System

Basically all pages are designed 3 kinds of layout, desktop, tablet and mobile. As I mentioned before, this website is designed using my own design system.  D/T means desktop and table. And means mobile. I am happy to share some part of my library. 

The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu

Interaction design

I highly focused the micro interactive design to make a simple but different for the best user experience.

The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu
The Portfolio website Ryan Yu


web design, ui design, component, grid

Thanks for reading,
please share it.
Related
UI: State styles of card component
UI: State styles of card component
ui
article
Case study: web design focused on interaction.
Case study: web design focused on interaction.
interaction
UX/UI
web
The story of editorial design for book ¹/₂: Cookbook
The story of editorial design for book ¹/₂: Cookbook
Print
Editorial