Русский
English
What will you learn?
Create an engaging mobile app design from start to finish
Turn your idea into a fully designed product
Use a design software (Sketch) like a pro
Create graphic illustrations even if you've never drawn anything in your life
About the course
WELCOME TO THE NEW, IMPROVED AND UPDATED VERSION OF THE BEST SELLING MOBILE APP DESIGN COURSE ON UDEMY
This course is not just about creating a pretty app, it’s about designing an app that works great and happens to be beautiful. We'll teach you a complete design workflow that will allow you turn your idea into a fully designed and engaging mobile app using Sketch 3.
Learn to design engaging apps with this beginners mobile app design course
- Master the ins and outs of Sketch 3
- Design a beautiful and user-friendly interface for your app
- Learn UX Research techniques to craft an engaging app
- Learn Design best practices to build your product efficiently
- Outline your visual concept
A skill that will change your life
Mobile apps are everywhere, transforming our personal and profesionnal lives. And what makes an app successful is how well it is conceived. The demand for people able to design such engaging and well thought apps is constantly growing. That's why mobile app designers are averaging over $100k a year.
With Sketch 3 and this course, you'll have the skills to produce professional designs even if you have zero previous experience.
Content and Overview
This course is efficiency oriented and is taught with an example. Each lesson represents a step in the design process that will be applied to the app we will be building and that we'll help you apply to your own idea. You don't need any previous experience as a designer, we'll teach you everything you need to know along the way.
We'll begin by teaching you what UX is, how it affects the UI design and how you can use UX research techniques to craft a great app. We'll show you how to efficiently build a quick first version of your app and how to preview it on a device. This will get you used to Sketch and we'll give you exercises to build up your design skills.
We'll then work on the visual concept of your app, you'll learn about colors, fonts and how to properly use them. This will allow us to create the final design of our app, beautiful and functional. In this section we'll dive deep into Sketch amazing functions and best practices.
You'll even learn how to design an icon for the app and showcase your finished app !
By the end of this course you'll
- Be able to explore your idea in depth to find the right way to build your app
- Have a full proficiency in design software
- Have a very good understanding of design principles and how to use them
- Be able to build graphic illustrations and icons even if you've never drawn anything in your life
- Know how to choose the flow and navigation of your app
- Know how to create a very clear layout that will serve your content
- Know how to create the identity of your app and how to choose and use colors and fonts
- Be completely autonomous as a designer
- Save a lot of money and time by not needing to work with a freelance designer
Program
Prerequisites: download the course files + have a mac
Introduction
Welcome to the course!
0:00 Introduction
0:09 About me
0:22 Why I created this course
0:46 The goal of the course
1:05 What we'll be doing
1:50 Who is this course for
How this course works
In this video I'll explain how to get the most out of this course.
0:00 Introduction
0:07 What we'll be making
0:48 Organization of the course
1:34 Personal project
2:42 Download the attached file
UX and UI
In this video we'll cover the definition and distinction between UX and UI.
0:00 Introduction
0:38 UX and UI
0:55 UX
1:10 UI
1:22 UX/UI distinction - cereals example
1:45 UX/UI distinction - sample app
2:24 Where to find the answers
Abstract
- UX (User eXperience): deals with the overall experience associated with the use of a product = WHY
- UI (User Interface): specific interface of the product = WHAT
Sketch vs Photoshop
ERRATUM: SKETCH 3 IS NOW 99$In this video I'll introduce you to Sketch, the awesome design software we'll be using to design our app.Install Sketch
0:00 Introduction
0:14 Why we won't be using Photoshop
0:40 Why we'll be using Sketch
1:48 Vector-based drawing rules
2:39 Sketch vs Photoshop example
3:46 More reasons to use Sketch
4:26 Articles about photoshop users switching to sketchArticle by Jean-Marc DenisArticle by Meng ToArticle by Nick SchmidtArticle by Khoi VinhArticle by Meng To 2Article by Meng To 3
4:38 Complete Beginner?
4:51 Sketch is good for your clients
5:25 Install Sketch
Abstract
Sketch vs Photoshop- Built for UI design
- Intuitive and efficient
- Vector based
- Exporting made easy
- Lighter in terms of HD space and memory footprint
- Cheaper: $50 once vs $25/month for Photoshop
What problem are you solving?
This lesson is the first in the UX research part. The goal of this section is to help you really understand what you want to build. The first step, described in this video, is to make sure you're tackling a real problem.
0:00 Introduction
0:37 Design is the art of solving problems
1:30 Lean Startup and Customer developmentLean Startup principlesLean Startup by Eric RiesCustomer Development manifestoStartup Owner's Manual by Steve Blank
1:55 Iteration
2:15 Hypothesis: problem + customer
2:46 Test: talk to people
3:32 Learnings/ Refine
4:14 Problems tackled by Instagram
5:01 Homework: write your problem and customer hypothesis in less than 10 words
Abstract
- Design is the art of solving problems. Before anything else you have to understand you problem
- Work by iterations. An iteration is made of 3 steps: Hypothesis / Test / Learnings/Refine
- Focus on one (or 2) problems at once
Who are your users?
Knowing your users is crucial. You can't hope to craft a good product if you don't understand who you're creating it for.In this video I'll introduce you to a very handy tool that will help you understand your users: the persona.
0:00 Introduction
0:52 Personas
1:29 Persona canvas
1:35 Proto persona
3:55 Interview tips
6:02 Validated persona
7:59 Homework: fill your proto persona and get out of the buildingAbstractPersonas
- Personas are models used to represent your users and to keep them in mind
- Build a proto persona first
- Then go talk to your target
- Talk to your target
- 1-1
- Define your goals and keep them in mind
- Get ready to hear things you don't want to hear
- Ask open ended questions
- Rephrase what people tell you
- Look for insights and write them down
- Validate with currency
Finding the right solution
Once we've made sure we're solving a real problem for a real category of people, we can start thinking about a solution.In this video we'll explore different techniques to come up with as many ideas as we can. We'll then work on narrowing this ideas down to one main feature.
0:00 Introduction
0:56 Tips to find solution ideas
1:02 Do a semantic exploration
2:22 Look at other products that solve similar problems
2:41 Look at common human behaviors when trying to solve a similar problem
2:59 Think about what your target is already using
3:18 Think about the key issues that affect the problem
3:42 Try to solve the opposite problem
3:56 Solve a similar problem in a different field
4:25 Brainstorm with monetization in mind
4:48 Find your Main Feature
7:08 Only keep necessary sub features
Abstract
Find a lot of solutions- Focus on quantity
- Do a semantic exploration (sun with 10 branches)
- Look at other products that solve similar problems
- Look at common human behaviors when trying to solve a similar problem
- Think about what your target is already using
- Think about the key issues that affect the problem
- Try to solve the opposite problem
- Solve a similar problem in a different field
- Brainstorm with monetization in mind
- Prioritize your ideas by asking which ones are the most efficient and the most feasible
- Prioritize your ideas by asking which ones are the most efficient and the most feasible
- Get out of the building to get feedback on these ideas
- Pick the main feature, what all the app will be focused and oriented towards
- Only keep the sub-features that are needed to make the main feature work
Storytelling design
In this lesson we'll learn how to write user narratives in order to figure out how our app will work.
0:00 Introduction
0:37 User Narratives
2:28 Start with a goal story
2:58 Break into small stories
4:36 Desire EngineNir Eyal's blog
5:34 Trigger
6:10 Action
6:16 Variable reward
8:13 Commitment
9:41 Feed narrative
10:40 Explore narrative
11:35 Notifications narrative
11:47 Profile narrative
Abstract
User Narratives- The persona is the voice of the story
- Start with a goal story: As [user persona] I want to [accomplish something] so that [some benefit happens]
- Break into smaller stories
- Write the stories on post its and stick them to the wall
- Remove as much friction as possible, make the first steps of the flow very easy
- Trigger: something that triggers the use of the product. External (like an email or a notification) then Internal.
- Action: what the user does with your product
- Variable reward: give the user a reward that varies after he has done the action to get him hooked
- Commitment: action that makes the user more likely to come back and that improves the service for the next go around
Mockups 1/2
Mockups are the blueprints of our app, a necessary step to transform a concept and user stories into a real interface. In this video we'll start building the mockups of the sample app.
0:00 Introduction
1:22 Mockups = Layout
1:30 Content is king
2:30 Using sketch to build mockups
3:16 Open "Mockups template 1x"
3:22 Overview of the mockups template
4:46 Narratives
5.13 Bottom bar
7:24 Top bar
8:25 Changing the icons
12:43 Group and Lock navigation elements
13:49 Duplicating artboards
12:51 Inverting the tabs in the new art boards
17:22 Changing the titles
18:02 Planning the Camera Flow
24:18 Camera Flow screen 1
30:24 Saving
31:15 Camera Flow screen 2
36:30 Camera Flow screen 3
Abstract
Definition- Mockups (or wireframes) = blueprint of your app
- Mockups allow you to create a layout that serve your content.
- For each screen you're designing ask yourself what the user is going to do with the content.
- Most common actions with content: create, consult, share and edit
- Plan the flow according to your user stories
- Not more than 1 or 2 steps in a screen
- Below each screen write in 1 or 2 sentences what the user is supposed to do in the screen
Mockups 2/2
In this lesson we'll continue working on our mockups.
0:00 Introduction
0:06 Feed flow narratives
0:46 Feed flow screen 1
8:17 Feed flow screen 2
13:12 Explore flow screen
15:22 Explore flow screen 1
16:24 Explore flow screen 2
19:06 Explore flow screen 3
23:37 Homework: notifications and profile screens
24:10 Conclusion
Inspiration
This lesson is the first in the visual concept section. We'll start with the beginning: finding inspiration.Remember, "good artists copy, great artists steal".
0:00 Introduction
0:29 Good artists copy, great artists stealDon't copy, steal by Meng To
0:46 GimmebarGimmebar
1:45 Gimmebar pluginGimmebar chrome plugin
2:20 Start collecting inspiring thingsDribbbleBehance
6:30 UI inspirationPttrnsMobile patternsUX ArchiveAndroid app patternsAndroid nicetiesAndroid UX
8:03 SidebarSidebar
8:32 Conclusion
Abstract
- Don't be afraid to steal ideas.
- Collect inspiration all the time. Use Gimmebar
Requirements
- No specific skills required
- You need to have a mac (Sketch, the design software we’ll be using is available on mac only)
- If using a Windows computer, you need to make sure you are running the OS X virtual environment on your computer
Lecturers
A D
Adrien Dupuy
Full stack Designer
Platform
Udemy courses are suited to professional development. The platform is organized in such a way that it is experts themselves that decide the topic and when the course will start. All supporting documents are made available to you for lifetime access.
On this platform, you can find a course on about any subject, and that is no exaggeration – from a tutorial on how to ride a motorcycle, to managing the financial markets. The language and the course format are established by the teacher. This is why it is important to read the information about the course carefully before parting with any money.
Rating
4.2
(674)
(353)
(117)
(34)
(19)
Comments (1196)