Sei sulla pagina 1di 51

�����������������������������

����������������������������������
����������������������������
���������������������������
��������������������������������
��������������������������������������
� � � � � #AdobeTypeUI � � � � � � � � � � � � � � � � � � � �
� � � Projecting a new OpenType interface � � � � � � � � �
���������������������������������
�������������������������������
����������������������������
����������������������������
���������������������������������������
� � � � Marcos Duda & Chaiane Bitelo � � � � � � � � � � � � � � � � � � � � � � � � �
��������������������������������������
�������������������������������
»

Type Evolution
���������������������������������������
�����������������������������������
��������������������������������������
������������������������������������
�����������������������������������
���������������������������������������������
��������������������������������������������
������������������������������
��������������������������������
������������������������������
����������������������������
�������������������������������������
��������������������������������������
�����������������������������������
��������������������������������������
������������������������������������
����������������������������������
����������������������������������������
������������������������������������������
TrueType Format
→�256 �glyphs
��������������������������
�����
���������������������������������������
�����������������������������������
��������������������������������������
������������������������������������
�����������������������������������
���������������������������������������������
��������������������������������������������
������������������������������
��������������������������������
������������������������������
����������������������������
�������������������������������������
��������������������������������������
�����������������������������������
��������������������������������������
������������������������������������
����������������������������������
�����������������������������������
����������������������������
OpenType Format
→ 65.000 glyphs ������������������������
�����������������
Z

OpenType Refinements
Zapfino Example
Za

OpenType Refinements
Zapfino Example
Zap

OpenType Refinements
Zapfino Example
Zapf

OpenType Refinements
Zapfino Example
Zapfi

OpenType Refinements
Zapfino Example
Zapfin

OpenType Refinements
Zapfino Example
Zapfino

OpenType Refinements
Zapfino Example
Zapfino
Zapfino Zapfino
Zapfino
OpenType Refinements
Zapfino Example
#AdobeTypeUI
Petition
�����������������������������
����������������������������������
����������������������������
� � � � � → 1. OpenType � � � � � � � � � � � � � � � �
�����������������������������
� � � � � � → 2. Data Gathering � � � � � � � � � � � � � � �
���������������������������������������
� � � � � � � → 3. New Interface Proposal � � � � � � � �
����������������������������������
� � � � � � � � � → 4. Final Considerations � � � � � � � � � �
������������������������������
���������������������������
������������������������������
�����������������������������������������
�����������������������������������������
���������������������������������
�����������������������������
����������������������������������
����������������������������
� � � � � → 1. OpenType � � � � � � � � � � � � � � � �
�����������������������������
� � � � � � → 2. Data Gathering � � � � � � � � � � � � � � �
���������������������������������������
� � � � � � � → 3. New Interface Proposal � � � � � � � �
����������������������������������
� � � � � � � � � → 4. Final Considerations � � � � � � � � � �
������������������������������
���������������������������
������������������������������
�����������������������������������������
�����������������������������������������
���������������������������������
Typography is writing with
prefabricated letters.
Gerrit Noordzij
Metal Type
Bitmap TrueType/PostScript
1970s 1980s
OpenType
1990s
OpenType Refinements
Current OpenType Menu
InDesign
Pack my box
with 1/2 brieff
unicases ☜

Current OpenType Menu


InDesign
Pack my box
with 1/2 brieff
unicases ☜

Current OpenType Menu


InDesign
Pack my box
with 1/2 brieff
unicases ☜

Current OpenType Menu


InDesign
Pack my box
with 1/2 brieff
unicases ☜

Current OpenType Menu


InDesign
�����������������������������
����������������������������������
����������������������������
� � � � � → 1. OpenType � � � � � � � � � � � � � � � �
�����������������������������
� � � � � � → 2. Data Gathering � � � � � � � � � � � � � � �
���������������������������������������
� � � � � � � → 3. New Interface Proposal � � � � � � � �
����������������������������������
� � � � � � � � � → 4. Final Considerations � � � � � � � � � �
������������������������������
���������������������������
������������������������������
�����������������������������������������
�����������������������������������������
���������������������������������
DocumentaI Research
#AdobeTypeUI
Sugestões para um novo projeto de interface Exemplo de Protótipos Softwares Adobe Systems Tecnologia OpenTyp

on’t appear to care enough Gerry Leonidas: Prototyping will need to be done in an app- @dirkbecker https://twitter.com/IxtaTypeUI Yves Peters: Adobe does not have a type interface that is Maldonado: Nome do
y are unaware of them, as a agnostic way, and from a document designer perspective. consistent throughout its apps. When will the software você pode nomeá-los
developers finally catch up? (4 resultados) praticamente através
uma regra anterior e o
os glifos.

he problem is bigger than Zara Vasquez-Evens: Much of the technical jargon that is used in @NickSherman: … Speaking of UI design for fonts, @KLTF reminds Yves Peters: No Glyphs palette in Photoshop, Illustrator still does @BaldCondensed Is
er side of the coin is type design does not translate to many professional graphic that CorelDRAW has interesting live preview functions: not support Stylistic Sets, and InDesign users need to dig three human readable nam
to educate people on the designers. UI component that seems to be overlooked: http://www.youtube.com/watch?v=zBE0YO1YwDY … levels deep in fold-out menus to find the OpenType features. Swashes” or “Altern
the features available to nomenclature. #AdobeTypeUI
'@rosettatype @ba
(2 Resultados)
our fonts since ever,
applications.
Michael W. Perry: Add a feature that, for a given font, would open @typefacts: Figure sets might be accessible like this. Moni: It’s disappointing and incredibly annoying that Adobe
a new window displaying a full sample of how it looks, including #AdobeTypeUI @klimtypefoundry @ilovetypography doesn’t pay better attention to this. We are left to guess and
many of these stylistic alternatives. @BaldCondensed pic.twitter.com/H3YbajXd1F figure out why something so fundamental is implemented so
poorly.

Dmitry Gloub: 'Please, make it easier to use stylistic sets! @goloub A rough sketch of desired OpenType UI by @goloub on Jay Nelson: Adobe’s Creative Cloud publishing apps let you exploit
@dribbble https://dribbble.com/shots/1555731-A-rough-sketch-of- the power of advanced OpenType fonts, but you have to know
desired-OpenType-UI … #AdobeTypeUI where to look.

Klim Type Foundry: An OpenType UI should answer: @Miguel Souza: @underware what about this? Matthew Rechs: We’ve heard that many people feel Adobe hasn’t
1. What are the OpenType features in this font? pic.twitter.com/Wid1FCJ4Bn done enough to make robust typographic controls accessible in
2. How do I apply the OpenType features? app UIs, or to educate people about the typographic power that
3. Where have the OpenType features been applied? OpenType features can enable. It’s past time to begin doing this in
a meaningful way. We’re already working on some long-requested
changes to the Photoshop UI. We’re also beginning to tackle the
problem of simulated type variations.
Klim Type Foundy: 1. Don’t use icons to represent OpenType @frankrausch: How sad that the type community must
features. Use plain language. petition Adobe to do the obvious & finally fix that stupid
2. If your application allows an “eyedropper” tool for text, this piece of crap OpenType UI. #AdobeTypeUI
should also apply the OpenType features.
3. Separate basic typography controls and transformations from
OpenType features.
@typographica @klimtypefoundry @urtd Numerals: I am in favor
of 2 “switches”: 1 toggles between onum & lnum and 1 tnum &
pnum. #AdobeTypeUI

@urtd: I pimped up @klimtypefoundry's OT Panel proposal with a


little something I would find useful.
https://dribbble.com/shots/1781784-Ot-Feature-Panel …
#AdobeTypeUI

DocumentaI Research
@arabictype: @mrechs @timriot @mninness What about a smart
Open Codification
window that simply reads the OT features in the font?
#AdobeTypeUI pic.twitter.com/MLENKVKZgl
@Yves Peters
Location of OpenType features is not always logical
nor consistent.

@Dmitry Gloub
Please, make it easier to use stylistic sets!

Klim Type Foundry:


An OpenType UI should answer:
1. What are the OpenType features in this font?
2. How do I apply the OpenType features?
3. Where have the OpenType features been applied?

DocumentaI Research
Personal Views
�����������������������������
����������������������������������
����������������������������
� � � � � → 1. OpenType � � � � � � � � � � � � � � � �
�����������������������������
� � � � � � → 2. Data Gathering � � � � � � � � � � � � � � �
���������������������������������������
� � � � � � � → 3. New Interface Proposal � � � � � � � �
����������������������������������
� � � � � � � � � → 4. Final Considerations � � � � � � � � � �
������������������������������
���������������������������
������������������������������
�����������������������������������������
�����������������������������������������
���������������������������������
A

Proposed Interface
Moving Panel
OpenType

Dynamic OpenType Mode

Ligatures

fi Standard Ligatures

ct Discretionary Ligatures
Contextual Ligatures

Letter Case

ab Small Caps

a Unicase

Numerals & Scientific

12 Default Numerals
63 Oldstyle Numerals

18 Tabular Lining Numerals

Slashed Zero

F2 Superscript/Superior

F2 Subscript/Inferior

1st Ordinals

⅔ Fractions

Proposed Interface Stylistic Alternates

Expandable List Contextual Alternates

Stylistic Alternates
Swash
fi a 12 F2
ct ab 63 F2
18 1st 01

Proposed Interface
OpenType Icons
OpenType

Dynamic OpenType Mode

Ligatures

fi Standard Ligatures

ct Discretionary Ligatures

Letter Case

a Small Caps

Numerals & Scientific

12 Default Numerals

63 Oldstyle Numerals

18 Tabular Lining Numerals

Slashed Zero

F2 Superscript/Superior

F2 Subscript/Inferior

1st Ordinals

⅔ Fractions

Stylistic Alternates

Contextual Alternates

Alternate Annotation Forms


Ornaments

Stylistic Alternates

01 Black Icons

Proposed Interface
Intuitive Object-action Syntax
Checkbox
Not mutually exclusive fi Standard Ligatures

Small Caps
Dash
Activated in specific parts

Radio
Exclusive Default Numerals

Proposed Interface
Selection Conventions
OpenType
Basic Version
Dynamic OpenType Mode Advanced Version
Icons Version
Ligatures

fi Standard Ligatures Icons


ct Discretionary Ligatures Glyphs Preview
Contextual Ligatures Dynamic Button

Letter Case

a Small Caps
ab Unicase a b c d e f g
h i j k l m n
Numerals & Scientific

12 Default Numerals o p q r s t u
63 Oldstyle Numerals v w x y z
18 Tabular Lining Numerals

Slashed Zero

F2 Superscript/Superior

F2 Subscript/Inferior

1st Ordinals

⅔ Fractions

Stylistic Alternates
Proposed Interface Contextual Alternates
More Options
Stylistic Alternates
Swash
Dynamic OpenType Mode

Jazz Jazz J�zz a Aa a a Aa a


Cursive a

Jazz Jazz Jazz Jazz


JAZZ
Jazz
JAZZ
Stylistic Set 3

Proposed Interface
Dynamic OpenType
Usability Test
Visual Survey Objectives
18 tasks 1 Compare and contrast interfaces
5 participants 2 Understand where the users will
click in each task
3 Understand if users would
comprehend the features' location
4 Collect opinions
Usability Test
Where would you click to open the
OpenType menu and edit the text?
Where would you click to open the
OpenType menu and edit the text?

↑ Current Interface Proposed Interface ↑

Usability Test
Where would you click to
activate a stylistic set?

↑ Current Interface Proposed Interface ↑

Usability Test
Where would you click to use the
dynamic OpenType mode?

Usability Test
�����������������������������
����������������������������������
����������������������������
� � � � � → 1. OpenType � � � � � � � � � � � � � � � �
�����������������������������
� � � � � � → 2. Data Gathering � � � � � � � � � � � � � � �
���������������������������������������
� � � � � � � → 3. New Interface Proposal � � � � � � � �
����������������������������������
� � � � � � � � � → 4. Final Considerations � � � � � � � � � �
������������������������������
���������������������������
������������������������������
�����������������������������������������
�����������������������������������������
���������������������������������
OpenType

Dynamic OpenType Mode

Ligatures

fi Standard Ligatures

ct Discretionary Ligatures

Letter Case

a Small Caps

Numerals & Scientific

12 Default Numerals

63 Oldstyle Numerals

18 Tabular Lining Numerals

Slashed Zero

F2 Superscript/Superior

F2 Subscript/Inferior

1st Ordinals

⅔ Fractions

Stylistic Alternates

Contextual Alternates

Alternate Annotation Forms


Ornaments

Stylistic Alternates

01 Black Icons
What's next?
#AdobeTypeUI
What's next?
What's next?
What's next?
Fonts used in this presentation

→ Graviola by Henrique Bayer ⯅ HarborType


☞ FF Franziska by Jakob Runge 👍 FontFont