タグ

レイアウトに関するsnowfoxdollのブックマーク (10)

  • レイアウトの視点から考える、伝わるプレゼン資料の構成要素(追記あり) |プレゼンデザイン

    シンプルな「表紙」 表紙はシンプルに。具体的には≪タイトル≫と≪CI(コーポレートアイデンティティ。ロゴマーク、提供者名)≫を記載しましょう。原則、これだけあれば十分です。顧客名や作成日は、そのときどきに応じて。 提案書や企画書で大切なのは、何よりも中身。といっても実際には諸処の事情が関係することはもちろんですが、やはり表紙のイラスト・写真選びに時間を費やすよりも、コンテンツを練り込むことに注力したいものです。 章立ての切り替わりを印象づける「目次」 目次は、資料の内容を一覧化して全容を示すほかにも、大切な役割があります。それは≪読み手を安心させる効果≫と≪トピックを切り替える機能≫です。 前者は、普通に目次を書きさえすれば、その恩恵を得ることができます。人は、先の分からない道を進み続けることに不安を感じる生き物です。つまり、冒頭部で資料の全容を知らせることにより、読み手に安心して資料を読

    レイアウトの視点から考える、伝わるプレゼン資料の構成要素(追記あり) |プレゼンデザイン
  • 最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材(PSD, AI, Sketch) -UI Tiles

    最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd(72種類のレイアウトとチャート) .ai(72種類のレイアウトとチャート) .sketch(72種類のレイアウトとチャート) .png(72種類の各レイアウト) 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。

    最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材(PSD, AI, Sketch) -UI Tiles
  • まさに今、読むべき一冊「現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3」 / Maka-Veli .com

    友人を共著で書いたというので購入。 予想以上に面白かったのでご紹介です。買って良かった! 内容はというと、 例えばこのように最近のトレンドについて具体的なことが書かれていたり 役立つツール集のページがあったり 参考になるサイトや書籍のまとめがあったり プロトタイピングツールの紹介がまとめられていたり 具体的に導入方法も紹介されていたり 総ページ数160ページでびっしり盛りだくさん書かれているので読んだ後に色んな知識が得られるのはもちろんなのですが、Amazonレビューにもあるように著名な方々が書かれてる事もあって、デザインに対するさまざまな視点だったり考え方だったりを汲み取って読んでいくのが非常に楽しめる一冊でした。 友人から一言。 @maka_velicom この度は、ご紹介いただきありがとうございます。感想としては、今回は突然執筆のお話をいただきバタバタで終わり

    まさに今、読むべき一冊「現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3」 / Maka-Veli .com
  • デザインのレベルを上げる!レイアウトやタイポグラフィに関するまとめ - コムテブログ

    TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 1.アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ

    デザインのレベルを上げる!レイアウトやタイポグラフィに関するまとめ - コムテブログ
  • オンライン・デッサン講座|Atelier You Art

    アトリエ遊では誰もが好きな時間に好きな所でデッサン上達できるように、オンラインでデッサンの見方、描き方の秘密を公開します。 よく言われるようにデッサンは絵画、デザイン、建築、映像、、、などいろいろな分野に役立ちます。デッサンを勉強する内容はオンライン、オフライン共に色々ありますが、このnoteページではその中から特にこれだけは知っておきたいという内容をできるだけ分かりやすくまとめてみました。 また画面の見方を頭で理解するだけでなく、実際に自分で描ける様になりたいという人には、スケッチブックや鉛筆を使ってどこでもできる練習課題も用意してありますのでご自由にどうぞ。 紙に描く場合だけでなく、パソコンなどで画像を作る時にも効果的で、イメージ作りがより確実でスピーディーになるはずです。 コース内容画面の見方 1: 構図の種類 2: 形の取り方 3: プロポーション 4: 空間と遠近感の出し方(パー

    オンライン・デッサン講座|Atelier You Art
  • WebデザイナーとPhotoshop【後編】 基礎の「き」を修めよう! | Web屋のーりー

    Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/nori44/nori44.jp/public_html/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524 前回のWebデザイナーとPhotoshop【前編】に引き続き、この【後編】でもウェブサイトをPhotoshopで作っていく流れを追っていきましょう! もくじ レイアウトがだいじ、というお話 レイアウトは、とにかくだいじです 写真素材をそろえる 写真の配置 写真にマスクをかける シェイプツールでパーツを作る 写真のサムネイ

    WebデザイナーとPhotoshop【後編】 基礎の「き」を修めよう! | Web屋のーりー
  • バナーレイアウト20選

    効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない3つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし

    バナーレイアウト20選
  • なぜ、デザインに統一感が必要なのか? | ブログのスイッチ

    良くデザインには統一感が必要と言われます。 私もWEBデザインを始めたなんか頃は、「統一感」について良く指摘されたものです。 WEBに限らず、様々なクリエイティブデザインには統一感が必要です。 では、なぜデザインに統一感が必要なのでしょうか? 使いやすくなる。 webサイトのデザインにおいては、とくに「統一感」は重要です。 WEBサイトの場合、ページ数が多いもので100ページ以上になる場合があるので、 それぞれのページでレイアウトが違ったりすると、非常に使い勝手が悪くなります。 例えば、ナビゲーションひとつとっても、各ページで配置が違っていたらどうなるでしょうか? ユーザーは、サイト内で迷いこんでしまい、目的のページへ到達することができなくなってしまいます。 ユーザーはサイトに訪問した時点で、 無意識にどこになにがあるか、ページのレイアウトを認識しています。 ですので、サイト全体のレイアウ

    なぜ、デザインに統一感が必要なのか? | ブログのスイッチ
  • デザインに説得力を!!基本のレイアウト表現のやり方4つ | WP-E (仮)

    こんにちわ!確定申告がまだ終わっていないまゆげです。最近はリアルでも、WordPressに関することやディレクションのことばかりなので、たまにはデザインのことについても熱く語っておきたいと思い、基的なことですがしっかりとまとめてみました! 意味を持つデザインを作るために Webデザインを考える際には、誰しもがインスピレーションを求めて参考になるようなサイトを見てまわることはあると思います。そんなときに 「あッ!」 と思わせるデザイン、ありますよね。ただ見惚れるだけでなく、それを 「なぜ?」 と考える癖をつけておくと、自分の知識を深める一つの材料になるかもしれません。 目次 シンメトリーレイアウト 対角線を意識したレイアウト 三角形を意識したレイアウト 黄金比・白銀比のレイアウト シンメトリーレイアウト シンメトリーとは、配置が対称であることです。よく目にするデザインは鏡像対称性をもったデ

    デザインに説得力を!!基本のレイアウト表現のやり方4つ | WP-E (仮)
  • レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name

    デザインには意味があります。物を配置するにしても、なぜそれを配置するのか?なぜその色味なのか?なぜそこに置くのか?など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真

    レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name
  • 1