Sketch-Tutorial – werde UI- und UX-Designer

Sketch-Tutorial – werde UI- und UX-Designer

Design (Illustration, Layout & Druck) 24 Videos · 5.2 h Video-Training · Deutsch Luca Kiedrowski von Luca Kiedrowski

Sketch ist ein effektives und intuitives Tool, mit dem du Prototypen von Web-Projekten erstellst. Mithilfe der UI- und UX-Software kreierst du dynamische Bedienoberflächen für Webseiten und Apps. Ein wesentlicher Vorteil: Da sich die Designs an Regeln der Webgestaltung orientieren, übergibst du der Entwicklung ein direkt umsetzbares Ergebnis. Lerne Sketch in diesem über fünfstündigen Tutorial von Luca Kiedrowski kennen, der dich praxisnah vom Konzept über einen Prototypen hin zur vollständig designten Web-Oberfläche führt.

  • Werde UI- und UX-Designer: Kreiere mit Sketch Bedienoberflächen für Webseiten und Apps
  • Für den schnellen Einstieg: Eigne dir die Grundlagen zu Sketch, UI- und UX-Design an
  • Für dein Vorankommen: Lerne fortgeschrittene Designtechniken wie boolesche Operatoren kennen
  • Praxisnahes Tutorial: Erstelle am Beispiel einer App eine moderne Bedienoberfläche
  • Besseres Teamplay mit Entwicklern: Gib ihnen direkt entwicklungsfähige Prototypen an die Hand
  • Verstehe in 5 h das Konzept von UI und UX: Trainer Luca Kiedrowski zeigt Best-Practice-Beispiele
  • So bleibt Gelerntes im Kopf: Inklusive Arbeitsmaterialien zum Mitmachen

Auch Google und Apple setzen auf Sketch – mach es wie die Großen und lerne jetzt, wie du schlichtweg schöne, benutzerfreundliche und obendrein entwicklungsbereite UI-Designs erstellst.

Inhalt

24 Videos, 315 Minuten

Einführung

7 Videos · 26 Minuten
01 Offen Kostenlos

Sketch-Tutorial: 1.1 Intro

Herzlich willkommen zum Sketch-Tutorial: Lerne, wie du mithilfe des Programms deine eigenen Apps designen kannst. Hier ein Überblick über den Kurs.

02 Offen Kostenlos

Sketch-Tutorial: 1.2 Was ist Sketch?

Eine kurze Einführung in das Programm „Sketch“ und wie du Zugang zu diesem Programm bekommst.

03 Offen

Sketch-Tutorial: 1.3 Programm-Interface

Hier lernst du Sketch besser kennen. Ich zeige dir das komplette Programm und du lernst, wie du effektiv damit arbeiten kannst.

04 Offen

Sketch-Tutorial: 1.4 Hilfsmittel

Sketch wäre nicht so ein tolles Programm, wenn man keine Hilfsmittel benutzen könnte. Hier erfährst du, wie du diese Hilfsmittel hinzufügst.

05 Offen

Sketch-Tutorial: 1.5 Die wichtigsten Plugins

Plugins helfen dir, noch besser und schneller mit Sketch zu arbeiten. Ich zeige dir, welche Plugins dir am besten helfen können.

06 Offen

Sketch-Tutorial: 1.6 Libraries installieren

Mit Libraries kannst du standardisierte Designs von Apple oder Android direkt in dein Projekt übernehmen.

07 Offen

Sketch-Tutorial: 1.7 InVision

InVision ist ein Tool, welches dir dein Sketch-Projekt deutlich erleichtert. Dort kannst du „Wireframes“ erstellen, um dein Projekt zu strukturieren.

01

Sketch-Tutorial: 1.1 Intro

3 min Offen
02

Sketch-Tutorial: 1.2 Was ist Sketch?

2 min Offen
03

Sketch-Tutorial: 1.3 Programm-Interface

6 min Offen
04

Sketch-Tutorial: 1.4 Hilfsmittel

3 min Offen
05

Sketch-Tutorial: 1.5 Die wichtigsten Plugins

5 min Offen
06

Sketch-Tutorial: 1.6 Libraries installieren

3 min Offen
07

Sketch-Tutorial: 1.7 InVision

4 min Offen

Design-Grundlagen

2 Videos · 37 Minuten
08 Offen

Sketch-Tutorial: 2.1 Farben

Farben bieten dir die Möglichkeit, deine App mit Leben zu füllen. Hier findest du einen kleinen Einstieg in die Welt der Farben.

09 Offen

Sketch-Tutorial: 2.2 Schriften

Das soziale Netzwerk „Medium“ zeigt, wie sehr Schriften die User Experience beeinflussen können. Schriften in deiner App können sehr wichtig sein.

08

Sketch-Tutorial: 2.1 Farben

19 min Offen
09

Sketch-Tutorial: 2.2 Schriften

18 min Offen

Prototypen erstellen

1 Videos · 18 Minuten
10 Offen

Sketch-Tutorial: 3 Prototyping

Nun beginnen wir mit der eigentlichen App.

10

Sketch-Tutorial: 3 Prototyping

18 min Offen

Screen-Design

8 Videos · 128 Minuten
11 Offen

Sketch-Tutorial: 4.1 Home Screen und Design-Vorlagen

Nun wagen wir uns an unser richtiges Projekt und beginnen mit dem Home Screen. Zusätzlich lernst du hier, wie wir Design-Vorlagen bilden können.

12 Offen

Sketch-Tutorial: 4.2 Gruppen erstellen und Text-Styles

In dieser Lektion lernst du, wie du Gruppen erstellen kannst und Text-Styles speichern kannst, um Zeit zu sparen.

13 Offen

Sketch-Tutorial: 4.3 Icons finden, erstellen und anpassen

Icons sind ein großer Teil einer App. In diesem Video erfährst du, wo du die besten Icons findest und wie du sie in dein Projekt integrierst.

14 Offen

Sketch-Tutorial: 4.4 Chat designen, mit Layern arbeiten

Nun begeben wir uns an den Chat unserer App. Dort arbeiten wir mit Layern, welche du ebenfalls nutzen solltest, um dir Zeit zu sparen.

15 Offen

Sketch-Tutorial: 4.5 iPhone X-Design

Das iPhone X änderte einiges im App-Design. Designer müssen nun mit einer neuen Bildschirm-Form arbeiten. Hier erfährst du die Basics.

16 Offen

Sketch-Tutorial: 4.6 User-Profil, Blur-Effekt

Mit Effekten kannst du deiner App ein interessantes Design geben. Wir setzen den Blur-Effekt in deinem User-Profil ein.

17 Offen

Sketch-Tutorial: 4.7 Design als Tool nutzen

In diesem Video erfährst du, wie du Design als Tool nutzen kannst, um deiner App einen Feinschliff zu verpassen.

18 Offen

Sketch-Tutorial: 4.8 Libraries nutzen & Action Sheet erstellen

Nun nutzen wir die iOS-Library, um ein Action Sheet zu bauen. Mit Libraries kannst du nicht nur beim Designen, sondern auch in der Entwicklung Zeit sparen.

11

Sketch-Tutorial: 4.1 Home Screen und Design-Vorlagen

25 min Offen
12

Sketch-Tutorial: 4.2 Gruppen erstellen und Text-Styles

18 min Offen
13

Sketch-Tutorial: 4.3 Icons finden, erstellen und anpassen

16 min Offen
14

Sketch-Tutorial: 4.4 Chat designen, mit Layern arbeiten

16 min Offen
15

Sketch-Tutorial: 4.5 iPhone X-Design

11 min Offen
16

Sketch-Tutorial: 4.6 User-Profil, Blur-Effekt

18 min Offen
17

Sketch-Tutorial: 4.7 Design als Tool nutzen

18 min Offen
18

Sketch-Tutorial: 4.8 Libraries nutzen & Action Sheet erstellen

6 min Offen

Designs bereitstellen

1 Videos · 13 Minuten
19 Offen

Sketch-Tutorial: 5 Designs in InVision bereitstellen

Wenn deine App entwickelt werden soll, brauchen die Entwickler deine Designs. In dieser Lektion erfährst du, wie du deine Designs bei InVision bereitstellst.

19

Sketch-Tutorial: 5 Designs in InVision bereitstellen

13 min Offen

Wichtige Infos bereitstellen

1 Videos · 22 Minuten
20 Offen

Sketch-Tutorial: 6 Hilfe in die App einfügen

Die Nutzer der App finden oft nicht die richtigen Buttons oder haben andere Fragen, die nicht offensichtlich erkennbar sind. Deshalb erstellen wir eine Q-&-A-Sektion.

20

Sketch-Tutorial: 6 Hilfe in die App einfügen

22 min Offen

Profi-Design

3 Videos · 66 Minuten
21 Offen

Sketch-Tutorial: 7.1 Flat-Design-Grafiken erstellen lassen

Wenn du toughe Deadlines für deine Projekte hast, hast du oft nicht die Zeit, alles selbst zu designen. Hier erfährst du, wie und wo du Hilfe bekommst.

22 Offen

Sketch-Tutorial: 7.2 Home-Redesign

Im Home Screen haben wir noch viel Luft nach oben. Deshalb machen wir ein Redesign unseres ersten Screens.

23 Offen

Sketch-Tutorial: 7.3 User Experience Kaufvorgang

Der Kaufvorgang eines Users muss wie geschmiert laufen, da dies einer der heikelsten Momente des User-Flows ist.

21

Sketch-Tutorial: 7.1 Flat-Design-Grafiken erstellen lassen

14 min Offen
22

Sketch-Tutorial: 7.2 Home-Redesign

25 min Offen
23

Sketch-Tutorial: 7.3 User Experience Kaufvorgang

27 min Offen

Neuerungen in Sketch

1 Videos · 6 Minuten
24 Offen

Sketch-Tutorial: 8 Prototyping in Sketch

In der neuen Version von Sketch hast du die Möglichkeit, einen Prototypen direkt in Sketch zu erstellen.

24

Sketch-Tutorial: 8 Prototyping in Sketch

6 min Offen

Anwendungsbeispiele

  • Smartphones mit einer App, deren Design in Sketch entwickelt wurde
    Galerie öffnen
    Beispiel: Im Tutorial erstellst du mithilfe von Sketch eine entwicklungsfähige App.
  • Smartphone mit einer App, deren Design in Sketch entwickelt wurde
    Galerie öffnen
    Beispiel: Dein Trainer gibt dir Tipps und Tricks zu modernem UX- und UI-Design mit auf den Weg.
Kommentare (0)

Kommentiere jetzt „Sketch-Tutorial – werde UI- und UX-Designer“