Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
创业没有设计师,如何设计
Search
saber
December 01, 2012
Design
24
1.4k
创业没有设计师,如何设计
saberma 在 RubyConfChina 2012 演讲主题
saber
December 01, 2012
Tweet
Share
More Decks by saber
See All by saber
Time to join open source
saberma
0
120
Other Decks in Design
See All in Design
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.8k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
630
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
190
#Dubois Challenge 2025: Economics
ajstarks
1
160
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
Cyber Heart Online Book
hjnasby
0
170
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2k
デザイナー向けフライル説明資料
toshiblues
0
110
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
820
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Producing Creativity
orderedlist
PRO
347
40k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Music & Morning Musume
bryan
46
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
创业,没有设计师,如何设计 马海波 @saberma
v3.0 ShopQi
哪个设计流程最合适? 基于模板 1 规范流程 2 精简流程 3
LiveReload
字体 排版 实现 颜色
color:#4F81BD
None
哪种颜色 1 深浅如何 2 明暗如何 3
人性化的 HSL
色相H 1 饱和度S 2 明度L 3
hsl(213,45%,33%) hsl(213,45%,73%) #4F81BD hsl(213,45%,53%)
color: #4F81BD; .CSS color: hsl(213, 45%, 53%); .SCSS
怎么确定用哪种颜色? 知道了如何表示颜色,
心理暗示 红色 激情、爱情、鲜血、能量、 热心、热诚、激动、热量、力量、 热情、积极、前进、活力;侵略性、 愤怒、战争、革命、残忍、不道德、 危险、禁止、幼稚、卑俗 橙色 跟楼上类似… 黄色
… 绿色 … 蓝色 … 紫色 …
电商偏爱 红色 京东 天猫 凡客
红色 热闹、喜庆、红火 HOT
技术偏爱 蓝色 ITEYE ChinaUnix cnBeta
蓝色 科技 、效率、稳重 COLD
这种颜色要怎么搭配?
优先使用单色搭配 HSL (30′, 100%, 50%) HSL (30′, 100%, 63%) HSL
(30′, 100%, 73%) HSL (30′, 100%, 33%)
频道 背景 链接 图标
$link-color: hsl(200, 100%, 50%); $link-hover-color: hsl(200, 100%, 30%); @import "h5bp/normalize";
$link-color: hsl(200, 100%, 50%); # $link-hover-color: hsl(200, 100%, 30%); $link-hover-color: darken($link-color, 20%); @import "h5bp/normalize"; 这是一个链接 这是一个链接 .SCSS
逐步考虑双色搭配 HSL (30′, 100, 50) HSL (30′, 100, 63) HSL
(30′, 100, 73) HSL (30′, 100, 33) HSL (10′, 100, 50)
频道 背景 链接 图标 突出
颜色 排版 实现 字体
font-family: sans-serif;
serif sans-serif
serif sans-serif
浏览器默认字体设置 font-family: sans-serif; 宋体
ruby on rails Font#1 ruby on rails Font#2 ruby on
rails Font#3 你最不喜欢哪个字体?
ruby on rails 宋体 ruby on rails Georgia ruby on
rails Arial
font-family: arial,sans-serif;
None
1.Ruby is Great 1.Ruby is Great 眼力大测试
font-family: Helvetica,arial,sans-serif; font-family:Helvetica Neue,Helvetica,arial,sans-serif;
Logo的字体怎么选?
None
None
颜色 字体 实现 排版
四大设计原则 重复 对齐 对比 分组
Ruby让你编程更快乐 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们认为: “这样做,机器就能运行的更快;这样做,机器运行效 率更高;这样做,机器就会怎样怎样怎样。 @Matz Ruby让你编程更快乐 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们认为: “这样做,机器就能运行的更快;这样做,机器运行效
率更高;这样做,机器就会怎样怎样怎样。 @Matz
四大设计原则 重复 对齐 对比 分组
None
Ruby让你 编程更快乐 @Matz 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们 认为:“这样做,机器就能运行的更快;这样做, 机器运行效率更高;这样做,机器就会怎样怎样怎 样。”实际上,我们需要从人的角度考虑问题,人 们怎样编写程序或者怎样使用机器上应用程序。我 们是主人,他们是仆人。
Ruby让你 编程更快乐 @Matz 1993.02.24 人们特别是电脑工程师们, 常常从机器着想。他们认 为:“这样做,机器就能 运行的更快;这样做,机 器运行效率更高;这样做, 机器就会怎样怎样怎样。”
实际上,我们需要从人的 角度考虑问题,人们怎样 编写程序或者怎样使用机 器上应用程序。我们是主 人,他们是仆人。
Ruby让你 编程更快乐 @Matz 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们 认为:“这样做,机器就能运行的更快;这样做, 机器运行效率更高;这样做,机器就会怎样怎样怎 样。”实际上,我们需要从人的角度考虑问题,人 们怎样编写程序或者怎样使用机器上应用程序。我 们是主人,他们是仆人。
None
四大设计原则 重复 对齐 对比 分组
None
None
None
四大设计原则 重复 对齐 对比 分组
统一风格 重复字体 1 重复颜色 2 重复风格 3
颜色 字体 排版 实现
Compass简化CSS
#box #box { @include border-radius(25px); } #box { -webkit-border-radius: 25px;
-moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; } .SCSS .CSS 兼容浏览器
@import "sassy-buttons“ @include sassy-button; .SCSS
迭代设计
Thanks twitter.com/saberma github.com/saberma