【WEBスクール】黒歴史デザイン公開!!デジタルハリウッド主婦ママクラスWEBデザイン編

デジタルハリウッド主婦ママクラスWEBデザイン編

 

マッシュ

こんにちは!デジハリに通っていた@mush_designer です。

 

この記事はこんな人におすすめ!
  • WEBスクールの思い出- WEBデザイン編-が知りたい人
  • はじめてWEBデザインをやった感想や指摘されたことが知りたい人

 

WEBデザインの各パーツやデモサイトを制作した感想指摘されたことをまとめました。

わたしの黒歴史のデザインである意味、貴重なブログになっています。

どうぞ、笑ってご覧ください。

各パーツを作る課題

Photoshopの基本的な使い方を学んだ後はWEBサイトの各パーツを作る課題を行いました。

各パーツは書き出しまでやって提出します。

当時はスライス機能。

 

保存方法で「PNG」「JPEG」「GIF」を選択するのですが、どれを選んでいいのか分からず先生に何回も聞きました

 

MEMO
スライスとはWEBサイトで使用する画像を複数に分割する機能。今はアセットでやっている人が多いです

バナー

バナー

まずはバナーです。

先生からのアドバイス

  • もっと立体的に

 

加工して立体的にしてみました。

 

バナーはクリックしてもらえるようなデザインが理想ですが、全然できていませんね(笑)

すぐにOKは出たものの、自分から見ても微妙です。

ボタン

ボタン

次はボタンです。

先生からのアドバイス

  • デザインが古い
  • 実際のボタンのサイズで作る

 

かなり大きめに作ってしまったのですが、実際のボタンのサイズで作るようにと。

検証ツールで大きさを確認し、作りなおしました。

メニューバー

メニューバー

最後にメニューバーです。

先生からのアドバイス

  • デザインが古い
  • 最新のデザインを見るように

 

チロルチョコを連想させるデザイン(笑)

今はシンプルでフラットなデザインが流行っているよと教えて頂きました。

 

 

温泉施設デモサイト課題

WEBデザインの課題は温泉施設のデモサイト2ページでした。

自由にレイアウトしてしまったのですが、先生からはワイヤーフレーム通りに作るように指摘され、作りなおしに。

せっかくなので、自由レイアウトとワイヤーフレームレイアウトを両方紹介します。

※テキストと画像素材は変更済みです

自由レイアウト

自由レイアウト

まずは自由レイアウトの紹介です。

先生からのアドバイス

  • ワイヤーフレーム通り作ること
  • 1pxもずれないように
  • バナーが合ってない
  • トップページと下層ページのデザインに統一感を出す

 

「実際のお仕事でワイヤーフレーム通りに作らないのはNGだよ」と指摘されました。

ここは大反省です。

 

MEMO
ワイヤーフレームとはモノクロの構成図のことです

 

「1pxもずれないように」と指摘され、細かいなと思いましたが、コーディングするときの目安になります。

WEBデザインのお仕事は分業制のことが多い。

コーディングをする方が作業しやすいデザインにすることは大切だと思いました。

 

トップページと下層ページのデザインの統一については修正後のものなのでわかりづらいかもしれません。

デザインに統一感がないと、ホームページを見た方が「違うサイト?」と感じ、サイト離れにつながります

 

ワイヤフレームレイアウト(修正後)

ワイヤーフレームレイアウト

こちらは特に指摘なし。

今、見ると直したい所はあるけれど、成長してる!!と思いました。

まとめ

いかがでしたか?

今回は黒歴史のデザインを掲載しているので、公開するのに緊張しました。

 

こんなデザインを作ってたんだと懐かしい気持ちと成長してると実感できたのはよかったです。

たまには過去の作品を振り返るのもいいですね。

 

それではまとめです。

 

  • わたしのWEBスクールの思い出- WEBデザイン編-は画像の保存方法が分からなかった、作ったデザインが古かった、ボタンは実際の大きさで作る
  •  はじめてWEBデザインをやった感想や指摘されたことはワイヤーフレーム通り作ること、1pxもずれないようにすること、トップページと下層ページに統一感を出すこと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です