Веб и мобильный дизайн в 2020 году: UI / UX, Figma и многое другое

Поделиться Курсом / Книгой / и тд.
#1

Design Resources

Throughout the course we are going to be using various tools and resources for designers to build our project. To keep everything organized and to also have a place for you to stay organized, we have included all the design resources and assets here for you. You can also use the attached downloadable PDF version :slight_smile:

Logo Makers

Tools We Will Use:

Individual Figma Files (more on how to use these later in the course!)

Figma Plugins

Extra Figma Files

  1. Inspiration
  2. Figma Inspiration Board
  3. User Flows
  4. User Flow Kit
  5. UX Flowchart kit for Figma
  6. Sitemaps
  7. Sitemap Generator
  8. Wireframes
  9. Wireframe Component Library
  10. Ant UX Wireframes
  11. iOS App Wireframes
  12. Figma Wireframe Kit
  13. Fragments iOS Base 1.0 – iOS 14 Wireframe Starter Kit
  14. Getting Feedback
  15. :speaking_head:Feedback Kit | Want good feedback from your team? Feedback Kit is here to help you ask for the type of feedback …
  16. Color
  17. Color Styles
  18. Imagery + Iconography
  19. Free 60 illustrations - Surface Pack
  20. :boom: Vector Illustrations
  21. 1100+ Free Vector Illustrations
  22. Mobile Design
  23. Fragments iOS Base 1.0 – iOS 14 Wireframe Starter Kit
  24. iOS Keyboards
  25. iOS App Wireframes
  26. iOS & iPadOS 14 UI Kit for Figma
  27. iOS/iPadOS 13 Design UI Kit
  28. Android UI kit
  29. Design Systems
  30. Design System Checklist

Extra Articles/Websites + Resources

  1. Sketching
  2. Sketching. How to use sketching in your design
  3. Concepts App • Infinite, Flexible Sketching
  4. 7 reasons for sketching in UX design
  5. UI/UX sketching techniques 101. UX design is indeed a complicated…
  6. Inspiration
  7. 31 UX Design Inspiration Resources
  8. Dribbble - Discover the World’s Top Designers & Creative Professionals
  9. Behance :: Best of Behance
  10. Pttrns: Mobile Design Patterns
  11. Pinterest
  12. Panda — The homepage for your favorite websites
  13. Awwwards - Website Awards - Best Web Design Trends
  14. User Flows
  15. What Are User Flows In UX Design? (A full beginner’s guide)
  16. User flow is the new wireframe. An illustrated guide on the different…
  17. Sitemaps
  18. Free Sitemap Generator
  19. Sitemaps - The Beginner’s Guide - UXmentor.me
  20. Professional approach to designing a visual sitemap
  21. Wireframes
  22. How to Create a Wireframe - A Beginner’s Guide to Wireframing
  23. Getting Feedback
  24. How to give and receive great design feedback
  25. Grids + Spacing
  26. Spacing, Grids and Layouts
  27. The Comprehensive 8pt Grid Guide. Start your UI project right with this…
  28. Typography
  29. Google Fonts
  30. Color
  31. Colorable
  32. Coolors - The super fast color schemes generator!
  33. Adobe Color: Color wheel, a color palette generator
  34. Colormind - the AI powered color palette generator
  35. Imagery + Iconography
  36. Noun Project: Free Icons for Everything
  37. Blush: Illustrations for everyone
  38. Material Icons
  39. Accessibility
  40. Colorable
  41. Contrast Checker
  42. Web Content Accessibility Guidelines (WCAG) 2.0
  43. World Wide Web Consortium (W3C)
  44. Color Contrast Analyzer
  45. Design Patterns
  46. Design patterns
  47. Mobile Design
  48. Human Interface Guidelines - Design
  49. Android Developers
  50. Visual Style + Exploration
  51. Atomic Design Methodology
  52. What is Visual Design?
  53. 5 Principles of Visual Design in UX
  54. Motion
  55. The ultimate guide to proper use of animation in UX
  56. Creating Usability with Motion: The UX in Motion Manifesto
  57. The importance of motion for UX design
  58. Microinteractions
  59. How to use microinteractions in 2020 (uses, examples, tips)
  60. Better UX Through Microinteractions
  61. Design Systems
  62. A comprehensive guide to design systems
  63. Everything you need to know about Design Systems
  64. A Collection of Design System Resources
  65. Design Systems Handbook
  66. Design Systems articles on building and maintaining design systems

Section 1: GETTING STARTED - Sketching, Inspiration, User Flows

Getting Ready For This Section

Throughout the section, your challenge is to take the information you learn and actually applying them to your own design or to modify the project we are working on to make it “your own”. We’re excited to see what you create at the end of this thing! If you have any questions, please use the # design channel in our Discord community!

Tools

Individual Figma Files

Figma Plugins

Extra Figma Files

  1. Inspiration
  2. Figma Inspiration Board
  3. User Flows
  4. User Flow Kit
  5. UX Flowchart kit for Figma
  6. Sitemaps
  7. Sitemap Generator

Extra Articles/Websites + Resources

  1. Sketching
  2. Sketching. How to use sketching in your design
  3. Concepts App • Infinite, Flexible Sketching
  4. 7 reasons for sketching in UX design
  5. UI/UX sketching techniques 101. UX design is indeed a complicated…
  6. Inspiration
  7. 31 UX Design Inspiration Resources
  8. Dribbble - Discover the World’s Top Designers & Creative Professionals
  9. Behance :: Best of Behance
  10. Pttrns: Mobile Design Patterns
  11. Pinterest
  12. Panda — The homepage for your favorite websites
  13. Awwwards - Website Awards - Best Web Design Trends
  14. User Flows
  15. What Are User Flows In UX Design? (A full beginner’s guide)
  16. User flow is the new wireframe. An illustrated guide on the different…
  17. Sitemaps
  18. Free Sitemap Generator
  19. Sitemaps - The Beginner’s Guide - UXmentor.me
  20. Professional approach to designing a visual sitemap

User Flows

Getting Started With Figma

Starting the next couple of videos, we will begin to use a valuable tool of a designer: Figma

For a few of you, this may be the first time you have heard of this tool so we have included some helpful guides to get your account setup (you will need to create a free account online for you to use it) .

We know that getting started with a new tool can be tough but trust us, Figma is really user friendly. We have compiled some resources for you to get started using Figma today. We also included a couple of links that outline how you can access and duplicate Figma resources for this course that we provide for you.

Getting Started

Using the Figma Desktop App (although you can stick with the web and use that as well)

Accessing and Duplicating the Course Figma Resources (how to make the files we give you into your own)

Endorsements On LinkedIn

If you are looking to improve your LinkedIn profile and have others endorse your skills, we have a private ZTM LinkedIn group here . LinkedIn allows you to have recruiters message you with lots of job opportunities. You can join the group by clicking on “LinkedIn Group” and then go ahead and endorse some of the member’s skills (other people will do the same for you as they join).

If you have any questions, reach out in our private Discord chat community in the #job-hunting channel!

UPDATE!!! Zero to Mastery is officially a recognized school! What does this mean for you? It means that you can add it as an educational institution on LinkedIn as part of your profile to wow those employers (as your education history) . Check it out here . To add it to your profile:

Step 1: Go to personal LinkedIn profile

Step 2: Scroll down to the Education section

Step 3: Click the +

Step 4: Type in Zero To Mastery Academy

Section 2: EXPLORE & ITERATE - Wireframes, Prototyping, and Feedback

Getting Ready For This Section

Throughout the section, your challenge is to take the information you learn and actually applying them to your own design or to modify the project we are working on to make it “your own”. We’re excited to see what you create at the end of this thing! If you have any questions, please use the # design channel in our Discord community!

Tools

Individual Figma Files

Figma Plugins

Extra Figma Files

  1. Wireframes
  2. Wireframe Component Library
  3. Ant UX Wireframes
  4. iOS App Wireframes
  5. Figma Wireframe Kit
  6. Fragments iOS Base 1.0 – iOS 14 Wireframe Starter Kit
  7. Getting Feedback
  8. :speaking_head:Feedback Kit | Want good feedback from your team? Feedback Kit is here to help you ask for the type of feedback …

Extra Articles/Websites + Resources

  1. Wireframes
  2. How to Create a Wireframe - A Beginner’s Guide to Wireframing
  3. Getting Feedback
  4. How to give and receive great design feedback

Section 3: VISUAL DESIGN - Design Theory + Accessibility

Getting Ready For This Section

Throughout the section, your challenge is to take the information you learn and actually applying them to your own design or to modify the project we are working on to make it “your own”. We’re excited to see what you create at the end of this thing! If you have any questions, please use the # design channel in our Discord community!

Tools

Individual Figma Files

Figma Plugins

Extra Figma Files

  1. Color
  2. Color Styles
  3. Imagery + Iconography
  4. Free 60 illustrations - Surface Pack
  5. :boom: Vector Illustrations
  6. 1100+ Free Vector Illustrations

Extra Articles/Websites + Resources

  1. Grids + Spacing
  2. Spacing, Grids and Layouts
  3. The Comprehensive 8pt Grid Guide. Start your UI project right with this…
  4. Typography
  5. Google Fonts
  6. Color
  7. Colorable
  8. Coolors - The super fast color schemes generator!
  9. Adobe Color: Color wheel, a color palette generator
  10. Colormind - the AI powered color palette generator
  11. Imagery + Iconography
  12. Noun Project: Free Icons for Everything
  13. Blush: Illustrations for everyone
  14. Material Icons
  15. Accessibility
  16. Colorable
  17. Contrast Checker
  18. Web Content Accessibility Guidelines (WCAG) 2.0
  19. World Wide Web Consortium (W3C)
  20. Color Contrast Analyzer

Section 4: DESIGN EXPLORATION - Application Design + Design Systems

Getting Ready For This Section

Throughout the section, your challenge is to take the information you learn and actually applying them to your own design or to modify the project we are working on to make it “your own”. We’re excited to see what you create at the end of this thing! If you have any questions, please use the # design channel in our Discord community!

Tools

Individual Figma Files

Figma Plugins

Extra Figma Files

  1. Mobile Design
  2. Fragments iOS Base 1.0 – iOS 14 Wireframe Starter Kit
  3. iOS Keyboards
  4. iOS App Wireframes
  5. iOS & iPadOS 14 UI Kit for Figma
  6. iOS/iPadOS 13 Design UI Kit
  7. Android UI kit

|Extra Articles/Websites + Resources

  1. Design Patterns
  2. Design patterns
  3. Mobile Design
  4. Human Interface Guidelines - Design
  5. Android Developers
  6. Visual Style + Exploration
  7. Atomic Design Methodology
  8. What is Visual Design?
  9. 5 Principles of Visual Design in UX
  10. Motion
  11. The ultimate guide to proper use of animation in UX
  12. Creating Usability with Motion: The UX in Motion Manifesto
  13. The importance of motion for UX design
  14. Microinteractions
  15. How to use microinteractions in 2020 (uses, examples, tips)
  16. Better UX Through Microinteractions

Section 5: PUTTING IT ALL TOGETHER – Design Systems and Final Compositions

Getting Ready For This Section

Throughout the section, your challenge is to take the information you learn and actually applying them to your own design or to modify the project we are working on to make it “your own”. We’re excited to see what you create at the end of this thing! If you have any questions, please use the # design channel in our Discord community!

Tools

Individual Figma Files

Figma Plugins

Extra Figma Files

  1. Design Systems
  2. Design System Checklist

Extra Articles/Websites + Resources

  1. Design Systems
  2. A comprehensive guide to design systems
  3. Everything you need to know about Design Systems
  4. A Collection of Design System Resources
  5. Design Systems Handbook
  6. Design Systems articles on building and maintaining design systems

Bonus: Bootstrap, Templates, And Building Your Startup Landing Page

Free Resources For Our Project

In the next couple of videos we will be building our own Startup Landing Page! Although you can follow along and copy what I do, you will also have the ability to create your own versions! I have gathered all the free resources that you can use to build your own website here: https://zerotomastery.io/resources

2 симпатии