آموزش طرح‌بندی‌های تایپوگرافیک: ایجاد طرح‌بندی برای وب‌سایت‌ها و برنامه‌های محتوای سنگین
Typographic Layouts: Create Layouts for Content Heavy Websites and Apps
این کلاس به شما می‌آموزد که چگونه هنگام ایجاد طرح‌بندی، از تایپوگرافی استفاده مؤثری داشته باشید.
با در نظر گرفتن سایت‌هایی مانند رویترز یا تکرار جدید نیویورک تایمز و USA Today، می‌توانیم ببینیم که چگونه وب به سمت ترکیب‌های تایپوگرافیک حرکت می‌کند که در آن محتوا پادشاه است و رابط کاربری حداقل اما مرتبط است. در طول این دوره، یاد می‌گیریم که چگونه یک طرح‌بندی مؤثر برای یک صفحه splash و یک الگوی مقاله خبری ساختار دهیم. ما اصول طراحی واکنشگرا، ترکیب شبکه و استفاده از تایپوگرافی را برای ایجاد سلسله مراتب بصری ترکیب بررسی خواهیم کرد.
آنچه یاد خواهید گرفت
- طراحی یک Wireframe سطح بالا. ما ستون بصری UX، Wireframing را پوشش خواهیم داد.
- ساخت یک شبکه. شما شبکه کامل خود را طراحی میکنید و جزئیات نحوه ظاهر برنامه‌تان را در اندازه‌های مختلف و دستگاه‌های مختلف نشان می‌دهد.
- تایپوگرافی، نگاه و احساس. ما اجزای اصلی تایپوگرافی، از جمله سرفصل ها و زیرنویس ها را پوشش خواهیم داد.
- وزن و ترکیب بصری. ما با استفاده از وزن‌های بصری مانند اندازه، رنگ، تراکم، ارزش و فضای سفید، ترکیب‌بندی‌های ظریفی را آماده خواهیم کرد.
این دوره فقط طراحی است. هیچ توسعه ای آموزش داده نخواهد شد!
آنچه خواهید ساخت
یک برنامه خواندن خبر طراحی خواهید کرد که به شدت به تایپوگرافی خوش سلیقه متکی است. در طول فرآیند ایجاد یک قاب سیمی، تعامل کاربر، قرار دادن دارایی، و عناصر طراحی پاسخگو را در نظر خواهید گرفت. در پایان این کلاس، یک ماکت دقیق خواهید داشت که تمام عملکردهای برنامه شما را نمایش می دهد.
یک نسل جدید خبرخوان سفارشی طراحی کنید
مقدمه و راه اندازی
- وب سایت های خبری را مرور کنید
به کلاس خوش آمدید. وب سایت های خبری مورد علاقه خود را مرور کنید و نحوه نمایش محتوا در صفحات آنها را در نظر بگیرید. به نحوه استفاده از فضای خالی توجه کنید. حتماً همان سایت‌ها را در دستگاه‌های مختلف مرور کنید تا طرح‌بندی‌های واکنش‌گرایانه آنها را تجربه کنید.
- وب سایت هایی که من به آنها اشاره کردم
متوسط
بارش برف نیویورک تایمز
تجربه مقاله جدید نیویورک تایمز
مرحله ایده‌پردازی
- ایده ها و طرح های خود را در RSS Reader آپلود کنید
در این بخش به اهمیت مرحله ایده‌پردازی و ایجاد طرح‌هایی برای آن پرداختیم. مدتی را صرف فکر کردن به ایده خود برای RSS Reader کنید. طرح‌هایی از اجزای اصلی ایجاد کنید که نشان می‌دهد آنها در نمایشگرهایی با اندازه‌های مختلف چگونه رفتار می‌کنند.
طرح‌ها
- سایت هایی که به آنها اشاره کردم
پرواز فرار
Flipboard
طراحی یک قاب وایر سطح بالا
- یک چارچوب برای RSS Reader خود ایجاد کنید
یک چارچوب برای RSS Reader خود آپلود کنید.
توضیح دهید:
- نحوه اتصال بخش ها به یکدیگر
- چه اجزایی پاسخگو، تطبیقی یا ثابت هستند
- روش های تعامل
- انیمیشن بین بخش ها را شرح دهید
- با خیال راحت طرح‌هایی را آپلود کنید (یا هر قالب بصری که ترجیح می‌دهید) که جریان واضحی از فرآیند را نشان می‌دهد.
طرح وایرفریم خود را به اشتراک می گذارد.
ساخت شبکه
- چارچوب خود را آپلود کنید و گرید خود را توصیف کنید
نسخه تقریبی از چارچوب خود را آپلود کنید و شبکه‌ای را که برای ساخت آن استفاده کرده‌اید توصیف کنید. توضیح دهید که بخش‌های مختلف چگونه کار می‌کنند، چه چیزی سیال خواهد بود و چه چیزی از نقاط شکست ثابت استفاده می‌کند.
شبکه آنها را نشان می دهد.
پیوست زیر شبکه‌ای است که من برای مثال تخصیص استفاده کردم.
- تقدیرنامه برای شبکه ها
گریدها خوب هستند. صحبتی از خوی وین
نوع سیال
خوانایی؛ طول خط بهینه:
UX Design QA با Christian Holst:
تایپوگرافی، نگاه و احساس
- نوع خود را بنویسید
از وایرفریم و شبکه خود برای مرتب کردن عناصر نوع پایه فیدر خود استفاده کنید. چندین مثال از جایی که متن در صفحات شما قرار می گیرد اضافه کنید. حتما از فونت ها و اندازه های مختلف استفاده کنید.
نمونه ای از جایی که تایپ در چندین صفحه قرار می گیرد.
- منابع تایپوگرافی
8 روش ساده برای بهبود تایپوگرافی در طرح های شما
پنج گام ساده برای تایپوگرافی بهتر
قوانین اساسی تایپوگرافی خوب
قوانین تایپوگرافی
وزن‌های بصری و تعادل ترکیب
- وزن های بصری خود را مرتب کنید
یک ماکت عمیق از 2-3 صفحه از فیدر اخبار خود ایجاد کنید.
عناصر بصری را که در درس ویدیویی مورد بحث قرار می‌دهیم در نظر بگیرید:
- اندازه
- رنگ
- چگالی
- مقدار
- فضای سفید
- یادگیری در مورد وزن بصری
در زیر مقالاتی وجود دارد که به من در ساختن این واحد کمک کردند. شما باید مطالعه کنید تا به مفاهیم توضیح داده شده در سخنرانی ویدیویی نگاه عمیق تری پیدا کنید.
تعادل وزن بصری با استفاده از عناصر متضاد.
روایات قابل مشاهده: درک سازمان بصری
توازن بصری و تخصیص وزن برای قابلیت استفاده
19 عاملی که بر تعادل ترکیبی تأثیر می گذارد
آیا طرح شما جریان دارد؟
تیز کردن طرح شما
- ماکت های طراحی را به اشتراک بگذارید
در این مرحله از دوره، خوب است که چند نمونه طراحی از RSS Reader را که روی آن کار می‌کنیم ارسال کنیم.
طراحی.
جمع بندی پروژه
- یک مطالعه موردی ایجاد کنید
یک مطالعه موردی عمیق از پروژه خود ایجاد کنید.
بخش‌هایی را که در درس ویدیویی بحث می‌کنیم اضافه کنید:
- راه اندازی
- جمله مفهومی
- بدن
- آن را جمع کنید
- فراخوان برای اقدام
درس ها 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
https://donyad.com/d/265349
Claudio Guglieri
مدیر خلاق/دست روی طراح
Claudio Guglieri یک طراح محصول و مدیر خلاق مستقل است که در سانفرانسیسکو زندگی می کند. کلودیو مسئول هدایت و اجرای تجربیات تعاملی برای مشتریانی مانند Google، Kayak، EA، CNN، Nickelodeon، Microsoft، History Channel و Motorola بوده است. او قبل از شروع سرمایه گذاری خود، بخش طراحی را در Fantasy Interactive به عنوان مدیر طراحی رهبری کرد.
نمایش نظرات