Sketch from A to Z: Become a UI designer

Language: German

Sketch tutorial - become a UI and UX designer

Sketch is an effective and intuitive tool that you can use to create prototypes of web projects. You can use the UI and UX software to create dynamic user interfaces for websites and apps. A key advantage: as the designs are based on web design rules, you hand over a directly implementable result to development. Get to know Sketch in this five-hour tutorial by Luca Kiedrowski, which takes you from concept to prototype to a fully designed web interface.

Become a UI and UX designer: create user interfaces for websites and apps with Sketch
For a quick start: learn the basics of Sketch, UI and UX design
For your progress: Learn advanced design techniques such as Boolean operators
Practical tutorial: Create a modern user interface using an app as an example
Better team play with developers: Provide them directly with developable prototypes
Understand the concept of UI and UX in 5 hours: trainer Luca Kiedrowski shows best practice examples
How to remember what you've learned: Including work materials to join in with

Google and Apple also rely on Sketch - do it like the big boys and learn now how to create simply beautiful, user-friendly and, on top of that, development-ready UI designs.

Details

Usable with:
content: 5 h Video training
Licence: private and commercial Rights of use
Bonus: including working material

Examples of use

Smartphones with an app whose design was developed in Sketch

Open gallery

Example: In the tutorial, you create a developable app with the help of Sketch.

Smartphone with an app whose design was developed in Sketch

Open gallery

Example: Your trainer gives you tips and tricks on modern UX and UI design.

Introduction

free of charge

Sketch tutorial: 1.1 Intro

Welcome to the Sketch tutorial: Learn how to use the program to design your own apps. Here is an overview of the course.

download project file

free of charge

Sketch tutorial: 1.2 What is Sketch?

A brief introduction to the "Sketch" program and how to get access to it.

Sketch tutorial: 1.3 Program interface

Here you will get to know Sketch better. I'll show you the complete program and you'll learn how to work with it effectively.

Sketch tutorial: 1.4 Tools

Sketch wouldn't be such a great program if you couldn't use tools. Here you can find out how to add these tools.

Sketch tutorial: 1.5 The most important plugins

Plugins help you to work even better and faster with Sketch. I'll show you which plugins can help you best.

Sketch tutorial: Installing 1.6 libraries

With libraries, you can transfer standardized designs from Apple or Android directly into your project.

Sketch tutorial: 1.7 InVision

InVision is a tool that makes your Sketch project much easier. You can create "wireframes" there to structure your project.

Design Basics

Sketch tutorial: 2.1 Colors

Colors offer you the opportunity to fill your app with life. Here is a brief introduction to the world of colors.

Sketch tutorial: 2.2 Fonts

The social network "Medium" shows how much fonts can influence the user experience. Fonts in your app can be very important.

Create prototypes.

Sketch tutorial: 3 Prototyping

Now let's start with the actual app.

Screen design

Sketch tutorial: 4.1 Home screen and design templates

Now let's move on to our real project and start with the home screen. You will also learn here how we can create design templates.

Sketch tutorial: 4.2 Create groups and text styles

In this lesson, you will learn how to create groups and save text styles to save time.

Sketch tutorial: 4.3 Finding, creating and customizing icons

Icons are a big part of an app. In this video, you will learn where to find the best icons and how to integrate them into your project.

Sketch tutorial: 4.4 Designing chat, working with layers

Now let's move on to the chat of our app. There we work with layers, which you should also use to save yourself time.

Sketch tutorial: 4.5 iPhone X design

The iPhone X has changed a lot in app design. Designers now have to work with a new screen shape. Find out the basics here.

Sketch tutorial: 4.6 User profile, blur effect

You can use effects to give your app an interesting design. We use the blur effect in your user profile.

Sketch tutorial: 4.7 Using design as a tool

In this video, you will learn how you can use design as a tool to fine-tune your app.

Sketch tutorial: 4.8 Using libraries & creating action sheets

Now we use the iOS library to build an action sheet. Libraries not only save you time when designing, but also during development.

Provide designs

Sketch tutorial: Provide 5 designs in InVision

If your app is to be developed, the developers need your designs. In this lesson, you will learn how to provide your designs to InVision.

Provide important information

Sketch tutorial: 6 Insert help into the app

App users often can't find the right buttons or have other questions that are not obvious. That's why we are creating a Q&A section.

Professional design

Sketch tutorial: 7.1 Create flat design graphics

If you have tough deadlines for your projects, you often don't have the time to design everything yourself. Here you can find out how and where to get help.

Sketch tutorial: 7.2 Home redesign

We still have a lot of room for improvement on the home screen. That's why we're redesigning our first screen.

Sketch tutorial: 7.3 User experience purchase process

A user's purchase process must run smoothly, as this is one of the most delicate moments in the user flow.

Innovations in Sketch

Sketch Tutorial: 8 Prototyping in Sketch

In the new version of Sketch, you have the option of creating a prototype directly in Sketch.

Details of the content

Understand mobile UI and UX design and implement it with Sketch
Whether it's an app, website or blog - bring your UI and UX concept to life with Sketch. In this over five-hour video tutorial by trainer Luca Kiedrowski, you will quickly learn all the basics of using the program and then work intensively on an interactive app design sample project .

Why you should watch the Sketch tutorial

You can rely directly on a professional tool for UI and UX design, as Sketch is also used by well-known companies such as Google, Facebook and Apple. Thanks to its intuitive operation, you can quickly learn how to use the program and achieve presentable results in no time at all.

Whether you arrive with or without a design background: The Sketch tutorial is generally ideal for getting started in the field of UI and UX design and specifically for implementing your own app design ideas with Sketch. Basics and application in one!

If you already create designs for web and print (for example with Photoshop or Illustrator): Acquire the ability to transfer your designs and individual elements such as icons or symbols into dynamic and development-ready UI designs. With your expertise in web design, you will add a much (and increasingly) sought-after asset to your CV.

Improve collaboration with web developers: By using Sketch, you prepare user interfaces that are already based on web design rules. As a result, you hand over designs to development that can be implemented directly. In this way, you shorten the path from concept and design to the developed web application enormously.

UI and UX design with Sketch from A to Z

The main focus of the Sketch tutorial is on the practical application of the program, which is available from the provider in a free trial version. Using the example of an app design, your trainer will take you step by step through all the phases, from creating a sketch to the finished UI design. Working materials are included with the tutorial so that you can get stuck in straight away:

First, you roughly sketch out what the user interface of the app should look like later on. Then you work directly on the design. You create the start screen, work with groups, layers and text styles and select suitable icons. You design a chat, help and a user profile, and you learn how to work with libraries, action sheets and effects. At the end, you will have a complete UI design from which you can even create a prototype in the current version 52 of Sketch.

Beforehand, you will learn the most important basics of Sketch and UI design . You will quickly find your way around the user interface, know the most important plugins and tools and know how to use fonts and colors in a targeted manner. Your trainer will also show you when it makes sense to combine Sketch with InVision, for example in the wireframing phase.