デザインビギナーズ第25回 もくもく

[willnet]

今日の成果を貼り付けましょう！

貼り付けの指針

みんなから意見をもらいやすいように、わかりやすく成果をまとめましょう！

• なるべく画像を使う
  • 写真をとって貼り付けたり、スクリーンショットをとってみたり
• 作業前、作業後の画像を貼る
• 力を入れた点や、見て欲しい点をコメントに書く

[willnet]

savanna.io という、フリーランス向けコミュニティサービスのデザイン修正やってました。

目立たせたい、予定変更日を少しだけ目立たせた

before

after

ナビゲーションのアイコンのレベル感の違いをなおした

• プロフィールページへのリンク
• 友達申請の通知
• 状況更新の通知

最初の一つだけ、どう考えてもレベル感が違う。のでプロフィールページへのリンクはアイコンをやめて、画像+名前アイコンにした。

before

after

[2yankocreation]

今回の目的
■もくもく会の流れを把握＆メモ
└自己紹介＆目的
└設備案内
└作業開始
　・ChromeCastとAppleTVの接続方法や、価格について指南していただいた。
　・コワーキングスペース八王子8Beatの月額会員募集用チラシの制作。
　　意識した点
　　└スペースもデザインの一つとしてとらえた。
　　└文字の読みやすさと、第一印象のインパクト。
　　└カリギュラ効果を用いた訴求。
　　└印刷用jpg,pdfに書き出し。
└成果を各自発表
└振り返り
└解散

[yoshik]

アニメつけました

[ir3]

『Web製作者のためのCSS設計の教科書』の学習

CSSアーキテクチャ
http://article.enja.io/articles/css-architecture.html
より良いCSS のゴール
Googleのエンジニアであり、HTML/CSS関連のツールやドキュメントを残しているフィリップ・ウォルトン氏（@ philwalton）氏
• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい

の記事や
OOCSS,SMACSS,BEM,MCSS,FLOCSSについて学びました

BEMとはなにか？
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md

「BEM とはブロック（Block）、エレメント（Element）、モディファイア（Modifier）の略語である」

[suenagaabc]

processing.jsを使って動的なwebサイトを構築。

赤丸はマウスの位置です。左上の立方体をクリックしたらGoogleのトップへ飛びます。

[tatsuosakurai]

吹き出し作ったりしてました〜

.left-balloon
  background-color: #ccc
  border-radius: 5px
  position: relative

.left-balloon:after
  border: 10px solid transparent
  border-right-color: #ccc
  border-left-width: 0
  left: -10px
  content: ""
  display: block
  top: 20px
  position: absolute
  width: 0


.right-balloon
  background-color: #ccc
  border-radius: 5px
  position: relative

.right-balloon:after
  border: 10px solid transparent
  border-left-color: #ccc
  border-right-width: 0
  right: -10px
  content: ""
  display: block
  top: 20px
  position: absolute
  width: 0

[willnet]

http://www.cockos.com/licecap/

[willnet]

http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%AA%E3%82%AE%E3%83%A5%E3%83%A9%E5%8A%B9%E6%9E%9C

[aburakazutoshi]

[tatsuosakurai]

http://itnp.net/story/1037