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

3 min

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?

2 min

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

03 Offen

Sketch-Tutorial: 1.3 Programm-Interface

6 min

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

3 min

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

5 min

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

3 min

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

07 Offen

Sketch-Tutorial: 1.7 InVision

4 min

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

Design-Grundlagen

2 Videos · 37 Minuten
08 Offen

Sketch-Tutorial: 2.1 Farben

19 min

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

18 min

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

Prototypen erstellen

1 Video · 18 Minuten
10 Offen

Sketch-Tutorial: 3 Prototyping

18 min

Nun beginnen wir mit der eigentlichen App.

Screen-Design

8 Videos · 128 Minuten
11 Offen

Sketch-Tutorial: 4.1 Home Screen und Design-Vorlagen

25 min

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

18 min

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

16 min

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

16 min

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

11 min

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

18 min

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

18 min

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

6 min

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.

Designs bereitstellen

1 Video · 13 Minuten
19 Offen

Sketch-Tutorial: 5 Designs in InVision bereitstellen

13 min

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

Wichtige Infos bereitstellen

1 Video · 22 Minuten
20 Offen

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

22 min

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.

Profi-Design

3 Videos · 66 Minuten
21 Offen

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

14 min

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

25 min

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

27 min

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

Neuerungen in Sketch

1 Video · 6 Minuten
24 Offen

Sketch-Tutorial: 8 Prototyping in Sketch

6 min

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

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“