タグ

A.講座とN:サイトデザインに関するtomisyuraのブックマーク (4)

  • シンプルなのに効果的!美しい背景画像を作成するテクニックのまとめ

    背景はデザインにおいて、非常に重要な要素です。 ビジュアルの土台となり、他の要素がどのように見えるか決定する要因となります。 要素を引き立たせる美しい背景画像を作成するシンプルなテクニックを5つ紹介します。 5 Simple Tools to Create Beautiful Backgrounds 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 不透明度を調整したカラーオーバーレイを使用する ぼやけた背景と対になるアイコンを使用する コピースペースと共にイメージを使用する モノクロの背景にネオンカラーのテキストを使用する 形をテキストホルダーとして使用する 不透明度を調整したカラーオーバーレイを使用する 背景となる写真画像にカラーオーバーレイを加えることで、デザインの印象を引き起こします。デザインする時のポイントは、まずは画像は彩度

    シンプルなのに効果的!美しい背景画像を作成するテクニックのまとめ
    tomisyura
    tomisyura 2015/08/15
    ■彩度のスライダーを左にズラしてオーバーレイ、不透明度を調整 ■ガウスぼかしのあとソリッドなアイコン ■モノクロにしてネオンカラー(カラーホイールの縁にある) ■テキストホルダーとしての形
  • » 佐藤可士和氏のGU新ロゴ Toshi Omagari

    思いっきり仕事中ですが腹が立って仕方がなかったのでブログ更新します(どういう動機だ!) 佐藤可士和氏がGUというファッションブランドのロゴをリデザインしたそうです。まぁ言ってしまえば元のロゴも大して良くはないのですが、その新ロゴというのが笑止千万な出来なので徹底的に図解して非難したいと思います。 まずはその新ロゴ。和文の方もグリッド多用しまくりで個人的には酷いと思うのですが、まぁ欧文書体デザイナーの自分としての題はGUなので和文はさておきます。またネットでは色がIKEAだとかTSUTAYAだとかEUだとかブックオフだとか色に関してのツッコミが多いようですが、やはり自分としては文字の形そのものに注目したいと思います。あ、あとGUの配置も右寄りすぎますが文字の形そのものに以下同文です。なにせブログをなかなか継続して書けないこの自分を書かせる気にさせるほど酷いんですから。 ソースの画像は低解像

    tomisyura
    tomisyura 2013/03/14
    ■"縦線と横線は同じ幅でも横線のほうが太く見えてしまうので細くする" ■"同様に、曲線と直線では曲線を太めに" ■"真円は菱形に映るので四隅を膨らませる。Gは円形としては広い" ■"直角と曲線の連結部は緩める"
  • 私がWebサイトの配色を決める時の流れ

    ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の

    私がWebサイトの配色を決める時の流れ
    tomisyura
    tomisyura 2012/07/21
    ■"キーカラーはロゴから取るのが主流"
  • 2011年のウェブデザインのトレンドを振り返る

    2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境(スクリーンサイズなど)に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な

    tomisyura
    tomisyura 2011/12/09
    ■点線(まっすぐ&くねくね) ■サークル(G+) ■レトロ(フォントなど) ■リボン(垂れ幕みたいなやつ) ■『3つ』のエレメント ■ドロップシャドウの進化版「少しめくれてる」 ■隙間無しグリッド
  • 1