Webデザインの基本
- http://webdesignrecipes.com/4-factor-of-designing/
- http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/
- http://07design.net/blog/?p=237
- http://07design.net/blog/?p=338
- 効果的なミニマルデザインと退屈なデザインの境界線 | Webクリエイターボックス
- ホワイトスペースを使ったウェブデザインの考え方 - バニデザノート
- ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。 (フェンリル | デベロッパーズブログ)
上記の7サイトは文字や画像の配置やレイアウトなどWebデザインの基本的なことが書かれた記事です。どの記事も気合を入れて書かれたものが多いので、すべてに目を通しておくと良いと思います。
タイポグラフィーとフォント
Webデザイン業界の人がよく使うであろうフォントの一覧。ここを参考にフォントを決めると良いと思います。
タイポグラフィの基本。どういった場面でどういったフォントを使うべきか。
文字組の基本。実際の広告やWebに使われている文字組を例にとって話が進んでいくのでわかりやすく、すぐに実行できるものが多いです。
CSSのfont-familyにはどのフォントを選択すべきか。MacとWindowsどちらの環境からでも美しく文字を見せるために。
素材の作り方
Webデザイン制作で使うべきツールとその役割(Photoshop、Illustrator、Fireworksそれぞれツールの役割と使いどころ)
- http://webdesignrecipes.com/photoshop-layer-style-and-1px-webdesign/
- Webデザインにおける、1pxへのこだわり | Parkn' Park
- http://blog.we-boxes.com/design/web-design-12-tips/
- 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス
- 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス
上記の5サイトはWebサイトでよく使われているようなボタンや背景、パターンなどの作り方を1から解説してあります。
レイアウトの作り方
配色、フォント選びからWebデザイン作成までのWebサイト作成の流れ。
- http://webdesignfan.com/create-a-portfolio-web-layout-in-photoshop/
- Photoshop a Paper Texture from Scratch then Create a Grungy Web Design with it!
上記の2サイトは英語のサイトですが、Photoshopを使ったWebレイアウトの作り方を1から細かく解説してあります。
Webデザインの参考
Web制作会社のリンク集まとめです。Web制作会社のHPなのでWebデザインの参考になるものが多いです。
参考になるWebデザインのリンク集のリンク集です。