美しいモバイルアプリをゼロから設計する

私は13歳のときにグラフィックデザインを学び始めました。オンラインコースからウェブサイトのデザインを学び、PhotoshopやAffinityDesignerで一日中遊んでいました。その経験から、デザイナーのように考える方法を学びました。

私はもう1年近くアプリの設計と開発を行っています。私はMITのプログラムに参加し、チームと協力してUniverseatyを開発しました。2か月前、私は1月28日に最近リリースした新しいアプリCrypto PriceTrackerの開発を開始しました。

この投稿では、私が取り組んだアプリの例とともに、私が従う段階的な設計プロセスを共有します。これは、デジタルデザインのスキルを習得または向上させたい人に役立つはずです。デザインとは、デザインソフトウェアの使い方を知ることだけではありません。この投稿では、デザインソフトウェアの使い方については説明しません。学ぶためにオンラインで何百もの良質のチュートリアルがあります。デザインとは、製品の裏返し、その特徴と機能を理解し、エンドユーザーを念頭に置いてデザインすることでもあります。それがこの投稿が教えることを意図していることです。

設計プロセス

  1. 画面ごとにユーザーフロー図を作成します。
  2. ワイヤーフレームを作成/描画します。
  3. デザインパターンとカラーパレットを選択します。
  4. モックアップを作成します。
  5. アニメーションアプリのプロトタイプを作成し、テストしてフィードバックを提供するように人々に依頼します。
  6. モックアップに最終的な修正を加えて、最終画面がすべてコーディングを開始できるようにします。

はじめましょう!

ユーザーフロー図

最初のステップは、アプリに必要な機能を理解することです。アイデアが浮かんだら、ユーザーフロー図を設計します。ユーザーフロー図は、アプリ/ウェブサイトを介したユーザーの移動を非常に高レベルで表したものです。

通常、ユーザーフロー図は3種類の形状で構成されます。

  • 長方形は画面を表すために使用されます。
  • ひし形は、決定を表すために使用されます(たとえば、ログインボタンをタップする、左にスワイプする、ズームインする)。
  • 矢印は、画面と決定をリンクします。

ユーザーフロー図は、アプリがどのように機能するかについての優れた論理的アイデアを提供するため、非常に役立ちます。

これは、アプリの設計に取り掛かったときに描いたユーザーフロー図です。

ワイヤーフレーム

各画面のユーザーフロー図を完成させ、ユーザージャーニーを設計したら、すべての画面のワイヤーフレーム化に取り組み始めます。ワイヤーフレームは、基本的にアプリの外観を忠実に表現したものです。基本的に、画像、ラベル、ボタンなどが配置される場所のスケッチまたはアウトラインと、それらのレイアウトおよび配置。アプリがどのように機能するかについての大まかなスケッチ。

ワイヤーフレームの描画には、UIステンシルの印刷されたテンプレートを使用します。それは時間を節約し、描画してメモをとるための素晴らしいキャンバスを提供します。

これがワイヤーフレームの例です。

ワイヤーフレームをスケッチした後、Popというアプリを使用して、アプリを使用してすべての図面の写真を撮り、ボタンを使用してすべての画面をリンクすることでプロトタイプを作成できます。

デザインパターンとカラーパレット

これは私のお気に入りの部分です。それはウィンドウショッピングのようなものです。たくさんのデザインパターンとカラーパレットから選択できます。私は好きなものを選んで実験します。

デザインパターンを見つけるのに最適なプラットフォームは、モバイルパターンとPttrnsです。そして、良いカラーパレットを見つけるには、カラーハントにアクセスしてください。

モックアップ

これは、最終的に設計ソフトウェアの使用に移るときです。デザインの意味でのモックアップは、デザインの忠実度の高い表現です。将来このアプリにアクセスして、そこからスクリーンショットを撮ったようなものです。リアルに見え、本物とほとんど同じように見えるはずです。

モックアップを作成するための設計ソフトウェアとツールがあります。AffinityDesignerを使用しています。iOSデザインで最も一般的に使用されるツールはSketchです。

これが私のアプリの初期のデザインの例です。

さまざまなカラーパレットでさらに実験しました。

最初のモックアップを友達と共有してフィードバックをもらいました。多くの人がゴールドのグラデーションとブラックのスキームを気に入っているようでした。

フィードバックを受け取り、新しい提案を試してみてください。DribbbleやBehanceを必死にスクロールするときではなく、ユーザーと話すときに素晴らしいアイデアがユーザーからもたらされることがわかります。

そこで、モックアップを再設計し、背景グラフを削除しました。これは、モックアップの生成に技術的に時間がかかり、読みやすさが低下したためです。これは、再設計されたモックアップがどのように見えたかです。

配色、タブバーのアイコン、全体のレイアウトにはかなり満足しました。私は先に進み、同じ設計ガイドラインに従って残りの画面を設計しました。長いですが、確かに楽しいプロセスでした!

すべての画面の準備ができたら、Adobe XDでプロトタイプを作成し、数人の友人に実験してフィードバックを提供するように依頼しました。

最後の仕上げなどを経て、これが私の最終的なデザインのようになります。

すべての画面が完成したら、それらをXcodeにインポートして、アプリのコーディングを開始しました。

それでおしまい!この投稿が、アプリのデザインを始めるのに役立つか、より良いデザイナーになるのに役立つことを願っています。そして、私のアプリが気に入ったら、ここからダウンロードできます。

デザインについての私のお気に入りの引用の1つで投稿を終了します。

「デザインは、見た目や雰囲気だけではありません。デザインはそれがどのように機能するかです」

-スティーブ・ジョブズ