Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

デザインビギナーズ第16回 デザインビギナーズのアイデア帳のデザインを考える #18

Open
willnet opened this issue May 21, 2014 · 11 comments
Open

デザインビギナーズ第16回 デザインビギナーズのアイデア帳のデザインを考える #18

willnet opened this issue May 21, 2014 · 11 comments

Comments

@willnet
Copy link
Member

willnet commented May 21, 2014

今日の成果をここに貼り付けましょう！
@JunFuruya
Copy link

こんなんなりました。
修正前：
ui_2014052101

修正後：
ui_2014052102

@willnet
Copy link
Member Author

willnet commented May 21, 2014

アイデア帳のワイヤフレーム

evernote snapshot 20140521 213429

@tatsuosakurai
Copy link

debeg のアイデア帳（done・削除・イイねソート）のワイヤーフレーム
（一覧部分のみ...）
img_6904
一番濃い線のところが、それです。だいぶ幅が狭くなってるけど...

@kkotaro0111
Copy link

debeg

可変グリッドレイアウトで、アイディアが出来るだけファーストビューにたくさん見えたほうがいいかなーと思って、スクエアを並べてみたんですが、
よくよく考えたらこれ、「テキスト」としての一覧性がすごく低いので、
このアイディア帳には向かないなー、ということになりました。俺の中で。

@KazuyaSuwa
Copy link

＜ファッションスタイリングのSNSサービスのデザインをする＞

・前提条件：
　　・ファッションサイトである
　　・対象:ライトに婚活をしている人
　　　　　　（男女両方）

＜参考サイト＞
　①婚活サイト
　　・色：
　　　　背景：白メイン
　　　　ロゴ：青、赤などはっきりした色
　　　　文字色：白抜き、黒
　　・フォント：
　　　　はらい、はねが無い系
　　　　
　　　　例：　http://jp.match.com/cp.aspx?cpp=/ja-jp/index/index.html

　②ファッション系EC
　　・色：
　　　　背景：白･淡色メイン
　　　　ロゴ：黒
　　　　文字色：黒、青など視認性が高く暗い色
　　　　　　　　黒に白抜き
　　・フォント：
　　　　はらい、はねが無い系

　　例：　http://zozo.jp/
　　　
　③街コン、合コン
　　・色：
　　　　背景：白メイン
　　　　ロゴ：緑、オレンジ
　　　　文字色：黒、オレンジ
　　・フォント：
　　　　はらい、はねが無い系

　　例： http://www.rush01.com/

　→まとめ：
　　①：暖色はあまり使っていない
　　　　　・背景は白
　　　　　・ロゴ、文字は原色に近い色使い
　
　　②：背景、ロゴ、フォントはシンプル。
　　　　写真を載せることで雰囲気を出している
　
　　③：ただの情報サイト。あまり参考にならない
　　　　　
　　→②(ファッション系ECサイト)に近いデザインにするとよさそう。

まだ途中ですが…
img_skin_mystilists_08_tmp

@yoshik
Copy link

yoshik commented May 21, 2014

2014-05-21 21 46 40

HTMLとCSSをいちからべんきょーしました

@yoshik
Copy link

yoshik commented May 21, 2014 

<html>

<style>
div{
  background-color:#d0002d;
  color:#f7f7f7;
  width:150px;
  margin:30px;
  padding:30px;
  box-shadow:0px 8px #a70128;
  border-radius:5px;
}
</style>

<div>
あいうえお
</div>

<div>
かきくけこ
</div>

</html>

@yoshik
Copy link

yoshik commented May 21, 2014

まいちょんさんの代筆です
2014-05-21 21 48 54

<html>

<style>
div{
  background-color:#ff0000;
  color:#0000ff;
  width:150px;
  margin:30px;
  padding:30px;
}
</style>

<div>
あいうえお
</div>

<div>
かきくけこ
</div>

</html>

@ayasky
Copy link

ayasky commented May 21, 2014

camp

ざっくりとしたワイヤーフレームになってしまいました。。
ロゴ・予約ボタン等はこれから追加します。
空白もとり過ぎなのでそれも修正。

@ir3
Copy link

ir3 commented May 21, 2014

遅刻m(_ _)m 参加の足跡
image
おまけ 最近遭遇した面白そうなライブラリ↓
テキストにグラデーションを掛けられる jQuery
http://phpspot.org/blog/archives/2011/02/jquerytrue_grad.html

@willnet
Copy link
Member Author

willnet commented May 21, 2014

油さんの代理
10385092_328540950635025_305627756_n

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@tatsuosakurai @willnet @ir3 @yoshik @kkotaro0111 @JunFuruya @KazuyaSuwa @ayasky