スポンサーサイト

  • --/--/--
  • このエントリーをはてなブックマークに追加

スポンサーリンク

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

デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)

  • 2011/09/20
  • このエントリーをはてなブックマークに追加

スポンサーリンク

デザイナーから学ぶwebデザイン
webデザインの入門書を買おうか迷っている方。
もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。

また、その記事で、もっともぐっときた台詞もチョイスすてみました。
どんな想いで記事を書かれているかというのも大事かなと。

こちらもあわせてどうぞ。
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報

IT/Web業界に強い転職サイトGreen

とりあえず時間のない人はこの3つだけでも食べて


デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
デザインの4大原則
最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。

例えばそれがセンスと呼ばれることもありますし、Googleのように、数字(集合体データ)によってデザインを壊す場合もあります。ルールは、窮屈に思えることですが、先を考えると、自分を楽にしてくれるものです。

何でこれがダメなんだと思った時には再度基礎を思い出せばよいだけですが、それが分からないと、結局道をはずしたまま帰ってこれなくなるからなんですよね。そんな基本的なところを学べる記事となっています。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]
この記事はこの本の内容にそって、噛み砕いて説明されております。

ここで出てくる名言。熱いっすねぇ。

「ルールを破るためには、まずルールを知らなくてはならない」




[Webデザイン] 文字組みについて本気出して考えてみた
文字組について
文字組みについての基礎。

とにかく凄く分かりやすい画像で解説されていますので、読み終えたらおそらく「ゴチになります」とつぶやいてしまうかもしれないです。実際に文字組みについて非常に優れた基礎となるはずです。

ただ、解析屋の私としては、webデザインが、紙広告っぽくなるとクリック率が落ちると言う現実も知っているので、あくまでも基礎を押さえた上でwebサイトに合わせたデザインが求められるかもしれませんね。

ここでも名言頂きました。

ぜひ意識していただきたいのが文字と文字の間のホワイトスペース。「文字と文字の間隔が均等に見えるように意識しながら手作業で調節することが大切」だと思っています。




デザインの要素と原則
デザインの要素と原則
デザインに使われる要素について触れられています。

それぞれのデザインのどこが、どう素晴らしいのかを理解する事で、初めてそのデザインを生み出せる、という考えのもと作られたエントリー。「ただ良い」ではなく「こうだから良い」と言えるように、それぞれどんな要素にエッジが効いているかを解説されています。

この記事のポイント

私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。




色彩スキル編


webデザイナーの色彩スキルを磨くエントリーまとめ
色とデザインを学ぶ
色彩については未だ過去のまとめ記事が通用しそうなので大幅カットで。
色彩力を固めるエントリーのまとめです。

ここでのポイント。

色彩感覚とは『センスの問題』ではなく、たんに勉強不足な事が多い。



もう一点。以下も参考にどうぞ。




タイポグラフィ


基本的だけど大切なタイポグラフィのシンプルな14のルール(意訳記事)
タイポグラフィのルール
タイポグラフィのルールとしての基礎が学べます。
実にシンプルにルールを分散化して説明されているため、分かりやすい。

以下もあわせてどうぞ
  • タイポグラフィの動画がかっこよすぎて鳥肌たった
  • クリエイティブタイポグラフィ61総まとめ

    • リンク元からこんな名言を頂きました。

      With knowlege and experience comes the decision if it is appropriate to stick to or break these rules.
      知識と経験をつむ事で、そのルールを破るべきかどうかを適切に判断できるようになる
      Simple rules for good typography




      ホワイトスペース


      ホワイトスペースを使ったウェブデザインの考え方
      ホワイトスペースとCSS
      webデザインの観点からみたホワイトスペースについてです。
      こちらはCSSのおさらいと一緒に進行しますので、webデザインの実践向けとなります。

      ここで感じたポイント以下。

      リズムが整っていれば、他の要素が主張したことが上手に伝わります。(中略)自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。




      もう一点。以下の記事もあわせてみてください。
      ホワイトスペース -十分に利用されていないデザインエレメント
      ホワイトスペースについて
      同様にスペースの使われ方について、優雅さや、ユーザビリティなどの観点から解説されています。
      これによって、また別の角度からスペースを考える切り口が増えます。

      以下のポイントを把握しつつ、デザインも一緒に学べます。
      • 優雅さと洗練さ
      • レジビリティとユーザビリティ

      翻訳記事のほうでも同様に素晴らしい言葉を発見したのでここに。

      Like so many other aspects of design, there is no set guidelines or rules for calculating the right amount of whitespace.(略) The best way to learn is experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for what is the right amount of whitespace.
      ホワイトスペースの設計には、ガイドラインやルール、規則などない。(略)学ぶ為の最良の方法は実験と、他の設計を研究し、調べる事。目を養い、正しい余白を探れるようになってください。
      Whitespace: The Underutilized Design Element | Tips




      フォント選びやレイアウト


      デザインの基礎力をワンランクアップしたい私の注意書き
      レイアウトやフォント選びの指標
      上で紹介したスペースなど、様々な事が書いてます。

      個人的にこの記事で注目なのが以下の
      「2の配置、レイアウトの仕方の基本と」と「4のデザインの印象にふさわしいフォントを選ぶ」です。

      ここで頂いたお言葉

      たくさん見て、触って、自分でも作ってみないとそういうデザインの引き出しが増えていきません。誰だって最初は失敗してあたりまえ。




      webデザイン


      少しの手間で大きく変わる、細部にこだわったWebデザインを
      1ピクセルのwebデザイン
      webデザインにて、後一歩、どこにどんなこだわりを持つかを考えたときの一つのアイデアの種として。
      1ピクセルにうっすらラインをいれたり、グラデーションをいれることで重みを調節したりと、色々と試せるようになってくるはずです。

      注目のポイントはここ

      デザインの授業の先生が言っていた言葉を未だに覚えています。「1 pixel line makes all the difference // 1ピクセルの線がすべてを変える 」



      いかがだったでしょうか。
      他にもこんな記事があるよというのがあれば是非教えてください。

      あと文字組の記事でも紹介されているこの本。
      デザインのルール、レイアウトのセオリー。
      デザインのルール、レイアウトのセオリー
      実は私ももっていて、困ったら使ってます。。

      それでは、また。



      スポンサーリンク

      トップへ戻る

      Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。