タグ

layoutに関するtepeのブックマーク (5)

  • 被写体を美しく配置する、黄金比を取り入れたカメラの構図

    The Lazy Rule of Thirds カメラの構図は、1:1.618の黄金四角形をベースにし、フィボナッチスパイラルのラインに沿って被写体を置いていきます。

    tepe
    tepe 2009/04/27
  • レイアウトデザインを学ぶためのチュートリアル決定版 – creamu

    「AREA 1」で、60 Layout design tutorialsと題してレイアウトデザインを学ぶためのチュートリアルが紹介されています。 12ページあって見るのは大変ですが、WordPressデザインやポートフォリオサイト、コーポレートサイトなど、クールなデザインレイアウトのチュートリアルがたくさん見られます。 以下にざっとご紹介。 ↑はGreenPress WordPress Theme Design。 Website Gallery Layout Design Tutorial Site Blog Design Chocolate Pro WordPress Style Layout Portfolio Web Layout #5 Tutorial Wedding Layout その他は以下からどうぞ。 » 60 Layout design tutorials デザインに迷った

  • 黄金比をサイトのデザインに取り入れる簡単な3つの方法 | コリス

    その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値

  • モダンCSSにおける黄金比とは? | CREAMU

    CSSでのレイアウトに黄金比を取り入れたい。 そんなときに参考になるのが、『Golden Ratio in modern CSS』。モダンCSSにおける黄金比だ。 このエントリーでは、960pxのdivがある場合、960 / 1.62 = 593px が左カラム、960 – 593 = 367pxが右カラムになるといったように、黄金比を取り入れたレイアウトの方法が解説されている。 その他にも、 line-height = font-size x 1.62 paragraph margin = paragraph line-height x 1.62 / 2 といったような設計の例が紹介されている。 結論としては、 Many people will argue, that this technic is an utopia and we cannot spend time coding ne

  • 第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum

    第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ

    第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
  • 1