Einleitung: Ihr Wegweiser zum Website-Erfolg

13

Warum ein Buch dazu?

13

Was bringt mir das?

14

Was Sie nicht können müssen

16

Warum überhaupt noch Websites erstellen?

16

Mit KI Websites für Menschen bauen

17

In sieben Schritten zum Erfolg

18

Unsere Beispielprojekte

21

Kosten und Zeitaufwand

23

Ich bin’s, Ihr Autor

24

Wie viel KI steckt in diesem Buch?

26

Danke an

27

1 Schritt 0: Was KI kann und was Sie darüber wissen sollten

29

1.1 Was kann KI?

29

1.2 Der schwerste Fehler beim Nutzen von KI

32

1.3 Schattenseiten der KI

34

1.4 Die vier goldenen Regeln für die Arbeit mit KI

36

1.5 Denken lernen wie eine Maschine

38

1.6 Was KI gut kann

41

1.7 Das MARE-Prinzip zum Prompten

41

1.8 Gute Unterhaltungen mit der KI führen

43

1.9 KI im Umsetzungsprozess für Ihre Website

47

2 Schritt 1: Die Route planen – Ziele und Zielgruppen herausfinden

49

2.1 Die richtige KI für Ihre Konzeption

50

2.2 Für ganz Eilige: Konzept erstellen mit dem custom GPT »Website-Konzeptor«

51

2.3 Ziele setzen

53

2.3.1 Mehr als eine gute Website

54

2.3.2 Beispiele für gute Zieldefinitionen

56

2.3.3 Welche Wünsche haben die Betreibenden?

58

2.3.4 Was ist schon vorhanden?

58

2.4 Zielgruppe finden

58

2.5 Wünsche erfüllen – menschzentrierte Entwicklung

61

2.5.1 Gute Gespräche mit der Zielgruppe führen

62

2.5.2 Gute Fragen mit der KI entwickeln

65

2.5.3 Ergebnisse auswerten mit KI

66

2.5.4 KI als Vertreterin der Zielgruppe

68

2.5.5 Mit KI die Zielgruppe erforschen

70

2.5.6 KI als Erzeugerin der Zielgruppe

70

2.5.7 Warum Nutzungsforschung (derzeit) unersetzlich bleibt

72

2.6 Personas gestalten

72

2.6.1 Wie sehen Personas aus?

73

2.6.2 Die Vorurteilsfalle vermeiden

74

2.6.3 Wie viele Personas brauche ich?

75

2.7 Wettbewerb erforschen

75

2.7.1 Erstellung eines schlauen Konzepts auf Basis der Rechercheergebnisse

77

2.8 Organisatorische Fragen klären – Termine und Kosten

78

2.9 Abgleich mit Stakeholdern und Interessengruppen

79

2.10 Fallbeispiele erfolgreicher Websites

80

2.11 Checkliste für die Konzeptionsphase

82

3 Schritt 2: Die besten Werkzeuge auswählen

83

3.1 Was kostet der Spaß?

84

3.2 Welche technische Basis ist die richtige für meine Website?

87

3.3 KI-Baukästen/Website Builder

88

3.3.1 Wix

89

3.3.2 Squarespace

90

3.3.3 Jimdo

91

3.4 No-Code- und Low-Code-Plattformen

92

3.4.1 Framer

93

3.4.2 Webflow

93

3.5 Content-Management-Systeme (CMS)

95

3.5.1 WordPress

95

3.5.2 Flat File CMS und weitere WordPress-Alternativen

97

3.6 HTML, CSS und JS selbst erstellen

97

3.7 Hoster aussuchen

99

3.7.1 Speicherplatz und Traffic

100

3.7.2 Technische Aspekte

100

3.7.3 Domain und E-Mail

100

3.7.4 Support und Vertragliches

101

3.8 Die richtige Plattform aussuchen

101

4 Schritt 3: Optimale Struktur der Website bestimmen

105

4.1 Warum eine gute Struktur entscheidend ist

105

4.2 Funktionen und Inhalte festlegen

106

4.3 KI hilft beim Ideen finden

108

4.4 Techniken zur Ideenfindung

110

4.4.1 Brainwriting Pool – besser als Brainstorming

110

4.4.2 Worst Possible Website – aus Negativem lernen

111

4.4.3 Jobs to be Done – Nutzende verstehen

111

4.4.4 SCAMPER – Ideen auf den Kopf stellen

112

4.4.5 Die sechs Denkhüte nach Edward de Bono

113

4.5 Inhalte und Funktionen ordnen

113

4.6 Die Sitemap erstellen

114

4.7 Die richtigen Begriffe für die Seitennamen finden

116

4.7.1 Komplexe Strukturen überprüfen mit Reverse Card Sorting

121

4.8 Sitemap erstellen mit KI

122

4.9 Navigation gestalten

125

4.9.1 Menükiller 1: Der Burger

125

4.9.2 Menükiller 2: Die Suche

127

4.9.3 Allgemeine Gestaltungstipps für Menüs

128

4.9.4 Praktische Umsetzung der Navigation

128

4.9.5 Weitere Navigationsmöglichkeiten

131

4.10 Seitenstruktur planen mit Scribbles

132

4.10.1 Scribbles – der schnelle Weg zur ersten Visualisierung

132

4.11 Wireframes – der Weg zum detaillierten Konstruktionsplan

134

4.11.1 Praktisches Vorgehen und Aufwand

136

4.11.2 Wireframes erstellen mit KI

138

4.11.3 Responsives Design – überall gut aussehen

140

5 Schritt 4: Design trifft Code – die Site gestalten und programmieren

143

5.1 Von der Marke zum Design

144

5.1.1 Die eigene Marke definieren

144

5.1.2 Moodboard erstellen

147

5.1.3 Logo entwickeln

150

5.1.4 Spezial-KIs für die Logoentwicklung

153

5.2 Anlegen des Grunddesigns – Seitenraster, Layout, Styleguide und Designsystem

154

5.2.1 Von der Struktur zur visuellen Gestaltung

155

5.2.2 Konsistenz durch Styleguide und Designsystem

156

5.2.3 In wenigen Schritten zum Styleguide dank KI

160

5.3 Gestaltung der Startseite

163

5.3.1 Best Practice für die Inhalte der Startseite

163

5.4 Handlungsaufforderungen – Call-to-Actions

164

5.5 Teaser, Karten, Kacheln

166

5.6 Umsetzung mit Baukasten- und Content-Management-Systemen

167

5.6.1 Die Site einrichten bei Squarespace

167

5.6.2 Das Aussehen anpassen

168

5.6.3 Struktur der Seiten optimieren

175

5.7 Umsetzung mit No-Code-/Low-Code-Systemen

177

5.7.1 Die Site von Relume zu Webflow bringen

178

5.7.2 Die Website Ihrem Styleguide anpassen

181

5.8 Umsetzung mit HTML, CSS und JavaScript

185

5.8.1 Entwicklungsumgebung oder Codeeditor?

185

5.8.2 HTML – das Grundgerüst

187

5.8.3 CSS – das Aussehen

190

5.8.4 Frameworks zum Arbeit sparen

193

5.8.5 Responsives Webdesign – Flexibilität für alle Bildschirmgrößen

195

5.8.6 JavaScript

198

5.8.7 Die Website auf den Server laden

200

5.9 Barrierefreiheit – Accessibility

201

5.9.1 Was genau ist barrierefrei?

201

5.9.2 Wie berücksichtige ich das beim Anlegen der Website?

202

5.9.3 Wie kann ich Barrierefreiheit testen?

203

5.9.4 Was und wie oft muss ich testen?

204

6 Schritt 5: Effizient Inhalte erstellen, die begeistern

207

6.1 Wie Menschen Texte (nicht) lesen

207

6.1.1 Wie sieht guter Text aus?

209

6.2 Gut Texten für Webseiten – mit und ohne KI

210

6.2.1 Carewords – die richtigen Schlüsselwörter identifizieren und nutzen

210

6.2.2 Blickverläufe verstehen – das F- und das Z-Muster

213

6.2.3 Zahlen, Verben und Klartext – was wirklich ins Auge springt

214

6.2.4 Textstruktur und Aufbau

216

6.2.5 Storytelling als Werkzeug

217

6.2.6 Prompts für gute Texte

217

6.2.7 Längere Texte, Fallstudien und Checklisten mit KI schreiben

221

6.2.8 Rechtlicher Rahmen für KI-Texte

223

6.2.9 Prompts für Textverbesserung

225

6.3 Bilder für die Site mit KI erstellen

226

6.3.1 Welche Bilder funktionieren im Web?

227

6.3.2 Wann besser keine KI-Bilder nehmen?

229

6.3.3 Die besten KIs für die Bilderzeugung

230

6.3.4 Ideen für gute Bilder mit KI entwickeln

234

6.3.5 Prompts für gute Bilder

236

6.3.6 Grafische Elemente anlegen – Icons, Symbole, Illustrationen

241

6.3.7 Tipps für Midjourney

242

6.3.8 Tipps für Dall-E

244

6.3.9 Tipps für Stable Diffusion

246

6.3.10 Tipps für Flux

248

6.3.11 Tipps für Adobe Firefly

248

6.3.12 Tipps für Adobe Illustrator

250

6.3.13 Alternative Bild-KIs

251

6.3.14 Bilder zuschneiden und verkleinern

251

6.3.15 Vorhandene Fotos mit KI aufpolieren

252

6.3.16 Rechtlicher Rahmen für KI-Bilder

255

6.3.17 Fotos von Bildagenturen und Portalen

257

6.4 Audio und Video sinnvoll nutzen

258

6.5 Inhalte auf der Website einbauen

259

6.5.1 Text kontrollieren und einkopieren

259

6.5.2 Bilder vorbereiten und einpflegen

259

6.6 Nervig, doch nötig – Impressum und Datenschutzerklärung

261

6.6.1 Impressum

262

6.6.2 Datenschutzerklärung

262

6.6.3 Datenschutz und Einbindung von Social Media

263

6.6.4 Cookie-Banner und Tracking

265

7 Schritt 6: Testen und optimieren

267

7.1 Tests lohnen sich immer

267

7.2 Frühes Testen spart später Ärger

268

7.3 Testtypen

269

7.4 Fragebögen – scheinbar einfach

271

7.4.1 Eigene Fragebögen entwickeln

273

7.4.2 Wie viele Menschen muss ich befragen?

275

7.5 Usability-Tests

275

7.5.1 Das Testkonzept bzw. Testskript

277

7.5.2 Wie viele Testpersonen brauche ich?

278

7.5.3 Wer testet? Passende Teilnehmende finden

278

7.5.4 Technik – remote oder vor Ort

279

7.5.5 Tipps zur Moderation

280

7.5.6 Guerilla-Tests als Alternative

281

7.6 Testen mit KI?

281

7.7 Fallbeispiel: Testen für eine kleine Site

283

7.8 Laufend verbessern und Feedback etablieren

285

7.8.1 Auch kleine Sites können besser werden

286

7.9 Zugriffstatistiken auswerten – Web Analytics

286

7.9.1 Wie funktioniert die Datenerhebung?

287

7.9.2 Datenschutz und Analytics

289

7.9.3 Was sollten wir auswerten?

290

7.10 Performance testen und optimieren

292

7.10.1 Worauf es wirklich ankommt – erste Ergebnisse

294

7.10.2 Technische und konzeptionelle Ansätze zur Beschleunigung

294

7.10.3 Bilder sind der größte Brocken, Skripts und Fonts spielen aber auch mit rein

295

7.10.4 Konkrete Optimierungstipps und Messmethoden

297

7.10.5 Caching und CDN

298

7.10.6 KI kann optimieren

299

7.11 Checklisten für die Optimierung

300

8 Schritt 7: Die Site bekannt machen und verbreiten

301

8.1 Hoster wählen

301

8.2 Domainname – knapp, aber entscheidend

301

8.2.1 Vorgaben für Domainnamen

302

8.3 Gefunden werden in Suchmaschinen – und mit KI

304

8.3.1 Gelassene Suchmaschinenoptimierung in der Praxis

306

8.3.2 Technische Hausaufgaben

308

8.3.3 Weniger Besuche bedeuten nicht unbedingt weniger Erfolg

310

8.4 Kommunikation, Kontakt und Nutzerbindung

311

8.5 Soziale Medien fürs Marketing auswählen

313

8.5.1 Blog und Hintergrundartikel auf der eigenen Site

316

8.5.2 E-Mail-Newsletter – nicht neu, aber effektiv

317

8.5.3 Facebook

319

8.5.4 Instagram

319

8.5.5 X/Twitter, Bluesky, Threads, Mastodon

320

8.5.6 TikTok

321

8.5.7 YouTube und Vimeo

322

8.5.8 LinkedIn und XING

322

8.5.9 Weitere Plattformen

324

8.6 Inhalte für Social Media und die eigene Website erstellen

324

8.6.1 Content-Strategie, Social-Media-Plan und Redaktionsplan

324

8.6.2 Ideen finden, Inhalte erstellen mit KI

327

8.6.3 Audio und Video erstellen mit KI

329

8.7 Bezahlte Werbung

332

8.7.1 Suchmaschinenwerbung

332

8.7.2 Bannerwerbung

333

8.7.3 Geotargeting und Location-Based Marketing

335

8.7.4 Werbung auf Social Media

335