Cocoda 初級編① - デザイン4原則 【感想・まとめ】

Cocodaに登録して初級編① - デザイン4原則が完了したので学んだこととデザインの基本である4原則を振り返ります。

Cocoda 初級編① - デザイン4原則で作ったもの

Cocodaに登録して入門編の作品を作った後は、デザインの基本である4原則を実践的に学んでいきます。

デザインの4原則

• 近接
• 整列
• 反復
• コントラスト

を意識してデザインをすることで洗練された印象になります。

Cocodaの入門編ではデザイン4原則をひとつひとつ学び、良いUIデザイン例と悪いUIデザイン例を比べて視覚的のわかりやすい解説になっていました。

スライドで基本を学んだ後に実際に良いUIデザイン例を作って実践的に理解を深めることもできます。

また、AdobeXD初心者にとってここで実際に手を動かしながらAdobeXDの操作方法をの理解を深めることができます。

デザイン4原則①　近接

TシャツのオンラインショップのUIデザインです。

製作の過程は動画でも確認できるので、プロのデザイナーさんが操作している動画が見れます。

デザインの指示書を読む

↓

動画を見てこれからやることの流れをつかむ

↓

実際にやってみる

↓

躓いたところの動画を再度見る

の順番で進めていきました。

デザイン4原則②　整列

すべての要素を左揃えにすることによって統一感・まとまりができます。

お問合せフォームを見るとこのページはどうやってマークアップしてコーディングしていこう？と考えてしまうのは、いままでコーディングの勉強をしててコーディングが好きな証拠だと思っています。

デザイン4原則③　反復

反復を使うと、同じデザインの繰り返しによって情報のまとまりと区切りを視覚的に明確になるのでユーザーに適切な情報がわかりやすく伝えることができます。

ひとつ目のお店の求人情報のカードを作った後にAdobeXDのRepeat Grid機能を使って残りの求人情報のカード部分を複製していきました。写真・文字情報は最後に差し替えました。

Repeat Grid機能はとっても便利でした。

デザイン4原則④　コントラスト

目立たせたい情報・重要な情報は大きく、それ以外の情報は引き立て役にするのがコントラスト。

レッスンでは飲食店の紹介サイトのデザインなので、食べ物の写真とお店の名前が目立つようにデザインされています。

まとめ

Cocoda 初級編① - デザイン4原則の課題は初心者でもひとつ1時間くらいで完成できる難易度になっていて、必要な素材や文章はすでに用意されたものをダウンロードするだけで作業に取り掛かれるので、超初心者の私でも無理なく終わらせることができました。

また課題をこなしながらAdobeXDの操作方法にも慣れていくので一石二鳥です。

初級編のレッスンは①・②・③と用意されている（④は準備中）ので、次は②に挑戦してみます。

Cocodaの紹介記事はこちら↓

treatmyself.hatenablog.jp