web-portfolio-design

3日でWebポートフォリオを作ろう!リソースや情報等など(2日目 デザイン編)

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

ポートフォリオ2日目では、デザインをしていきます。ワクワクしますね!うひょー。
見た目になってきますからね!結構重要になってきます。焦らずゆっくり、楽しみながらデザインしていきましょう。

1日目-
3日でWebポートフォリオを作ろう!リソースや情報等など(1日目 設計編)

2日目-
3日でWebポートフォリオを作ろう!リソースや情報等など(2日目 デザイン編)

3日目 -
3日でWebポートフォリオを作ろう!リソースや情報等など(3日目 コーディング編)

前回の記事では、3日でWebポートフォリオを作ろう!リソースや情報等など(1日目 設計編)では、ワイヤーフレームを書いて行きました。
そのワイヤーフレームをもとにし、今回はデザインしていきましょう。

Webデザインしていく時はAdobe Fireworks、Photoshop、Illustratorなどのツールを作っていくのが一般的です。
上記ツールは、以前までは少し高価でだったため買うのに、躊躇してしまうことがありましたが、現在はAdobe Creative Cloudのメンバーになりましたら、月/3,000〜円からAdobeの製品を使えるようになります。

今回はPhotoshopをメインに使ってデザインしていきます。イラストなどはIllustratorを使って書いていきます。

ページのデザイン

ロゴをデザイン

まずはロゴをデザインしていきましょう。

ロゴを制作する際の参考サイト

WE LOVE LOGO – http://www.welovelogo.com/
ロゴをデザインするときの8つのルール
ロゴをデザインするときに使えるチュートリアル&テクニック30個まとめ
ロゴ作成の手順を実例とあわせて紹介!

各パーツを作る

次にパーツを作って行きましょう!
ロゴからパーツを作っていく方法もありますね!

ヘッダー、コンテンツ、フッター


ヘッダー部分や、コンテンツ部分のデザインを進めていきましょう。
(僕のポートフォリオでは、あまりパーツ部分がなかったのですが、、、)

サイドバーがあるサイトなどでしたら、サイドバーなども!つまりパーツがあるところは全て作りこんでいきましょーう。

背景

背景があるデザインにする予定でしたら、ごりごりっとデザインしていきましょーい!

パーツの配置なども調整して、トップページを仕上げちゃいましょう。


ソーシャルボタンも配置。トップページの完成!

下層ページも作って行きましょう

Aboutページ


Aboutページのワイヤーフレームではこのように書いていました。
こちらのページではプロフィール、自分のスキルを載せたいと思います。(内容についてはwebポートフォリオを制作する時のポイント、参考サイト、デザインを参照)


デザインはこのようになりました。ヘッダー、フッターはトップページと共通です。

スキルを表すときなどに、ツールのアイコンや、星のアイコンを使ってレベルを表してみるのがわかりやすいかなとおもいます。
もちろん違う表し方もあると思いますが、今回はプロフィールに使えるアイコンを少しご紹介します。

アイコン

Adobe Master Col. CS5 Logo PSD
Adobe CS5のアイコンを忠実に再現しています。

Review & Rating Stars… (PSD)
星のアイコンです。レーティングレベルなどを表すときなどに使えそう!

Multi-coloured Progress Bars (PSD)
こちらは星ではなく、プログレスバーです。バーの長さでスキルレベルを表すのもわかりやすいかも!?

Portfolioページ


Portfolioページのワイヤーはこのように書きました。
サイトのスクーンショットをトップページ、下層ページ数枚、載せれるようにしたなーと思っております。


デザインではこのようになりました。
アイコンなどを使い視覚的にわかりやすいように。

フリーのpsdアイコンセット


350 pixil perfect icons – http://brankic1979.com/icons/
350種類のアイコンセットです。小さくてもどれもクオリティが高くてたまらないです。ダウンロードしておいて損はないはずです!


160 Tiny Icons ‹ 365psd365psd – http://365psd.com/day/2-209/
こちらは160種類のメタリック風のアイコンセットです。

Contactページ

Contactページも同じようにデザインしていきましょー!!

まとめ

Webポートフォリオ制作2日目は

  • ワイヤーフレームを見ながら、デザインしていきましょー。
  • アイコンなどを使って視覚的にわかりやすく!

次はコーディング編です!

おすすめ記事

  1. 新卒webデザイナーで採用してもらえるような紙ポートフォリオの作り方
  2. 魅力的なパワーポイントを作る際に参考になるデザインのいろいろ
  3. 色々なサイトを参考にボタンを作ってみました【psd付き】
  4. 過去に作ったデザインを見て素人っぽいデザインから抜け出したい方法!
  5. 国内の素敵なwebデザイナーさんのポートフォリオのまとめ 2012/8/18

関連記事

PAGE TOP