مطالب پیشنهادی از سراسر وب

دوره کامل طراح موبایل و وب در 2021 - Figma ،UI/UX

دسته بندی ها: آموزش های ویژه ، آموزش یو ایکس (UX) ، آموزش طراحی وب ، آموزش های یودمی (Udemy) ، برنامه نویسی موبایل ، آموزش فیگما (Figma)

در سال 2021 طراح شوید! طراح مستر موبایل و وب شوید و رابط کاربری + تجربه کاربری (طراحی UI / UX)، HTML و CSS را فرا بگیرید.

آخرین به روز رسانی: 2021-1

آنچه یاد خواهید گرفت:

  • با استفاده از ابزارهای مدرن مورد استفاده شرکت های برتر در سال 2021 پروژه های وب و موبایل با طراحی زیبا ایجاد کنید
  • به عنوان طراح استخدام شوید یا به یک فریلنسر تبدیل شوید که می تواند از هر کجا و برای هر کسی کار کند. برای طراحان تقاضای زیادی دارند!
  • این دوره شامل بیش از 100 دارایی و الگوهای طراحی برتر است که می توانید برای سفارشی سازی برای همه پروژه های آینده خود نگه دارید و استفاده کنید
  • بر روی فیگما جهت طراحی مورد نیاز مسلط شوید و سپس یاد بگیرید که طرح های خود را به HTML و وب سایت CSS تبدیل کنید
  • نمونه کارهای شگفت انگیز طراحی شده را تا پایان دوره سفارشی و حرفه ای انجام دهید (ما آن را برای شما فراهم می کنیم!)
  • بر اصول طراحی وب و موبایل تسلط کامل داشته باشید و اینکه چگونه می توانید از طراحی به طرح های کاملاً با کیفیت بالا و اعتماد به نفس بپردازید
  • با استفاده از فیگما و سایر ابزارهای مورد استفاده برخی از طراحان برتر دنیا، طراحی برای انواع دستگاه ها را بیاموزید
  • بیاموزید که از HTML5 و CSS3 استفاده کنید تا طرح های شما واقعی شود و وب سایت هایی کاملاً کارآمد ایجاد کنید
  • بهترین روش هایی را یاد بگیرید که یادگیری آنها در صنعت طراحی سال ها به طول می انجامد
  • بیاموزید که برای همه نیازهای برند، لوگو و انتخاب حرفه ای طراحی کنید
  • با استفاده از آخرین روندهای صنعت، بهترین شیوه های UI / UX را بیاموزید
  • بیاموزید که به طور همزمان یک طراح و همچنین یک توسعه دهنده وب باشید (ترکیبی نادر از مهارت ها که تقاضای شغلی زیادی دارد)!

الزامات دوره:

هیچ پیش نیازی لازم نیست. بدون پیش نیاز این دوره به شما آموزش می دهد و همه چیز را از ابتدا به شما نشان می دهد! از صفر تا 100. آماده شوید تا عاشق طراحی شوید و همه چیزهایی را که مشاهده می کنید تا پایان عمر به پروژه های زیبا تبدیل کنید! 

توضیحات دوره:

به تازگی با استفاده از تمام ابزارهای طراحی مدرن و بهترین روش ها برای سال 2021 راه اندازی شده است! به یک انجمن آنلاین زنده متشکل از بیش از 400000 دانشجو و دوره ای که توسط کارشناسان صنعت تدریس می شود بپیوندید که در واقع در Silicon Valley و تورنتو برای شرکت های برتر کار کرده اند. یافتن یک طراح عالی دشوارتر و دشوارتر می شود و کمتر پیش می آید که طراحان اکنون 160 هزار دلار + حقوق بدست آورند زیرا این مهارت بسیار ارزشمندی است. ما به شما یاد خواهیم داد که چگونه به آنجا برسید!

با استفاده از آخرین و بهترین روش ها در طراحی وب و طراحی موبایل و همچنین رابط کاربری و طراحی تجربه کاربری (UI / UX)، این دوره بر این است که شما را از صفر به جایی برساند که بتوانید استخدام شوید یا قراردادهای مستقل بندید. ما از ابزارهای مورد نیاز مانند Figma استفاده خواهیم کرد تا گردش کار را از ابتدا تا انتها به شما نشان دهیم. فارغ التحصیلان دوره های این مدرس اکنون در Google ،Tesla ،Amazon ،Apple ،IBM ،JP Morgan Facebook و غیره سایر شرکت های برتر فناوری مشغول به کار هستند.

این دوره همچنین شامل بیش از 100 دارایی و الگوهای طراحی برتر است که می توانید برای سفارشی سازی برای همه پروژه های آینده خود نگه دارید و استفاده کنید. این دوره به شما تضمین می کند که این جامع ترین منبع آنلاین در زمینه مهارت های طراحی است!

این دوره از ابتدا تا انتهای کار به عنوان یک طراح، شما را راهنمایی می کند، برنامه درسی بسیار کاربردی دارد و همه راه برای یادگیری نحوه ایجاد طرح های حرفه ای نهایی و سپس تبدیل آنها به وب سایت ها یا برنامه های واقعی با استفاده از HTML و CSS است.

مباحث مورد تدریس در این دوره عبارتند از ...

  • اصول طراحی وب و موبایل + توسعه وب درمقابل طراحی
  • Sketching
  • الهام گرفتن
  • جریان های کاربری
  • Sitemaps
  • Wireframes
  • نمونه سازی اولیه
  • گرفتن فیدبک
  • Grids + Spacing
  • تایپوگرافی
  • رنگ
  • فرم ها + عناصر UI 
  • Imagery + Iconography
  • قابیلت دسترسی
  • الگوهای طراحی
  • طراحی موبایلی
  • اعمال طراحی بصری
  • موشن
  • Microinteractions
  • سیستم های طراحی
  • کامپوزیشن نهایی
  • از FIGMA تا وبسایت
  • HTML + HTML5
  • CSS + CSS3 - مبانی CSS 

این دوره کاملاً جدید شما را از مبانی همراهی خواهد کرد و در مورد اصول طراحی گرافیک صحبت می کند، تمام راه برای ایجاد محصولات زیبا، یادگیری UX / UI و تعاملات و ایجاد یک فرآیند طراحی کامل برای استفاده شما از پروژه های آینده و مشتریان خود تلاش می کند. تقریباً همه این موارد را پوشش می دهد تا دفعه بعدی که مسئولیت طراحی محصول را بر عهده دارید، گام به گام طرح کلی و راهنمای کار به عنوان یک طراح حرفه ای را داشته باشید.

این دوره قصد دارد مهارت هایی را به شما آموزش دهد که به شما امکان می دهد هزینه زیادی را برای وقت خود شارژ کنید. نه اینکه برای چند ساعت در هر ساعت در برخی از وب سایت های آزاد کار تصادفی رقابت کنید. هدف این است که مهارت های یک طراح برتر را به شما ارائه دهد و در این راه، قصد دارد یک محصول واقعی برای شرکتی طراحی کنید که بتوانید به سبد محصولات خود اضافه کنید.

این دوره به این معنی نیست که شما بدون درک اصول فقط به تماشای آن بپردازید تا وقتی دوره را تمام کردید، به غیر از تماشای آموزش دیگر، نمی دانید چه کاری باید انجام دهید. نه این دوره شما را تحت فشار قرار می دهد و شما را به چالش می کشد که از یک مبتدی مطلق به شخصی تبدیل شوید که یک طراح برجسته باشید و بتوانید استخدام شوید! طراحی یک مهارت ارزشمند است که مانند اکثر مهارت های فنی به راحتی قدیمی نمی شود. روند کار تغییر می کند، اما مهارت ها و اصول اساسی که در این دوره یاد می گیرید سال ها شما را در آینده پشتیبانی می کند.

این دوره برای شما مناسب است اگر:

  • شما یک مبتدی کامل هستید که به دنبال تبدیل شدن به یک طراح و فریلنسر هستید
  • شما یک طراح هستید که به دنبال بالا بردن هزینه بیشتر کار خود هستید
  • شما یک توسعه دهنده هستید که به دنبال بهبود مهارت های طراحی خود هستید

این دوره برای چه کسانی است:

  • هر کسی که می خواهد از طریق آن به عنوان فریلنسر تجارت وب یا موبایل طراحی را شروع کند یا به عنوان طراح در یک شرکت کار کند
  • توسعه دهندگان وب و توسعه دهندگان موبایل که می خواهند مهارت ارزشمند دیگری را به ابزار خود اضافه کنند
  • هرکسی که می خواهد به عنوان یک طراح وب، طراح موبایل، طراح UI / UX استخدام شود
  • هر کسی که می خواهد در مورد آخرین ویژگی های CSS3 مانند Flexbox ،CSS Grid و متغیرهای CSS و همچنین HTML5 اطلاعاتی کسب کند.

سرفصل های دوره:

  • مقدمه
  • بخش 1 - شروع کار - User Flows، Inspiration، Sketching
  • Sketching
  • Inspiration
  • معرفی Figma
  • User Flows
  • Sitemaps
  • بخش 2 - بررسی و تقلید - Prototyping، Wireframes و Feedback
  • Wireframes
  • نمونه سازی اولیه
  • Feedback 
  • بخش 3 - طراحی بصری - تئوری طراحی + قابلیت دسترسی
  • Spacing و  Grid
  • تایپوگرافی
  • رنگ
  • فرم ها + عناصر UI 
  • دارایی های بصری
  • قابلیت دسترسی
  • بخش 4 - بررسی طراحی - طراحی اپلیکیشن + سیستم های طراحی
  • الگوهای طراحی
  • طراحی موبایل
  • موشن
  • Microinteraction
  • سیستم های طراحی
  • کامپوزیشن نهایی
  • کار با Client Revisited
  • از اینجا به کجا برویم؟
  • نمونه کار وب
  • جایزه - اینترنت چگونه کار می کند؟
  • جایزه - تاریخچه وب
  • جایزه - HTML 5
  • جایزه - CSS 3
  • جایزه - بوت استرپ - تمپلیت ها و ساخت صفحه فرود استارت آپ
  • جایزه - CSS Grid + CSS Layout
  • بخش جایزه

سایر ویدئوهای دوره:

ملاقات با مشتری

 

2 مسیر

 

تمرین - ساخت لوگو

مقایسه طراح و توسعه دهنده

 

مهارت های مورد نیاز برای تبدیل شدن به برترین طراح

آیا این نوشته را دوست داشتید؟
Udemy Complete Web & Mobile Designer in 2021: UI/UX, Figma, +more Publisher:Udemy Author:Andrei Neagoie and Daniel Schifano Duration:25.5 hours Level:Advanced

Become a Designer in 2021! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS

What you'll learn

  • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2021
  • Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
  • Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
  • Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
  • Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
  • Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
  • Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
  • Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
  • Learn best practices that takes years to learn in the design industry
  • Learn to make professional logos and design choices for all branding needs
  • Learn UI/UX best practices using the latest trends in the industry
  • Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!

Requirements

No requirements. We teach you and show you everything from scratch! From Zero to Mastery
Get ready to fall in love with Design and making everything you touch into beautiful projects for the rest of your life!

Description

Just launched with all modern Design tools and best practices for 2021! Join a live online community of over 400,000+ students and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto for top companies. A great Designer is becoming harder and harder to find and it isn't rare to find designers make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!

Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!

The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.

The topics covered in the course are...

00 Web & Mobile Design Principles + Design vs Web Development

01 GETTING STARTED – Sketching, Inspiration + Structure

1. Sketching

Intro to sketching

Sketching UX flows

Sketching tips

2. Inspiration

How to stay inspired

How to find inspiration online

3. User Flows

What are user flows?

The do’s and don’ts

Speeding up our workflow with components

Creating our own user flows (Registration) Part 1

Creating our own user flows (Search) Part 2

Creating our own user flows (Checkout) Part 3

4. Sitemaps

An intro to sitemaps

Creating a basic sitemap

What you should be doing before you start

Creating a sitemap (part 1)

Creating a sitemap (part 2)

Tips for getting started

02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback

1. Wireframes

What is a wireframe?

How do I create a wireframe?

Speeding up your workflow in Figma

Creating our home page

Creating a product page

Creating a checkout page

2. Prototyping

Prototyping basics in Figma (Device + Triggers)

Prototyping basics in Figma (Actions)

Prototyping basics in Figma (Overflow)

Prototyping basics in Figma (Presentation + Collaboration)

Linking together a quick user flow in Figma

Working on small interactions with Figma

3. Getting feedback

Why is feedback so important?

How to get constructive feedback

03 VISUAL DESIGN – Design Theory + Accessibility

1. Grids + Spacing

Spacing and Grid Basics

Responsive Grids in Figma

Creating our own grid in Figma

The rules of the grid

2. Typography

Typography basics Part 1

Matching typefaces to an era

Typography basics Part 2

Selecting the right typeface

Typography basics Part 3

Picking a typeface

Does your typeface suit your scenario?

Expanding an existing type system

Choosing typefaces in Google Fonts

Narrowing down your typography choices

Creating a type system in Figma

3. Color

Color Schemes

Important questions to ask before picking colors

Helpful tips for creating color palettes

Creating a monochromatic color palette

Applying a our simple color palette

Expanding a strict color palette

Creating our own color palette

4. Forms + UI Elements

What are UI Elements

Best practices Part 1: Forms

Best practices Part 2: Inputs Part 1

Best practices Part 2: Inputs Part 2

Best practices Part 2: Inputs Part 3

Best practices Part 2: Inputs Part 4

Best practices Part 3: Buttons

How to create components in Figma

Using atomic elements in Figma

Using Instances in Figma

Editing instances to create new components

Using constraints to create responsive components

Creating a registration form in Figma

5. Imagery + Iconography

Resources and techniques to create great visual assets

Working with photos in Figma Part 1

Working with photos in Figma Part 2

Working with illustrations in Figma

Using Figma plugins to find Icons quickly

Creating our very own custom icons

6. Accessibility

What is accessibility?

Assistive technologies

Visual patterns for accessibility (Part 1)

Tools to make your design accessible

Visual patterns for accessibility (Part 2)

04 DESIGN EXPLORATION – Application Design + Design Systems

1. Design Patterns

What are design patterns?

Why are design patterns valuable?

How to apply design patterns

Analyzing design patterns together

Dissecting and choosing design patterns together

2. Mobile Design

Mobile design best practices (Part 1)

Mobile design best practices (Part 2)

3. Applying Visual Design

Design Fidelity

Style exploration (Navigation)

Style exploration (Cards)

Style exploration (Interests)

Style exploration (New elements)

4. Motion

The importance of motion

The purpose of motion

Intro to Smart Animate

Showcasing the power of Smart Animate

5. Microinteractions

What are microinteractions?

Why are they so important?

Creating our own microinteractions (Part 1)

Creating our own microinteractions (Part 2)

Using Figmotion (Part 1)

Using Figmotion (Part 2)

05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma

1. Design Systems

What is a design system?

Foundation (color)

Foundation (grids and spacing)

Foundation (typography)

Foundation (iconography)

Components (buttons)

Components (Inputs)

Components (cards)

Recipes (card layouts)

Recipes (search)

Recipes (orders)

2. Final Compositions

Using our design system (Search)

Using our design system (Product Description)

Using our design system (Cart)

06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)

07 HTML + HTML5

08 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations

09 PUTTING YOUR WEBSITE ONLINE

This brand new course will take you from the very basics where we talk about principles and fundamentals of graphic design, all the way to creating beautiful products, learning about UX/UI and interactions, and creating a full design process for you to use with all of your future projects and clients. We pretty much cover it all so that the next time you are in charge of designing a product you have the step by step outline and guide to work as a professional designer.

We are going to teach you the skills that will allow you to charge a lot of money for your time. Not to compete for a few dollars an hour on some random freelancing websites. The goal is to give you the skills of a top designer, and along the way, we are going to design an actual product for a company that you will be able to add to your portfolio.

This course is not about making you just watch along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner to someone that is a top Designer that can get hired! Design is a valuable skill that doesn’t get outdated easily like most technical skills. Trends change, but the skills and fundamentals you learn in this course will take you many years into the future.

This course is for you if:

- You are a complete beginner looking to become a designer and freelance

- You are a designer who is looking to charge more for your work

- You are a developer who is looking to improve their design skills

Taught By:

Andrei is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Tesla, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life.

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time. Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities.

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way.

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.

--------

Daniel is a design leader in tech with extensive experience in helping startups build and iterate on their products. Daniel is passionate about teaching and empowering designers and working with other disciplines to build purposeful products that meet both user and business goals.

His approach to design is always thoughtful and iterative. Daniel often finds himself working collaboratively with his team whether that is sketching concepts and flows or leading design strategy with team leads and external stakeholders.

Daniel is a multi faceted designer who’s expertise expands across multiple design disciplines. This includes User Experience and Visual Design, User Research, Product Strategy, Lean and Agile Design Methodologies and much more. HIs work has helped to shape different solutions for a variety of industries such as housing, blockchain and health.

When he is not building products, Daniel has spoke and mentored at different meetups and events. He aims to give back to the design community that he has learnt and continues to learn so much from. Daniel aims to always help, teach and support other designers in their careers.

See you inside the courses!

Who this course is for:

  • Anyone who wants to start a Web or Mobile Design business on the side as a freelancer, or work as a designer at a company
  • Web Developers and Mobile Developers wanting to add another valuable skill to their tool belt
  • Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
  • Anyone who want to learn about the latest CSS3 features like Flexbox, CSS Grid and CSS Variables as well as HTML5

Course content

38 sections • 257 lectures • 25h 57m total length
Collapse all sections
Introduction
9 lectures • 33min
Course Outline
Preview
07:00
Join Our Online Classroom!
00:57
Exercise: Meet The Community
01:12
Meeting The Client
Preview
04:13
The 2 Paths
Preview
01:55
Exercise: Building Your Logo
01:28
Design Resources
02:02
Designer vs Developer
Preview
06:53
Skills To Be A Top Designer
07:06
Section 1: GETTING STARTED - Sketching, Inspiration, User Flows
1 lecture • 1min
Getting Ready For This Section
00:43
Sketching
7 lectures • 52min
Introduction To Sketching
03:27
The Sketching Process
07:05
Sketching User Flows
08:05
Sketching User Flows 2
05:49
Sketching User Flows 3
09:49
Sketching User Flows 4
10:02
Sketching Tips
08:01
Inspiration
2 lectures • 22min
How To Stay Inspired
07:59
How To Find Inspiration
13:47
Introduction To Figma
9 lectures • 59min
Getting Started With Figma
00:43
Introducing Figma
01:49
Figma Dashboard
05:12
Figma Tools
05:45
Layers & Pages
03:22
The Top Bar
10:27
Design Properties
11:16
Prototyping With Figma
03:35
Exercise: Creating A Responsive Layout
16:43
User Flows
7 lectures • 58min
What Are User Flows?
06:16
The Do's And Don'ts
04:38
Speed Up Workflow With Components
06:39
Creating Our Own User Flows
12:49
Creating Our Own User Flows 2
13:10
Creating Our Own User Flows 3
13:19
Endorsements On LinkedIN
00:39
Sitemaps
6 lectures • 40min
Introduction To Sitemaps
01:44
Creating A Basic Sitemap
04:16
Before You Start
07:57
Creating A Sitemap
15:24
Creating A Sitemap 2
06:11
Tips For Getting Started
04:33
Section 2: EXPLORE & ITERATE - Wireframes, Prototyping, and Feedback
1 lecture • 1min
Getting Ready For This Section
00:32
Wireframes
6 lectures • 59min
What Is A Wireframe?
06:51
How To Create A Wireframe
06:43
Wireframes In FIgma
05:13
Creating Our Home Page
16:57
Creating A Product Page
12:19
Creating A Checkout Page
10:56
Prototyping
6 lectures • 57min
Prototyping Basics In Figma
11:32
Prototyping Basics In Figma 2
07:31
Prototyping Basics In Figma 3
05:32
Prototyping Basics In Figma 4
10:00
Linking Together A Quick User Flow
11:00
Working On Small Interactions
11:50
Feedback
2 lectures • 11min
Why Is Feedback Important?
04:18
Constructive Feedback
06:48
Section 3: VISUAL DESIGN - Design Theory + Accessibility
1 lecture • 1min
Getting Ready For This Section
00:42
Spacing And The Grid
5 lectures • 31min
What Is A Grid?
04:03
Grid Basics
Preview
05:56
Responsive Grids And Breakpoints
07:36
Making Our Grid In Figma
08:51
Grid Guidelines
04:51
Typography
8 lectures • 57min
Serifs
03:21
Sans Serifs
03:41
Display & Mono
04:38
Picking Typefaces
01:39
Choosing Typefaces For A Project
10:12
Choosing Typefaces For A Project 2
10:00
Choosing Typefaces For A Project 3
11:46
Creating Our Own Type System
11:13
Color
7 lectures • 45min
Color Schemes
03:53
Important Questions To Ask
02:44
Creating Color Palettes
02:55
Creating A Monochromatic Color Palette
05:07
Applying Our Color Palette
11:57
Expanding A Strict Color Palette
07:07
Creating Our Own Color Palette
Preview
11:33
Forms + UI Elements
13 lectures • 1hr 33min
What Are Forms + UI Elements?
04:19
Best Practices For Forms
14:53
Best Practices For Inputs
04:47
Best Practices For Inputs 2
07:47
Best Practices For Inputs 3
03:11
Best Practices For Inputs 4
07:42
Best Practices For Buttons
06:38
Creating Components In Figma
04:04
Using Atomic Elements
06:59
Using Instances In Figma
03:28
Editing Instances
05:04
Responsive Components
Preview
05:05
Creating A Registration Form In Figma
19:09
Visual Assets
6 lectures • 1hr 7min
Visual Assets Introduction
03:37
Working With Photos In Figma
18:01
Working With Photos In Figma 2
08:49
Working With Illustrations In Figma
13:56
Figma Plugins And Icons
08:56
Custom Icons
13:15
Accessibility
5 lectures • 23min
What Is Accessibility?
02:30
Assistive Technologies
02:51
Visual Patterns For Accessibility
04:30
Tools To Make Your Design Accessible
06:24
Visual Patterns For Accessibility Part 2
06:42
Section 4: DESIGN EXPLORATION - Application Design + Design Systems
1 lecture • 1min
Getting Ready For This Section
00:41
Design Patterns
5 lectures • 25min
What Are Design Patterns
06:00
Why Are Design Patterns Valuable
02:24
How To Apply Design Patterns
04:29
Analyzing Design Patterns
05:39
Dissecting And Choosing Design Patterns
06:13
Mobile Design
2 lectures • 18min
Mobile Design Best Practices
06:58
Mobile Design Best Practices 2
11:10
Visual Style + Exploration
5 lectures • 1hr 4min
Design Fidelity
08:01
Style Exploration
12:05
Style Exploration 2
16:10
Style Exploration 3
12:57
Style Exploration 4
Preview
14:36
Motion
4 lectures • 39min
The Importance Of Motion
07:03
The Purpose Of Motion
07:56
Intro To Smart Animate
14:13
The Power Of Smart Animate
10:14
Microinteractions
6 lectures • 1hr 2min
What Is A Microinteraction?
10:23
Why Microinteractions Are Important
09:14
Creating Our Own Microinteraction
08:46
Creating Our Own Microinteraction 2
10:17
Using Figmotion
11:10
Using Figmotion 2
11:49
Section 5: PUTTING IT ALL TOGETHER – Design Systems and Final Compositions
1 lecture • 1min
Getting Ready For This Section
00:35
Design Systems
11 lectures • 1hr 36min
What Is A Design System?
04:04
Foundation - Color
06:30
Foundation - Grids + Spacing
04:13
Foundation - Iconography
04:40
Foundation - Typography
06:50
Components - Button
11:26
Components - Inputs
09:34
Components - Cards
14:11
Recipes - Vertical Cards
10:25
Recipes - Search
13:07
Recipes - Order List
11:00
Final Compositions
7 lectures • 1hr 5min
Using Our Design System
11:58
Using Our Design System 2
09:31
Using Our Design System 3
09:33
Final Prototypes
07:11
Final Prototypes 2
06:58
Final Prototypes 3
06:38
Final Prototypes 4
13:02
Working With A Client Revisited
7 lectures • 51min
The Product Alignment Canvas
05:02
Project Goals
08:30
Target Users
08:39
User Journey Map
10:22
Risky Assumptions
04:32
What is a User Story Map?
05:56
Creating a User Story Map
07:40
Where To Go From Here?
5 lectures • 7min
Is Bruno Happy?
01:11
Project Handoff
03:41
Next Step: Project Handoff
00:36
LinkedIn Endorsements
00:39
Become An Alumni
00:37
Course Review
1 question
The Final Challenge
1 question
Web Portfolio
3 lectures • 26min
How To Export And Place Designs
09:51
Content For Your Portfolio
10:57
Where To Host Your Web Portfolio
04:58
From Figma To Website: Building Our Landing Page
4 lectures • 32min
Quick Note: Upcoming Videos
00:19
Initial Setup - Figma Handoff
12:57
Build UI - Adding Image Assets
09:24
Build UI - Styling Image Assets
09:17
Bonus: How The Internet Works
10 lectures • 24min
Quick Note: Upcoming Videos
00:11
Browsing the Web
06:00
Breaking Google
02:59
Exercise: Break Google Yourself
00:32
The Internet Backbone
05:29
Traceroute
02:24
Exercise: Running traceroute
00:53
DEVELOPER FUNDAMENTALS: I
03:08
What Does A Developer Do?
01:39
Web Developer Monthly
00:21
Bonus: History Of The Web
6 lectures • 15min
WWW vs Internet
03:30
HTML, CSS, Javascript
05:04
DEVELOPER FUNDAMENTALS: II
02:55
Developer History
03:08
Exercise: Adding CSS and JavaScript to Tim's website
00:21
Optional Resource: More About the History of the Web
00:10
Bonus: HTML 5
21 lectures • 1hr 18min
Build Your First Website
07:50
Resources: Your Text Editor
00:26
DEVELOPER FUNDAMENTALS: III
03:31
Quick Note About w3schools
00:14
How To Ask Questions
01:03
HTML Tags
08:39
HTML Tags 2
01:49
Self Closing HTML Tags
05:34
Anchor Tag
04:52
Q&A: index.html
02:05
Q&A: Relative vs Absolute Path
03:46
HTML Forms
10:57
HTML Forms 2
03:09
Submitting A Form
08:18
HTML Tags 3
03:51
HTML vs HTML 5
06:38
Copy A Website
02:26
HTML Challenge
01:07
HTML Lesson Files
00:36
Exercise: HTML Quiz
00:24
Optional Exercise: More HTML
01:05
Bonus: CSS 3
22 lectures • 1hr 28min
Exercise Files: Code-Along
00:13
Your First CSS
13:48
CSS Properties
10:31
CSS Selectors
16:28
Optional Exercise: CSS Selectors
00:28
Text and Font
07:37
Images In CSS
04:15
Box Model
05:06
px vs em vs rem
03:03
Exercise: CSS Quiz
00:22
Critical Render Path
04:04
Exercise File: Code-Along Images
00:16
Flexbox
08:29
Optional Exercise: Flexbox Froggy
00:17
CSS 3
08:24
Optional Exercise: Mastering Transitions and Transforms
00:14
Responsive UI
01:40
Image Gallery Files
00:08
Exercise: Robot Animation
00:55
Exercise: Robot Animation Starter Files
00:36
Solution: Robot Animation
00:16
Optional Exercise: CSS
01:13
Bonus: Bootstrap, Templates, And Building Your Startup Landing Page
18 lectures • 1hr 22min
Bootstrap Introduction
04:00
Bootstrap
08:51
Bootstrap Grid
05:18
Free Resources For Our Project
00:13
Exercise: Startup Landing Page
00:54
Exercise: Startup Landing Page 2
03:58
Exercise: Startup Landing Page 3
08:23
Exercise: Startup Landing Page 4
08:25
Exercise: Startup Landing Page 5
11:33
Exercise: Adding Email Subscribe Form With MailChimp
09:21
Quick Note: Upcoming Videos
00:22
Exercise: Putting Your Website Online
05:48
Exercise: Putting Your Website Online 2
02:50
Quick Note: Upcoming Video
00:28
DEVELOPER FUNDAMENTALS: IV
07:15
Using Templates
03:18
Resources for FREE Templates
00:21
Startup Landing Pages by Students
00:30
Bonus: CSS Grid + CSS Layout
17 lectures • 1hr 16min
Section Overview
01:50
CSS Grid vs Flexbox vs Bootstrap
04:40
Quick Note: Upcoming Video
00:19
CSS Grid 1
07:55
CSS Grid 2
04:14
CSS Grid 3
06:25
CSS Grid 4
07:07
CSS Grid 5
01:56
Optional Exercise: CSS Grid
00:15
Exercise: CSS Layout
03:37
Solution: Navigation Bar
08:37
Solution: Navigation Bar 2
04:22
Solution: Cover
04:41
Solution: Project Grid + Footer
08:54
Quick Note: Upcoming Video
00:16
Solution: Prettify
06:59
The Truth About CSS
03:51
BONUS SECTION
1 lecture • 1min
Bonus Lecture
00:35

پیشنهاد آموزش مرتبط در فرادرس

خرید لینک های دانلود
  • حجم فایل: 12.45GB
  • زبان: انگلیسی
  • زیرنویس انگلیسی: دارد
  • قیمت: 8000 تومان
  • دوره کامل طراح موبایل و وب در 2021 - Figma ،UI/UX یک محصول ویژه است و دریافت لینک های دانلود آن با پرداخت هزینه امکان پذیر است. اطلاعات بیشتر