Rapid Prototyping

Rapid Prototyping
Even Wu

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

Prototyping Tools

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

很久以前...
BOSS

PM
翻譯官

Designer Developer

今天

co-work
Designer Developer

產品

今天

老闆? 老闆?...XD
co-work
Designer Developer

產品

流程的改變

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

工具的改變

• ruby
• middleman
• sass/compass
framework
• haml markup

Middleman
middleman 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>
<h2>text</h2> .book
</div> %div
<article> %h2 text
<div class=”inner”> %article
<%= yield %> .inner
</div> = yield
</article>
</div>

<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 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);
}

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!!

$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 專案可使用...

Thanks.

http://rocodev.com http://rgba.tw

Twitter @evenwu

Rapid Prototyping

Rapid Prototyping

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Rapid Prototyping

Similar a Rapid Prototyping(20)

Más de Even Wu

Más de Even Wu(6)

Último

Último(20)

Rapid Prototyping