サルでもできるウェブデザイン : swapskills 2010 vol01

SwapSkills

Takashi Kikuchi2010. 03.06

サルでもできるウェブデザインMONKEY CAN DO DESIGN WORKS

2010年3月15日月曜日

SwapSkills

菊池　崇

Web Directions East LLC. CEO

allWebクリエイター塾講師

SwapSkills

HTML5 & CSS3

HTML5 doctor? 今夏発売！

書籍

SwapSkills

http://html5doctor.com/

SwapSkills

海外のカンファレンスに参加自分の技術を研鑽すること

SwapSkills

コーダー／マーケッター

SwapSkills

CSS3border-radius

rgba/hsla

gradient(radial/liner)

SwapSkills

デザインセンス＋

SwapSkills

０デザインセンス

SwapSkills2010年3月15日月曜日

SwapSkills

デザインセンスが”0”でウェブデザインは可能か

SwapSkills

デザイン

SwapSkills

デザイン

レイアウト

Grid System / Vertical Rythm

SwapSkills

デザイン

カラーレイアウト

Grid System / Vertical Rythm

SwapSkills

ロジカルにやればできる

SwapSkills

デザインツール

SwapSkills

(x)html + CSSコーディング

SwapSkills

(x)html + CSS + browser

SwapSkills

(x)html + CSS + browserコーディング+デザインツール

SwapSkills

デザイン

SwapSkills

デザイン

SwapSkills

デザインデザインカンプ

SwapSkills

デザインデザインカンプ

SwapSkills

デザインデザインカンプ判断

SwapSkills

デザインデザインカンプ判断コーディング

SwapSkills

先入観preconceptions

SwapSkills

共有s h a r e

SwapSkills

Grid System

SwapSkills

Muller-Brockmann

SwapSkills

ページサイズを割り出すこと

コラムに割ること

デザインすること

- Grid System Raster systeme -Josef Muller-Brockmann

SwapSkills

ページサイズを割り出すこと

SwapSkills

ページのサイズを割り出すこと

SwapSkills

960/1 = 960

SwapSkills

960/1 = 960

960/2 = 480

SwapSkills

960/1 = 960

960/2 = 480

960/3 = 320

960/4 = 260

960/5 = 192

960/6 = 160

960/8 = 120

960/10 = 96

960/12 = 80

960/16 = 60

SwapSkills

40px 20px

SwapSkills

40px20px

960-16-col.png

SwapSkills

960-16-col.png

160px x 160pxバナー60px + 60px + 40px = 160px

SwapSkills

html {

background : url(../grids/960-16-col.png)

repeat-y top center; }

SwapSkills

Vertical Rythm

SwapSkills

http://sushiandrobots.com/

Jina Bolton

SwapSkills

base gridベースグリッド

SwapSkills

x =12px

font-size

SwapSkills

x =12px

font-size

line-height

SwapSkills

x =12px

font-size

line-height

base-grid

SwapSkills

The n12px

SwapSkills

The n12px18px

SwapSkills

The n12px18px

SwapSkills

html {

font-size : 87.5%; }16px x 87.5% = 14px

SwapSkills

font-size

SwapSkills

font-size

SwapSkills

font-size

line-height

SwapSkills

x =14px

font-size

line-height

SwapSkills

x =14px

font-size

line-height

base-grid

SwapSkills

あいう

SwapSkills

あいう14px

SwapSkills

あいう14px21px

SwapSkills

あいう14px21px

SwapSkills

6pt: non pareil7pt: min ion8pt: brevier or small text9pt: bour geois or gal liard10pt: long primer or gara mond11pt: small pica or philo sophy12pt: pica14pt: eng lish or augustin18pt: great primer21pt: double small pica or double pica24pt: double pica or two-line pica36pt: double great primer or 2-line great primer

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

SwapSkills

h1 = 36px

h2 = 24px

h3 = 20px

h4, h5, h6 = 14px

見出しのフォントサイズ

SwapSkills

あいう

SwapSkills

あいう14px

SwapSkills

あいう14px20px

SwapSkills

あいう14px20px

SwapSkills

html {

font-size : 87.5%}

margin : 20px 0; }

SwapSkills

html {

font-size : 87.5%}

margin : 20px 0; }

SwapSkills

margin-bottom　のみで指定

SwapSkills

h1, h2, h3, h4, h5, h6 {margin-bottom : 20px; }

SwapSkills

base-grid

SwapSkills

base-grid

SwapSkills

base-grid

font-size

SwapSkills

/ =20px

base-grid

font-size

SwapSkills

/ =20px

base-grid

font-size

1.42857

line-height

SwapSkills

あいう

SwapSkills

あいう1em

SwapSkills

あいう1em1.42857em

SwapSkills

あいう1em1.42857em

1.42857em

SwapSkills

背景色

テキスト色（:link, :visited）テキスト色（:hover, :active）

キーカラー

テキスト

SwapSkills

Adobe Kuler

SwapSkills

① 自然の色

② カラースキーマ

③ 似ている色のウェブサイト

SwapSkills

http://www.snook.ca/technical/

colour_contrast/colour.html

SwapSkills

Further Reading•http://www.subtraction.com/pics/0703/grids_are_good.pdf

•http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-

better-typography

•http://thinkit.jp/article/807/1/　自分の記事

image•http://www.autismhangout.com/userfiles/image/monkey.jpg

SwapSkills

Thanks !

SwapSkills

One more thing

SwapSkills

2006/01 -

SwapSkills

http://www.stuffandnonsense.co.uk/

Andy Clarke

SwapSkills

一生そろいません

SwapSkills

より実践的なデモに進もう

SwapSkills

http://www.vimeo.com/8235596

Andy Clarke

サルでもできるウェブデザイン : swapskills 2010 vol01

Design

脳の系統発生脳の進化 - keio...

3 サル - maff.go.jp75 図3.3.2...

サルから進化(?)selenium...

サルでもわかるディープラーニング入門...

猫のウイルス検査結果に関する一般的コメント...

でもわかる -...

1 時限目...

類の疾サル類の疾病病カラ...

サル類の飼育管理及び使用に関する指針...

第1回ヒトとサルの祖先は共通 -...

· web...

サルでもわかる - tok2サルでもわかる...

ガスタービンディジタル制御装置 · srv 制御...

css nite lp64fumito abe & seina kon 2019.10.19 at tokyo css...

サル類の飼育管理及び使用に関する指針...

『サルでもわかるオブジェクト指向』 -...

サルでもわかるmesos schedulerの作り方

ウェブデザイン技能検定 3級実技練習問題...

技能検定「ウェブデザイン」の試験科目...

サル...