iHMahmoodi
Visual Designer

آموزش ساخت دیزاین سیستم در فیگما – قسمت دوم

Create Design System in Figma - Part 1

دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir

آموزش ساخت دیزاین سیستم در فیگما - قسمت دوم
آموزش ساخت دیزاین سیستم در فیگما – قسمت دوم

در یک سری ویدیوهای آموزشی میخوام بخش هایی از یک دیزاین سیستم را در فیگما با هم درست کنیم. در این ویدیو من پیش نیازهایی که شما باید برای ساخت یک دیزاین سیستم بلد باشید رو به شما آموزش می دهم. با من همراه باشید.

در قسمت قبل من در مورد دیزاین سیستم، پترن لایبرری و استایل گایدها توضیح دادم و تفاوت های اونا رو هم به شما نشان دادم.

حالا در ادامه ی اون ویدیو میخوام در چند ویدیو بخش هایی از یک دیزاین سیستم را با هعم ایجاد کنیم تا شما با نحوه ساخت آن مرحله به مرحله آشنا بشید.

 

محتوا پنهان

 

در آموزش دیزاین سیستم ، پترن لایبرری و استایل گاید چه مواردی بررسی می شود؟

محتوای فیلم آموزشی دیزاین سیستم ، پترن لایبرری و استایل گاید:

  1. 01:11 | پیش نیازهایی برای یادگیری آموزش ساخت دیزاین سیستم
  2. 01:58 | روش دیزاین اتمی برای ساخت دیزاین سیستم
  3. 04:35 | بخش تایپوگرافی در دیزاین سیستم
  4. 05:17 | ساخت استایل متن برای دیزاین سیستم در فیگما
  5. 06:02 | بخش رنگها در دیزاین سیستم
  6. 06:26 | ساخت استایل رنگ برای دیزاین سیستم در فیگما
  7. 08:36 | بخش کامپوننت ها در دیزاین سیستم

 

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

آموزش ساخت دیزاین سیستم در فیگما – قسمت دوم

چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟

از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به

  1. آموزش طراحی تجربه کاربری – UX Design
  2. آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
  3. آموزش طراحی گرافیک با فتوشاپ 

 

این دوره ها در حال آماده سازی است اما شما می توانید با ثبت ایمیل خود از طریق لینک زیر در این دوره ها پیش ثبت نام کنید.

 

آموزش هایی که در این ویدیو آنها را معرفی می کنم

دیزاین سیستم چیست و تفاوت آن با پترن لایبرری و استایل گاید – Design System

 

Atomic Design – طراحی اتمی چیست و کاربرد آن در ساخت دیزاین سیستم ها

 

آموزش تایپوگرافی در UI – تنظیم سایز متن ها و فونت در طراحی رابط کاربری

 

آموزش فیگما Figma – طراحی یک عنصر با بینهایت حالت با Variants

 

دیزاین سیستم چیست؟

این روزها خیلی در مورد دیزاین سیستم صحبت میشه و در واقع دلیل به وجود اومدنشون رفع نواقضی بود که در پترن لایبرری ها و استایل گاید ها وجود داشت.

 

یک دیزاین سیستم برای زمانی خوب است که شما نه تنها روی یک محصول، بلکه روی چندین محصول میخواید باهم کار کنید و در نتیجه می خواهید همه اینا با هم هماهنگ باشند. 

دیزاین سیستم شما یک سری کامپوننت‌های UI نیست که در کنار هم قرار می گیرند بلکه استراکچر، معنا و مفهومی است که هر کدام از این محصولات دارند و شما می خواهید همه محصولات دیگر را هم همین ساختار و همین معنا را داشته باشند.

در واقع هدف دیزاین سیستم ها این است که بیاید مسیر کاری شما را از طراحی UI های هماهنگ و منسجم و کانسیستنت به محصولات کانسیستنت تغییر مسیر بدهد.

بصورت خیلی خلاصه دیزاین سیستم رو میشه یک زبان مشترک بین همه محصولاتتون دانست. در واقع ما هم چون زبان مشترکمون فارسی هست براحتی می تونیم با هم حرف بزنیم و حرف های همدیگر را درک کنیم.

پس زبان مشترک باعث میشه که خیلی سریع بتونیم با هم ارتباط برقرار کنیم.

 

دیزاین سیستم میاد با داکیومنت کردن هرکدام از این کامپوننت ها و بخش های مختلفی که در دیزاین سیستم وجود دارد و روش استفاده از آنها، کاملا به همه افرادی که روی محصولات مختلفی دارند کار می‌کنند و از این دیزاین سیستم استفاده می‌کنند می‌دهد یک درک و فهم یکسان را ارائه می دهد.

پس دیزاین سیستم از این بخش ها درست شده

  1. پترن لایبرری
  2. استایل گاید
  3. مدل های مفهومی
  4. زبان مشترک
  5. منابع طراحی
  6. کامپوننت های کد
  7. انیمیشن و موشن دیزاین
  8. اصول نوشتن محتوا
  9. و اصول دسترسی پذیری

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

 

این آموزش در واقع جزئی از دوره ی آموزش جامع دیزاین رابط کاربری هست که شما می تونید با مراجعه به وبسایت learnuix.ir به دوره ی خودآموز یا خصوصی دسترسی داشته باشید و از جمله بخش های مرتبطی که در دوره اون رو بررسی میکنم ساخت کامپوننت ها و آیکان دیزاین هست و همچنین در بخش تایپوگرافی نیاز اطلاعات زیادی در مورد نحوه استفاده و تنظیم متن ها را به شما آموزش می دهم.

 

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

اگر سوال دارید در بخش نظرات برای من بنویسید و اگر از این فیلم خوشتون اومد دکمه لایک رو بزنید و لینک این آموزش رو با دوستانتون هم به اشتراک بگذارید.

با من همراه باشید.

 

 

 

گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری

این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید.

عضویت در گروه تلگرام UIXFamily

 

 

کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف

شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:

عضویت در کانال تلگرام AsteriXarts

 

 

آموزش های اختصاصی طراحی در اینستاگرام

دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir

همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و … دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید:

دنبال کردن AsteriXarts در اینستاگرام

 

 

خبرنامه هفتگی دیزاین شامل مقالات، آموزش ها و منابع کمکی طراحی

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

برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت DexignerNews عضو خبرنامه شوید.

عضویت در خبرنامه هفتگی دیزاین Dexigner News

 

 

طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.

عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts

اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.

 

 

 

خبرنامه هفتگی دیزاین DeXigner News
خبرنامه هفتگی دیزاین DeXigner News
هر هفته آموزش‌ها، مطالب و لینک های مفید در زمینه دیزاین را در ایمیل خود داشته باشید!
شما در هر زمانی می‌توانید ارسال خبرنامه را لغو کنید.

 

 

 

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.

  1. Dribbble.com/iHMahmoodi
  2. Behance.net/iHMahmoodi
  3. Instagram.com/iHMahmoodi

 

 

در آموزش ” دیزاین سیستم ، پترن لایبرری و استایل گاید چیست؟ “ شما متوجه معنای و کاربرد استایل گاید، پترن لایبرری و دیزاین سیستم شدید و انواع آن ها را نیز شناختید.

همچنین برای اینکه قسمت های بعدی آموزش های طراحی رابط و تجربه کاربری UI  و UX را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.

 

در صورتی که سوالی داشتید در قسمت نظرات بپرسید و حتما جواب خواهم داد.

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

 

نظر شما در مورد آموزش ”  دیزاین سیستم ، پترن لایبرری و استایل گاید ” چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در حوزه طراحی UI و UX علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.

 

لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:

آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی

آموزش جامع Figma – کار با ابزارها و محیط فیگما 2021 – قسمت اول

آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم

10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول

آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma

5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت اول

5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت دوم

آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول

آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم

آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم

آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم

آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم

آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم

معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول

آموزش Adobe Xd -‌ یک دکمه برای همه جا در طراحی رابط کاربری

10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری

آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟

آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟

چطور طرح‌ رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟

لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟

صطلاحات طراحی رابط کاربری – بخش اول: رنگها

آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.

دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir

عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات