【デザイン】 Webサービスのデザイン過程晒してみた 【ブクログ プレミアム】

Webサービス「ブクログ」のプレミアム版について、紹介ページのデザインをしたときの過程です。四苦八苦したり絶望したりした様子がうかがえます。
プログラミング サイト制作 Illustrator Webサービス デザイン イラレ Design Webデザイン 晒し Web ブクログ Photoshop
74
ショコ @chocolatina
PC整理してたら、ブクログ プレミアムの紹介ページ作った時のファイルが出てきました。みなさん興味あるかな‥?絶望したり四苦八苦した様子がうかがえるので晒してみます。 #PPB_design http://t.co/FhlmBrhX
拡大
ショコ @chocolatina
ブクログ プレミアム紹介ページの完成したものは、こちらになります。是非ご利用ください! http://t.co/TTJBrHxu #PPB_design
ショコ @chocolatina
ディレクター @megsorin との話し合い。要件とターゲットを決定する。ブクログをよく使ってくださるユーザーさんに、よりよい価値を提供したいということ。 #PPB_design http://t.co/77O1sI9t
拡大
ショコ @chocolatina
(ちなみに晒すのは上司の許可取ってますので大丈夫です。ご心配ありがとうございます!) #PPB_design
ショコ @chocolatina
(晒すのは、デザイン中の内容なので、実際の月額料金や説明と異なる箇所があります。正式なものはこちらでご確認ください! http://t.co/TTJBrHxu#PPB_design
ショコ @chocolatina
ディレクター @megsorin からざっくりしすぎなラフがくる。ざっくりしすぎ!でもいいよ!センキュー!ブクログユーザーさんへの感謝の気持ちをお手紙として見せたいわけですね。 #PPB_design http://t.co/EcdSDyiL
拡大
ショコ @chocolatina
ちなみにわたし小山田は普段は、ブクログのパブーのデザインの仕事をしています。(前はレンタルサーバーヘテムルのデザイナーでした)。今回のブクログ プレミアムの仕事は、ブクログの @meganejunkie が多忙のための代打です。念のため。 #PPB_design
ショコ @chocolatina
ディレクター @megsorin から来たラフをイラレに起こして少し具体的にしてみました  #PPB_design http://t.co/KbJVsVf3
拡大
ショコ @chocolatina
本と手紙を同ページ内で見せるのはデザイン的にバランスが悪いような気がしてきました。手紙とヘッダー一緒にしてみる? #PPB_design http://t.co/00L5TKvt
拡大
ショコ @chocolatina
うーん‥そもそもユーザーさんがこのページで知りたい情報は何だろう?と原点に立ち返る。ユーザーさんが有料プランに求めるものって何だろう? #PPB_design
ショコ @chocolatina
ディレクター @megsorin との話し合いの結果、ページは、具体的に、有料プランで出来ることの紹介でよいのでは?となる。 #PPB_design
ショコ @chocolatina
ブクログとしての想いよりも、有料プランを使ったら自分の本棚がどんな本棚になるのか、を、ユーザーは知りたいと思う。話し合いの結果をデザインに反映。 #PPB_design http://t.co/06V21pjM
拡大
ショコ @chocolatina
あ、お昼休み終わりました。あとでまた垂れ流します! #PPB_design
ショコ @chocolatina
ここまでのデザインをブクログの @meganejunkie に共有。「本棚に吹き出し的に説明をつけると、機能が増えたときデザイン的に大変」というご意見をもらう。まったくその通りだ。 修正。 #PPB_design
ショコ @chocolatina
例えば数字をつけて参照させるとか‥?と思ってやってみたけど、全然違った。数字をつけて参照、ってそもそもユーザーさんにはわかりにくい。 #PPB_design http://t.co/BcjDXH9d
拡大
ショコ @chocolatina
うーん こうかな?‥うん、でかい!でも!すごく!イイ!! #PPB_design http://t.co/irDlqioP
拡大
ショコ @chocolatina
とりあえず一旦考えるのをやめて、Photoshopに持って行ってバランスを見る。うーん、うーん‥でかい‥orz #PPB_design http://t.co/qxsQkkkk
拡大
ショコ @chocolatina
なんとなくヘッダーがだめすぎる。プレミア感がない。 #PPB_design
ショコ @chocolatina
そもそもプレミア感ってなんだろう?と思考の旅に出る。2時間ほどgoogleイメージ検索で迷子になる。 #PPB_design
ショコ @chocolatina
整理しよう。[いまのデザインでだめなところ]ヘッダーのスカスカ感、色合い、キュンとしない。[いまのデザインでよいところ]本の形を使った視線の誘導 #PPB_design
ショコ @chocolatina
ヘッダーだけすべて取り払ってイラレでレイアウトしなおすことにする。盛大に散らかした努力の跡 #PPB_design http://t.co/SCmNWmcK
拡大
ショコ @chocolatina
この形で、@meganejunkie にも意見をきいて、修正。 #PPB_design http://t.co/h6yqXb85
拡大
ショコ @chocolatina
やっぱり本が薄すぎるような気がする。表紙も厚すぎるし。というわけで修正。#PPB_design http://t.co/sutOTjFi
拡大
ショコ @chocolatina
でもまだキュンとしない‥あとなんかシンメトリーすぎて怖い...てっとりばやくキュンとさせるには‥‥!キャラだ!!!! #PPB_design http://t.co/IJBmuZTo
拡大
ショコ @chocolatina
※おまけ:バランスをとるための色んな線。この線、一応使ったけど、最終的には割と適当に体感的に気持ちいいバランスに持っていった。 #PPB_design http://t.co/znMw4eoo
拡大
残りを読む(5)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?

ログインして広告を非表示にする
ログインして広告を非表示にする