Slides des WP Meetup München vom 13. Oktober 2022 zum Thema Web Design / Theme Design

1. Web (Theme) Design

2. Was erwartet euch im Talk
- Tipps für Web Designer
- Für Nicht Designer:
Ihr lernt etwas über die
“Sprache der Webdesigner” um
so Gute von Schlechten zu
unterscheiden.
- Web Design Richtlinien die
eher auf Conversions
ausgerichtet sind
2
Twitter #wpmuc

3. WICHTIG:
Designer != Web Designer
Gute Designer sind nicht auch
automatisch gute Web Designer.
Web Designer müssen auf viel
mehr achten als schönes Design:
- Accessibility
- Performance
- Nutzerführung
- uvm
3
Twitter #wpmuc

4. Web Design Grundsätze
1. Gutes Web Design sollte
zielgerichtet sein. Kenne Deine
Zielgruppe!
2. Gutes Web Design sollte den
Nutzer leiten und Ordnung
schaffen.
3. Gutes Web Design sollte einen
Zweck erfüllen und nicht nur
schön sein.
4
Twitter #wpmuc

5. Kenne deine Zielgruppe
- Ihr seid nicht die Zielgruppe!
- Unter welchen Suchbegriffen
werde ich gefunden?
- Statistiken?
- Auswertung der Social Media
Profile meiner Follower
- Was sind KPIs und welche sind
meine KPIs?
5
Twitter #wpmuc

6. Web Design = Ordnung
- Farbset / Farbsystem
- Schriften & Font Styling
(Größe, Formatierung)
- Spacings
- uvm
6
Twitter #wpmuc

7. Nur schön reicht nicht
- Performance
- Accessibility
- Conversion
Google interessiert sich nicht dafür wie
schön eure Seite ist.
7
Twitter #wpmuc

8. Farben & Fonts
8

9. Farben
- Farbsystem
- Farben mit ausreichend
Kontrast
9
Twitter #wpmuc

10. Fonts
- Fonts DSGVO konform
einbinden!
- Fonts mit ausreichend
Schriftschnitten / Font
Weights wählen
- So wenig Font Dateien
laden wie nötig
10
Twitter #wpmuc

11. Font Styling
- Einheitliches Link Styling
- Einheitliches Button
Styling
- Einhaltung der Hierarchie
der Überschriften
- Einheitliches Styling der
Texte (Headlines, Text,
etc)
11
Twitter #wpmuc

12. Mehr zum Thema Accessibility
Virtual Conference
WP Accessibility Day 2022
02.-03. November
wpaccessibility.day
12
Twitter #wpmuc

13. Templates
13

14. WordPress Template Hierarchy
- Basic Templates (index,
single, page)
- Advanced Templates
(author, date, taxonomy)
14
Twitter #wpmuc

15. 15

16. Home oder Frontpage?
- home.php = Blog
- front-page.php = statische
Startseite
16
Twitter #wpmuc

17. Guidelines für eine gute
Startseite
- Basic Infos first:
Don’t make me think
- Klare Gewichtung auf der
Startseite: ist alles wichtig,
ist nichts wichtig!
17
Twitter #wpmuc

18. - Slider als Hero sind dumm!
- Was ist Largest Contentful
Paint?
- Was ist ein Call to Action?
- Wie viel Text?
kurz und knapp, aber nicht zu
kurz!
-
18
Twitter #wpmuc

19. figma? figma!
19

20. figma: kostenloses Design Tool
- Free Version
- Aktuell wohl das
meistgenutzte Tool von
Web Designern
- Hilft dabei Struktur
einzuhalten
20
Twitter #wpmuc

21. Container Breiten / Break
Points
- Responsiveness ist keine
Option, sondern
Mindestanforderung
- Container & Layouts
21
Twitter #wpmuc

22. Fragen?
22

23. Vielen Dank für eure Aufmerksamkeit
Volker Heinrich
Twitter: @VolkerHeinrich
E-Mail: vh@luehrsen-heinrich.de
23
Twitter #wpmuc

24. Alle Links & Slides auf der
Website
Bis zum nächsten Mal am
Donnerstag, den 10. November
2022
24
wpmeetup-muenchen.de