webデザイナー学習記録帳

webデザインやwebに関する学んだことの学習記録帳です

レッスン2 和の趣と高級感を演出する

こちらの本のレッスン2の記事です

web-expert.hatenablog.com

 

架空の旅館のwebサイトのサンプルが載っています

雰囲気
和風/落ち着いた/高級感
ターゲット
30代から60代
架空設定
隠れ温泉宿「朱泉閣」料金は他の温泉宿より少し高め
広い客室と豪華な料理で人気
老舗宿
主なお客様は、口コミとリピーター
目的
新規来客数アップと認知度アップのためサイト立ち上げ
本に書いていあるポイントとしては
老舗旅館なのでしっとり和風に
雰囲気環境が伝わるように写真は大き
縦書きレイアウト
予約ができるかすぐわかるように
上品に魅せるために大きい動きにせずシンプルに
配色は日本を感じさせる落ち着いた配色
和紙などの質感で和風を表現

まずは、サンプルサイトのワイヤーフレームを書いてみます

18ページに先生が手描きて描いたワイヤフレームの見本サンプルが載っているのでそれを参考にします

方眼紙までは、用意したのですが

先生のを見るとまずは、ピクセルはワイヤフレーム段階では描いていいないので、私もそうします

(これは、ケースバイケースで人によってやり方が違うと思いますが)

 

描いてみたのですが、ワイヤーフレームというよりは、模写になってしまいました

f:id:lovedeluxe5914smh:20151017214911j:plain

 

そこでもう一度ワイヤーフレームについて学ぼうと思い

スクーのこちらの動画をみました

Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 - webデザイナー学習記録帳

 

ワイヤフレーム段階でかなり描き込む人と、ただの四角と丸などの人もいたり

それぞれの方達が自分のやり易いやり方でやっているんだなと思いました

 

本の真似をして、id名とクラス名をイラレを使用して

つけてみました

f:id:lovedeluxe5914smh:20151017220919j:plain

 明日は、さらに進めていこうと思います!