Sketch von A bis Z: Werde UI-Designer

Sketch-Tutorial – werde UI- und UX-Designer

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.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Details

Verwendbar mit:
Inhalt: 5 h Video-Training
Lizenz: private und kommerzielle Nutzungsrechte
Bonus: inklusive Arbeitsmaterial

Kategorien

Design (Illustration, Layout & Druck)

Mit Liebe erstellt von:

Luca Kiedrowski

Anwendungsbeispiele

Galerie öffnen

Beispiel: Im Tutorial erstellst du mithilfe von Sketch eine entwicklungsfähige App.
Galerie öffnen

Beispiel: Dein Trainer gibt dir Tipps und Tricks zu modernem UX- und UI-Design mit auf den Weg.

Einführung

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.

Zum Text-Tutorial Projektdatei herunterladen

Kostenlos

Sketch-Tutorial: 1.2 Was ist Sketch?

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

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

Sketch-Tutorial: 1.6 Libraries installieren

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

Zum Text-Tutorial

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.

Zum Text-Tutorial

Design-Grundlagen

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

Prototypen erstellen

Sketch-Tutorial: 3 Prototyping

Nun beginnen wir mit der eigentlichen App.

Zum Text-Tutorial

Screen-Design

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

Zum Text-Tutorial

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.

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.

Zum Text-Tutorial

Designs bereitstellen

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.

Zum Text-Tutorial

Wichtige Infos bereitstellen

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.

Zum Text-Tutorial

Profi-Design

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.

Zum Text-Tutorial

Sketch-Tutorial: 7.2 Home-Redesign

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

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.

Neuerungen in Sketch

Sketch-Tutorial: 8 Prototyping in Sketch

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

Zum Text-Tutorial

Details zum Inhalt

Mobiles UI- und UX-Design verstehen und mit Sketch umsetzen
Ob App, Webseite oder Blog – erwecke dein UI- und UX-Konzept zum Leben – mit Sketch. In diesem über fünfstündigen Video-Tutorial von Trainer Luca Kiedrowski eignest du dir flugs sämtliche Grundlagen zur Bedienung des Programms an, um schon kurz darauf intensiv an einem interaktiven App-Design-Beispielprojekt zu arbeiten.

Darum solltest du dir das Sketch-Tutorial ansehen

Du setzt im UI- und UX-Design direkt auf ein professionelles Werkzeug, denn Sketch wird auch von namhaften Unternehmen wie Google, Facebook und Apple eingesetzt. Aufgrund der intuitiven Bedienung ist der Umgang mit dem Programm schnell erlernbar, sodass du schon in kurzer Zeit vorzeigbare Ergebnisse erzielst.

Ob du mit oder ohne Design-Hintergrund anreist: Das Sketch-Tutorial eignet sich allgemein bestens zum Einstieg in das Themenfeld UI- und UX-Design und speziell zur Umsetzung deiner eigenen App-Design-Ideen mit Sketch. Grundlagen und Anwendung in einem!

Wenn du bereits Designs für Web und Print gestaltest (zum Beispiel mit Photoshop oder Illustrator): Eigne dir die Fähigkeit an, deine Designs und einzelne Elemente wie Icons oder Symbole in dynamische und entwicklungsbereite UI-Designs zu übertragen. Mit deinem Know-how im Bereich Webdesign bietest du deinem Lebenslauf ein viel (und immer mehr) gefragtes Plus.

Verbessere die Zusammenarbeit mit Web-Entwicklern: Indem du Sketch verwendest, bereitest du Bedienoberflächen auf, die sich bereits an Regeln der Webgestaltung orientieren. Folglich übergibst du der Entwicklung Designs, die direkt umgesetzt werden können. Auf diese Weise verkürzt du den Weg vom Konzept und Design zur entwickelten Web-Anwendung enorm.

UI- und UX-Design mit Sketch von A bis Z

Das Hauptaugenmerk des Sketch-Tutorials liegt auf der praktischen Anwendung des Programms, welches beim Anbieter in einer kostenlosen Testversion verfügbar ist. Mit deinem Trainer durchschreitest du am Beispiel eines App-Designs Schritt für Schritt alle Phasen, von der Erstellung einer Skizze bis zum fertigen UI-Design. Arbeitsmaterialien liegen dem Tutorial bei, sodass du direkt praktisch mitmachen kannst:

Zunächst zeichnest du grob vor, wie die Bedienoberfläche der App später einmal aussehen soll. Danach tüftelst du unmittelbar an der Gestaltung. Du erstellst den Startbildschirm, arbeitest mit Gruppen, Layern und Text-Styles und wählst passende Icons aus. Du designst einen Chat, eine Hilfe und ein User-Profil, und du erfährst, wie du mit Libraries, Action Sheets und Effekten arbeitest. Am Ende steht ein vollständiges UI-Design, aus dem heraus du in der aktuellen Version 52 von Sketch sogar einen Prototypen erstellen kannst.

Im Vorfeld eignest du dir die wichtigsten Grundlagen zu Sketch und für das UI-Design an. So findest du dich in der Bedienoberfläche schnell zurecht, du kennst die wichtigsten Plugins und Hilfsmittel und weißt um den zielführenden Einsatz von Schriften und Farben. Ebenfalls zeigt dir dein Trainer, wann es sinnvoll ist, Sketch mit InVision zu kombinieren, zum Beispiel in der Phase des sogenannten Wireframings.