Brief
Create an interactive timeline on the history of type and technology.
タイポグラフィとそれに関するテクノロジー歴史を学ぶことのできるインタラクティブアプリケーションツールをデザインするプロジェクトです。
タイポグラフィとそれに関するテクノロジー歴史を学ぶことのできるインタラクティブアプリケーションツールをデザインするプロジェクトです。
Tools
Brackets/ブラケット
HTML
CSS
D3.js
HTML
CSS
D3.js
Concept
Designed and coded an interactive timeline with clear organization of different information and cohesive aesthetics. One of the advantages that this interactive timeline has over a static one is that objects and information in a limited space can be reformatted. The animated and flexible grid system was incorporated within the layout to effectively categorize technologies, classification, and typefaces. The project is designed to serve as a useful reference tool for designers to look up appropriate typefaces for specific projects as well as to learn the history of technology and typography.
タイポグラフィとテクノロジーの関連性を表すタイムラインベースのウェブアプリケーションのUIとコーディングをしました。インタラクティブアプリケーションの利点である、大量の情報を再配置できることを生かし、グリッドシステムベースのタイムラインに仕上げました。ユーザーが知りたい年代のテクノロジー、タイポグラフィを効果的に知ることができること意識してデザインしました。特にデザイナーが何かのプロジェクトに際して、そのプロジェクトに適当なタイプフェースやカテゴリをー選択しやすくするためのツールとしても役立つように設計しました。
Working Demo Hereタイポグラフィとテクノロジーの関連性を表すタイムラインベースのウェブアプリケーションのUIとコーディングをしました。インタラクティブアプリケーションの利点である、大量の情報を再配置できることを生かし、グリッドシステムベースのタイムラインに仕上げました。ユーザーが知りたい年代のテクノロジー、タイポグラフィを効果的に知ることができること意識してデザインしました。特にデザイナーが何かのプロジェクトに際して、そのプロジェクトに適当なタイプフェースやカテゴリをー選択しやすくするためのツールとしても役立つように設計しました。
Sketches
Rough sketches and digital sketches in order to consider how and which data would be used and displayed as well as how a user would interact with the application.
ラフスケッチどデジタルスケッチです。大量のデータを情報ごとに決まりを作って配置しなければならなかったので早い段階で実際の文章やタイトルなどを使ってつケッチできるデジタルスケッチに移行しました。
ラフスケッチどデジタルスケッチです。大量のデータを情報ごとに決まりを作って配置しなければならなかったので早い段階で実際の文章やタイトルなどを使ってつケッチできるデジタルスケッチに移行しました。
From the earlier concept stage, I was determined to utilize the grid system to organize timeline-based information with a very minimal number of colors.
グリッドシステムを用いることでメインの３つの情報を明確に区別化するUIで制作を進めることを初期段階から考えていました。
グリッドシステムを用いることでメインの３つの情報を明確に区別化するUIで制作を進めることを初期段階から考えていました。
Wireframe
Digital sketches and wireframing for refined concept development.
最終的なUIの設計が決まった後のワイヤーフレームです。どのエレメンドがどのようにユーザーの行動に応じて反応するのかを研究しました。
最終的なUIの設計が決まった後のワイヤーフレームです。どのエレメンドがどのようにユーザーの行動に応じて反応するのかを研究しました。
Prototype
Some of the screens from the working demo created in D3.js. With some technical advice from Frank Armstrong, I was able to create the interactive data visualization.
JavaScriptライブラリーのD3を使用して、実際のアプリケーションのプロトタイプを制作しました。コーディングに関しては、フランク・アームストロング教授から少しアドバイスをいただきました。
Working Demo HereJavaScriptライブラリーのD3を使用して、実際のアプリケーションのプロトタイプを制作しました。コーディングに関しては、フランク・アームストロング教授から少しアドバイスをいただきました。