Brief
Develop a prototype of a mobile game through which visual designers can learn the gestalt principles.
ビジュアルデザイナーがデザインのセオリーやプロセスをゲームを通して学ぶためのモバイルアプリのプロトタイプをデザインするプロジェクトでした。
ビジュアルデザイナーがデザインのセオリーやプロセスをゲームを通して学ぶためのモバイルアプリのプロトタイプをデザインするプロジェクトでした。
Tools
Brackets /ブラッケット
HTML
CSS
D3.js
P5.js
justinmind
HTML
CSS
D3.js
P5.js
justinmind
Concept
A part of visual designers’ role in a product development team is to create semantically appropriate and syntactically consistent visual elements for that product. The gestalt principles consists of several different theories based of psychological perceptions of human. Understanding these principles will enable visual designers to generate strong cohesive aesthetics that can be repeatedly and seamlessly used for a brand and product. The emphasis on my mobile game is to increase the pattern recognition skills of designers by having them detect mismatched objects out of computationally generated patterns. The detective theme was integrated in order to add a narrative within the game. Therefore, a designer (user) will be playing the game as the pattern detective, finding mismatched footprints on a mobile screen.
ビジュアルデザイナーのプロダクトデベロップメントチーム内での重要な役割の１つは、プロダクトやサービスのセマンティック的に適切で、シンタックス的統一感のある視覚的な要素を作ることにあります。ゲシュタルト心理学は、この役割を果たすためには欠かすことのできない視覚理論です。これらを理解することでより効果的なデザインをデザイナーは提供することができます。このパターン探偵のモバイルゲームはゲシュタルト心理学を応用したパターン制作・認識の側面に重点を置いてデザインしました。探偵もののテーマはゲームとしての要素を高めるために追加しました。
Working Demo Hereビジュアルデザイナーのプロダクトデベロップメントチーム内での重要な役割の１つは、プロダクトやサービスのセマンティック的に適切で、シンタックス的統一感のある視覚的な要素を作ることにあります。ゲシュタルト心理学は、この役割を果たすためには欠かすことのできない視覚理論です。これらを理解することでより効果的なデザインをデザイナーは提供することができます。このパターン探偵のモバイルゲームはゲシュタルト心理学を応用したパターン制作・認識の側面に重点を置いてデザインしました。探偵もののテーマはゲームとしての要素を高めるために追加しました。
Sketches
Sketched for concept development of the game and its branding.
ゲームそのもののメカニックとビジュアルデザインを考案するためにスケッチからスタートしました。
ゲームそのもののメカニックとビジュアルデザインを考案するためにスケッチからスタートしました。
App Visual Design
Branding guideline poster for the game was made to assure the aesthetic consistency of the game.
簡易的なブランディング・ビジュアルデザインの概要まとめたポスターです。
簡易的なブランディング・ビジュアルデザインの概要まとめたポスターです。
Wireframe
Considering how each screen of the game works by wireframing.
ゲームアプリを構成するそれぞれのスクリーンとそのインタラクションを考慮するためのワイヤーフレームです。
ゲームアプリを構成するそれぞれのスクリーンとそのインタラクションを考慮するためのワイヤーフレームです。
Prototype
These are some of the screen captions of a prototype built with D3, P5, and justinmind.
ゲームの実際的な使用ケースを検証するためにJavaScirptライブラリーのD3やP5、他にもプロトタイピングツールを使ってプロとタイプを作りました。下記のリンクは実際のデモです。
Working Demo Hereゲームの実際的な使用ケースを検証するためにJavaScirptライブラリーのD3やP5、他にもプロトタイピングツールを使ってプロとタイプを作りました。下記のリンクは実際のデモです。