seya's ほぼ Daily UI

〜ほぼ Daily UI vol.67〜 Hotel Booking

参考にしたサイト・アプリ Agoda Booking.com Expedia デザインを考える上でのポイントホテルを選ぶ時に必要な情報を優先度つけて表示ものすごく情報量が多いが、大事なのはホテルの写真、名前、クチコミ評価、宿泊費、あたりは重要でファーストビューで見えた方が良さそう。ついで立地や部屋の詳細などを見られるようになっている。Booking.com だと部屋の詳細はそれ専用のページと階層が区切られていた。 CTA(予約、客室選択)が埋もれないようにする

〜ほぼ Daily UI vol.66〜 Statistics

参考にしたサイト・アプリ Fitbit PayPay Google Analytics デザインを考える上でのポイント見たい単位で差分を見やすくするこういった Stats の目的は目標に届いているかの確認だったり、時系列での変化を見ることだと思うので、例えば PayPay のような月次でみたいものは月毎のバーチャートで表現する。用途にあったグラフの表現形式を選ぶ重要な指標を独立させる特に重要な指標はその値とセットでグラフのそばにおいてあげると Stats の

〜ほぼ Daily UI vol.65〜 Notes Widget

参考にしたサイト・アプリ iPhone のメモ一覧ではタイトルと最初の数文字を出す note よく見ると画像アップロードとかは固定されるようになってる。Undo も編集中でプライマリーなアクションだから少し大きくなっているのかな Notion デザインを考える上でのポイント一覧では一覧性を高めつつ、選びやすくするどんなこと書いてたっけと言うのが分かりやすいように、最初の数文字を薄く表示させたり、更新日時でソートさせたりなどの工夫が必要。 WYSIWIG にするな

〜ほぼ Daily UI vol.64〜 Select User Type

参考にしたサイト・アプリ dribbble 以外で該当の UI 見つけられなかった。 https://www.pinterest.jp/pin/137148751130535114/ シンプルだけどこれよな全画面でカルーセルで選ぶのいい感じ。ゲームっぽい高低差つけて目立たせるのいいかもデザインを考える上でのポイント効果的なアイコンで選びやすくその User Type が何なのかを視覚的にすぐ掴みやすくするためにアイコン選びが重要。また、選択肢の数にもよると

〜ほぼ Daily UI vol.63〜 Best of 2020

元のお題は2015だけど、あまり覚えてないので2020にした。参考にしたサイト・アプリ The Game Awards ダイナミックなカルーセルでかっこいい。Discoverってスクロールサジェストもいい State of JS 特殊な見せ方。一位が何かとかランキングっていうより遷移に重きをおいてるからこんなグラフになっているのかも Dribbble 写真も相まってかっこよす。ワンアイテムバーンってやるのいいかもデザインを考える上でのポイントメインのグラフィック

〜ほぼ Daily UI vol.62〜 Workout of the Day

参考にしたサイト・アプリデザインを考える上でのポイント何をどのくらいやればいいのか分かりやすい多分メディアとしては動画が一番望ましそう。誰でもわかるようなワークアウト(ジョギングとか腕立て伏せ)しかないのであれば、動画あってもむしろ邪魔だと思うので、ワークアウトの難易度で表現を変える。どこまで終わったのかをトラックしやすくするワークアウトが複数ある場合はどこまで終わったのかをOpacity下げたりチェックマークつけたりで分かりやすくする。自分のデザインフロー

〜ほぼ Daily UI vol.61〜 Redeem Coupon

Imagine that it's time for someone to redeem a coupon. It could be via an in person self-checkout screen or on a website. Think about the requirements of a coupon such as the discount percentage, the subtotal, total, and other unique featur

〜ほぼ Daily UI vol.60〜 Color Picker

参考にしたサイト・アプリ Google Color Picker 左に広い面積で色を確認できるのいいかも Figma figma.com htmlcolorcodes https://htmlcolorcodes.com/ デザインを考える上でのポイント色相のスライダーと彩度と明度のpickerが一般的なUIっぽい基本的にこの形なので、強い目的がない限りはこのUIを踏襲した方がいいっぽい。色を選んだ後コピペして使いやすいようにするおそらくメインのユースケース

〜ほぼ Daily UI vol.59〜 Background Pattern

Hint: Design a boarding pass. Consider the origin, the destination, gates, seats, the airline, etc. (As always, it's up to you!) 参考にしたサイト・アプリ Goodpatch Blog https://goodpatch.com/blog バックグラウンドにアイコン敷き詰めるのかわいいメルカリ https://www.mercari.com

〜ほぼ Daily UI vol.58〜 Shopping Cart

参考にしたサイト・アプリ Nike https://www.nike.com/jp/ja/cart 合計の部分だけフォント違うけど何目的なんやろ Amazon https://www.amazon.co.jp/ref=navm_hdr_logo デザインを考える上でのポイント個数を選ぶUI 普通のプルダウンにするかこう言う感じのやつ削除の位置 Amazonみたいにアイテム自体の情報の下にアクションを集めるパターン。個数表示で1からマイナスにするときはゴミ箱にすると言

〜ほぼ Daily UI vol.57〜 Video Player

参考にしたサイト・アプリ YouTube Twitter Frontend Masters デザインを考える上でのポイント動画の視聴を邪魔しないように最小限に動画のコントロールは動画を見ながらでもストレスなく操作できるように半透明にしたり、あまり縦に長くなりすぎないようにする必要がある。全画面前提なら、下の方に余白を固定で作るとかもできるかもしれない。 Hoverをコントラストを下げることによって分かりやすくする Netlifx では他の要素を薄くすることによ

〜ほぼ Daily UI vol.56〜 Breadcrumbs

Hint: NOT the edible kind. ;) Although a seemingly small detail, breadcrumbs are quite necessary yet often neglected in terms of appearance and functionality. And to truly achieve great design sense and skills you need to consider even the

〜ほぼ Daily UI vol.55〜 Icon Set

参考にしたサイト・アプリ自然モチーフいいお天気かなデザインを考える上でのポイント情報量を揃えるこちらの記事で説明されている通り、セットの中でディテールの量を揃える大きさによって情報量を変える例えば 16px で使う想定のものにそんなにディテールは詰められない。だが大きいアイコンに情報量が少ないと間抜けな印象を与えかねない。なので利用されるシーンに応じてデザインも少し変える。自分のデザインあつ森のアイコンを作ってみようと思う虫取り網、釣竿、じょうろ

〜ほぼ Daily UI vol.54〜 Confirmation

Hint: Design a Confirmation UI element. What's being confirmed? Is it confirming an address, order, shipping, plane tickets, hotel reservation, dinner reservation, booking tickets to the opera, or something else? Also consider where it's oc

フォローしませんか？

#Daily_UI