Design

While my primary focus and strength is on conducting research, I have been interested in creating concrete design artifacts—such as graphic and user interface design. This page shows my design portfolio.

Portfolio

User Interface Design

This project aims at introducing the basics of user interface design

2021

Magical Mirai 2018 live lyrics animation

Once again, authored lyrics animation for a live performance by Hatsune Miku!

2018
Graphic

SNOW MIKU LIVE! 2018 lyrics animation

Authored lyrics animation for a live performance by a renowned virtual idol singer - Hatsune Miku!

2018
Graphic

"junkato.jp" web design

Created a website with the focus on usability and maintainability. Built an automated pipeline that compiles various data sources into a set of static HTML/CSS/JavaScript files. The website is built on the Semantic UI CSS/JavaScript framework and implements a dedicated responsive view. More technical details can be found here.

2018-2024
Graphic
User Interface

Songle Sync brand design

Created a variation of Songle Sync and Songle API logos from the existing Songle logo. Demonstrated its use on the Songle Sync tutorial website and GitHub repositories. The tutorial site is built on the Semantic UI CSS/JavaScript framework.

2017-2023
Graphic
User Interface

Tenju Works web design

Helped renovation of the Tenju Works website. Customized multiple WordPress plugins to behave accordingly.

2017
Graphic

OngaCREST service flyer and poster design

Designed flyers and posters of the four web services developed by the OngaCREST project: Songle, Songrium, TextAlive, and Songmash. The flyer was distributed at an international convention (No Maps 2016) and other events. The poster can be viewed as a PDF file.

2016
Graphic

f3.js brand design

Built a brand kit for the f3.js research project. Built its main website with Node.js and MySQL and the documentation website with WordPress. Used the Semantic UI CSS/JavaScript framework.

2015-2018
Graphic
User Interface

TextAlive brand design

Built a brand kit for the TextAlive research project. Built its main website with Node.js and MySQL and the documentation website with WordPress. Used the Bootstrap CSS framework.

2014-2024
Graphic
User Interface

CD jacket design

Designed multiple CD jackets. The following jackets are A/B sides of "Project CRENO Conception", "SUMMER.EXE", and "gamma", respectively.

2007-2008
Graphic

Chippie

An extendible PHP framework for content management of news website used in digitalmuseum, SCI (the frontline of SCIence), and UT-Life, all of which are designed and implemented by me.

2006-2008
User Interface

Skillset

The following list focuses on concrete technical tools appearing in common job descriptions. High-level skills such as methods for rapid prototyping and user studies are omitted. See my resume for more general information.

As a graphic designer

Photoshop
22 years
Illustrator
22 years
Other Adobe products
Premier for producing demo videos and InDesign for basic DTP tasks
HTML
24 years
Pug (Jade)
10 years
CSS
24 years
Stylus and LESS
10 years
Bootstrap (< 4)
13 years
Semantic UI
9 years
Grunt
10 years
Gulp
7 years
Vim
19 years

As an interaction designer

JavaScript
24 years
TypeScript
since it was called "Strada"
jQuery
13 years
D3.js
7 years
Webpack
7 years
Babel
7 years
Node.js
10 years
PHP (< 7)
19 years
WordPress
19 years
C#
for desktop apps and ASP.NET apps
Java (< 8)
16 years, for robot and desktop apps and browser applets
Processing
16 years, mostly for robot apps using Phybots and Picode
Visual Studio, Visual Studio Code
16 years and since it was born, respectively
MySQL
19 years
Eclipse
16 years
GitHub