フラットデザインの参考になりそうなフリーアイコンやUI Kit、イラスト
- 2013-07-02 Tue 11:57:37
- デザイン
フラットデザインを作成する際に参考になりそうなフリーアイコンやUIキット。「フラットデザイン＝手抜き」というのでは、クオリティが保てません。ディテールを確認し、フラットデザインの特徴を捉えていきましょう。
20 Free UI Kits & Icons For Your Flat Web Designs
フリーのソーシャルアイコンやUIキットがまとめられています。
UIについては、スマホアプリサイズベースのものが中心となっていますが、
個人的には丸いグラフや、ボタンデザインなどのアイコンとの空間の取り方が参考になるかと思います。
via 20 Free UI Kits & Icons For Your Flat Web Designs
Cole Townsend
こちらは、１カラムウェブサイトの中のイラストレーションなのですが、こちらもかなり「フラット」な感じに仕上がっています。ボタンデザインも可愛く、動きも素敵でした。
viaCole Townsend
25 Designers Show How iOS7 Should Have Looked
25人のデザイナーがiOS7をデザインしたらどうなるか、というクリエーションをまとめた記事。アイコンデザインや、「フラット」とは何なのかを感じるには良いかと思います。
via 25 Designers Show How iOS7 Should Have Looked
こういったものからデザインを理解するには
・片っ端からグリッドを引いて仕組みを理解する
・ディテールを確認するならphotoshopなどでめいいっぱい拡大し、
浅いグラデーションや、角丸の感じを掴む
・とにかくたくさん見て、自分なりのデザインを作る
・ディテールを確認するならphotoshopなどでめいいっぱい拡大し、
浅いグラデーションや、角丸の感じを掴む
・とにかくたくさん見て、自分なりのデザインを作る
というような方法が有効かとおもいます。
ぜひ、自分なりの「フラット」感を掴んでみてください。
- 関連記事
-
-
トレンドのフラットデザインとは対照的なスーパーコラージュ＆リッチなキャンペーンページ
2013/11/15
-
自分らしく仕事をするための時間管理の方法
2013/11/06
-
photoshopでのウェブデザインの勘どころ
2013/07/08
-
フラットデザインの参考になりそうなフリーアイコンやUI Kit、イラスト
2013/07/02
-
バニレートデザイン事務所が方向転換？←エイプリルフールでした！
2013/04/01
-
インスピレーションを受けよう！とってもステキなエディトリアルデザインや商品デザイン
2013/03/19
-
レスポンシブデザインとブレークポイントからこれからのウェブを考える
2013/03/17
-
![【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付](http://ecx.images-amazon.com/images/I/413I3VBMn1L._SX113_.jpg)
