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
SITCON Workshop 2014 - 開始學設計(上)
Search
蒼時弦や
August 15, 2014
Design
3
610
SITCON Workshop 2014 - 開始學設計(上)
SITCON Workshop 2014 設計場分享學習設計的經驗以及一些基本知識,上半部討論基本功、字體、設計原理、排版。
蒼時弦や
August 15, 2014
Tweet
Share
More Decks by 蒼時弦や
See All by 蒼時弦や
2024 - COSCUP - Clean Architecture in Rails
elct9620
2
160
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
160
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
420
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
630
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
370
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
440
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
470
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
250
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
280
Other Decks in Design
See All in Design
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
190
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
アクセシビリティに取り組むメリット
magi1125
1
220
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
2.7k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.6k
AI時代に淘汰されないデザインのしごと
akinen
1
150
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
450
線で考える画面構成
natsuume
1
890
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
Liquid Iron
mcduckyart
1
110
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Designing for humans not robots
tammielis
253
25k
Code Review Best Practice
trishagee
69
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
Getting Started Design SITCON Workshop @ 設計場
蒼時弦也 FRONT-END DEVELOPER & WEB DESIGNER
http://frost.tw/ @elct9620 CONTACT ME
THE BASIC FONT DESIGN PRINCIPLES LAYOUT TOPICS
THE BASIC
⼿手繪能⼒力
必備技能 不⽤用很強,但是很重要 illustrator: Telu
–⼿手繪悲劇的蒼時 「⾄至少,要能夠畫出你需要的東⻄西。」
HACKGEN HACKGEN
軟體運⽤用
必備技能 依照設計師類型必須熟練 不同的軟體操作與使⽤用
Photoshop, Illustrator MAYA, ZBrush After Effect, Lightroom etc…
多看設計師的作品,可以保持⾃自⼰己的美感 要學習搜集好的作品,並且把靈感記錄下來
Dribbble, Behance, Awwwards, etc…
FONT
⿊黑體 明體
Sans-Serif Serif
字體的選⽤用會影響質感
HACKGEN HACKGEN HACKGEN
同樣是 Sans-Serif 也會有所差異
HACKGEN HACKGEN HACKGEN
Serif 與 Sans-Serif 的感覺是⾮非常不同的
英⽂文字體除了兩⼤大基本類型外,還有許多類型 Mono, Script, etc…
選擇正確的字體,會讓質感更好
DESIGN PRINCIPLES
關於「美」的規則 翻譯跟解釋⾮非常多種,只好選⽐比較簡單的來討論
Unity 統一的
每個物件都有相似的特性 形狀的相似、⼤大⼩小的相似、距離的相似
Hierarchy 有層次的
物件之間是有階層的關係 ⼤大⼩小、顏⾊色有規律的變化(就像漸層⼀一樣的感覺)
Dominance 突出的
與其他物件相⽐比之下更突出 在統⼀一的規則下,有⼀一個特別突出的物件
Scale 重要的
在⼀一群物件中,顯得特別重要 對焦的⺫⽬目標、視線的焦點
Balance 平衡的
物件的⽐比重是相同的 左右兩邊的看起來是平衡的,深⾊色⽐比淺⾊色看起來更重
Contrast 對比的
物件的差異是⾮非常⼤大的 顏⾊色是對⽐比⾊色、⼤大⼩小、形狀、空間的對⽐比
LAYOUT
如何將⼀一堆物件排列 善⽤用設計原理,排出⼀一個有美感的版⾯面
SITCON WORKSHOP ୷ ɿ Џ څ ࠴ Քˀݶᗘèࠁீ݄ઢౝ়ੰϿɿуᏠԤڅ࠴ࣗéՋᄪç༴ݏ ᄪಯ࠴˄ཕᓀ֟îӎ̤ႏࡘ࠴і੫ᔩçěЩĜෆּ
çսě࠴ႏঔĜɿӵɿӵڅ˻ዘώуՠΈ࠴څӒͣé ࡵቄധçїʅ༲սçѯՠϛࠁீڅ়ʎʖˀઢçʜ়ੰਮ̴ ࠴ç࠴Քێశঞڅࠁீçӎᄕ࠲ࡿմႪึçʽ়ੰҭ ϿɿࡵᏠԤڅ࠴і܈é AUG 18 / Ⴉᝰ߱Ӓʩዖ
欄格系統
None
None
None
None
None
None
None
None
Thanks AND NEXT >>>> 雁⼦子