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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Rapid Prototyping

Ähnlich wie Rapid Prototyping (20)

Mehr von Even Wu

Mehr von Even Wu (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Rapid Prototyping