More Related Content
More from Yumi uniq Ishizaki (10)
とっさのデザイン〜ボタン編〜
- 2. 自己紹介
うにだよー
! Id:uniq
! 元デザイナーで今はエンジニア。
! Css/html中心で頑張ってるよ!
! 作るときのモットー
! ユーザーが使いやすくて、かつクライ
アントが最終的に目指したいもの
! 言葉のまま受け取らず、よく考えて受
け取る
- 3. 今回のお題
偉い人に
「ここにいい感じにボタン置いてよ」
って言われちゃったけど
デザイン無いし、
僕はエンジニアなんですけど
どうしたら…?
…という時の対処法?です
- 5. Step
1 「意味」を把握する
そのボタンの意味を考えよう!
何をするボタン?
区別しよう!
「分かりやすければ良いボタン」と
「とにかく目立ちたいボタン」
- 7. 意味:区別する
分かりやすい優先 目立ちたい優先
! 色、スタイル、形を揃え ! 揃えるところは揃えるけ
よう ど、ワンポイントで主張
すると、いい感じ。
- 8. Step
2 かたち
すでにある他のボタンと揃えましょう
他のボタンが無いときはルールを作ろう
大小2パターンのボタンを用意しよう
- 13. Step
3 まわり
ボタン以外の場所にも気を使おう!
ほどよいスペースを。
ほどよいアクセントを。
- 17. Step
4 色
基本的にはサイトやページで既に使わてるモノに
合わせよう…なんですが…
単色系
同系色グラデ系
白からグラデ系
…のどれかで揃える感じ
- 19. 色:白からグラデ系
今風じゃない感じ。
淡い感じ。
コスメやエステ情報サイトでは
よく見られる気がする。
(個人的には好きじゃないけど、
サイトに合ってれば良いと思いマス)
- 21. まとめ
把握する
ほどよいスペース
&
意味 目立ちたい系はア
クセント
形/スタイルを揃える
& まわ 塗り方
大小2パターン用意する り (グラデ/単色)
を揃える
形 色