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: Card state styles
UI: Card state styles
article
card component
accessibility
state style
UI/UX
Interactive web design for Artist Kwak
Interactive web design for Artist Kwak
accessibility
Micro interaction
UX/UI
case study
Cookbook Editorial design
Cookbook Editorial design
brining
Print
Editorial
graphic
book
typographic