マガジンのカバー画像

今日のUIデザイン

8
UIデザインをためていく場所 アウトプット画像と分析、メモをちょこちょこ書きます
運営しているクリエイター

#note

今日のデザイン#08

今日のデザイン#08

今日は、
ガイドラインを学びつつ音楽アプリの一画面を作りました!

◉気づいたことダークモードのUI設計について
ガイドラインに書かれていることや気をつけるべきことを
別件で知ったばかりだったので

これはダークモードではないですが
黒ベースということで
少しその知識を活かしながら作ることができました

具体的には
ダークモードのUI設計で
真っ黒(#000000)を使うと
コントラストが大きすぎ

もっとみる
今日のデザイン#07

今日のデザイン#07

今日は、
情報の優先順位を反映させたレイアウトの練習のLPでした

情報に優先順位をつけて整理
伝えたい情報が1番に伝わり、
目線の動きに合わせたレイアウトを学びました。

◉気づき目線の動きにあってる!!

サービスの特徴の見出しの下で
STEP1はテキストが左、画像が右
STEP2はテキストが右、画像が左、、、

というのがとても見やすかったです。
この左右が逆だったらなんとなく違和感があって

もっとみる
今日のデザイン#06

今日のデザイン#06

今日は
カフェの雰囲気を伝えてお店に興味を持ってもらうwebでした

◉気づいたこと(メモ)ファーストビューで写真を大きく使っていること、
そして写真の数が少ない(たくさん写真を使いすぎていない)ところでも
このカフェの雰囲気が出ていると思いました。

ヘッダーはH80px
コンテンツエリアはW1280pxに対して960pxでした。

◉見本と変えた点写真の幅の右端をコンテンツエリアと揃えてみまし

もっとみる
今日のデザイン#05

今日のデザイン#05

今日はレイアウトについて
ターゲットから考えたレイアウトに挑戦する
というのがテーマでした

やってみて
レイアウトというより
どちらかというと配色やあしらいを学んだ気がしています

◉気づいたこと
アイキャッチの動きで楽しそうに見える
アイキャッチは幅いっぱい長方形どーーん
というタイプでつくりがちだったのですが、
黄色の長方形と写真をずらすことによって動きが出ました

テキストのはみ出し
同じ

もっとみる
今日のデザイン#04

今日のデザイン#04

今日のCocoda!は、コントラスト
グルメ検索サイトの検索結果一覧のUI

やっとデザインの4原則が終わりです(遅い)
今日はサクサク終わりました!

◉見本と変えた点
店名以外の文字色をグレーに。
見本を見て、まだ少し優先順位がわかりにくいというか、
圧が強いように感じました。

そこで似たようなグルメ検索サイトのUIを見たところ
店名以外のフォントはグレーになっていた!ので
私も真似してグレ

もっとみる
今日のデザイン#03

今日のデザイン#03

今日は「反復」の練習で
バイト検索サイトのUIをデザインしました

◉考えたことメモ
縦スクロールしてバイトを探すサイト
なので1つ1つの募集情報を表すカードが
スマホの縦幅ぴったりで切れてしまわないように(語彙力)
した方がいいと思いました

これでいうと3枚目のカードが途中で切れるようになっています

ぴったりで切れてしまうと
もうスクロールするものがないのかな?と思わせてしまうかも。
まだま

もっとみる
今日のデザイン#02 整列

今日のデザイン#02 整列

今日は「整列」がテーマのフォームの作成をしました

インターン先で一度作ったことがあったのですが
改めて難しい。。。
(今回は要件は決まっていましたが要件定義もむずい)

◉今日学んだこと
同じように見えて欲しくない(違うように見えて欲しい)情報は
行揃えを変える(左揃え、中央揃えなど)

同じように見えて欲しい系統が同じ情報の組み方を揃える
という意識はしていました(中途半端に左揃えと中央揃えを

もっとみる
夏の自由研究という名のがんばろう習慣

夏の自由研究という名のがんばろう習慣

こんばんは!

昨日は作業をしていて気づいたら日付を超えてしましました
(2回目の投稿し忘れミス、、、)

Cocoda!という
UI、Webデザインを学びたい人にとって
神的なサービスがありまして
(以前もちょこっとnoteに書いた気が)

春休みに毎日挑戦しよう!
と思い立ったはいいもののリタイアしたので
再リベンジ

ということで9月にも入りまして
頑張っていこうと思います!

先月はとても

もっとみる