ブックマーク / coliss.com (10)

  • 新聞・雑誌風レイアウトでみかけるウェブデザインの12のトレンド

    新聞・雑誌風レイアウトのニュース系ウェブサイトでみかける特徴的な12のトレンドをVandelay Designから紹介します。 Trends in News and Magazine-Style Web Design 1. ホワイト(明るい)背景 新聞・雑誌風レイアウトのサイトではコンテンツの比重が高く、ホワイトか明るい背景にする傾向があります。それは一般的にリーダビリティのために良いことです。 もちろん、例外もあります。しかし、メジャーなニュース系ウェブサイトではほとんどがホワイトの背景を使用しています。 True/Slant 2. グリッドベース 新聞・雑誌風レイアウトのサイトのレイアウトには、グリッドベースのレイアウトが採用されています。多くのコラムやテキストが配置されるため、グリッドはこういったタイプに非常に効果的です。 グリッドはコンテンツを適度なスペースで配置し、より読みやすく

  • 基本的だけど大切なタイポグラフィのシンプルな14のルール

    ウェブデザインをはじめ、印刷にも役立つ基的だけど大切なタイポグラフィのルールをfred designから紹介します。 Simple rules for good typography もしくは、Typophile 下記は、その意訳です。 はじめに ここにウェブや印刷のためのタイポグラフィに役立つ基的なルールがあります。もちろん、このルールは基であり、そしてルールは破られることを意図されているものです。 しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。 1. たくさんのフォントを使わない ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。 この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。 2. ヒエラルキー ページ内の階

    eripyon-pyon
    eripyon-pyon 2010/05/13
    4つ以上のフォントサイズを使用しない。テキストは常に左詰め。
  • デザインやファッションに取り入れたい、2010年のトレンドカラー

    Pantoneが2010年、セレクションしたカラーは、熱帯の空と海を思わせるトルコ石の「ターコイズ」。 Color of the Year for 2010: PANTONE 15-5519 Turquoise 穏やかなブルーと爽やかなグリーンがあわさったターコイズは健康で安心なイメージを与え、慈悲とヒーリングを象徴する色として親しまれています。 ターコイズは男女の区別無く、ファッションでもインテリアにも最適なカラーです。 使い方としては、ブラウンを加えて少しエキサイティングにしたり、レッドを加えてピンク系にしたり、深いブルーを加えて海色にしたり、グリーンを加えて生き生きさせたり、イエローグリーンで新鮮なトレンドをつくりだすことができます。

    eripyon-pyon
    eripyon-pyon 2010/05/13
    穏やかなブルーと爽やかなグリーンがあわさったターコイズは健康で安心なイメージを与え、慈悲とヒーリングを象徴する色として親しまれています。
  • Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント

    Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。 15 Design Tips to Learn From Apple 下記は各ポイントを意訳したものです。 サイトのキャプチャは可能なものは日サイトのものにしています。 はじめに Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。 ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。 1. Keep it Simple アップル Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。 例えば、空港でトイレを探していると想像してくだ

    eripyon-pyon
    eripyon-pyon 2010/05/13
    本当に重要なものを引き立たせる。統一感を持たせるためにグリッドを効果的に使いアイコンで無駄な説明を省く。シンプル。
  • ボタンのデザインに悩んだら参考にしたいサイト -House of Buttons

    House of Buttons ボタンのコレクションは上記トップページからも閲覧できますが、月ごとにまとめられたアーカイブページも用意されています。

  • シンプルなデザインの各種コンテンツが揃ったウェブサイトの無料テンプレート -Aurelius

    ビジネスサイトでも、個人のポートフォリオサイトでも無料で利用できるスタティックなテンプレートファイルをNettuts+から紹介します。 Free "Aurelius" Website Template テンプレートは、XHTML 1.0 Transitional、CSS2.1(一部CSS3)を使用しており、上記キャプチャのインデックスページではjQueryで打ち出しの要素がアニメーションで回転します。 テンプレートファイルには各種コンテンツ用のものが用意されており、配下ページは下記のものが揃っています。

    eripyon-pyon
    eripyon-pyon 2010/05/13
    これはシンプルだし使い勝手がよさそう!ポートフォリオサイト作る時に参考。
  • よりリッチで、よりフレンドリーになったウェブデザインの現状 -2010年のトレンド

    The Current State of Web Design: Trends 2010 下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。 はじめに ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。 そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール(CSS3, HTML5, 埋め込みフォントなど)、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。 私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力

    eripyon-pyon
    eripyon-pyon 2010/05/13
    webデザイン2010年のトレンド。勉強になる
  • [JS]ページにグリッドを重ねてカラムのサイズを自動算出するスクリプト

    ウェブページにグリッドをオーバーレイさせて、レイアウトのチェックができるスクリプトをDev Growから紹介します。 デモページ カラムの幅と高さの数値は自動的に表示されるもので、カラムとスペースの数によって算出されています。 グリッドを表示するためには、予め下記の数値を記述する必要があります。 `※デフォルト値は設定されています。 横のカラムの数 横のスペースの数 横のカラムの高さ 縦のカラムの数 縦のスペースの貸す 縦のスペースの幅 オーバーレイの色 オーバーレイの透明度

    eripyon-pyon
    eripyon-pyon 2010/05/13
    便利そう!
  • 商用利用でも無料のイラストやアイコンなどのベクター素材集 -Love Vector

    Love Vector 登録されている素材は、オリジナルのものをはじめ、他の作者によるイラストやアイコンなど多数あります。 目的の素材は検索、タグ、カテゴリから探すことができ、下記にカテゴリの中からいくつかピックアップしました。

  • グラデーションを使用しないでウェブデザインをする方法

    なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか? グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。 多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。 ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。 WeFunc

    eripyon-pyon
    eripyon-pyon 2010/04/20
    確かにwebデザインは困ったらグラデを使用しがちだ。
  • 1