Interface Design
FRANK RAUSCH 49
FRANK RAUSCH
Cover: Fonts in Apps / Schrift, Interface, Identität Year: 2016 Client: Monotype GmbH, Berlin Written by Frank Rausch, supported by Jürgen Siebert of Monotype
Interview with Frank Rausch by Afsaneh A. Rafii
Frank Rausch could just come across as a perfectionist, in reality, it is his devotion to craftsmanship that makes him tweak all these details you will probably never even notice, but which will inevitably make your digital reader experience so much better. Welcome to the world of user interface design.
Can you talk a little bit about your
and I started programming with
handed these disks to those few
background and how you chose
old books and manuals with
friends who had computers.
your current path? You have talked
the old PC. I started typing
about a passion for creativity, one
commands in Basic and I thought
I really wanted to make digital
that is rooted in a desire for
I was going to be a computer
products but the connection
problem-solving.
scientist because that was really
came much later. I got interested
the only profession that I,
in design because I actually
I studied interface design in
and everyone else around me,
thought industrial design was
Potsdam, it was the very first
knew of at the time that were
my thing. I was thinking about
year actually that the school had
connected to computers.
ergonomics and interacting with
this programme.
As I improved my programming
things. I had no idea at the time,
skills I didn’t have anyone to
in the late 90s, that there was a
I am interested in how you
really mentor me back then,
profession called user interface
developed your sensibility for this
so I had to keep buying program-
design.
topic, was it sort of accidental –
ming books and try to learn from
something you discovered along
them. I realized when I got more
I applied to the Industrial Design
the way, or was it something you
into this stuff that the fascinating
programme at a design school
were always interested in?
part was actually making the
and they rejected me, which
user interfaces and thinking
was fine because just a year
It was not obvious at all to me,
about the interactions, making a
later they started this Interface
like most things in life you only
nice product. I made floppy disks
Design programme, which
realize that it was meant to
and gave them to my friends and
was exactly what I had always
become this way when it has
had them install my crappy apps
wanted to do: design + inter-
already happened. So, when I
and games. Though we didn’t
action + technology.
started out, at age 13 or 14, I was
call them apps back then.
really interested in computers
I literally walked to school and
Title: Virtual Water App Year: 2010 Poster design: Timm Kekeritz App design: Frank Rausch, Timm Kekeritz App implementation: Frank Rausch The interactive version of a popular poster designed by Timm Kekeritz in 2007. Our attempt to make the iconic design interactive, more affordable, and more portable than the poster version. This was the first app published by Raureif on the iOS App Store.
It is such a privilege to know at
world too suddenly. Nobody
restrictions like: space, systems,
such a young age with conviction
thought it would be a good match
cultural perception but within
what it is that you want to do,
for the user interface part, but I
these limitations you learn that
and then finding the path that
kind of had a hunch about that,
there are still thousands of
leads you to it.
and it turned into a thing. I am
variations of how you can solve
grateful for this sort of weird
a problem or how you can design
Yes. It was also a little weird
combination which turned out to
something within this framework.
because at age 14 I was sitting at
be useful.
Craftsmanship is the other aspect
my computer instead of meeting
that I appreciate about it:
friends. I was one of the not so
Why do you think you were
making nice harmonious curves,
nerdy nerds, but still it was not
obsessed with type design
contrasts that work.
very common among my friends
at the time?
to have this obsession. Most
In type design you become
would play games. I was more
I liked the obscurity of it. People
trained at recognizing whether
interested in building stuff.
aren’t for the most part even
something works visually. Just
aware that type is designed.
looking at black and white shapes
But I left out an important piece,
Suddenly, you learn how to do it
and judging whether they are
I studied at FH-Potsdam. Lucas
and you learn to appreciate how
good or not, right or wrong. There
de Groot, who was a professor
difficult it is and how much goes
is no formula but you learn to see
there, inspired me to do type
into type design. It’s a foundation
stuff.
design and I got hooked on type
for any kind of graphic design.
design. I think I visited his class
It is a beautiful combination
almost every semester even
of simplicity and complexity.
though I didn’t get any credits for
You have this black and white
the fifth and sixth time I attended.
simplicity, you are within a
I was obsessed with the type
grid and you are within lots of
I think a lot of people take this
how frustrating it is as a designer
a lot. I am always frustrated in
work for granted, that in fact
to be told by developers over and
the industry, because process is
there is a sort of craft behind it.
over again: “no, you can’t do this,
very important while craftsman-
the infrastructure does not allow
ship is kind of lost. Everyone has
Absolutely, and I think this sort
this.” I find that really empower-
their own design thinking and
of thinking in silos that we have
ing and I appreciate that people
method, etc. which is part of the
seen in the industry for so many
are now interested in this topic.
process but you rarely see people
years, “this is designer work”
talking about craftsmanship and
and “this is developer work”,
Within type design you have
the actual act of implementing
I think this is going to merge.
mentioned the idea of problem-
something well. I have a feeling
There is no way we can prevent
solving again. I feel like that is
that will change. I don’t really
this from happening, and
something you go back to a lot.
believe in process except for
I think that’s a good thing.
Where do you think that comes
selling stuff to clients. Process
I see more and more students of
from?
is also more important when you
mine becoming developer
are part of a bigger team.
designers or designer developers,
I come from a family of engineers,
however you want to call it, with
my father is an engineer, my
an interest in typography. I am
grandfather was an engineer,
trying to encourage these guys to
so maybe that can be chalked
do what they want to do, without
up to my German engineer-
someone else telling them that it
family upbringing. But I also
is not possible. I experienced it
think I emancipated from that.
in the first couple of years of my
I think problem-solving is really
work. I did lots of client projects
important in design but if you are
just on the design side, without
missing the non measurable
any development, so I have seen
part, you are missing out on
Title: MoneyMoney macOS App Years: 2010–2013 (as product owner), 2013–now (after sale as external consultant) Designers: Frank Rausch, Timm Kekeritz A banking application to manage personal finances.
Title: OECD Better Life Index, OECD Data Portal Years: 2011–2014 Design: Timm Kekeritz, Frank Rausch, Moritz Stefaner (Information Visualization) My agency Raureif has created both the Better Life Index website and the OECD Data portal at data.oecd.org.
You used to be part of an agency,
I decided to put my passion
There are several reasons for
what made you pursue your solo
behind solo projects and I started
that, the most obvious one being
projects and what are the
working on this V for Wiki app,
that I used Wikipedia a lot and I
challenges and victories you have
which was the second Wikipedia
think many people do. The fact
faced, since choosing this path?
app that I made. The main goal
that Wikipedia’s data is open and
was to make a showcase for my
accessible made it easier to use.
It took a couple of approaches
work and really illustrate what it
If I had wanted to improve the
to take that step actually, be-
is that I am talking about, when
user experience of Spiegel online
cause for a while I thought that
I am teaching or speaking at
for example, I would have had
in order to navigate this industry
conferences, but luckily it also
legal problems from the start –
you would have to be a part of
became commercially successful
the difference is in the license
the agency model. I took this for
and allowed me to make a living
model of the data. The problem
granted, and I had to rid myself of
with it. You can talk a lot about
I faced, of course, was that
this notion. I mean, it was my own
how typography sucks digitally
people said you can’t resell the
company, it’s not like I was living
but if you don’t have a way to
Wikipedia data since it is free.
inside the hell of someone else’s
show how to make it better, then
But I don’t resell Wikipedia
agency. It was always clear to me
it’s not really credible.
content, what I sell is basically a
that I wanted to build products,
pair of glasses to see Wikipedia
which we also did within the
Why were you so passionate
in a nicer way. I am also giving
agency. Some were not success-
about the Wikipedia experience
back to the community because
ful, some were moderately suc-
(you devoted two years to creating
I open source most of the code
cessful, others were doing well
it from scratch), and not any other
that I use to extract data from
but we never actually managed
website that you were a frequent
Wikipedia.
to come up with something that
visitor of? What did this particular
would sustain us, we did weather
app offer you in terms of breath
apps, scanner apps... Eventually,
of implementation?
Title: V for Wiki Designer: Frank Rausch Years: 2016–now (constantly changing and improving stuff) A reader app for Wikipedia with obsessive attention to (typographic) detail. Winner of the German Design Award 2017.
In talking about the shift from
the 70s, so of course back then
How can storytelling become
paper to digital you have said
it was even more important to
a part of user interface design?
that simulation is never as good
simulate stuff. But now that
And can the storytelling only be
as the real thing, so there is no
people are growing up with
a reflection of the time your user
point in trying to simulate paper
digital first, we can let go of some
is in because you have to reference
when creating digital content.
of these simulations. If you think
their visual vernacular, more so
Do you, however, think that it was
about reading apps, the first iter-
than being a reflection of the
a necessary transition? Would
ations were flipping pages with
designer-the phone which you
people have been able to make
animations, there was simulated
mentioned is a perfect example?
the leap without having been able
paper texture behind glass. They
to compare it to the medium they
got rid of all this stuff. People kind
You absolutely have to consider
had known best until then?
of have accepted that it is not
the user’s context, it’s the same
paper. Now most apps are
in movies for example, even
Absolutely, it’s kind of like having
scrolling and not page flipping.
science fiction, which is supposed
training wheels on your bike.
So, simulation was great as a
to show the future, has elements
Metaphors and simulations in
transition but it is not a viable
from the time it was created in.
the digital realm are of course
model going forward. You see
This applies to culture in general
guides, and they help you out
this with the phone icon now. The
and user interfaces are part of
quicker than if it were totally
phone as an object doesn’t exist
culture and should be treated as
abstract. You have to give digital
anymore.
such, just like books, movies or
stuff some shape so why not rely on things that people bring from outside the digital realm. The digital world has been around for about 40 years now, the graphic user interfaces were created in
anything else.
Title: V for Mac (Mockup) Year: 2019 Designer: Frank Rausch I was (and still am) playing with the idea of making a Mac version of my popular Wikipedia reader app. This is the design concept for it.
Title: Fonts in Apps / Schrift, Interface, Identität Year: 2016 Client: Monotype GmbH, Berlin Written by Frank Rausch, supported by Jürgen Siebert of Monotype
· Ide e c a f r · Inte t f i r h Sc s n App i s t n Fo
Die
n stabe h c u nde B e t h c Leu
g g
b les Le i b o M
ookle ses E-B
t ist o
ptimie
rt für
rst es zue s haben isplay emen t D s y n s e eit nd von L uchte r le f t le u s k a e selb ntwic als jen e auf mbiDie E stärke inweis die Ko Strich ckt: H ilt für re g e e d entde h n ea leic mit Das g ern ein tung licht. schrif erford it Auf arz-Be m w h rn c e f-s was ng. Schild eiß-au klen, hriftu -Besc von W ie dun d iß n e n io t le -w f na trah ührt. arz-au bild f übers Schw chen chrift S lä F sel n einer n re te wech ellere . leich chrift Die h n bzw eine inen S re g e e n t h u t it rc e le du em f Wege nicht r t e zu ein k d e i f be Ef ieser tsteht Falls d ird, en te ng. siert w ru n uchte e ie s p ri nbele rio kom sind u hirme chte P c n s s e n d t ü il rä nnt, ete B ungew obilge e erke eucht bei M s Aug interl e h t Auch b d ü n u n in ge ader) auf de uch. E ok-Re ation Gebra (E-Bo htsitu triches) in ic S n L n o h ie le p d . it vie ngen (Smart ffekte ilien m wirku iver E ftfam e Aus negat n . Schri welch t re a ie h rt ens omfo Komp Lesek beim helfen n e rk stä
g r u b am
H
e Form
en lese
r und besse n sich aben. uchst den B
8
Ko
ü n e erm
11
sbar e l r e s Bes
ts Table
en hstab n Buc g en de wichti wisch enauso um z g a R it r e De ark sb e L st lb r die ben se ist fü chsta ie Bu wie d
gd
gd
er in ein rmen er benfo hnell chsta sc u r e B ante Wört Prägn dabei, n e lf ft he Schri . assen zu erf
en
d gehan ndung Ă&#x;en ue Erfi ie e h n r e in Ăźhe wie e it ht. Fr Apps ten m ch nic wenn en Kis igentli ig e b s e lo Auch k f ind u s a ie n s n, efe und li werde u mme‚ ltnis z . rogra Verhä irmen h c s sie ›P d unser il t f B u is n a , e t rnd t ha il sie flacke it änder n. We derze ich ge amme pps je progr Was s A s g ir n u w n nd k. e e n b a w le h e n , A andg laufen diesen am H fe räten Oder rer Hil en Ge sche. mit ih a T ir mobil r w e d n e . in z g t a it u T n ere am dlich griffb Male erstän t viele lesen. elbstv , meis n, : Wir e s t Wie s s in n e yliste ie m D e ll e a h en, Pla or isc eilung prakt ieht v t h it c r s h M e , e ig nm hten Dabe ir lese achric ns. W en, N Butto erung d n n in u r E enĂźs uch M aber a . je denn
ben
nĂź
Sma FF Fra
nzisk
Jakob
a™
Ru n g
a Ăźckw efäĂ&#x;r g x i e-M r
gethe tphon ypeTo Smar olien van der Keur ¡ T Sirba
đ&#x;? đ&#x;? đ&#x;? đ&#x;? đ&#x;? đ&#x;? đ&#x;? đ&#x;? đ&#x;? ¡ FontFont đ&#x;? đ&#x;? đ&#x;? kibbe
Nic
FF Din
nkorb Ware
++ ++
gsten wichti it den eb, ont m nd W Icon-F pps u A r n fĂź ns o le o Ic b I U Sy m ets FF es Pak Teil d
™
gbats
31
cher a m t t Gla
ng
etho ene M ine eig e e t z t nu ren ein stem kontu ebssy te taben ri t s t h lä e c g B u u B Jedes hen z rbaren reppc skalie und T um die fßllen u z nt ixeln lle Ko mit P die vo ‚). ickler iel dering p w n t is e n e R B -E (› p zum in Ap scht, Falls e Rende t wßn ndige ualitä ä q t t s f n ri e h ig sat e n e die Sc m m Ein dul zu p, kom o p s -A -M e are Les ype lä Softw pe. iT rtiges onoty nd M u n n als fe e o d pe v einbin iel iTy ndroid imal Beisp ie opt oder A d S r ß f iO n e it e unter k lich llmÜg me. Einste tsyste Schrif r re mehre
terhr un re rift se oftwa e Sch ieselb ring-S e d d d n n e hR c ein u a n n n a en – je lÜst k werd aufge stellt Grob darge dlich . m e schie st ssy etrieb und B
18
17
Prima
đ&#x;? đ&#x;?
n
đ&#x;? ing S Henn đ&#x;? đ&#x;? Erler, đ&#x;? đ&#x;? đ&#x;? đ&#x;? 2.0 UI Johannes
fĂźrs el ist Dunk d n u Hell inen ischen hne e che enn o ied zw er Flä iell, d ersch d z t n d n e n s U s nu Der esen e stabe L h e c u m B eh den angen einen en. ischen plays zu les ast zw te Dis ichts e t n Kontr h s c e be rleu Lesen hinte ter gä erem eisen dahin i läng w e s b g r e in f, d Allerd ast au Kontr ohen h r . h t e e s rmĂźd gen e Text die Au . rauer nkelg Grund u d r e ntem ah t getĂś r ist d h e s ic s e le sam, – B oder es rat eiĂ&#x;em ht ist c li vor w n e en. Sonn zureiz tarkem st aus e r bei s ontra K n – Nu egativ le iert n axima nd), ktion n G u den m f m ru g dunkle gebun r m o U v . r t le ex inkt i dunk eller T keit s – Be gut (h thellig t sehr Gesam ie d Schrif eitig leichz weil g
hkeit c i l n Ăś Pers
spare , platz lseitig st, vie e und h c Robu is ch lt gr ie en enthä Zeich lische kyr il
nd
e
eri d n e R
ramm g o r p st ontra
Ăź
efäĂ&#x;r -Mixgnt e n o o rtph ¡ FontF
Eigen deren beson i ie e d b s it auch inerse en , aber llten e Misch ftigen ten so bekrä ce isten. p le p Schrif t s A Balan n r e ie ie in D d e lt ä ssig ten tmix h schaf uverlä f z ri g h c n u ter S eit. edien schick sbark der B enreEin ge ter Le und g sible: d bes s n n o e u p ll n is fa io e t g o s halte u m In a hen E zten nnen geset zwisc rift en kÜ
sultra u l p Norm
eins haben Apps ttfo la Gute P r re ien ih n li it e L nden. zu erfi -But urßck Der Z n-Bu e g ß f inzu Der H is re . W s im K recht ip. St n lpri z Kache ns z hlen u wir fß l iO h o Obw onve -K n Desig e ieselb und d nfßh ›a h gleic ßpft B verkn yste r ßbe S
lines
The advice you have given to
don’t see, but the general feed-
Most design work is a very subjec-
young designers seeking a start
back I get is that people think the
tive application of a maker’s vision,
in your field, was to really train
product is better, they just can’t
do you feel like there is a notion of
their eyes, and give themselves
quite put their finger on why they
objectivity to designing typography
a lot of practice in order to hone
think it is better. I think that in the
for user interfaces, because it
their craft. I found this particularly
end a good product is the sum of its
underlines the ease of interaction
interesting because I noticed that
details, all the little improvements
with a device? (making text easy to
in examples of corrections that
add up, even if it is made up of
process for the eyes and the brain?)
you have brought to existing digital
things people do not directly
designs, like Wikipedia pages
perceive. That’s also part of
There is an approach to it, but
for instance, you often qualified
craftsmanship, you do things that
there is really no way to measure
something as not looking good,
you know are supposed to be that
it. There are processes you follow
whereas to my layman’s eye,
way because it makes it better.
of course, like the four parameters
it seemed ok. So, my question is
You could be done at 95% and are
for typography (setting the size,
how do you know that every tweak
really putting in the last 5% for
adjusting the horizontal rhythm,
or correction you bring actually
yourself or anyone else who shares
line length, and vertical spacing)
improves the user experience and
an obsession for details, but I also
but in the end it is only experience
is not just the implementation
think that’s totally acceptable. This
that can show you if things work or
of an obsession for perfection
really applies to any craft, even
not. The more you know, the easier
on your part?
when you buy a sofa, real effort is
it is to make decisions. If you don’t
in the details, like the legs that you
know anything, then it is difficult to
It is definitely both. It’s a valid
don’t see being polished. That’s the
even start tackling the problems.
question and I don’t think that most
type of thing you do for yourself,
You can extrapolate that to any-
people would appreciate that I
when nobody sees the detail,
thing. If you don’t know the rules or
made one specific correction,
but you know you did the best
traditions, you don’t know how to
in one specific context which they
you could.
break the rules.
Name: Typefacts Year: 2017 Designers: Frank Rausch, based on the established branding by Christoph Koeberlin Implementation: Frank Rausch Typefacts was started in 2008 and I joined the team in late 2017 for a complete redesign and reimplementation of the site.
Title: Partly Cloudy Weather App Year: 2012 Designers: Jana KĂźhl, Timm Kekeritz, Frank Rausch Partly Cloudy visualizes weather conditions on a rotary dial.
You made the V for Wiki App,
only make 10% of the people mad,
great typographers of the past
which is a Wikipedia reader and
but they are very vocal about it.
100 years, you will still see that
offers a much improved user
That’s a big problem in design by
the quality of the line breaks is
experience. In one of the talks
committee or community. If you
much better. In digital, there is
you gave, you mentioned that
have too many opinions and try
no one who actually makes these
you had met part of the actual
to mangle them into one design,
decisions. We could try and put
Wikipaedia team and were aware
then usually it shows: it feels
all of this into algorithms but
that they have to work under a lot
like a compromise, and it looks
I don’t think that’s a good idea,
of design constraints, and face
like one too. If you want a good
so I have high hopes for machine
resistance from the users in
experience, then sometimes you
learning. I think machine learning
brining changes. Why is that?
have to make decisions that are
and AI will make typesetting
Why, if making design improve-
not very popular.
much better, because you can
ments to existing platforms
just train them with high quality
creates a better reading
What would be the project of your
experience, there is still
dreams going forward? Which
resistance to change?
wheel would you like to reinvent?
It’s just because people don’t like
I would like to set as a career
change. I don’t appreciate change
goal digital typesetting that is
in small things either. Someone
so good that it indistinguishable
once said that if you change a
from high quality manual type
website that people use a lot over
set books, because we still have
night, it will feel like you have
lots of problems in digital.
rearranged their living room.
We are still missing this manual
If you change stuff, it makes a
line breaking. If you have a book
lot of people mad. It might even
that is layouted by one of the
stuff from the past 100 years.
PUBLICATIONS 01 CHRISTOPH NIEMANN Illustration Design 2009 02 MICHEL MALLARD Creative Direction 2009 03 FUN FACTORY Product Design 2009 04 ANDREAS UEBELE Signage Design 2010 05 HARRI PECCINOTTI Photography 2010 06 KUSTAA SAKSI Illustration Design 2010 07 5.5 DESIGNERS Product Design 2011 08 NIKLAUS TROXLER Graphic Design 2011 09 JOACHIM SAUTER Media Design 2011 10 MICHAEL JOHNSON Graphic Design 2011 11 ELVIS POMPILIO Fashion Design 2011 12 STEFAN DIEZ Industrial Design 2012 13 CHRISTIAN SCHNEIDER Sound Design 2012 14 MARIO LOMBARDO Editorial Design 2012 15 SAM HECHT Industrial Design 2012 16 SONJA STUMMERER & MARTIN HABLESREITER Food Design 2012 17 LERNERT & SANDER Art & Design 2013
18 MURAT GÜNAK Automotive Design 2013 19 NICOLAS BOURQUIN Editorial Design 2013 20 SISSEL TOLAAS Scent Design 2013 21 CHRISTOPHE PILLET Product Design 2013 22 MIRKO BORSCHE Editorial Design 2014 23 PAUL PRIESTMAN Transportation Design 2014 24 BRUCE DUCKWORTH Packaging Design 2014 25 ERIK SPIEKERMANN Graphic Design 2014 26 KLAUS-PETER SIEMSSEN Light Design 2014 27 EDUARDO AIRES Corporate Design 2015 28 PHILIPPE APELOIG Graphic Design 2015 29 ALEXANDRA MURRAY-LESLIE High Techne Fashion Design 2015 30 PLEIX Video & Installation Design 2016 31 LA FILLE D'O Fashion Design 2016 32 RUEDI BAUR Graphic Design 2016 33 ROMAIN URHAUSEN Product Design 2016 34 MR BINGO Illustration Design 2016
35 KIKI VAN EIJK Product Design 2016 36 JEAN-PAUL LESPAGNARD Fashion Design 2017 37 PE’L SCHLECHTER Graphic Design 2017 38 TIM JOHN & MARTIN SCHMITZ Scenography Design 2017 39 BROSMIND Illustration Design 2017 40 ARMANDO MILANI Graphic Design 2017 41 LAURA STRAßER Product Design 2017 42 PHOENIX DESIGN Industrial Design 2018 43 UWE R. BRÜCKNER Scenography Design 2018 44 BROUSSE & RUDDIGKEIT Design Code 2018 45 ISABELLE CHAPUIS Photography Design 2018 46 PATRICIA URQUIOLA Product Design 2018 47 SARAH-GRACE MANKARIOUS Graphic Design 2018 48 STUDIO FEIXEN Visual Concepts 2019
BOARDMEMBERS Nadine Clemens (President) Mike Koedinger (Vice-president) Anabel Witry (Secretary) Guido Kröger (Treasurer)
PUBLISHED WITH THE SUPPORT OF
COLOPHON PUBLISHER Design Friends COORDINATION Guido Kröger LAYOUT Guido Kröger INTERVIEW Afsaneh A. Rafii PRINT Imprimerie Schlimé PRINT RUN 250 (Limited edition) ISBN 978-2-9199551-1-4 PRICE 5 € DESIGN FRIENDS Association sans but lucratif (Luxembourg)
COUNSELORS Heike Fries, Silvano Vidale WWW.DESIGNFRIENDS.LU WWW.FRANKRAUSCH.COM
This catalogue is published for Frank Rausch’s lecture at Mudam Luxembourg on May 8th, 2019, organized by Design Friends.
Design Friends would like to thank all their members and partners for their support.
In collaboration with
Partners
Support Design Friends, become a member. More informations on www.designfriends.lu
Service Partners
Supporters
WWW.DESIGNFRIENDS.LU