آموزش طرح‌بندی‌های تایپوگرافیک: ایجاد طرح‌بندی برای وب‌سایت‌ها و برنامه‌های محتوای سنگین

Typographic Layouts: Create Layouts for Content Heavy Websites and Apps

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
توضیحات دوره:

این کلاس به شما می‌آموزد که چگونه هنگام ایجاد طرح‌بندی، از تایپوگرافی استفاده مؤثری داشته باشید.

با در نظر گرفتن سایت‌هایی مانند رویترز یا تکرار جدید نیویورک تایمز و USA Today، می‌توانیم ببینیم که چگونه وب به سمت ترکیب‌های تایپوگرافیک حرکت می‌کند که در آن محتوا پادشاه است و رابط کاربری حداقل اما مرتبط است. در طول این دوره، یاد می‌گیریم که چگونه یک طرح‌بندی مؤثر برای یک صفحه splash و یک الگوی مقاله خبری ساختار دهیم. ما اصول طراحی واکنشگرا، ترکیب شبکه و استفاده از تایپوگرافی را برای ایجاد سلسله مراتب بصری ترکیب بررسی خواهیم کرد.

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

  • طراحی یک Wireframe سطح بالا. ما ستون بصری UX، Wireframing را پوشش خواهیم داد.
  • ساخت یک شبکه. شما شبکه کامل خود را طراحی می‌کنید و جزئیات نحوه ظاهر برنامه‌تان را در اندازه‌های مختلف و دستگاه‌های مختلف نشان می‌دهد.
  • تایپوگرافی، نگاه و احساس. ما اجزای اصلی تایپوگرافی، از جمله سرفصل ها و زیرنویس ها را پوشش خواهیم داد.
  • وزن و ترکیب بصری. ما با استفاده از وزن‌های بصری مانند اندازه، رنگ، تراکم، ارزش و فضای سفید، ترکیب‌بندی‌های ظریفی را آماده خواهیم کرد.

 این دوره فقط طراحی است. هیچ توسعه ای آموزش داده نخواهد شد!

 

آنچه خواهید ساخت

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

یک نسل جدید خبرخوان سفارشی طراحی کنید

مقدمه و راه اندازی

  1. وب سایت های خبری را مرور کنید

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

  2. وب سایت هایی که من به آنها اشاره کردم

    متوسط

    بارش برف نیویورک تایمز

    تجربه مقاله جدید نیویورک تایمز

مرحله ایده‌پردازی

  1. ایده ها و طرح های خود را در RSS Reader آپلود کنید

    در این بخش به اهمیت مرحله ایده‌پردازی و ایجاد طرح‌هایی برای آن پرداختیم. مدتی را صرف فکر کردن به ایده خود برای RSS Reader کنید. طرح‌هایی از اجزای اصلی ایجاد کنید که نشان می‌دهد آنها در نمایشگرهایی با اندازه‌های مختلف چگونه رفتار می‌کنند.

    طرح‌ها

  2. سایت هایی که به آنها اشاره کردم

    پرواز فرار

    Flipboard

طراحی یک قاب وایر سطح بالا

  1. یک چارچوب برای RSS Reader خود ایجاد کنید

    یک چارچوب برای RSS Reader خود آپلود کنید.

    توضیح دهید:

    • نحوه اتصال بخش ها به یکدیگر
    • چه اجزایی پاسخگو، تطبیقی ​​یا ثابت هستند
    • روش های تعامل
    • انیمیشن بین بخش ها را شرح دهید
    • با خیال راحت طرح‌هایی را آپلود کنید (یا هر قالب بصری که ترجیح می‌دهید) که جریان واضحی از فرآیند را نشان می‌دهد.

    طرح وایرفریم خود را به اشتراک می گذارد.

ساخت شبکه

  1. چارچوب خود را آپلود کنید و گرید خود را توصیف کنید

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

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

    پیوست زیر شبکه‌ای است که من برای مثال تخصیص استفاده کردم.

  2. تقدیرنامه برای شبکه ها

    گریدها خوب هستند. صحبتی از خوی وین

    نوع سیال

    خوانایی؛ طول خط بهینه: 

    UX Design QA با Christian Holst: 

تایپوگرافی، نگاه و احساس

  1. نوع خود را بنویسید

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

    نمونه ای از جایی که تایپ در چندین صفحه قرار می گیرد.

  2. منابع تایپوگرافی

    8 روش ساده برای بهبود تایپوگرافی در طرح های شما
     

    پنج گام ساده برای تایپوگرافی بهتر

    قوانین اساسی تایپوگرافی خوب

    قوانین تایپوگرافی

وزن‌های بصری و تعادل ترکیب

  1. وزن های بصری خود را مرتب کنید

    یک ماکت عمیق از 2-3 صفحه از فیدر اخبار خود ایجاد کنید.

    عناصر بصری را که در درس ویدیویی مورد بحث قرار می‌دهیم در نظر بگیرید:

    • اندازه
    • رنگ
    • چگالی
    • مقدار
    • فضای سفید

  2. یادگیری در مورد وزن بصری

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

    تعادل وزن بصری با استفاده از عناصر متضاد.

    روایات قابل مشاهده: درک سازمان بصری

    توازن بصری و تخصیص وزن برای قابلیت استفاده

    19 عاملی که بر تعادل ترکیبی تأثیر می گذارد

    آیا طرح شما جریان دارد؟

تیز کردن طرح شما

  1. ماکت های طراحی را به اشتراک بگذارید

    در این مرحله از دوره، خوب است که چند نمونه طراحی از RSS Reader را که روی آن کار می‌کنیم ارسال کنیم.

    طراحی.

جمع بندی پروژه

  1. یک مطالعه موردی ایجاد کنید

    یک مطالعه موردی عمیق از پروژه خود ایجاد کنید.

    بخش‌هایی را که در درس ویدیویی بحث می‌کنیم اضافه کنید:

    • راه اندازی
    • جمله مفهومی
    • بدن
    • آن را جمع کنید
    • فراخوان برای اقدام


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

درس ها Lessons

  • ساختن یک شبکه Building a Grid

  • فاز ایده پردازی The Ideation Phase

  • تایپوگرافی، نگاه و احساس Typography, Look and Feel

  • اهمیت مطالعه موردی The Importance of a Case Study

  • تیز کردن طراحی شما Sharpening your Design

  • تعادل بصری وزن و ترکیب Visual Weight and Composition Balance

  • ترسیم یک چارچوب سطح بالا Sketching a top level Framework

  • معرفی و راه اندازی Introduction and Setup

نمایش نظرات

نظری ارسال نشده است.

آموزش طرح‌بندی‌های تایپوگرافیک: ایجاد طرح‌بندی برای وب‌سایت‌ها و برنامه‌های محتوای سنگین
خرید اشتراک و دانلود خرید تکی و دانلود | 160,000 تومان (5 روز مهلت دانلود) زمان تقریبی آماده سازی لینک دانلود این دوره آموزشی حدود 5 تا 24 ساعت می باشد.
جزییات دوره
3h 2m
8
Skillshare (اسکیل شیر) skillshare-small
19 فروردین 1392 (آخرین آپدیت رو دریافت می‌کنید، حتی اگر این تاریخ بروز نباشد.)
2,581
3 از 5
دارد
دارد
دارد

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Claudio Guglieri Claudio Guglieri

مدیر خلاق/دست روی طراح

Claudio Guglieri یک طراح محصول و مدیر خلاق مستقل است که در سانفرانسیسکو زندگی می کند. کلودیو مسئول هدایت و اجرای تجربیات تعاملی برای مشتریانی مانند Google، Kayak، EA، CNN، Nickelodeon، Microsoft، History Channel و Motorola بوده است. او قبل از شروع سرمایه گذاری خود، بخش طراحی را در Fantasy Interactive به عنوان مدیر طراحی رهبری کرد.

Skillshare (اسکیل شیر)

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

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