1 Grundlagen des digitalen Designs

24

1.1 Was ist Design?

24

1.1.1 User Interface und User Experience

25

1.1.2 Design verstehen

25

1.1.3 Dein Design entscheidet

31

1.2 Layout: Inhalte strukturieren

31

1.2.1 Techniken für visuelle Kommunikation

31

1.2.2 Layout mit System

35

1.3 Typische Typografie-Fehler

38

1.3.1 Eingeschränkte Lesbarkeit

39

1.3.2 Eine stimmige Hierarchie entwerfen

47

1.3.3 Fehlerhafte Texte und Schlussbemerkung

50

1.4 Mit Farben designen

50

1.4.1 Nutzerführung durch Farben

51

1.4.2 Farbliche Wahrnehmung und Darstellung

58

EXKURS Farben finden

63

1.5 Pixel und Bildschirme

69

1.5.1 Auflösung, Bildschirmgröße und Pixeldichte

69

1.5.2 Points - Rechengröße für alle Bildschirme

70

1.5.3 Was bedeutet das fürs Design in Sketch?

72

1.6 Projektorganisation: Ordnung halten in Dokumenten und Ordnern

73

1.6.1 Warum Ordnung wichtig ist

73

1.6.2 Ordner und Dateinamen

74

1.6.3 Sketch-Dokumente sauber halten

76

1.6.4 Zusammenfassung und Ausblick

79

2 Benutzeroberfläche

80

2.1 Das Sketch-Fenster

80

2.1.1 Das Willkommens- und Dokumentenfenster

80

2.1.2 Sketch beim ersten Öffnen

81

2.2 Auf dem Canvas designen

83

2.2.1 Zoomen und Navigieren

83

2.2.2 Ansicht auf Pixel umstellen

84

2.2.3 Tabs: Mehrere Sketch-Dokumente in einem Fenster

85

2.3 Die Werkzeugleiste

86

2.3.1 Alle Tools auf einen Klick

86

2.4 Ebenenliste, Dokumentstruktur und Seiten

88

2.4.1 Die Struktur eines Sketch-Dokuments

89

2.4.2 Schritt für Schritt durch die Ebenenliste

89

2.4.3 Seiten - mehrere Canvas in einem Dokument

90

2.4.4 Ebenen durchsuchen

93

2.4.5 Die Ebenenliste

93

2.4.6 Die Komponenten-Übersicht

95

2.5 Der Inspector

96

2.5.1 Bearbeiten und Untersuchen in der linken Seitenleiste

96

2.5.2 Zusammenfassung

97

3 Ebenen und Bedienung

98

3.1 Ebenen

98

3.1.1 Das Ebenen-Modell

98

3.1.2 Neue Ebenen erstellen

99

3.1.3 Grundlegendes Verhalten in Sketch

101

3.1.4 Ebenen auswählen

103

3.1.5 Die Reihenfolge ändern

104

3.2 Artboards

104

3.2.1 Vorteile durch Artboards beim Designen

105

3.2.2 Ein neues Artboard anlegen

105

3.2.3 Einstellungen im Inspector

106

3.2.4 Die Grundlage für dein Design

108

3.3 Gruppen

110

3.3.1 Ebenen gruppieren

110

3.3.2 Besonderheiten von Gruppen

112

3.4 Ebenen ausrichten, bewegen und verteilen

114

3.4.1 Ausrichten

114

3.4.2 Ebenen bewegen - Position ändern

115

3.4.3 Ebenen verteilen mit Smart Distribute

117

3.5 Größe ändern

119

3.5.1 Vergrößern und Verkleinern

119

3.5.2 Größen im Inspector ändern

120

3.5.3 Skalieren - Ebenengröße errechnen

121

3.6 Abstände messen

122

3.6.1 Mit dem Mauszeiger ausmessen

122

3.6.2 Schlaue Hilfslinien und automatisches Einrasten

123

3.7 Lineal und Hilfslinien

123

3.7.1 Das Lineal

124

3.7.2 Hilfslinien - einfaches Ausrichten

124

3.8 Raster und Layout-Grids erstellen

125

3.8.1 Raster anlegen

125

3.8.2 Layout-Grids

126

3.9 Resizing - ein Design für alle Geräte

129

3.9.1 Resizing-Einstellungen im Inspector

130

3.9.2 Komponenten verschachteln

131

3.9.3 Bonus: Alle Resizing-Einstellungen

133

4 Erstellen und Bearbeiten auf dem Canvas

134

4.1 Rechtecke, Kreise und andere Formen

134

4.1.1 Eine neue Form erstellen

135

4.1.2 Acht Formen im Überblick

137

4.1.3 Neue Formen mit SVG-Code hinzufügen

141

4.2 Freies Zeichnen mit Vektoren

142

4.2.1 Was sind Vektorzeichnungen?

142

4.2.2 Eine neue Form zeichnen

143

4.2.3 Vektoren im Inspector

145

4.2.4 Das Bleistift-Werkzeug

147

4.3 Das Text-Werkzeug

148

4.3.1 Text erstellen

148

4.3.2 Texteinstellungen Schritt für Schritt

149

4.3.3 Profi-Funktionen mit dem Text-Werkzeug

156

4.4 Bilder und Bitmaps einfügen

159

4.4.1 Bilder als eigene Ebene hinzufügen

159

4.4.2 Bilder als Inhalt einer Form

163

4.4.3 Zwischenfazit

165

4.5 Farben, Schatten und Effekte

165

4.5.1 Farben im Inspector

166

4.5.2 Der Farbwähler

167

4.5.3 Ebenen füllen

172

4.5.4 Verläufe hinzufügen

172

4.5.5 Bilder als Füllung

175

4.5.6 Rahmen

175

4.5.7 Schatten

177

4.5.8 Unschärfe erzeugen mit Blur-Effekten

178

4.5.9 Tints - neue Farben für Symbole und Gruppen

179

4.6 Der Bearbeiten-Modus

181

4.6.1 Vektoren im Bearbeiten-Modus

181

4.6.2 Werkzeuge im Bearbeiten-Modus

184

4.6.3 Bearbeiten-Modus für Bilder

185

4.7 Drehen, Spiegeln und Deckkraft - Einstellungen im Inspector

187

4.7.1 Drehen

187

4.7.2 Spiegeln

188

4.7.3 Eckenrundung

189

4.7.4 Deckkraft und Mischmodus

190

4.8 Maskieren, Kombinieren, Umwandeln - Werkzeuge für Ebenen

191

4.8.1 Maskieren

191

4.8.2 Formen kombinieren mit booleschen Operatoren

194

4.8.3 Formen zusammenfassen und Außenlinien nachzeichnen

196

4.8.4 Duplizieren und Anordnen

197

5 Die Powerfunktionen von Sketch

199

5.1 Stile für Ebenen und Texte

199

5.1.1 Einen neuen Stil erstellen

200

5.2 Symbole - wiederverwendbare Objekte

202

5.2.1 Symbole kurz erklärt

202

5.2.2 Handhabung und Einfügen von Symbolen

204

5.2.3 Symbole im Inspector

206

5.2.4 Overrides - Symbole überschreiben und Varianten anlegen

208

5.2.5 Smart Layout - automatische Größenanpassung

213

5.3 Libraries - Symbole und Stile teilen

215

5.3.1 Libraries kurz erklärt

215

5.3.2 Ein Dokument zur Library machen

216

5.3.3 Als Team an einer Library arbeiten

218

5.3.4 Darstellung und Handhabung von Library-Symbolen

218

5.3.5 Stile in Libraries

220

5.3.6 Updates überprüfen und anwenden

220

5.4 Exportieren

221

5.4.1 Zum Export vorbereiten

222

5.4.2 Unterstützte Formate

226

5.4.3 Export-Einstellungen bearbeiten

227

5.4.4 Das Slice-Werkzeug benutzen

228

5.4.5 Code exportieren

229

5.4.6 Drucken mit Sketch

230

5.5 Data - zufällige Texte und Bilder

231

5.5.1 Ebenen mit Datenquellen verknüpfen

231

5.5.2 Symbole und Data

232

5.5.3 Data-Einstellungen

233

5.5.4 Datenquellen als Plugins

234

5.6 Prototyping - Vorschau deines Designs

235

5.6.1 Einen Prototyp erstellen

235

5.6.2 Prototyping im Inspector

236

5.6.3 Hotspots erstellen

238

5.6.4 Prototyp im Vorschau-Fenster testen

238

5.6.5 Prototyping und Symbole

240

5.7 Assistants

241

5.7.1 Mit Assistants starten

241

5.7.2 Assistants in Aktion

242

5.7.3 Beispiele für Sketch Assistants

243

5.7.4 Assistants im Terminal ausführen

244

5.8 Sketch Cloud

244

5.8.1 Erste Schritte mit der Sketch Cloud

245

5.8.2 Schritt für Schritt durch die Cloud

247

5.8.3 Vor- und Nachteile der Cloud

253

6 Sketch mit Plugins erweitern

255

6.1 Fragen und Antworten zu Sketch Plugins

255

6.1.1 Pro und Contra

258

6.2 Automate Sketch

259

6.2.1 Was macht Automate Sketch?

260

6.2.2 Beispiele für die Verwendung

261

6.3 Sketch Runner

272

6.3.1 Was macht Sketch Runner?

272

6.3.2 RunnerPro und Kosten

274

6.3.3 Beispiele für die Verwendung

274

6.3.4 Tipps und Tricks für Runner

281

6.4 Zeplin - Übergabe an die Entwickler

282

6.4.1 Was macht Zeplin?

283

6.4.2 Beispiele für die Verwendung

284

6.5 Abstract - im Team designen

293

6.5.1 Was macht Abstract?

293

6.5.2 Beispiele für die Verwendung

294

6.6 Noch mehr Plugins

301

6.6.1 Top-5-Plugins

301

6.6.2 Plugins nach Themen

305

7 Einstellungen und versteckte Funktionen

312

7.1 Einstellungen

312

7.1.1 General - Darstellung, Speichern und Analyse

313

7.1.2 Canvas - Farbprofil, Abstände und Linienfarbe

313

7.1.3 Layers - Pixelgrenzen, Gruppen, Import, Duplizieren und mehr

315

7.1.4 Plugins aktivieren, im Finder zeigen, deinstallieren und aktualisieren

316

7.1.5 Data, Libraries und Presets

317

7.1.6 Account - Lizenz und Sketch Cloud

317

7.2 Sketch Mirror - Designs auf iPad und iPhone ansehen

318

7.2.1 Die Sketch Mirror App installieren und verbinden

318

7.2.2 Designs ansehen und präsentieren

320

7.3 Tastenkombinationen

322

7.3.1 Tastenkürzel selbst erstellen

322

7.3.2 Die 36 wichtigsten Abkürzungen in Sketch

324

7.4 Speicherplatz und Dateigrößen optimieren

326

7.4.1 Dateigrößen von Sketch

326

7.4.2 Speicherplatz von Sketch optimieren

327

7.5 Versionsverlauf - alte Designs wiederherstellen

328

7.5.1 Zu einer bestimmten Version zurückkehren

329

8 Praxisteil

330

8.1 Chat entwerfen

330

8.2 Landingpage als Responsive Design entwerfen

339

8.3 Musikplayer: Konzept und Wireframe entwickeln

350

8.4 Icons und Illustrationen

362

8.4.1 Eine Icon-Library erstellen

373

8.4.2 Richtig gute Icons entwerfen

373

8.5 Ein Design-System beginnen

377

8.5.1 Starte dein Design-System

377

8.5.2 Teile dein Design-System mit anderen

387

8.5.3 Design-Systeme: Hintergründe und Anforderungen

388

8.6 Drei Lösungen für bessere Zusammenarbeit mit Sketch

389

8.6.1 Probleme bei der Zusammenarbeit

390

9 Bonusmaterial zum Weiterlesen

393

9.1 Sketch - Lizenzen und Kosten

393

9.2 Mit Sketch vergleichbare Programme

394

9.2.1 Figma

395

9.2.2 Framer

396

9.2.3 Adobe XD

397

9.2.4 Webflow

398

9.2.5 Adobe Photoshop

398

9.3 Bücher, Blogs und Quellen

399

9.3.1 Blogs und Magazine

400

9.3.2 Newsletter

401

9.3.3 Podcasts

401

9.3.4 Videos

403

9.3.5 Konferenzen

404

9.3.6 Bücher

404

9.3.7 Meetups und Community

405

9.3.8 Artikel, Quellen und Sammlungen

406

9.4 Tools und Downloads

409

9.4.1 Sketch-Vorlagen

409

9.4.2 Data

410

9.4.3 Illustrationen

410

9.4.4 Design-Systeme

410

9.4.5 Grids und Layout

411

9.4.6 Tastenkombinationen

411

9.4.7 Typografie

411

9.4.8 Mockups

412

9.4.9 Farben

413

9.4.10 Icons

414

9.4.11 User Testing

414

9.4.12 Organisation im Team

414

9.4.13 Inspiration

415