Frank Rausch

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