UI & Design Thinking - Design Theory & Sketch Tutorials
3.4 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
69 students enrolled

UI & Design Thinking - Design Theory & Sketch Tutorials

Learn the tools, technique, and theory behind visual design fundamentals.
3.4 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
69 students enrolled
Last updated 6/2018
English
English [Auto-generated]
Current price: $12.99 Original price: $19.99 Discount: 35% off
16 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 11 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Solve the right problem using the Design Process
  • Use design softwares (like Sketch and InVision Studio) like a pro
  • Leverage Color Theory to communicate with your user
  • Design using solid alignment and spacing techniques
  • Select the perfect typography for your project
  • Design and build better buttons and links
  • Create beautiful, clean, professional mockups to showcase your designs
  • Build your own icons and logos
  • Learn how to convert your designs into code
Requirements
  • No previous design knowledge is necessary.
  • You will need access to a computer so you can download and access design software so you can follow along and complete assignments. (Online design tools are available - Figma, for example)
Description

Looking to improve your basic visual design skills with few simple tricks and rules of thumb? Want to learn more about Sketch or InVision Studio? Then this course is for you. The course focuses on web and application design, but the theories we teach can also be applied to print design. 

In this course, I'll teach you crucial design lessons:

  • Learn to solve and design for the right problem
  • How to use design softwares (like Sketch & InVision Studio) like a pro
  • Leverage color theory to communicate with your user
  • Design solid alignment and spacing techniques
  • Select the perfect typography for your needs
  • Design better buttons and links
  • Create professional mockups to showcase your designs
  • Build your own icons and logos
  • Convert your designs into code (for those that already know development
Who this course is for:
  • People looking to learn or brush up on the basics of visual design fundamentals. We focus on web and app development, but the theories we teach can be applied to print as well.
  • Beginning designers using Sketch or InVision Studio. Experienced designers should not take this course.
Course content
Expand all 24 lectures 03:02:39
+ Introduction
1 lecture 01:06

Welcome to our UI & Design Thinking class! We're excited you're here. We hope you gain valuable skills and insights from our course.

Preview 01:06
+ Design Tools & Tutorials
4 lectures 23:17

The Design Process is fundamental to good design. It doesn't matter how great your design looks if you didn't consider your audience and their needs. Using the Design Process can help you avoid this pitfall.

Takeaways:

  • The Design Process is driven by Needs.
  • Many designs fail because user needs were not considered
  • The best designs clearly and easily answer the problem the user is experiencing.
  • It can be helpful to identify what is NOT needed to solve the problem.
  • Research and Testing are vital because they allow you to see if you are actually meeting user needs.

OPEN IDEO PROMPT: https://challenges.openideo.com/challenge/caregiving-dementia/brief

Design Thinking
06:38

Let's get visual. If you already know the design software you want to use, feel free to skip ahead. If not, I'll walk you through your options. 

INVISION STUDIO: https://www.invisionapp.com/studio

SKETCH APP: https://www.sketchapp.com/

FIGMA: https://www.figma.com/

OTHER TOOLS: https://uxtools.co/tools/design

Preview 01:42

In this video I'll teach you the basics of Sketch, the most widely used industry tool for web and app design.

SKETCH APP: https://www.sketchapp.com/

Sketch Tutorial
10:07

In this video I'll teach you the basics of InVision Studio, a new and highly anticipated design software.

INVISION STUDIO: https://www.invisionapp.com/studio

InVision Studio Tutorial
04:50
+ Design Theory
9 lectures 01:12:08

This video goes over basic Color Theory, particularly the meanings behind colors. After this video your designs will be even more powerful and influential as you effectively communicate with your users using color.

TAKEAWAYS:

  • Red: Alarm, energize, power, youth
  • Orange: Energy, cheerful, playful
  • Yellow: Warm, energetic, stimulating, welcoming, timeless
  • Green: Relaxing, positive growth, money, nature
  • Light Blue: Friendly, inviting, safe, welcoming
  • Dark Blue: Calming, somber, reliable, down-to-earth, professional
  • Purple: Royal, luxurious, romance, honor, mystery
  • Black: Power, sophistication
  • White: Clean, pure, virtuous, supportive
  • Gray: Neutral
Preview 09:06

Follow along as I use color theory to select colors that would represent a business focused on empowering women in their careers. You'll gain a better understanding of color theory if you follow along. 

Adobe Color: https://color.adobe.com/

Color Theory Tutorial
05:42

Learn how to use good layout and composition theory to organize content and give intuitive cues to your users.

TAKEAWAYS:

  • Use Proximity, White Space, Alignment, Contrast, Repetition
  • Use heuristics (common patterns users are accustomed to, e.g., menu on the top left, search in the navbar)


Layout and Composition
07:53

Follow along as I use Layout & Composition theory to create a Summer BBQ invite. You'll gain a better understanding of layout if you follow along. 

I've included a sample Sketch file with the original content and finished flier in resources for you to download. 

Layout and Composition Tutorial - Sketch
07:31

Follow along as I make a Summer BBQ invite in InVision Studio. You'll gain a better understanding of our Layout & Composition theories as we make a flyer. 

I've included a sample Studio file with the original content and finished flier in resources for you to download. 

Layout and Composition Tutorial - Studio
07:05

Learn a little more about the history of links and buttons, when to use each, and how to use them best to guide the user through your product.

TAKEAWAYS:

  • Styled buttons are easier to consume for users
  • Stay consistent
  • Have one color for links and don't use it for text elsewhere. Don't underline links if you choose to color them. 
  • Have primary and secondary buttons. 
Buttons and Links
08:29

Follow along and practice your skills in creating buttons that are easy for your users. 

I've included a sample Sketch file with the original content and finished result in resources for you to download. 

Buttons and Links Tutorial
03:07

Start your journey to becoming a typography guru. Good typography is vital because words are your most powerful tool in communicating with your user, and if they have a hard time reading your message, you've already failed them. By the end of this video you'll know several extremely helpful tips to making your type more readable. 

TAKEAWAYS:

  • Anatomy of typography
  • Sans serif for headers, serif for print
  • Smaller x-height with smaller sizes of font is more readable
  • Match the x-height of the header with the height of the body text
  • Use a typographic hierarchy
  • User vertical spacing (line height and paragraph spacing)
  • Keep line length to about 65-75 characters per line
  • If specific italic or bold fonts are available for a certain type, use them!
Typography
09:50

Follow along as we go through the process of selecting a good type for an online journal. 

Look up a Lorem Ipsum generator for filler content. 

Typography Tutorial
13:25
+ Vectors, Logos, & Symbols
5 lectures 59:35

Vectors are a powerful tool for designers. They allow you to create and edit custom icons, logos, etc. I've been using them for years and have condensed everything I've learned into this video, just for you. The tips in this video will make you a master of vectors in Sketch. 

Vectors - Sketch
13:17

Vectors are a powerful tool for designers. They allow you to create and edit custom icons, logos, etc. I've been using them for years and have condensed everything I've learned into this video, just for you. 

NOTE: I'm using the Early Access version of InVision Studio, so likely all the kinks will be worked out better in the future. 

Vectors - Studio
08:08

This video puts your new vector skills to use. I'm going to teach you how to create a great logo based on a just a few simple rules.


Great video by Will Paterson on Logos: https://www.youtube.com/watch?v=dQjcqEE37jA

Your Logo is Copied (Medium Article): https://medium.com/@fvo/your-logo-is-copied-710ac4604258

Trademarks & Symbols: http://trademarksandsymbols.com/

Canva: https://www.canva.com/


TAKEAWAYS:

  • Cardinal Rules of Logos:
    • Keep it simple
    • Balanced
    • Scalable
    • Color & Grayscale
    • Be original
  • Extra Tips:
    • Flip it around, focus on shape
    • Exaggerate negative space
    • Use geometric shapes
    • Brainstorm 50 ideas
    • Go somewhere
  • Use Fibonacci Ratio
Preview 04:58

This video is meant to help you practice creating a logo using the Golden Ratio. I'll walk you through every step. 

Logo Follow-Along
20:43

Symbols keep things simple. Need to switch out an icon that you've used 100+ times in a document? No problem. Symbols make it easy. 

This video will teach you how to use symbols in Sketch, how to manipulate them using overrides, and how to organize them. 

Symbols in Sketch
12:29
+ Beyond the Design
4 lectures 26:07

This video will show you how to create clean and professional looking design mockups. Learn how to place the screens you design into realistic looking devices. 

Angle 2: https://designcode.io/angle

Angle 2 Full Tutorial: https://www.youtube.com/watch?v=Dps7vBlWMTc


Presentation
04:55

In this video we'll teach you how to productively take part in design reviews, including giving and receiving feedback. 

InVision article on Design Reviews: https://www.invisionapp.com/blog/how-to-run-design-reviews/

TAKEAWAYS:

  • Hold design reviews often and include key stakeholders
  • Always keep the project's goal in mind
  • Note what you like & what you don't like
  • Check your emotions and feelings at the door
  • Avoid subjective absolutes like "This looks ugly."
  • Prioritize their feedback
Design Reviews
04:37

BONUS VIDEO: Converting great designs to code can be difficult. This video talks about how to make your developer's life easier by giving them what they need to succeed (which translates to helping you succeed, since they'll do a better job anyways). 

Converting Design to Code == Handoff. 

TAKEAWAYS:

  • Give your developers
    • The copy
    • The design (with and without specs)
    • Assets
    • Storyboard / Interaction Maps
    • Special Functionality Instructions


BONUS: Converting Design to Code
02:49

BONUS VIDEO: Converting great designs to code can be difficult. For those that have a development background, this video shows how to copy styles from your designs and apply them to CSS classes. 

We'll walk through a simple example of creating an app's splash page, just to give you an idea. We'll be using InVision's Inspect tool, where we've uploaded Sketch files. 


BONUS: Converting Design to Code Tutorial
13:46
+ Conclusion
1 lecture 00:26

Thanks for joining us in our UI & Design Thinking class! We hope you gained valuable skills and insights from our course.

Please leave us feedback so we can continue to improve our course! 

Conclusion
00:26