Design

Typografie
und Layout
Was ist Typografie und Layout?

Begriff
griechisch týpos = Abdruck‚ Figur, Typ
griechisch gráphein = schreiben, zeichnen
englisch layout = Anordnung

Definition
Art und Aussehen von Schrift im Gesamtlayout
Grundregeln der Typografie
ƒƒ Muss lesbar sein (Kontrast/Schriftart)
ƒƒ Stil muss zur Botschaft passen
ƒƒ Weniger ist mehr (Farbe/Schriftarten)
ƒƒ Ordnung muss sein (Gruppen/Ausrichtung an Achsen)
ƒƒ Weißraum – Platz zum Atmen
Die Ausrichtung
Linksbündig
Upplium condi se in verit. Pul-
lem ocultuspioc rentell arbiterox
nossulis, fachil haete et aut
quidem adhuctam se cerei pore
con vigili, consule stienes veritid
aucendentena nos ex su situ est L.
Equerei facerticita, ors vividepec
rem o imus etesciam audem su
manum intem ina, preissi pracere,
nosteatis etesimp onsilica tum
tu sendemne consum casdam
oporem dius vit ipio, qua Simuspi-
on veredo, con rem, con tui ex si
sullatq uoditeribus, duc in.
ƒƒ wirkt locker und lebendig
ƒƒ einfach zu lesen
Blocksatz
Upplium condi se in verit. Pullem
ocultuspioc rentell arbiterox nos-
sulis, fachil haete et aut quidem
adhuctam se cerei pore con vigili,
consule stienes veritid aucenden-
tena nos ex su situ est L. Equerei
facerticita, ors vividepec rem o
imus etesciam audem su manum
intem ina, preissi pracere, nostea-
tis etesimp onsilica tum tu sen-
demne consum casdam oporem
dius vit ipio, qua Simuspion vere-
do, con rem, con tui ex si sullatq
uoditeribus, duc in.
ƒƒ wirkt ruhig und geordnet
ƒƒ kann langweilig wirken
ƒƒ einfach zu lesen
Zentriert
Upplium condi se in verit. Pullem
ocioc rentell arbiterox nos
aete et aut quidem adhuctam se
cerei pore con vigili,
consule stienes veritid aucenden-
tena nos ex su situ est L. Equerei
facerticita, ors vem
imus etesciam audem su manum
intem ina, preissi pracere, nostea-
tis etesimp onsilica tum
sendemne consum casdam opo-
rem dius vit ipion ve
on rem, con tui ex si sullatq uodi-
teribus, duc in.
ƒƒ wirkt unruhig
ƒƒ schwer zu lesen
ƒƒ Nur bis max. 6 Zeilen
verwenden!
Schriftarten und Farbe
Maximal 2 verschiedene Schriftarten und -farben verwenden!
Chaos
Upplium condi se in verit. Pullem ocul-
tuspioc rentell arbiterox nossulis, fachil
haete et aut quidem adhuctam se cerei
pore con vigili, consule stienes veritid
aucendentena nos ex su situ est L. Eque-
rei facerticita, ors vividepec rem o imus
etesciam audem su manum intem ina,
preissi pracere, nosteatis etesimp onsi-
lica tum tu sendemne consum casdam
oporem dius vit ipio, qua Simuspion
veredo, con rem, con tui ex si sullatq
uoditeribus, duc in.
audem simp onsilica
consum casdam oporem
adhuctam se cerei por
onsilica tum tu sendemne consum casdam oporem dius
vit ipio, qua Simuspion veredo, con rem
Ordnung
Upplium condi se in verit. Pullem
ocultuspioc rentell arbiterox nossulis,
fachil haete et aut quidem adhuctam
se cerei pore con vigili, consule stienes
veritid aucendentena nos ex su situ est
L. Equerei facerticita, ors vividepec rem
o imus etesciam audem su manum
intem ina, preissi pracere, nosteatis
etesimp onsilica tum tu sendemne
consum casdam oporem dius vit ipio,
qua Simuspion veredo, con rem, con
tui ex si sullatq uoditeribus, duc in.
audem simp onsilica
consum casdam oporem
adhuctam se cerei por
onsilica tum tu sendemne consum cas-
dam oporem dius vit ipio, qua Simuspi-
on veredo, con rem, con tui e
Ordnung
Upplium condi se in verit. Pullem ocultu-
spioc rentell arbiterox nossulis, fachil haete
et aut quidem adhuctam se cerei pore con
vigili, consule stienes veritid aucendentena
nos ex su situ est L. Equerei facerticita, ors
vividepec rem o imus etesciam audem su
manum intem ina, preissi pracere, nosteatis
etesimp onsilica tum tu sendemne consum
casdam oporem dius vit ipio, qua Simuspion
veredo, con rem, con tui ex si sullatq uodite-
ribus, duc in.
audem simp onsilica
consum casdam oporem
adhuctam se cerei por
onsilica tum tu sendemne consum casdam
oporem dius vit ipio, qua Simuspion veredo,
con rem, con tui e
Lücken vermeiden

Les ba rk eit Lesbarkeit

Uppliu m condi se i n ve r i t. Pul l em Upplium condi se in verit. Pullem ocultu-
oc ul tuspi oc re nte l l ar bi - spioc rentell arbiterox nossulis, fachil haete
terox n o ssul i s, fachi l haete et aut et aut quidem adhuctam se cerei pore con
q u id em a d huc tam s e ce rei vigili, consule stienes veritid aucendentena
po re co n v igi l i , consul e sti e ne s nos ex su situ est L. Equerei facerticita, ors
ver iti d auce nde nte na nos vividepec rem o imus etesciam audem su
ex su si tu e st L. Eque rei manum intem ina, preissi pracere, nosteatis
f a cer t icit a , ors vi vi depec rem etesimp onsilica tum tu sendemne consum
o imu s etesc i am aude m su casdam oporem dius vit ipio, qua Simuspion
in a , preissi pracere, no steati s veredo, con rem, con tui ex si sullatq uodite-
etesimp o nsi l i ca tum tu ribus, duc in.

a u d em sim p onsi l i ca audem simp onsilica

co n su m c asdam oporem consum casdam oporem
a d h u c t a m se ce rei por adhuctam se cerei por

o n silica t u m tu sendemne consum onsilica tum tu sendemne consum casdam

ca sd a m o porem di us v it oporem dius vit ipio, qua Simuspion veredo,
ipio, q u a S i muspi on ve redo, con con rem, con tui e
rem, co n t ui e
Serifen
Schriftarten, die man vermeiden sollte

Arial

Comic Sans

Papyrus

Brush Script

Bradley

Impact
Hierarchie & Schriftschnitt

Sehr Wichtig

Wichtiger
Wichtig, wichtig, wichtig, wichtig,
wichtig, wichtig, wichtig, wichtig,
wichtig, wichtig, wichtig, wichtig,
wichtig, wichtig, wichtig, wichtig,
wichtig, wichtiger, wichtig, wichtig,
wichtig, wichtig, wichtig,

ein bisschen wichtig

ein bisschen wichtig
Verwendung von Farbe im Web
Verwendung von Farbe im Web
Verwendung von Farbe im Web
Verwendung von Farbe im Web
Verwendung von Farbe im Web
Web Fonts
www.fonts.google.com
Achsen und Gruppen

Peter Schmitt
Manager

Tel: 030 2613 325 Schmittstraße 2

www.Schmitt.de 10966 Berlin

Achsen und Gruppen

Peter Schmitt
Peter Schmitt Peter Schmitt
Manager Manager Manager

Schmittstraße 2 Schmittstraße 2
Tel: 030 2613 325 Schmittstraße 2 10966 Berlin 10966 Berlin
Tel: 030 2613 325 Tel: 030 2613 325
www.Schmitt.de 10966 Berlin
www.Schmitt.de www.Schmitt.de
Achsen und Gruppen
Weißraum – Platz zum Atmen
Weißraum – Platz zum Atmen
Weißraum – Platz zum Atmen
Weißraum – Platz zum Atmen
Weißraum – Platz zum Atmen
Weißraum – Platz zum Atmen
Logoerstellung

Zu beachten
ƒƒ Wortlogo, Bildlogo oder Wort-Bild-Logo?
ƒƒ Farbe
ƒƒ Schriftart
ƒƒ Kontrast
ƒƒ Botschaft
ƒƒ Zielgruppe
Wortlogo, Bildlogo oder Wort-Bild-Logo?

Wortlogo Bildlogo Wort-Bild-Logo

Logoentwicklung
Webseite zur Logoerstellung
www.canva.com
http://de.louisvuitton.com/deu-de/geschichten/christmas-2016#/home