Sie sind auf Seite 1von 42

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 Blocksatz Zentriert


Upplium condi se in verit. Pul- Upplium condi se in verit. Pullem Upplium condi se in verit. Pullem
lem ocultuspioc rentell arbiterox ocultuspioc rentell arbiterox nos- ocioc rentell arbiterox nos
nossulis, fachil haete et aut sulis, fachil haete et aut quidem aete et aut quidem adhuctam se
quidem adhuctam se cerei pore adhuctam se cerei pore con vigili, cerei pore con vigili,
con vigili, consule stienes veritid consule stienes veritid aucenden- consule stienes veritid aucenden-
aucendentena nos ex su situ est L. tena nos ex su situ est L. Equerei tena nos ex su situ est L. Equerei
Equerei facerticita, ors vividepec facerticita, ors vividepec rem o facerticita, ors vem
rem o imus etesciam audem su imus etesciam audem su manum imus etesciam audem su manum
manum intem ina, preissi pracere, intem ina, preissi pracere, nostea- intem ina, preissi pracere, nostea-
nosteatis etesimp onsilica tum tis etesimp onsilica tum tu sen- tis etesimp onsilica tum
tu sendemne consum casdam demne consum casdam oporem sendemne consum casdam opo-
oporem dius vit ipio, qua Simuspi- dius vit ipio, qua Simuspion vere- rem dius vit ipion ve
on veredo, con rem, con tui ex si do, con rem, con tui ex si sullatq on rem, con tui ex si sullatq uodi-
sullatq uoditeribus, duc in. uoditeribus, duc in. teribus, duc in.

ƒƒ wirkt locker und lebendig ƒƒ wirkt ruhig und geordnet ƒƒ wirkt unruhig
ƒƒ einfach zu lesen ƒƒ kann langweilig wirken ƒƒ schwer zu lesen
ƒƒ einfach zu lesen ƒƒ Nur bis max. 6 Zeilen
verwenden!
Schriftarten und Farbe
Maximal 2 verschiedene Schriftarten und -farben verwenden!

Chaos Ordnung Ordnung


Upplium condi se in verit. Pullem ocul- Upplium condi se in verit. Pullem Upplium condi se in verit. Pullem ocultu-
tuspioc rentell arbiterox nossulis, fachil ocultuspioc rentell arbiterox nossulis, spioc rentell arbiterox nossulis, fachil haete
haete et aut quidem adhuctam se cerei fachil haete et aut quidem adhuctam et aut quidem adhuctam se cerei pore con
pore con vigili, consule stienes veritid se cerei pore con vigili, consule stienes vigili, consule stienes veritid aucendentena
aucendentena nos ex su situ est L. Eque- veritid aucendentena nos ex su situ est nos ex su situ est L. Equerei facerticita, ors
rei facerticita, ors vividepec rem o imus L. Equerei facerticita, ors vividepec rem vividepec rem o imus etesciam audem su
etesciam audem su manum intem ina, o imus etesciam audem su manum manum intem ina, preissi pracere, nosteatis
preissi pracere, nosteatis etesimp onsi- intem ina, preissi pracere, nosteatis etesimp onsilica tum tu sendemne consum
lica tum tu sendemne consum casdam etesimp onsilica tum tu sendemne casdam oporem dius vit ipio, qua Simuspion
oporem dius vit ipio, qua Simuspion consum casdam oporem dius vit ipio, veredo, con rem, con tui ex si sullatq uodite-
veredo, con rem, con tui ex si sullatq qua Simuspion veredo, con rem, con ribus, duc in.
uoditeribus, duc in. tui ex si sullatq uoditeribus, duc in.
audem simp onsilica audem simp onsilica
consum casdam oporem audem simp onsilica consum casdam oporem
adhuctam se cerei por consum casdam oporem adhuctam se cerei por
adhuctam se cerei por
onsilica tum tu sendemne consum casdam oporem dius onsilica tum tu sendemne consum casdam
onsilica tum tu sendemne consum cas- oporem dius vit ipio, qua Simuspion veredo,
vit ipio, qua Simuspion veredo, con rem dam oporem dius vit ipio, qua Simuspi- con rem, con tui e
on 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