Type Scale در طراحی UI و تایپوگرافی به چه معناست؟
در این آموزش تایپوگرافی در طراحی رابط کاربری UI قصد دارم به شما نحوه ی تنظیم سایز متن ها و فونت را در طراحی رابط کاربری UI آموزش دهم.
در واقع شما باید قبل از شروع هر پروژه ای سایز متن ها یا Text های مختلفی که در رابط کاربری UI وجود دارد را تنظیم کنید و سپس با توجه به آن در طراحی خود الگو بگیرید و بقیه صفحات را طراحی کنید تا یک انسجام در کل طرح شما ایجاد شود.
به این کار یعنی تنظیم سایز متن ها و فونت برای قسمت های مختلف طراحی رابط کاربری از جمله سایز تیتر ها ، متن های اصلی ، متا دیتا و … Type Scale گفته می شود.
در این آموزش طراحی UI من ابتدا یک سری توضیحات ابتدایی در مورد تایپوگرافی و نحوه تنظیم سایز متن ها را به شما می گویم و در ادامه دو سرویس را به شما معرفی می کنم که ساخت Type Scale را برای ما خیلی راحت می کند.
در ادامه خودم نیز یک Type Scale و یا تنظیم سایز فونت ها برای تیتر های h1 تا h6 و سه نوع متن اصلی به زبان فارسی را انجام می دهم.
سپس مفهوم عدد های وزن فونت در تایپوگرافی را به شما آموزش می دهم و در نهایت نحوه تغییر سایز فونت ها در سایز های مختلف صفحه نمایش یا به عبارتی ریسپانسیو دیزاین را به شما آموزش می دهم.
در نهایت نکاتی را در زمینه تنظیم سایز متن و فونت در دیزاین سیستم متریال گوگل به شما آموزش می دهم و در نهایت نمونه ای ساده از یک وبلاگ را با همین مبحث تنظیم سایز متن و فونت در طراحی UI را انجام می دهم.
در آموزش تایپوگرافی در UI – تنظیم سایز متن ها و فونت در طراحی رابط کاربری چه مواردی بررسی می شود؟
محتوای فیلم آموزشی چطور سایز متن ها و فونت را در طراحی رابط کاربری UI تنظیم کنیم؟
- 00:46 | انواع متن با Text در طراحی UI
- 01:10 | Type Scale در طراحی UI چیست؟
- 01:18 | آیا روند تنظیم سایز فونت در این آموزش قطعی است؟
- 02:07 | مقدمه شروع آموزش
- 02:40 | مثالی از نحوه استفاده از Type Scale در یک وبسایت
- 04:10 | Heading یا عنوان ها در طراحی UI
- 04:19 | Body Text یا متن اصلی چیست؟
- 04:34 | معرفی و نحوه کار با سرویس اول ساخت Type Scale طراحی UI
- 05:44 | وزن عددی فونت ها به چه معناست؟
- 06:25 | نحوه محاسبه دستی سایز متن و تیتر های در ساخت Type Scale طراحی UI
- 08:02 | آیا می توانیم اعداد ساخته شده سایز فونت ها را تغییر بدهیم؟
- 08:14 | مثال اول از نحوه تنظیم سایز فونت متن و تیتر در طراحی UI
- 10:18 | نمونه ای انگلیسی از نحوه تنظیم سایز متن در طراحی UI
- 10:22 | معرفی سرویس دوم برای ساخت Type Scale طراحی UI
- 10:52 | تبدیل PX به EM
- 11:40 | نحوه تنظیم سایز متن و فونت در متریال دیزاین
- 14:40 | تنظیم سایز متن و فونت در سایز های مختلف صفحه نمایش
- 15:39 | مثالی از نحوه تنظیم سایز فونت متن ها در طراحی UI
- 16:34 | هایراکی و سلسله مراتب در طراحی رابط کاربری UI
آموزش تایپوگرافی در UI – تنظیم سایز متن ها و فونت در طراحی رابط کاربری
چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟
از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به
- آموزش طراحی رابط کاربری – UI Design
- آموزش طراحی تجربه کاربری – UX Design
- آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
- آموزش طراحی گرافیک با فتوشاپ
این دوره ها در حال آماده سازی است اما شما می توانید با ثبت ایمیل خود از طریق لینک زیر در این دوره ها پیش ثبت نام کنید.
کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.
گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری
این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید.
عضویت در گروه تلگرام UIXFamily
کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف
شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:
عضویت در کانال تلگرام AsteriXarts
آموزش های اختصاصی طراحی در اینستاگرام
همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و … دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید:
دنبال کردن AsteriXarts در اینستاگرام
خبرنامه هفتگی دیزاین شامل مقالات، آموزش ها و منابع کمکی طراحی
بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید.
برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت DexignerNews عضو خبرنامه شوید.
عضویت در خبرنامه هفتگی دیزاین Dexigner News
طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟
Hierarchy یا هایراکی چیست و کاربرد آن در طراحی UI/UX و صفحه آرایی
در این قسمت به سراغ اصل Hierarchy یا سلسله مراتب در دیزاین رفتم به شما نشان می دهم که چطور از آن برای اولویت دادن به عناصر داخل صفحه استفاده کنید.
از Hierarchy در همه‌ی حیطه های طراحی از قبیل طراحی رابط کاربری UI/UX ، صفحه آرایی ، طراحی گرافیک مثل طراحی پوستر و… بسیار استفاده می شود.
مواردی که در آموزش Hierarchy یا هایراکی چیست و کاربرد آن در طراحی UI/UX و صفحه آرایی بررسی می شود شامل:
- 00:30 | هایراکی یا Hierarchy چیست؟
- 01:20 | نمونه ای از کاربرد هایراکی یا سلسه مراتب در طراحی UI/UX
- 03:54 | ویژگی سایز در هایراکی یا سلسله مراتب
- 04:37 | ویژگی رنگ در Hierarchy
- 06:22 | ویژگی مکان یا Position در هایراکی یا سلسله مراتب
- 07:00 | کاربرد و مثالی از ویژگی Position هایراکی در طراحی UI/UX
- 07:45 | کاربرد و مثال هایی از هایراکی در صفحه آرایی – Hierarchy
- 09:27 | کاربرد و مثال هایی از هایراکی در طراحی سایت و UI/UX – Hierarchy
- 10:10 | کاربرد و مثال هایی از هایراکی در طراحی اپلیکیشن و UI/UX – Hierarchy
[newsletter-pack newsletter=’8661′]
آموزش های Figma را در کجا ببینیم؟
شما می توانید تمام قسمت های آموزش Figma را در بخش آموزش Figma وبلاگ و یا اینکه در لیست پخش آن در یوتیوب ببینید.
همچنین در آخر همین پست تعدادی از لینک های مرتبط آموزش فیگما نیز قرار داده شده است.
آموزش های Adobe Xd را در کجا ببینیم؟
شما می توانید تمام قسمت های آموزش Figma را در بخش آموزش Adobe Xd وبلاگ و یا اینکه در لیست پخش آن در یوتیوب ببینید.
همچنین در آخر همین پست تعدادی از لینک های مرتبط آموزش فیگما نیز قرار داده شده است.
در آموزش ” آموزش تایپوگرافی در UI – تنظیم سایز متن ها و فونت در طراحی رابط کاربری “ شما روش هایی برای ساخت یک Type Scale که در واقع همان سایز های مختلف عنوان ها یا h tag و متن اصلی یا body text را یاد گرفتید.
همچنین برای اینکه قسمت های بعدی آموزش های طراحی رابط و تجربه کاربری UI و UX را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.
نظر شما در مورد آموزش ” آموزش تایپوگرافی در 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 آن را طراحی کرد؟
