More Related Content
Similar to Rapid Prototyping
Similar to Rapid Prototyping (20)
Rapid Prototyping
- 5. Prototyping Tools
• Photoshop / Illustrator / Artwork...
• Dreamweaver or handcraft HTML / CSS...
• Back-end Code...
• Axure RP?...
• Keynote?...
- 6. 很久以前...
BOSS
PM
翻譯官
Designer Developer
- 7. 今天
co-work
Designer Developer
產品
- 8. 今天
老闆? 老闆?...XD
co-work
Designer Developer
產品
- 10. 流程的改變
• Logo & Branding
• Design Colors
• Design partials
• Design layouts
• Fonts & Rhythm
- 20. Middleman
css, js, img... 路徑, 壓縮方式...
. haml
!"" config.rb
#"" source
!"" index.html.haml
!"" javascripts
$ #"" all.js scss / compass
!"" layout.haml
#"" stylesheets
#"" all.css.scss
- 21. 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>
- 23. <html>
<head>
%html
<title>text</title>
%head
</head>
%title text
<body>
%body
<%= yield %>
= yield
</body>
</html>
- 24. <div class=”book”>
<div>
<h2>text</h2> .book
</div> %div
<article> %h2 text
<div class=”inner”> %article
<%= yield %> .inner
</div> = yield
</article>
</div>
- 25. <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>
- 29. • Logo & Branding
• Design Colors
• Design partials
• Design layouts
• Fonts & Rhythm
- 30. 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
- 31. #"" 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
- 33. css scss
a { a {
color: blue; color: blue;
} &:hover {
a:hover { color: black;
color: black; }
} &:visited {
a:visited { color: blue;
color: blue; }
} }
compass
a {
@include link-colors(blue, black);
}
- 34. 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
- 35. 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; } }
- 36. 圖片取代文字
量⼀一下圖片寬高 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;
}
- 40. 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; }
