- 3 hours on-demand video
- 11 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
- 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)
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
- 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.
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.
- 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
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/
OTHER TOOLS: https://uxtools.co/tools/design
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.
- 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
Learn how to use good layout and composition theory to organize content and give intuitive cues to your users.
- 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)
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.
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.
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.
- 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.
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.
- 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!
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.
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/
- Cardinal Rules of Logos:
- Keep it simple
- 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
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/
- 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
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.
- Give your developers
- The copy
- The design (with and without specs)
- Storyboard / Interaction Maps
- Special Functionality Instructions
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.