طراحی جلد کتاب کودک در ایلوستریتور

سلام توی این ویدئو قراره با استفاده از یکی از قابلیت های ایلستریتور یک طراحی دو بعدی (فلت) انجام بدیم و از اون برای طراحی جلد کتاب کودک استفاده کنیم.

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

طراحی فلت چی هست؟

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

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

طراحی فلت به «طراحی تخت» یا «طراحی مسطح» هم مشهوره. این سبک طراحی یک شیوه مینیمالیستی از رابط کاربری (UI) هست که در حال حاضر در رابط‌های گرافیکی اپلیکیشن‌ها و وب‌سایت‌ها استفاده می‌شه. هدف این سبک ایجاد یه تصویر دوبعدی و بدون استفاده از سایه یا گرادینت (Gradient) هست.

طراحی فلت یک سبک طراحی مدرن برای رابط کاربریه که با این ویژگی‌ها شناخته می‌شه:

زیبایی‌شناسی مدرن و دوستدار دیجیتال

استایل مینیمالیستی

فضای سفید فراوان

طرح‌بندی مبتنی بر شبکه متقارن

عناصر دوبعدی

رنگ‌های روشن و با کنتراست بالا

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

آیکون‌های نمادین

سادگی (بدون گرادینت، تکسچر، فرم انتزاعی)

تاریخچه ای کوتاه از طراحی فلت

طراحی فلت تاریخچه طولانی داره و استفاده از اون به مدت‎ها قبل بر می‎گرده. طراحی فلت برای اولین بار در سال ۱۹۵۰ بعد از ظهور هنر مدرن و سبک تایپوگرافی بین‌المللی ابداع شد. اولین استفاده گسترده از اون در دنیای دیجیتال مربوط به مایکروسافته که در دستگاه پخش موسیقی به نام زون (Zune) از این سبک استفاده کرد. دستگاه زون دارای حداقل رابط کاربری فلت با تایپوگرافی تمیز و ساده، رنگ‌های تک‌رنگ و نمادهای ساده فلت بود. می‎شه گفت محبوبیت طراحی فلت به دلیل استقبال و استفاده مایکروسافت از اونه.

ویندوز فون که در سال ۲۰۱۰ توسط مایکروسافت منتشر شد، طرحش بر پایه‎ی طراحی فلت با لبه های تیز و گرافیک واضح و روشن بود.

بعد از موفقیت بدست اومده با ویندوز فون۷، مایکروسافت ویندوز ۸ را برای پی سی منتشر کرد که پایه و اساس طراحی اون از طراحی Metro بود. (مترو  یک زبان طراحی UI هست که توسط مایکروسافت ساخته شده و ساختار کلی اون به صورت ساده و مدرن  و روشنه.)

اپل در سال ۲۰۱۳، iOS 7  رو معرفی کرد، توی این نسخه همه آیکون‎ها و فونت‎ها دارای طراحی فلت بودن، طراحی فلت وارد مرحله‏ی جدیدی شد.

بعد از گذشت مدت کمی، گوگل هم تمام صفحات وب و اپلیکیشن های خودشو به طراحی فلت تغییر داد و اسم این طراحی رو، طراحی متریال (Material Design)گذاشت.

در سال ۲۰۱۵ گوگل لوگوی جدید خودش رو بر اساس طراحی فلت (Flat Design) منتشر کرد. عناصر شیک و درعین‌حال ساده این لوگو باعث شد تا یک رابط کاربری بسیار زیبا و مدرن خلق بشه. طرح نوآورانه گوگل باعث شد تا اصطلاح طراحی فلت دوباره بر سر زبان‌ها بیفته.

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

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

– طراحی مترو مایکروسافت (Metro Design)

– طراحی iOS 7  اپل

– طراحی متریال گوگل

ویژگی های مهم طراحی فلت

سادگی

علت اصلی نام گذاری طراحی فلت این بود که از طرح ها و افکت های سه بعدی مثل گرادینت ها یا رنگ های تدریجی، تکسچر ها یا طرح های بافت دار، هایلایت ها و سایه ها در اون استفاده نمی شه.

این سبک بر اساس طراحی دو بعدی هست، که سعی شده از طرح‎های پیچیده استفاده نشه و بجای اون از طرح‎های ساده و فلت استفاده کنن. اغلب اوقات به جزئیات توجه نمی‎شه و طراحی فقط سایه ای از آبجکت مورد نظر هست.

 زیبایی

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

رنگ ها

از ویژگی‌های منحصر بفرد طراحی فلت غیر از شیپ ها (اشکال)، استفاده از رنگ‌هاست. پالت رنگی طراحی فلت  از رنگ های پایه تشکیل شده. توی این پالت ،رنگ‌های روشن و زنده جایگاه خاصی دارن.

البته باید بدونید که طیف رنگی در طراحی فلت محدودیت نداره و متناسب با طرح مد نظرتون، می‎تونید از چندین رنگ و یا تنها یک رنگ استفاده کنید.

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

سایه ی بلند

همونطور که قبلا گفتم طراحی فلت باید ساده باشه و نباید از افکت‌های پیچیده در اون استفاده بشه. سایه‌های بلند یه افکته که از ویژگی‎های مهم این طراحی هست. این افکت چندین ویژگی داره که اونو خاص کرده. در این افکت زاویه مد نظر باید ۴۵ درجه باشه و طول سایه باید از آبجکت مد نظر بیشتر باشه، تقریبا دو برابر.

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

فونت ها

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

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

نکات مثبت و منفی طراحی فلت

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

نکات مثبت

طرح مبتنی بر فلت ذاتاً پاسخگو (Responsive) هست.

به ماندگاری بیشتر مخاطبان در وب‌سایت کمک می‌کنه.

برای نیچ دیزاین (Design Niche) می‌شه از طراحی فلت استفاده کرد. نیچ دیزاین به معنی طراحی برای قشر خاصی از مخاطبانه.

گرایش به تایپوگرافی فلت و خنثی با فضای زیاد باعث خوانایی بیشتری میشه.

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

آیکون‌های قابل‌تشخیص به‌طور مؤثرتر بازدیدکنندگان رو از طریق رابط کاربری راهنمایی می‌کنن.

رابط‌های بصری بدون حواس‌پرتی، قابلیت پیمایش وب‌سایت رو بهبود می‌دن.

استفاده استراتژیک از رنگ، کنتراست و سلسله‌مراتب منجر به تعامل و تبدیل بهتر بازدیدکنندگان می‌شه. تبدیل به معنی تبدیل یک کاربر عادی به یک مشتری وفاداره.

وب‌ سایت‌هایی که با حداقل‌ها طراحی شدن باعث کاهش بار سرور و درنتیجه سرعت بارگذاری رو افزایش می‌دن.

طراحی مسطح به عملکرد بهتر وب‌سایت‌ها هم کمک می‌کنه.

مزایای موردی طراحی فلت

سادگی

طراحی فلت خیلی ساده و واضحه و از وقتی که وارد دنیای وب و برنامه‌های موبایل شده کمک زیادی کرده تا تمرکز کاربر بر روی محتوا باشه و نه مسائل غیر ضروری.

شفافیت

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

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

نکات منفی

طراحی فلت به استفاده بیش از حد از مفهوم مینیمالیسم متهم شده. یعنی تأکیدش بر سادگی باعث شده  تا تمایز بین گرافیک و نشانه‌های بصری سخت باشه. ­­

مشکل انعطاف پذیری

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

مشکل تایپوگرافی

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

آینده طراحی فلت

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

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

امیدوارم خوندن این مقاله براتون مفید بوده باشه.