قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / مقالات / css/html / ویژگی های طراحی Flat فلت یا تخت + چند نمونه مناسب فلت

ویژگی های طراحی Flat فلت یا تخت + چند نمونه مناسب فلت

ویژگی های طراحی Flat فلت یا تخت + چند نمونه مناسب فلتReviewed by سالار on Jan 2Rating: 5.0

سلام به همه ی همراهان

 

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

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

در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شه و تمامی : عکس ها , آیکون های , نوشته ها , افکت ها و … به صورت دو بعدی هستش
یکی از بزرگ ترین علل محبوبیت طراحی فلت , سبک بودن آن است همونطور که گفتم در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شه و تمامی عناصر صفحه باید به صورت تخت و دوبعدی طراحی بشه.یکی دیگر از علل محبوبیت طراحی فلت – Flat Design رنگ بندی بسیار زیبای اون هستش. زیرا معمولا در طراحی فلت از رنگ های شاد و سبک جهت حرفه ای نشان تر دادن طراحی قالب خود استفاده می شهدر واقع در طراحی فلت قوانین وجود داره که شما برای اینکه بتونید اسم طراحی خودتون رو فلت بذارید باید از این قوانین پیروی کنید.

ویژگی های اصلی طراحی تخت Flat

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

در زیر چند مورد از ویژگی های اصلی و اساسی این سبک رو به شما یارآور خواهم شد :

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

 

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

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

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

اما اگر آیکون های با کیفیت و حرفه ای تری لازم دارید سایتwww.iconfinder.com بیشتر توصیه میشه.

در ضمن شما میتونید افزونه این سایت رو دانلود و در فتوشاپ قرار دهید تا آیکون ها رو در خود برنامه فتوشاپ دریافت کنید.

نمونه چند آیکون فلت:

طراحی فلت چیست طراحی فلت چیست طراحی فلت چیستIllustration of Mobile Flat Circle Icon over Red

 

رنگ های فلت:

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

 

نمونه های طراحی فلت :

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

 

10-flat-king-website-layout-mockup-iriranweb

 

29-marketing-website-homepage-layout-iriranweb

15-jan-cavan-portfolio-flat-layout-iriranweb

03-paypoint-homepage-flat-layout-iriranweb

05-loudfund-website-layout-design-iriranweb

مطلب پیشنهادی

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

طراحی Loading بدون استفاده از تصویرReviewed by سالار on Aug 9Rating: 5.0سلام به همه ی …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید