デザインビギナーズ第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