Suche senden
Hochladen
とっさのデザイン〜ボタン編〜
•
31 gefällt mir
•
2,659 views
Yumi uniq Ishizaki
Folgen
いわゆるwebサイトのボタンをどのようにデザイン設計するか。社内5分LTの。
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 22
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
スライド作成時の留意点(新配属学生向け)
スライド作成時の留意点(新配属学生向け)
Takahiro IKEDA
Centres pilot activities zech republic
Centres pilot activities zech republic
pesec
ProjetEOF presentation at SOTM2014
ProjetEOF presentation at SOTM2014
Severin Menard
Малакут HR-исследвоания и решения | Каталог тренингов 2014
Малакут HR-исследвоания и решения | Каталог тренингов 2014
Yulya Uzhakina
Eu unit 12
Eu unit 12
English Classroom
Jesus v portfolio
Jesus v portfolio
Jesus Oswaldo
ข้อมูลการสอบ GAT PAT 1/ 2556
ข้อมูลการสอบ GAT PAT 1/ 2556
Biobiome
Weitere ähnliche Inhalte
Andere mochten auch
V1 no1-06-sutrisno-26-28
V1 no1-06-sutrisno-26-28
robin Simamora
This is link lists for crafts supplies online store
This is link lists for crafts supplies online store
Ir. MD Nursyazwi Mohammad
M1 1
M1 1
Bradley88
Ba702 sum 2012 - hilyard second draft presentation 1
Ba702 sum 2012 - hilyard second draft presentation 1
ahilyard
Lv digital culture_rix_dc
Lv digital culture_rix_dc
madaravinberga
Lms mi prezi
Lms mi prezi
Neli Jake
Mit Social Media Monitoring Kundenerwartungen erfüllen
Mit Social Media Monitoring Kundenerwartungen erfüllen
Brandwatch GmbH
Planeación
Planeación
Fabio Londoño Zapata
Business writing-skills
Business writing-skills
Aftab Alam
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Joe Hughes
Mike Todd Noris - Resume - 110116
Mike Todd Noris - Resume - 110116
mtnorris814
Andere mochten auch
(11)
V1 no1-06-sutrisno-26-28
V1 no1-06-sutrisno-26-28
This is link lists for crafts supplies online store
This is link lists for crafts supplies online store
M1 1
M1 1
Ba702 sum 2012 - hilyard second draft presentation 1
Ba702 sum 2012 - hilyard second draft presentation 1
Lv digital culture_rix_dc
Lv digital culture_rix_dc
Lms mi prezi
Lms mi prezi
Mit Social Media Monitoring Kundenerwartungen erfüllen
Mit Social Media Monitoring Kundenerwartungen erfüllen
Planeación
Planeación
Business writing-skills
Business writing-skills
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Mike Todd Noris - Resume - 110116
Mike Todd Noris - Resume - 110116
Mehr von Yumi uniq Ishizaki
スクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいこと
Yumi uniq Ishizaki
デザイナーにGitは必要?
デザイナーにGitは必要?
Yumi uniq Ishizaki
connpass design at BPStudy #88
connpass design at BPStudy #88
Yumi uniq Ishizaki
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Yumi uniq Ishizaki
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3
Yumi uniq Ishizaki
真のレシポンシブって何だろう
真のレシポンシブって何だろう
Yumi uniq Ishizaki
アイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやること
Yumi uniq Ishizaki
とある色の決め方
とある色の決め方
Yumi uniq Ishizaki
Semantic html が止まらない
Semantic html が止まらない
Yumi uniq Ishizaki
Mehr von Yumi uniq Ishizaki
(10)
スクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいこと
デザイナーにGitは必要?
デザイナーにGitは必要?
connpass design at BPStudy #88
connpass design at BPStudy #88
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3
真のレシポンシブって何だろう
真のレシポンシブって何だろう
アイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやること
とある色の決め方
とある色の決め方
Semantic html が止まらない
Semantic html が止まらない
とっさのデザイン〜ボタン編〜
1.
とっさのデザイン ∼ボタン編∼
20121227 Yumi Ishizaki
2.
自己紹介 うにだよー ! Id:uniq !
元デザイナーで今はエンジニア。 ! Css/html中心で頑張ってるよ! ! 作るときのモットー ! ユーザーが使いやすくて、かつクライ アントが最終的に目指したいもの ! 言葉のまま受け取らず、よく考えて受 け取る
3.
今回のお題
偉い人に 「ここにいい感じにボタン置いてよ」 って言われちゃったけど デザイン無いし、 僕はエンジニアなんですけど どうしたら…? …という時の対処法?です
4.
意味
まわり 形 色
5.
Step 1
「意味」を把握する そのボタンの意味を考えよう! 何をするボタン? 区別しよう! 「分かりやすければ良いボタン」と 「とにかく目立ちたいボタン」
6.
意味:ボタンで何する? ●●っぽくする。
! アプリのダウンロード導線は、アプリ のダウンロード導線っぽいの ! Twitterにはtwitterの鳥さん使って、 twitterっぽいの。
7.
意味:区別する 分かりやすい優先
目立ちたい優先 ! 色、スタイル、形を揃え ! 揃えるところは揃えるけ よう ど、ワンポイントで主張 すると、いい感じ。
8.
Step 2
かたち すでにある他のボタンと揃えましょう 他のボタンが無いときはルールを作ろう 大小2パターンのボタンを用意しよう
9.
かたち:角丸を揃える
10.
かたち:角丸を揃える
11.
かたち:スタイル 同じページ内、同じサイト内では、スタイルを合わせよう
12.
かたち:大小の2パターン あらかじめ大小2パターンのボタンを作っておいて、用途によって使い分け
13.
Step 3
まわり ボタン以外の場所にも気を使おう! ほどよいスペースを。 ほどよいアクセントを。
14.
まわり:スペースあける 周囲にスペースがあった方がボタンが
分かりやすい、かつ目立ちますね
15.
まわり:ワンポイント付ける
目立ちたい系ボタン。 ちょっとダサいけど、目立つには目立つ
16.
まわり:何かで囲ってみる
目立ちたい系ボタン。 入会・登録など。
17.
Step 4
色 基本的にはサイトやページで既に使わてるモノに 合わせよう…なんですが… 単色系 同系色グラデ系 白からグラデ系 …のどれかで揃える感じ
18.
同系色グラデ スタイリッシュな感じ。 個人的には好き。
19.
色:白からグラデ系
今風じゃない感じ。 淡い感じ。 コスメやエステ情報サイトでは よく見られる気がする。 (個人的には好きじゃないけど、 サイトに合ってれば良いと思いマス)
20.
※「白からグラデ」とは?
21.
まとめ
把握する ほどよいスペース & 意味 目立ちたい系はア クセント 形/スタイルを揃える & まわ 塗り方 大小2パターン用意する り (グラデ/単色) を揃える 形 色
22.
おわり ありがとうございました
Jetzt herunterladen