Vimateのモックアップ

コミュニティ開発しているVimateというSNSモックアップを自分が作ることになりました!

以下のリンクが作成途中のモックアップです。

hayashiyoshino.github.io

 

 

プロトタイプ、モックアップワイヤーフレームといった概念についてまで今ひとつ分かっていなかったので調べてみました。

 

 

ワイヤーフレーム

ワイヤーフレームとは、ウェブサイトの骨格となる部分を表現したものです。

どのボタンを押して何が起きるか等をはっきりさせます。

機能と配置がわかれば良く、デザインは行いません。

 

モックアップ

モックアップワイヤーフレームで定義した部分に加え、色、画像、ロゴ、フォントなどデザイン要素を追加します。

 

 

プロトタイプ

プロトタイプは機能以外は完成品と同じレベルで作り込んだものです。

UXの要素、アニメーション、その他サーバーサイドの処理以外全てを組み込みます。

 

 

 

開発前にこれらを作成する理由

・作りたいものがより明確になります。

・構築に必要なものを明らかにでき、無駄な工程を防げます。

・開発を誰かに依頼する場合、イメージを分かってもらいやすくなります。

 

 

 

 

また、デザインについて感覚でやるのは良くないと思ったので、書籍等で基本的な考え方について学んでみなくてはと思いました。