経緯
なんか、すごいリアクションがいっぱいついてたから、気になって読んだ
原文
From Idea to Design for Non-Designers - DEV Community
翻訳 & 要約
- インスピレーション
- 具体的なアイディアが思いつかない場合、他サイトを参考にする。以下デザインの参考になるサイト
- 圧倒されたと感じ始めたら、やる気が消えるだけなのでそっ閉じする
- 重要なのは、参考にしたものを自分の作品にすること
- 大勢の人に使われることが大事
- レイアウト
- モノクロでデザインを開始する
- コンテンツを統一したブロックに分割
- メインのエリアでは、グリッドを意識
- テキストサイズ、テキストウェイト、スペースを利用してコンテンツを分離
- 色調
- 背景色、メインコンテンツ色、アクセントカラーの3つのグレースケールを用意する
- 十分なコントラストを持つグレー以外の色を3色選ぶ。以下、選ぶための補助サイトへのリンク
- https://www.learnui.design/tools/accessible-color-generator.html
- https://accessiblepalette.com/
- https://reasonable.work/colors/
- https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9#:~:text=3.%20Do%20the%20math%20for%20understanding%20colors
- https://dev.to/madsstoumann/colors-are-math-how-they-match-and-how-to-build-a-color-picker-4ei8
- コンストラクトを決定するのが重要
- 文字
- ボタン
- アクションのためのもので、一次、二次、三次と分類される
- 一次ボタン：アクションを促すためのボタン
- 二次ボタン：あまり重要でないアクションのためのボタン ex:キャンセルボタン
- 三次ボタン：雑多なアクション
- リンク
- サイト内の他の場所に移動するためのもの
- デフォルトでもそれほど問題はない
- CSSのリンクアクション状態の定義順序には注意
- 仕上げ
- ページ全体像を考えたら、プロジェクトや再利用可能なスタイリングに変換
- 変数や命名規則は、明確で使いやすいものを適用
感想
デザインを本格的に学んだわけではないが、学問として奥が深いのだと思った。
また、cssのコーディングなどは、普通にプログラミングの原理・原則が適用できる箇所があると感じた。
あとは、問題を細分化して、個別に考えてから統合していくのが一般的な手法なのかと感じた。
俺とかは、デザインは一回で全部決めてしまっているけど、いくつかフェーズを分割して、個別の事象について検討して、それを統合していく流れなんだと思った。
アプローチの仕方が、いままでビックバンだったけど、本当は、細かく分けて統合していくのがいいのだろうと、読んでいて感じた。
ボタンは、いままでなんとなく分類わけしてたけど、アクション内容によって分類すべきだったなと感じた。
今までの経験則でデザインしてたけど、アクション内容を考慮してのデザインするべきだったのだと、読んでいて思った。
プログラマーが、なぜデザインが残念になるのか、なんとなくわかったわ。。。
たぶん、細かい工程に分けてやるのが面倒で、一括で全部やろうとした結果、細かく問題わけできてないせいでちょっとずつのチグハグが積み重なって、最後に出てきたものがダメになるんだろうなと思った。
