关 于 我

Jitao Sun

Jitao (Tommy) Sun is an innovative new media designer, currently working at First Person, Inc. as an Art Director. Jitao comes from Hangzhou, China, he moved to the United States to pursue a degree from the Academy of Art University, School of Web Design and New Media. Since graduating he’s gained extensive experience in UX/UI design, traditional graphic design, motion graphics, and art direction. As an artist, Jitao also explores VR/AR interaction experiences, generative art, and other cutting-edge technologies and design. His work has been repeatedly elected to the Academy of Art University Spring Show. Jitao has also received several awards including First Prize in Motion Graphics of the Global Design Competition “The Rookies 2016”; Achievement in Motion Graphics of Academy of Art University’s 2016 Media Awards; “Best in Show”, Academy of Art University, School of Web Design and New Media 2016 Spring Show.
(more awards can be found in Jintao’s resume)

孙吉涛是一个创新的新媒体设计师,杭州人,目前在美国设计公司 First Person 担任艺术总监。孙吉涛毕业于美国旧金山艺术大学新媒体系。他在用户体验和交互设计,传统平面设计,动态图形以及艺术指导上有丰富的经验,并探索于VR(虚拟现实), AR(增强现实)体验和Generative Art(衍生艺术)等最前沿的技术和设计。他的作品一直被选入旧金山艺术大学春季展览,并在2016年获得:国际设计竞赛“the Rookies”——动态图形类别最高奖;2016旧金山艺术大学媒体奖——动态图形成就奖(最高奖);2016旧金山大学春季展览——最佳作品奖(最高奖)。
(更多获奖荣誉见简历)

联 系 我

  • hello@jitaosundesign.com

DEMOREEL 2015

This demo reel includes some of my latest motion graphics projects, which cover futuristic interface design/animation, title sequences, app transition design, prototypes, trailers, abstract CG installation, event promos, simple 2D animation and static visual design. All of these are student projects that I did during my study at the Academy of Art University, School of Web Design / New Media.

I intend to share all source files of this demo reel as open-source learning material for all kinds of non-commercial use.

Project List

  • 00:00 Intro: D.N.A
  • 00:14 Hypercube
  • 00:28 Breaking Bad Ttile Sequence
  • 00:34 Snap App Design
  • 00:38 Ride N Style UI Transition
  • 00:40 The Daft Program
  • 00:48 Violin Making Book Trailer
  • 00:55 Shape to Music
  • 00:58 App Promo
  • 01:00 Mapping Festival Promo
  • 01:09 Everyday Visual Design & 3D Imaging
D . N . A .
Hypercube
Breaking Bad Ttile Sequence
Snap App Design
Ride N Style UI Transition
The Daft Program
Violin Making Book Trailer
Shape to Music
App Promo
Mapping Festival Promo
Game: Undersea Expedition
Modeling: Daft Punk

Text Animation

Those two text animation inspired by "FITC Tokyo 2015 Titles". I cut the type of the title and my name in pieces in order to add more sense of space and movement to the letters. Then, I animated them in Adobe After Effects. The typeface is Avenir Next Demi Bold.

Demoreel Title Animation

My Name Animation

Open Source Files

It is my intent that you use these files as learning resource. You are free to use the project files in your personal or commercial projects, but please do not resell, repackage, redistribute, repurpose, or break apart this package in any way. If you use the files, please credit or provide a link to www.jitaosundesign.com in some way. When in doubt, email hello@jitaosundesign.com. All rights reserved.

* Before you download the files, please read the Instruction document.

scroll

D. N. A

This project focused on Art Direction, CG modeling and scene design. Inspired by Beeple’s short film “Zero Day.” I spent two weeks to complete a full process that includes scene design, modeling, texturing, lighting and animation in MAXON’s Cinema 4D. I then created the pre-rendered VR content, which can be distributed via YouTube VR or Facebook and viewed with a smartphone and Google Cardboard headset.

Why?

D.N.A means Design and Art. It also means Design and Art are hard-coded in my DNA. I LOVE DESIGN and ART.

I really like futuristic things. In my eyes, something that is futuristic, can also be very psychedelic. So here is why I made this project. I created this futuristic lab with the glassy looking DNA and my LOGO installation just because I LOVE IT! “Love” is always the best reason to make things.

Modeling

Rander & Color Correction

I used the physical render engine in C4D without any render plugin or third-party render engine (which is painful, but a point of pride.) Then I composited and color corrected with Adobe After Effect.

Virtual Reality Experience

I highly recommended viewing this in the highest resolution using your smartphone device and Google Cardboard or any other VR headset. The 2D image will not look as sharp without the headset.

Hypercube is an interface/System for rally racing car. So it is designed to improve the driving experience. This system can interact and analyze the outside environment, help drivers master the surrounding environmental information. In addition, the system also monitors the vehicle itself, intelligent alerts and reporting necessary information.

UI ANIMATION REEL

Design Guide

* The primary typeface HYPERCUBE is my own design typeface.

Architecture

This interface/system has two parts: the HUD console and the Vehicle Info console. The HUD consoles will be displayed on the windscreen. It can analyze and remind drivers about the environment. The Vehicle Info console will be displayed on a big Touchscreen. It shows all vehicle data, helps the navigator get real-time vehicle information, and quickly revise his strategy.

HUD Display

There are not too many elements on the HUD screen in order to allow the driver to concentrate on driving. All the information on the HUD assists the driver in better understanding road conditions, improving the driving experience.

Fluid Layout

The main content area is a large 3D working space. User can use simple gestures to change the camera angle and perspective. For example, in the initial screen, the main area displays the entire car model. When the operator uses two fingers to zoom in the camera, the shell will gradually expand outward and become more transparent. Meanwhile, the data displayed on the panels also change from the entire car overview to detailed parameters of single or multiple components (based on which object is selected or in focus).

All interfaces are fluid. The general panel's layout, scales and contents can be changed according to the central display. Because the main display area shows the track and environmental information, the secondary display area below expends upwards to show more detailed information related to the main display.

In this interface design, all the info and data are the real contents. I do not only design for complexity, but also usability and applicability. I try to make every part of this interface logical and usable.

Tags

Tags are a major element in this system. Almost all of the operations and data connections work with tags. The principle is very simple: the user selects the object first, then opens/connects with a tag, then more information or operation consoles appear.

Color is another major element, It is not only used to distinguish different selections, and different flows, but also shows data conversion. This makes the operation of the entire interface more intuitive and easy to understand.

Display Layer

As shown left, there are three display layers. This is not a physical level division, but a principal visual division. All the selected objects or top level messages such as warnings display on the top level. All the body content such as data, tags, and panels will display on the main level. All the transitions will be on the transform level.

"Poly System" is an experimental Visual Design Language. I'm trying to created a design style which combine 3D objects and 2D graphics. I created all the objects in Maxon Cinema 4D and composed in Adobe Photoshop.

Guide

Style Application

There are some shots from a presentation design that I did for Infosys Limited. The project is about pitch a innovative "New Hire Orientation Kit" with VR/AR user experience. Because the limited time(12 hours), I focus more on design the presentation itself, rather than the Orientation Kit. I applied "Poly System" style to this presentation design, in order to show the visual sense of my Orientation Kit design concept. (The following picture shows the presentation of the design, not the interface itself.)

Process

I created all the 3D objects in C4D. Then render out with different channels.
Use channels to get the right selection in Photoshop, then cut the footage with different ploy shapes (step 2 - step 4).
At last, use image assets as detail texture, composed with main objects.
Snap is a beautiful, unique app that helps people happily and easily to complete the last step of their driving. It is completely different from all other parking apps, and, most importantly, Snap is better than them.

DESIGN GUIDE

Snap uses simple, understandable icons and beautiful, conspicuous typography to present an intuitive user interface. It makes it easy for users to read and think, and fully concentrate on their driving, in order to create a safe and comfortable operating environment.
Snap has a lot of natural transition animations and gorgeous, prominent colors. All of these can help users easily remember the interface and user flow, operating without extra thinking.

App Transition

The Ideate Conference Poster

I designed these posters for the Ideate Conference in Spring 2016, the most important event of the School of Web Design + New Media, Academy of Art University. The Ideate Conference brings together Academy students, industry leaders, and Alumni for a day of education, networking and celebration. The goal is to showcase the amazing students to industry from top companies.more about this event

I wrote a small program with p5.js to generate the poster background and manipulated the result in Adobe Photoshop. The main concept behind it is thinking, doing and cooperation. I believe that every student is a unique, indispensable element in this huge, bright, colorful "web + new media art world".

jitaosundesign.com

Yes, I code my site. I spent around a month to complete this site. From design to assets to code, all by my own.

Collaborative project with Jeff Heppert and Injun Kim. Rebranded a freestyle bicycle competition. Projection mapping was used to enhance the viewing experience, as well as bring fans together with collaborative art competitions. I'm responsible for Art Direction, Overall Visual Design, Animations and 3D modeling. Also built part of the website, watch and mobile app design.

Logo Design

Mobile App Design Guide

Mobel App Design

There are three different use cases: General viewers, Media team and the Riders (the race participants). The example here is the Riders case.

After signing in is the Ticket/Pass page. On the top, there is a menu that allows users to quickly navigate to other pages/functions.

The main functions are on the same hierarchy level. so users can also swipe to change pages.

Ghost race can help riders to compare their times with other racers. The Lineup page shows where the rider is in the overall lineup. My Team page will show ride's team members, their events, and their ranking.

Users can always click on the logo to go quickly to their Ticket/Pass page.

Watch App Design Guide

Watch App Design

The Watch App is only used for the team and riders. The function of this app is very simple. It only shows information and notifications to the riders. The Red Bull sponsors will use it to track the rider's infomation such as physical health data, and also it can records all the data for tracking the rider's paths for projection mapping replays.

Web Design Guide

Web Design

The Watch App is only used for the team and riders. The founction of this app is very simple, only shows infomation and notifications to the riders. The Reb Bull sponsors will use it to track the rider's infomation such as physical health data, and also it can record all the data for tracking the rider's paths and use to the projection mapping replays.

DEMOREEL

2015

D. N. A

3D MOTION & VR

HYPERCUBE

FUTURISTIC CAR UI

POLY SYSTEM

Experimental Visual Design (In Process)

SNAP

NOT “ANOTHER” PARKING APP

CODE

GENERATIVE ART & CODE

RIDE & STYLE

VISUAL DESIGN & INTERACTIVE

GALLERY

PRINT, PHOTOGRAPHY, IMAGING