Self Starter Program
PRODUCT DESIGNER AND UI/UX ACADEMY
Congratulations on your purchase of the Self-Starter Program! We’re excited about your career moving forward. Book your free intro call with Vasile. The 30-min online-meeting is designed to guide you through the program, evaluate your progress and help answer any questions you have.
In preparation for the call, be ready to share a little about your background and your goals for the course. We are excited about your career and look forward to connecting soon!
User Experience Design 002
User Interface Design 001
User Interface Design
The Design Fundamentals course is the foundation of the App Design academy, providing the building blocks that any designer needs to get started in the field. In this course, Vasile will share trade secrets that he has learned and practiced for more than a decade.
This module will cover the basics of design for those who do not have a background in the field.
We’ll cover the importance of typography, its significance to the reader, and how it plays a role in design. You’ll see examples of what works and what doesn’t.
We’ll discuss color and how crucial it is in the field of design. We’ll examine how colors create impact, how different colors can shape the viewer’s overall experience, and how to choose and work with color. Throughout the course, we’ll examine intricate ways of looking at layouts and how to create interest, break down your content, and evoke an emotional response.
Note: This module will get you ready for the next modules. If you have no experience as a UI designer or UX designer, it is highly recommended that you take this course.
Total Duration: 38m 25s
Your assignment is to take the block of text provided here and come up with 10 different layouts.
All layouts should be black and white & you may use any software you choose.
Do not use any imagery. Only use typography.
Tip: Use no more than 3 different fonts and 3 font-sizes for your copy.
Total Duration: 19m 63s
- 1st utilizing black, white and 1 color
- 2nd utilizing primary colors
- 3rd utilizing secondary colors
- 4th utilizing tertiary colors
- Here’s the copy and image
Exercise 002: Apply color to the UI provided
Tip: Use the typography skills learned in the previous lesson
Principles of color in app design
Total Duration: 33m 63s
- Using the following assets, put together a bi-fold brochure for SculpSure
- Size: 5.5 x 8.5 (folded)
- Here’s the Sketch file from the second Layout Video
- Use the first letter from your first and last name to create a monogram.
- Pay close attention to the negative and positive space around the letters.
Tip: Use the typography and color skills learned in the previous lesson
5 Key Elements of Digital Design Layout
Research is a crucial part of any app design project, and all UI designers and UX designers, regardless of experience level, should be sure to take this module.
Before starting on any project, you will want to know what you’re up against, and so it is essential to conduct a surface level assessment of the competition. In this module, we’ll discuss how to do that. We’ll explain how best to determine who the top competitors are, get an understanding of why they are successful, and figure out how to ascertain our competitive edge. What can we bring to the table as a differentiator? What do we have to offer that will set our product apart from theirs?
By the end of this module, you’ll learn:
- How to identify both direct and indirect competitors — and to understand the difference between the two
- How to formulate a messaging statement and a positioning statement
- How to determine the key elements that will drive your product and set it apart from the competition
Identify direct and indirect competitors
Total Duration: 4m 27s
- Select 3-4 direct/indirect competitors
- Download competitors app, take screenshots and notes
- If working with a client, determine their needs and compare them with your research
The importance of conducting research in design
Surface level assessment
Total Duration: 2m 42s
- Determine what can you do different from competition
- What will your app have that the competition does not
Suggested direction & positioning
Total Duration: 5m 01s
Total Duration: 5m 11s
- Follow the examples provided closely in the process of conducting your own research
- It’s a good idea to come up with a templated outline that you can follow as you work on additional projects
Total Duration: 1m 01s
- Understand and learn the process well as you’ll use it for the rest of your career
- Let’s roll up our sleeves and dive into UX next
User experience design (UX)
User Experience (UX) design is the heart of any great app or website. It is the foundation you will build your projects upon and the blueprint from which you’ll design your apps or websites. In this module, we will look at how to make apps user friendly, easy to understand, and pleasant to navigate – and why that is so important. You’ll gain a basic understanding of what wireframes, how they work, and why they’re necessary, and then learn how to create both low-fidelity and high-fidelity annotated wireframes.
You’ll also learn how to create sitemaps and functionality flows in Omnigraffle, which is a diagramming and digital illustration application used by professional designers.
Note: If you’ve never designed wireframes and user experience scenarios/flows, we highly recommend taking this course. We’ll be using wireframes in future classes, and this course will prepare you for the remaining modules in the series.
Low fidelity wireframes
Total Duration: 16m 22s
- Work on preliminary sitemap.
- Sketch out 4-6 sketches of the same screen, with each sketch, get more and more accurate. Here’s an example of thumbnail sketches.
- Once you have an accurate sketch, sketch 2-3 additional and different layouts for that screen
Why does UX matter?
High fidelity wireframes & Omnigraffle
Total Duration: 22m 56s
- Render your selected screens from low fidelity wireframes into high fidelity wireframes
- Use Omnigraffle, Sketch or Adobe XD to render the high fidelity wireframes
- TheNounProject : Icons
- Unsplash : Free Stock Imagery
- Lingo : Tool to help manage your digital assets
- Envato Elements : Paid for stock assets
UX is not UI. What is the difference?
4 Principles of UX Design
Total Duration: 4m 44s
The 4 principles of UX Design are:
- Design for your users, not for yourself
- Oversimplify functionality
- Focus on digestibility
- Focus on clarity
How do you create a success ready app?
UX homework assignment
Total Duration: 2m 16s
- Work on a music app that is a direct competitor to Apple Music
- Design the following screens:
- Sign Up & Sign In
- Main Landing page
- Go through:
- Low fidelity wireframes
- High fidelity wireframes
User interface design (UI)
User Interface design is all about creating a strong visual impact that helps define a brand. You’ll learn the complete process that results in a great-looking app. In this module, we’ll take the wireframes created in the User Experience design module and show you how to build a branded design around them.
You’ll learn how to design apps in Sketch, and also how to use Adobe Photoshop as a complementary software. We’ll cover what mood boards are and why they are important, and discuss how to select colors and typography.
Designing the UI in Sketch
Total Duration: 45m 32s
- Using the wireframe(s) and mood-board(s) designed in the previous courses, work on designing the UI as instructed in the video
- Mirror your design on to a phone so you can adjust dimensions, color and layout accordingly
- Design 2-3 different combinations based on the mood-boards you chose and select the UI that looks the best as the final work
Take these Sketch Courses
How to Make an App Addictive
5 Principles of UI Design
Total Duration: 11m 18s
- Keep your main colors to 2 – 3
- You may have additional shades of colors but keeping your colors to a minimum will help you build a more beautiful, and cleared brand
- Be sensitive with drop shadows
- When using drop-shadows, keep them light and clean
- The darker your shadows, the more it will make your design look less crisp and out of date
- Watch your margins
- Make sure you leave plenty of space on the edges of your design and wherever you have type and iconography
- Do not re-invent the wheel
- While it is ok to be different, you don’t want to design something that is so far off-the spectrum that makes people raise an eyebrow
- As you build your mood-boards, take hint on overall design-style
- Do not copy
- There is a fine line between inspiration and plagiarism
- When you build your mood-boards, it is ok to use a similar color palette, it is not however ok to copy an entire layout including icons, typography and imagery
UI homework assignment
Total Duration: 9m 25s
- Work on a music app that is a direct competitor to Apple Music, Spotify and Tidal
- Conduct the research, and design the low fidelity wireframes and high fidelity wireframes for the following screens:
- Sign Up & Sign In
- Main Landing page
- Work on mood boards:
- Select 2-3 different color palettes
- Collect samples of app UI designs
- Select your typography
- Design the UI:
- Use Sketch, Adobe XD or Adobe Illustrator
- Have two different color options for each screen
Interactive prototyping helps us build a working model of our still designs, and along with wire-framing, it is one of the most important steps in the design process. Interactive prototyping lets you show your design to the client or other stakeholders important to the project, and so it is critical to learn how to do it right.
By the end of this module, you’ll understand how to bring your designs to life and to make them interactive. You’ll be able to create a working model of your app, install it on your phone and then be able to share it with others. You’ll get hands-on with the programs needed to learn how to do this: Sketch, Craft Manager and InVision.
Principles of prototyping
Total Duration: 4m 02s
5 Principles of App Prototyping:
- Keep animations to a minimum
- The more animations you have, the more complex your project will become
- Talk about Paper by Facebook
- Break down your prototype
- For complex prototypes, break them down into multiple flows
- Annotate your prototypes
- Leave developer or user comments through screens on your prototype
- Share your prototypes
- Use your prototypes in your portfolio pages
- Share them to receive feedback
- Take Joy and have fun
- Don’t forget to enjoy building your prototypes and have fun while you do it
Homework and last thoughts
Total Duration: 2m 41s
- Build out the prototype for the music app you’ve been working on
- For an additional project, work on a productivity app
- Work on 10-12 portfolio pieces to get you ready to apply for jobs
Congratulations on completing Module 5! We’re excited about your career moving forward. To help guide you in the right direction from here, book a call with Vasile. The 30-min free online-meeting is designed to evaluate your progress, provide guidance and help answer any questions you have.
In preparation for the call, have your assignments ready to share along with questions or concerns. We are excited about your career and look forward to connecting soon!