iHMahmoodi
Visual Designer

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

How to create a Type Scale for UI Design Typography؟

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

Type Scale در طراحی UI و تایپوگرافی به چه معناست؟

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

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

به این کار یعنی تنظیم سایز متن ها و فونت برای قسمت های مختلف طراحی رابط کاربری از جمله سایز تیتر ها ، متن های اصلی ، متا دیتا و … Type Scale گفته می شود.

در این آموزش طراحی UI من ابتدا یک سری توضیحات ابتدایی در مورد تایپوگرافی و نحوه تنظیم سایز متن ها را به شما می گویم و در ادامه دو سرویس را به شما معرفی می کنم که ساخت Type Scale را برای ما خیلی راحت می کند.

در ادامه خودم نیز یک Type Scale و یا تنظیم سایز فونت ها برای تیتر های h1 تا h6 و سه نوع متن اصلی به زبان فارسی را انجام می دهم.

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

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

 

 

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

محتوای فیلم آموزشی چطور سایز متن ها و فونت را در طراحی رابط کاربری UI تنظیم کنیم؟

  1. 00:46 | انواع متن با Text در طراحی UI
  2. 01:10 | Type Scale در طراحی UI چیست؟
  3. 01:18 | آیا روند تنظیم سایز فونت در این آموزش قطعی است؟
  4. 02:07 | مقدمه شروع آموزش
  5. 02:40 | مثالی از نحوه استفاده از Type Scale در یک وبسایت
  6. 04:10 | Heading یا عنوان ها در طراحی UI
  7. 04:19 | Body Text یا متن اصلی چیست؟
  8. 04:34 | معرفی و نحوه کار با سرویس اول ساخت Type Scale طراحی UI
  9. 05:44 | وزن عددی فونت ها به چه معناست؟
  10. 06:25 | نحوه محاسبه دستی سایز متن و تیتر های در ساخت Type Scale طراحی UI
  11. 08:02 | آیا می توانیم اعداد ساخته شده سایز فونت ها را تغییر بدهیم؟
  12. 08:14 | مثال اول از نحوه تنظیم سایز فونت متن و تیتر در طراحی UI
  13. 10:18 | نمونه ای انگلیسی از نحوه تنظیم سایز متن در طراحی UI
  14. 10:22 | معرفی سرویس دوم برای ساخت Type Scale طراحی UI
  15. 10:52 | تبدیل PX به EM
  16. 11:40 | نحوه تنظیم سایز متن و فونت در متریال دیزاین
  17. 14:40 | تنظیم سایز متن و فونت در سایز های مختلف صفحه نمایش
  18. 15:39 | مثالی از نحوه تنظیم سایز فونت متن ها در طراحی UI
  19. 16:34 | هایراکی و سلسله مراتب در طراحی رابط کاربری UI

 

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

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

 

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

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

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

 

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

کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.

 

 

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

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

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

 

 

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

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

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

 

 

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

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

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

 

 

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

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

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

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

 

 

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

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

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

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

 

 

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

Hierarchy یا هایراکی چیست و کاربرد آن در طراحی UI/UX و صفحه آرایی

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

از Hierarchy در همه‌ی حیطه های طراحی از قبیل طراحی رابط کاربری UI/UX ، صفحه آرایی ، طراحی گرافیک مثل طراحی پوستر و… بسیار استفاده می شود.

مواردی که در آموزش Hierarchy یا هایراکی چیست و کاربرد آن در طراحی UI/UX و صفحه آرایی بررسی می شود شامل:

  1. 00:30 | هایراکی یا Hierarchy چیست؟
  2. 01:20 | نمونه ای از کاربرد هایراکی یا سلسه مراتب در طراحی UI/UX
  3. 03:54 | ویژگی سایز در هایراکی یا سلسله مراتب
  4. 04:37 | ویژگی رنگ در Hierarchy
  5. 06:22 | ویژگی مکان یا Position در هایراکی یا سلسله مراتب
  6. 07:00 | کاربرد و مثالی از ویژگی Position هایراکی در طراحی UI/UX
  7. 07:45 | کاربرد و مثال هایی از هایراکی در صفحه آرایی – Hierarchy
  8. 09:27 | کاربرد و مثال هایی از هایراکی در طراحی سایت و UI/UX – Hierarchy
  9. 10:10 | کاربرد و مثال هایی از هایراکی در طراحی اپلیکیشن و UI/UX – Hierarchy

 

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

 

 

 

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

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

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

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

 

آموزش های Figma را در کجا ببینیم؟

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

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

 

آموزش های Adobe Xd را در کجا ببینیم؟

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

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

 

در آموزش ” آموزش تایپوگرافی در UI – تنظیم سایز متن ها و فونت در طراحی رابط کاربری “ شما روش هایی برای ساخت یک Type Scale که در واقع همان سایز های مختلف عنوان ها یا h tag و متن اصلی یا body text را یاد گرفتید.

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

 

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

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

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

 

نظر شما در مورد آموزش ” آموزش تایپوگرافی در UI – تنظیم سایز متن ها و فونت در طراحی رابط کاربری ” چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در حوزه طراحی 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 : اصول طراحی رابط کاربری برای تلویزیون

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.
عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات