Rapid Prototyping

Rapid Prototyping Even Wu

• 30~40 mins Talk• 20~30 mins Q&A + Live Demo

http://evendesign.tw

http://rocodev.com

Prototyping Tools• Photoshop / Illustrator / Artwork...• Dreamweaver or handcraft HTML / CSS...• Back-end Code...• Axure RP?...• Keynote?...

很久以前... BOSS PM 翻譯官Designer Developer

今天 co-workDesigner Developer 產品

今天老闆? 老闆?...XD co-workDesigner Developer 產品

Rapid Prototyping

流程的改變• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm

天瓏書局

widget widget

工具的改變• ruby• middleman• sass/compass framework• haml markup

Middlemanmiddleman init new_project_name.!"" config.rb#"" source !"" index.html.haml !"" javascripts $ #"" all.js !"" layout.haml #"" stylesheets #"" all.css.scss

Middleman css, js, img... 路徑, 壓縮方式.... haml!"" config.rb#"" source !"" index.html.haml !"" javascripts $ #"" all.js scss / compass !"" layout.haml #"" stylesheets #"" all.css.scss

Middleman= partial ”partial_name” ruby rails helper- 5.times do %li= link_to( @name, @url )<html><head> <title>text</title></head> content<body> <%= yield %></body></html>

<html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html>

<div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article></div>

<div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article></div><div class=”book”> <h2>text</h2> .book <article> %h2 text <%= yield %> %article </article> = yield</div>

compass• 使用語言 sass http://sass-lang.com 其實就跟 less 差不多好用• 但加上 compass 後完全不⼀一樣

compass basic@import “compass”;@include global-reset;

• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm

blog design partials#"" stylesheets !"" _article.scss !"" _formalize.sass !"" _global.scss !"" _icon.scss !"" _layout.scss hacks !"" _setting.scss !"" _superfish.scss import them... !"" ie.css.scss #"" main.css.scss

#"" stylesheets !"" _ggs.scss !"" _setup.scss !"" ggs $ !"" _border-box.scss $ !"" _default-style.scss import media... $ !"" _mixins.scss $ !"" _prettify.scss $ !"" _responsive-layout.scss $ !"" _type-size-presets.scss $ #"" media $ !"" _desktop-wide.scss $ !"" _desktop-wide2.scss $ !"" _desktop-wide3.scss $ !"" _desktop.scss $ !"" _mobile-wide.scss $ !"" _mobile.scss $ !"" _tablet-wide.scss $ #"" _tablet.scss #"" main.css.scss

殺手功能簡介

css scssa { a { color: blue; color: blue;} &:hover {a:hover { color: black; color: black; }} &:visited {a:visited { color: blue; color: blue; }} } compassa { @include link-colors(blue, black);}

compass css3 @include border-radius(5px); preﬁx -ms-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px;$experimental-support-for-khtml: false$experimental-support-for-mozilla: false

inline block @include inline-block;@mixin inline-block { @if $legacy-support-for-ie { & { hack *display: inline; } } display: -moz-inline-box; hack -moz-box-orient: vertical; display: inline-block; vertical-align: middle; hack @if $legacy-support-for-ie { *vertical-align: auto; } }

圖片取代文字量⼀一下圖片寬高 orz...width: 439px; 高手都知道的普通技巧 orz...height: 276px;text-indent: -99999px;background: url(logo.png) no-repeat; clearﬁx hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; }

圖片取代文字@include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD clearﬁx @include pie-clearfix; or @include clearfix; 沒人在記 ie 怎麼 hack 的啦

內建 Vertical Rhythm!!

內建 Vertical Rhythm!!$base-font-size: 16px;$base-line-height: 24px;@import “compass”;h2 { @include adjust-font-size-to(24px);} font-size: 0.938em; line-height: 1.6em; 電腦幫你算啦！！！

Spriting with Compass@import "icon/*.png";@include all-icon-sprites; 自動產生 (^o^).icon-sprite,.icon-delete,.icon-edit,.icon-new,.icon-save { background: url(/images/icon-s34fe0604ab.png) no-repeat; } 沒人在算座標的啦.icon-delete { background-position: 0 0; }.icon-edit { background-position: 0 -32px; }.icon-new { background-position: 0 -64px; }.icon-save { background-position: 0 -96px; }

更多請參閱

非 ruby,rails 專案可使用...

http://rgba.tw

Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu

http://tweetedtimes.com	15
http://a0.twimg.com	10
http://static.ak.facebook.com	1

Rapid Prototyping

by Even Wu on Feb 07, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 26

Statistics

Rapid Prototyping — Presentation Transcript