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
Fontdeck: Realign not Redesign
Search
Paul Robert Lloyd
February 12, 2011
Design
83
5.4k
Fontdeck: Realign not Redesign
Presentation for Multipack Presents: Show & Tell.
Paul Robert Lloyd
February 12, 2011
Tweet
Share
More Decks by Paul Robert Lloyd
See All by Paul Robert Lloyd
Designing Systems (Smashing Conference)
paulrobertlloyd
2
1.7k
Designing Systems (Design Exchange Nottingham)
paulrobertlloyd
6
920
Responsive Principles (WebExpo)
paulrobertlloyd
4
910
Responsive Principles (Front-end London, May 2015)
paulrobertlloyd
12
4.8k
This is for Everyone (LDNIA #4)
paulrobertlloyd
0
920
This is for Everyone (Speak the Web)
paulrobertlloyd
7
7.2k
The Edge of the Web (Async)
paulrobertlloyd
0
910
This is for Everyone (Port 80)
paulrobertlloyd
5
950
The Edge of the Web (Redux)
paulrobertlloyd
3
750
Other Decks in Design
See All in Design
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
160
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
150
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
660
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
4.4k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
320
ito aya Portfolio
itoaya116
0
130
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
300
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
200
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
840
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
360
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
306
31k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
14
1.1k
Side Projects
sachag
452
42k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Scaling GitHub
holman
459
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
The Cult of Friendly URLs
andyhume
78
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
176
52k
Transcript
Fontdeck Realign, not redesign Paul Lloyd, User Experience Designer Multipack
Presents: Show and Tell Saturday 12 February 2011
Who? ‣ Announced: May 2009 ‣ Private Beta: January 2010
‣ Launched: June 2010 Idea conceived by Richard Rutter (Clearleft) and Jon Tan (OmniTI) at SXSW in March 2009.
‣ 550+ typefaces and counting… ‣ 26 foundries—some exclusive to
Fontdeck ‣ Prices start at $2.99/year. Average price ~$7.50/year ‣Try any font for free for an unlimited time What?
A difficult birth
Homepage
Huh? — Potential Customers Why is Fontdeck different? How much
does it cost?
“Purveyors of the finest webfonts” Fontdeck is the professional webfont
solution; easy to use yet flexible enough to meet the real needs of designers.
Revised homepage based on the work of our hackday
“Low hanging fruit” “Quick wins” These don’t exist!
The challenge Provide an holistic design direction that could be
implemented in stages.
The Realignment
Goal Communicate professionalism of the service and the quality of
our library.
PRIMARY COLOURS FONT CATEGORIES Links Slab Serif Sans Serif Serif
Non Latin Display Script SECONDARY COLOURS
Ag Adelle Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Adelle Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
0123456789 Ag PT Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 PT Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Lucida Grande ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 HEADINGS BODY COPY
Typeface (before)
Font specimen (before)
Font specimen (after)
Typeface (after)
Goal Better communicate how the service works and how much
it costs to use.
About Fontdeck (before)
About Fontdeck (after)
Pricing page
Homepage
Goal Greater prominence for foundries and type designers.
Designs (before)
Designers (after)
Something magical happened! We got excited about our product again.
Refining the homepage
James’ original homepage design from the hackday
Iteration 1
Iteration 2
Iteration 3
Iteration 4
Iteration 5
Iteration 6
Iteration 7
Iteration 8
Did we realign… or redesign? You decide!
‣ fontdeck.com / @fontdeck ‣ paulrobertlloyd.com / @paulrobertlloyd Thank you!