The free, ever-expanding design system & UI kit for Figma ✶ Updated every month ✶ The free, ever-expanding design system & UI kit for Figma ✶ Updated every month ✶
Windows 8のUIやGoogleのアイコン、Appleの新しいiOS7、さらにはFirefox 23のアイコンにまで使われているフラットデザイン。そんなフラットデザインがインターネット上で流行しているのかどうか、このデザインの特長は一体どういった点なのか、ということを実際にウェブ業界で働くプロ100人に対して調査したレポートが公開されています。 Flat Web Design Is Here To Stay - The Usabilla Blog http://blog.usabilla.com/flat-web-design-is-here-to-stay/ 調査はウェブ業界で働くプロフェッショナル100人に対して行われました。調査対象者の職業は以下の通りで、ウェブ業界で働く人々をまんべんなく調査しています。 調査の参加者にフラットデザインについて最初に思い浮かぶ単語を尋ねると、以
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。(現在のデザインになってからだいぶ経っており、今更な感じですが…)その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字(現在地表示) アイコンと文字(通常表示) ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねw それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook(アプリ) ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
TopCoatはグレー系を主体とした落ち着いた雰囲気のWebデザインフレームワークです。 最近はWebデザインフレームワークが多数出揃ってきました。サイトの雰囲気によってフレームワークを選ぶと良いでしょう。グレー系の落ち着いた感じを出したいならばTopCoatを使ってみましょう。 グレースケールを基調としたはっきりとした見た目のUIです。 ウィジェットは数多く提供されています。 フォーム系。 スライダーなどもあります。 スピナー。効果的に青が使われています。 こちらはモバイル。スマートフォンで使えます。 アイコンとラベルのセット。 テキストエリアとチェックボックス。 基本的に濃淡2色のバックグラウンドが選択できます。 オーバーレイ表示。これも色々使えそうです。 TopCoatはデスクトップとモバイルのそれぞれにデザインが提供されています。グレー系が約6色、青系が2色程度で構成されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く