Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

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

スポンサーリンク

Cocoda初級編1

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