Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rapid Prototyping

Rapid Prototyping

  1. 1. Rapid Prototyping Even Wu
  2. 2. • 30~40 mins Talk• 20~30 mins Q&A + Live Demo
  3. 3. http://evendesign.tw
  4. 4. http://rocodev.com
  5. 5. Prototyping Tools• Photoshop / Illustrator / Artwork...• Dreamweaver or handcraft HTML / CSS...• Back-end Code...• Axure RP?...• Keynote?...
  6. 6. 很久以前... BOSS PM 翻譯官Designer Developer
  7. 7. 今天 co-workDesigner Developer 產品
  8. 8. 今天 老闆? 老闆?...XD co-workDesigner Developer 產品
  9. 9. Rapid Prototyping
  10. 10. 流程的改變• Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
  11. 11. 天瓏書局
  12. 12. widget widget
  13. 13. 工具的改變• ruby• middleman• sass/compass framework• haml markup
  14. 14. Middlemanmiddleman init new_project_name.!"" config.rb#"" source !"" index.html.haml !"" javascripts $   #"" all.js !"" layout.haml #"" stylesheets #"" all.css.scss
  15. 15. Middleman css, js, img... 路徑, 壓縮方式.... haml!"" config.rb#"" source !"" index.html.haml !"" javascripts $   #"" all.js scss / compass !"" layout.haml #"" stylesheets #"" all.css.scss
  16. 16. 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>
  17. 17. <html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html>
  18. 18. <div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article></div>
  19. 19. <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>
  20. 20. compass• 使用語言 sass http://sass-lang.com 其實就跟 less 差不多好用• 但加上 compass 後完全不⼀一樣
  21. 21. compass basic@import “compass”;@include global-reset;
  22. 22. • Logo & Branding• Design Colors• Design partials• Design layouts• Fonts & Rhythm
  23. 23. 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
  24. 24. #"" 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
  25. 25. 殺手功能簡介
  26. 26. 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);}
  27. 27. compass css3 @include border-radius(5px); prefix -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
  28. 28. 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; } }
  29. 29. 圖片取代文字 量⼀一下圖片寬高 orz...width: 439px; 高手都知道的普通技巧 orz...height: 276px;text-indent: -99999px;background: url(logo.png) no-repeat; clearfix hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; }
  30. 30. 圖片取代文字@include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD clearfix @include pie-clearfix; or @include clearfix; 沒人在記 ie 怎麼 hack 的啦
  31. 31. 內建 Vertical Rhythm!!
  32. 32. 內建 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; 電腦幫你算啦!!!
  33. 33. 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; }
  34. 34. 更多請參閱
  35. 35. 非 ruby,rails 專案可使用...
  36. 36. Q&A
  37. 37. http://rgba.tw
  38. 38. Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu

×