1. まとめトップ

何かと話題のデザイナー板橋聡氏の実況Webデザインまとめ【第三弾】

話題のWebデザイナー板橋聡さんがTwitterでデザイン実況をされてたのが面白かったのでまとめました。以前にも2度ほどまとめましたが、いずれも評判がよくすごく勉強になったと言う声を多数いただいています。今回もかなりアツイのでDon't miss it!!

更新日: 2013年06月08日

you_gjさん

  • このまとめをはてなブックマークに追加
31 お気に入り 13957 view
お気に入り追加

予備知識

過去に炎上事件を巻き起こした"STUDYGIFT"のリニューアルに着手

デザイン実況やります。今回のデザインは昨年リリースした「Studygift」のリニューアルデザイン。頭での構想は出来ているのだけど、いい感じのところまでデザインがたどり着けるかは分かりません。とりあえず経過を書いてみます。 #MONO_design

ちなみにデザイン実況は「デザインプロセスで考えている事をリアルタイムでつぶやいていく」という実験です。初めて見る方は前回の記事を参考にして下さい matome.naver.jp/odai/213458040… #MONO_design

まずは今回のデザインでの最重要項目となるトップページから。現時点では全くの白紙状態 #MONO_design pic.twitter.com/XPx1l57EqP

とりあえずざっくりとナビゲーションを整理。この項目に沿って優先度を決めて行きます #MONO_design pic.twitter.com/GLe0HKOmvE

「最終的な目標は支援をしてもらう事 → ユーザーは人物を見て判断 → 人物紹介ページが最も重要 → そこの導線となるエントリー学生の一覧が最重要項目」と判断して学生のリストページ(=TOPかも)から作り始めます #MONO_design

リストへ入れる要素を検証。名前、写真、キャッチコピー、目標金額を記入 #MONO_design pic.twitter.com/H59fJfS45L

フォントの余白が変なので名前部分を10px下げ、同時にボックス全体の長さを10px足した&可視化して分かりやすくする為にメーターを追加。 #MONO_design pic.twitter.com/393kugOpdR

試しの色付け。ダサすぎて萎えるのでこの見せ方は却下だな〜、、、BOXの比率おかしいね。そしてインパクトが一切無くてあまりにも普通… #MONO_design pic.twitter.com/obgQCmttRV

単純にボックスのサイズが小さいからインパクトに欠けるのかを検証。だいたい2倍のサイズにしてサブテキストを追加。 #MONO_design pic.twitter.com/HnL88qFFRg

サブテキスト入れすぎるとその内容だけで判定されてしまうので削除。それぞれの学生の特徴をきちんと伝達する方法としてはあまり好ましくないよね #MONO_design pic.twitter.com/Qr80VcBZTA

さっきのは普通すぎるので全面却下。インパクトも無いしSTUDYGIFTの特徴でもある学生の魅力が伝えきれる気がしない #MONO_design

というわけで全く違う方向へ。画像&テキストは完全サンプル。色味の振りとボックスの大きさの印象を確認 #MONO_design pic.twitter.com/oWgp6VNHCU

明らかにサイトの趣旨と合ってないただのエゴなカッコ付けになったので却下 #MONO_design

Pinterest風のきれいめなデザインへ。写真とかテキストをいじれば印象的に悪くは無いかも。保留 #MONO_design pic.twitter.com/785ezCmojj

海外のサイトのものを参考にもう1つきれいめ。これは人物にはあわず不採用 #MONO_design pic.twitter.com/ssBl9d4Vl3

あえてエントリー学生を記号化して表現出来ないかと思ったけどさすがに無理だよねw なんの魅力も無いしこれじゃロボットみたいで失礼だ。 #MONO_design pic.twitter.com/8kbOpbnATl

ちなみにこれは2週間前に試しに作ったリニューアル用のデザイン。家入さん @hbkr とかは良いって言ってくれてたんだけど3日経って見たらあまりにもダサかったので内緒でゴミ箱に捨てたやつ。 #MONO_design pic.twitter.com/a16MLspbmp

1 2 3





通算350万view突破のお化けまとめを作ったまとめ人。【http://matome.naver.jp/odai/2134508386714799401

このまとめに参加する