در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شود و تمام : عکس ها , آیکون های , نوشته ها , افکت ها و … به صورت دو بعدی هستند
یکی از بزرگ ترین علل محبوبیت طراحی فلت , سبک بودن آن است

 

کاربردهای فلت

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

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

 

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

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

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

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

» عدم استفاده از رنگ های جیق و براق
» استفاده از آیکن های تخت یا Flat
» استفاده از تصاویر گرافیکی تخت یا Flat
» استفاده بهینه از فضاها در طرح گرافیکی و رعایت فواصل مناسب برای المنت ها
» استفاده از فونت های زیبا و عموما رسمی با ابعاد بزرگ و قابل دید
» عدم استفاده از Gradient و استفاده ۱۰۰% از رنگ های تخت
» عدم استفاده از بافت یا Pattern
» عدم استفاده از Border های ضخیم
» عدم استفاده از سایه های نرم

» در طراحی فلت نباید متن یا هر جزء دیگری را برجسته (bevel) ، یا تورفته کرد.
» استفاده از فونت های ساده ، و ترجیها باریک بدون stroke (یا out fill)
» استفاده از آیکون هایی هماهنگ با رنگ طرح
» استفاده از رنگ هایی نزدیک به هم ، به طوری که رنگ ها ناگهان عوض نشوند
» فضا را کاملا پر نکنید! بذارید کمی فضای خالی توی طرح وجود داشته باشد.
» داشتن استایل تخت مانند
» دانستن رنگ های پایه فلت

 

آیکون های فلت:

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

از جستجوی وبسایت حتما آیکن جستجو کنید تا شاهد آیکن های جدید و فلت باشید (علاوه بر مدل های سه بعدی)

 

 

کدنویسی فلت در وبسایت :

در کدنویسی فلت شما باید ۱۰۰ درصد مسلط بر CSS کار کنید و در استفاده از رنگ ها خلاقیت به خرج د هید. طراحی فلت باید زنده و جذاب باشد و در عین حال ساده و نه خیلی پیچیده مثلا برای طراحی یک هدر سایت فقط کافیست رنگ ها را در ذهن خود مجسم کنید و از ترکیبشان یک ایده قوی ایجاد کنید. فلت یعنی طراحی با رنگ دقیقا مانند رنگ کاری ساختمانی شما هم باید با استفاده از رنگ های مختلف به ایده نگری بپردازید این نوع طراحی بخاطره ساده بودن دارای سرعت لود بالایی هستش که بخاطره همین مورد محبوبیت بالایی قرار گرفته است…
یک نکته را در کدنویسی فلت همیشه و همیشه در نظر داشته باشید و آن این است که باید از CSS حداکثر استفاده را نمایید به جای تصویر. حداقل ۹۵% از کار شما را باید CSS تشکیل دهد.

 

رنگ های فلت:

میتونید رنگ های فلت رو از این بخش سایت دریافت کنید (کلیک کنید) و یا کلمه رنگ های فلت یا پالت رنگ فلت جستجو کنید. وقتی روی هر رنگ کلیک کنید کد رنگ در حافظه کلیپ برد ذخیره میشود و کد رنگ را در هرجایی که لازم دارین جایگذاری (paste) کنید.

 

تعریف پالت رنگ

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

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

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

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

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

رنگهای براق

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

 

از کجا باید شروع کنید؟

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

Designmodo یک گام از این فراتر رفته است و اخیرا کیت Flat UI Free را ارائه کرده است و رنگهای براق را در کیت اینترفیسی که کار با آن بسیار راحت است در اختیار قرار داده است. طراحی فلت، آیکن های به روز و نمونه رنگ ها در این کیت وجود دارد.

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

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

نمونه های براق: برای ایجاد پالت رنگی فلت از ترکیب این رنگها یا میکس آنها در یک گروه استفاده کنید. هریک از این رنگها در مقابل پس زمینه سیاه یا سفید با حداکثر تاثیر گذاری میتواند قرار گیرد.

 

 

 

رنگ های رترو

 

اسکیم رنگ رترو هنگام کار بر روی پروژه فلت گزینه خوبی است.

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

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

 

 

 

 

رنگهای مونو تون

 

 

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

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

گزینه دیگر ایجاد افکت مونو تون با استفاده از واریانس کم در رنگ است. اگر برای مثال از آبی استفاده میکنید از رنگ سبز برای ایجاد اسکیم آبی-سبز استفاده کنید.

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

 

 

 

 

نتیجه گیری

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

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

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

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

تصاویرلایه بازفلت درطراحی سایت