Entries

スポンサーサイト  
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事にトラックバックする(FC2ブログユーザー)
http://snorken.blog78.fc2.com/tb.php/218-0711534f

トラックバック

コメント

コメントの投稿

コメントの投稿
管理者にだけ表示を許可する

WORKS:WEBデザイン 不朽の表現  
WEBデザイン 不朽の表現
 
WEBデザイン 不朽の表現
 
年末から年始かけて(表紙および目次・扉などを)作業させていただいた本「WEBデザイン不朽の表現」が出来上がりました。「不朽」というなかなか難しいタイトルなので落としどころに迷いましたが「箔」のチカラを借りて「時間」を少しコントロールできた顔になったかと思います。手に持った印象も少しズンとくる重さで調度いい感じじゃないでしょうか。内容としてはWEBデザインだけでなく、デザイン・レイアウトに関する基本的な考え方~実務に至るまで幅広くサポートしている本かと思います。(WEB)デザインを仕事にしたい興味のある人は一度目を通しておくと表現できる幅を広げることができると思います。1月18日発売です。
※中面フォーマットは「細山田デザイン」レイアウトは「DNPメディア・アート」 

【URL】WEBデザイン不朽の表現 すべてを極める最新手法 (インプレスムック エムディエヌ・ムック)http://www.mdn.co.jp/di/book/44144/
 
WEBデザイン 不朽の表現

目次【WEBデザイン不朽の表現-すべてを極める最新手法】



CHAPTER1 「カッコいいWEBをつくる30の条件」

01 万能色「黒」を使う
02 いちばん印象を残す要素を決める
03 テクスチャで存在感ではなく質感を出す
04 フォントファミリーは3種類までにする
05 ルールを破るためにルールをつくる
06 色に深みを与える
07 メニューの文字は画像にする
08 モノトーンのグラフィックを扱う
09 文字のアキ・ツメは手動で行う
10 白地や余白をコントロールする
11 メニューの動きをスムーズにする
12 文字サイズかウエイトの一方に変化をつける
13 グラフィックのテイストを生かしきる
14 小さな「差」を使い分ける
15 極限まで情報を絞り込む
16 アクセントカラーを効果的に入れる
17 一定の目線に合わせて奥行きをつくり込む
18 直線と曲線を使いこなす
19 ロゴをデザインに生かす
20 センスのある書体を選ぶ
21 派手さを抑えた上品な「赤」を使う
22 縦書きや縦組みで文字を読ませる
23 写真のカット、トリミング、配置を生かす
24 ダイナミックな広がりや開放感を演出する
25 欧文フォントを使ってメリハリを出す
26 同系色を生かして配色する
27 生活感を感じさせず非日常を演出する
28 動きをシャープに表現する
29 上品な透明感を取り入れる
30 ストーリー性のある仕掛けを用意する




CHAPTER2 「印象どおりのWEBデザインをつくる」
 
かわいい
やさしい
クール
ゴージャス
ロマンチック
シック
上品
神秘的
怖い
にぎやか
お茶目
楽しい
リラックス
コミック
子ども
女性的
清潔
信頼
健康
エコ
ナチュラル
洗練
インダストリアル
ストリート
退廃的
パンク
デジタル
アナログ
モダン
伝統的
レトロ
中華風
洋風
和風
アート
無機質
シャープ
シンプル



CHAPTER3 「WEBパーツ装飾デザインテクニック」
 
01 マウスオーバーでズームするサムネイル
02 アナログ感のあるちぎったテープのデザイン
03 リンク先をいイメージしやすいアイコン
04 グラデーション効果の見出しテキスト
05 バックグラウンドに溶け込ませた背景画像
06 メッシュ処理を施して透かせたボタン
07 ページ全体が縁とられた独特のページレイアウト
08 画像を使用しない汎用性の高いタイポグラフィー
09 カラフルでポップなレインボーのドット背景画像
10 草模様のフレームのような写真のデザイン
11 すっきりまとめた長い英文の見出し
12 スポットライト効果で演出するロゴ
13 見栄えのよいパンくずリスト
14 区切り目をあいまいにした特徴的なレイアウト
15 カスタムシェイプでつくる複雑な模様の背景画像
16 画像で飾るフォームのパーツデザイン
17 見た目と使いやすさを両立させたページネーション
18 傾けて配置するデザインパーツ
19 ウインドウサイズに応じてサイズが変動する画像
20 シールラベルのような記事の日付デザイン
21 はみ出し+縦書き見出しで余韻のあるレイアウト
22 テキストの可読性を考慮した迫力のある背景画像
23 ポスターのような古い紙のテクスチャ
24 ページに広がり感をもたせる背景画像
25 背景をぼかして一部分を浮き立たせた画像
26 マウスオーバーで飛び出すナビゲーション
27 インスタント写真風のにぎやかなサムネール
28 透かしを入れたような表現の背景画像
29 紙がめくれたような目を引くナビゲーション
30 背景画像でつくる角丸のフォーム
31 スタイリッシュなサムネール画像のフレーム
32 ペンツールを使って描く抽象的な線画
33 マウスオーバーで反転する見出しテキスト
34 イメージ画像の上に透過PNGを重ねた表現
35 テキストがシャープに飛び出す別ウインドウ
36 スポットライトが当たったような背景画像
37 陰影のあるゴージャスなサーチボックスのデザイン
38 ページに彩りを加える画像の固定配置
39 柔らかな印象を与えふわっと広がるメニューバー
40 アナログ感のある背景や枠のサムネール
41 エリアを重ねたような立体感のあるレイアウト
42 グリッドシステムを使ったマルチカラムレイアウト
43 振動させてダイナミックな動きを見せるブラウザ表現
44 視覚表現を高める斜めのナビゲーション



CHAPTER4 「魅せるWEBデザインを生む4大要素」
 
introduction デザインの質を左右する4大要素

01 [立体感]
  画像やアイコンに影をつけ立体感を出す
  ボタンやバナーなどへグラデーションを施す
  背景など広い範囲へグラデーションをかける
  デザインパーツにハイライトを入れてツヤを与える

02 [質感]
  テクスチャを使って印象をつくりあげる
  パターンを使ってWebサイトを装飾する
  デザインに印象的な模様を取り入れる
  ツヤorマット2大質感を制する
  押せそうな簿店でユーザーをクリックに誘導する

03 [バランス]
  ページ内のコンテンツの比率を考える
  色と色のバランスを考慮してWebデザインを行う
  ロゴやイラストの配置を工夫してアクセントにする
  画像と文字でバランスのとれたよい関係をつくる
  バランスをとって文字や文章を並べる

04 [イメージ表現]
  必要な写真のサイズを見極めてトリミングする
  自分で撮影した画像のクオリティを向上させる
  与えられた写真を最大限に活用するために加工する
  サイトのテイストに合わせて写真を加工する


MdN Interactiveより引用

 

 
 
 
 
この記事にトラックバックする(FC2ブログユーザー)
http://snorken.blog78.fc2.com/tb.php/218-0711534f

トラックバック

コメント

コメントの投稿

コメントの投稿
管理者にだけ表示を許可する

Appendix

プロフィール

snorken

Author:snorken
出版社のインハウスデザイナーとして勤務。元気が余って退職。フリーランスのグラフィック・エディトリアルデザイナーとして活動中。周辺の出来事を大小問わずボソリとつぶやいてます。
WEB:http://www.snorken.jp
Twitter:http://twitter.com/snorken
Tumblr:http://snorken.tumblr.com/
お問い合わせ、仕事の相談・依頼は、
info[at]snorken.jp まで。
※[at]を@へ変換してください。

カレンダー

09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

タグクラウド

全記事表示リンク

全ての記事を表示する

ブクログ

仕事で関わった本たち
 

メールフォーム

問い合わせなどは、コチラにお気軽にどうぞ!

名前:
メール:
件名:
本文:

ブログランキング

Amazoneおすすめ

 

Googleからのおすすめ

 

AD

ウイルスバスター トレンドマイクロ・オンラインショップ   ウイルスバスター公式トレンドマイクロ・オンラインショップ   ブックオフオンライン    

QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。