タグ

colorとflatに関するmimosafaのブックマーク (2)

  • フラットなデザインの配色に悩んだときに使えるツールや参考になるサイト

    フラットデザインは配色が重要といわれています。カラフルなものやレトロなものなどありますが、どれも独特の色使いです。 で、今回はそのサイトがどのような色を使っているのか確認する方法を紹介します。この方法で色んなサイトの配色を見ていくと非常に勉強になると思います。 CSS Prism by Ryan Berg 使い方は簡単。CSSのアドレスを入力するだけです。 CSSから色を抜き出すので画像に使われている色は出てきません。最近はWebフォントを使うなどして画像の数を抑えようとする傾向にありますので、CSSで使われている色を見ればサイトのイメージをつかむことができると思います。 わざわざCSSのアドレスを確認するのは面倒だという方のためにブックマークレットもあります。下の画像のように「CSS PRISM」と書かれた部分をドラッグして、ブックマーク(お気に入り)に保存します。 で、確認したいページ

    フラットなデザインの配色に悩んだときに使えるツールや参考になるサイト
  • フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。

    P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く

    フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
  • 1