طراحی سایت فلت

طراحی سایت فلت

طراحی سایت فلت

از جدیدترین روندهای طراحی سایت که در سال 2016 نیز مورد استفاده قرار می گیرد، طراحی سایت فلت (طراحی سایت تخت ) است. این نوع طراحی سایت که به آن flat design نیز می گویند، دارای ویژگی های متعددی است. در این مقاله از آموزش طراحی سایت ، قصد داریم توضیحاتی رادر مورد این نوع طراحی سایت و ویژگی های آن بیان نماییم.
از ویژگی های بارز این نوع طراحی سایت که در واقع اصلی ترین نقطه تمایز طراحی سایت فلت با سایر انواع طراحی سایت است، عدم وجود آیتم های سه بعدی است. در واقع در این طراحی سایت تمام آیتم های مورد استفاده از تصاویر و آیکون ها گرفته تا نوشته ها و افکت ها همگی در حالت دو بعدی طراحی می شوند. از این رو سایت نمایی تخت و مسطح به خود می گیرد که تازگی بسیار مورد استفاده قرار میگیرد.
به موجب عدم استفاده از آیتم های نسبتا پر حجم سه بعدی، این نوع طراحی سایت دارای حجم پایینی است و از این رو می توان سبک بودن طراحی سایت فلت را به عنوان یک مزیت برای آن بیان کرد. مزیت دیگر این نوع طراحی سایت، رنگ بندی زیبا و شادی است که در آن به کار می رود. از ویژگی های اصلی طراحی سایت فلت که باید در هنگام طراحی سایت در نظر گرفته شوند می توان به مواردی همچون: به کاربردن css بسیار، حداقل استفاده از عکس، سبک فلت و مسطح، استفاده نکردن از گرادیانت و به کاربردن رنگ های شاد و متنوع اشاره کرد که در تمام قسمت های سایت باید از آن استفاده شود.
به عبارت دیگر طراحی سایت فلت باید در عین سادگی ، زنده، جذاب و حرفه ای انجام شود تا بتواند مخاطب را به خود جلب کند. در برخی از سایت ها، آیکون های فلت در طرح ها و با رنگ بندی های مختلف به صورت فایل باز و یا در فرمت های مختلف گرافیکی ارائه شده اند که شما می توانید از آنها برای طراحی سایت فلت خود استفاده نمایید که میتوانید یک طراحی ساده در عین حال جذاب داشته باشید.
در گذشته های نه چندان دور طراحی وب سبکی متفاوت داشت. وقتی شما وارد یک سایت می شدید فقط طرح سایت را در نظر می گرفتید و می گفتید به به عجب سایت زیبایی ! چه استایلی! ولی امروز دیگر این فقط طراحی سایت نیست که شما را وادار می کند تا داخل آن بمانید. شما به استایل سایت توجه کمتری می کنید و تنها روی محتوای موجود در سایت تمرکز می کنید. طراحی فلت یعنی همین!
طراحی سایت فلت سایتی با بیشترین سرعت لود برای شما فراهم می کند سایتی که با سرعت لود بالا موجب بالا رفتن کاربرانتان نیز میشوید. حجم اطلاعات در فضای مجازی افزایش پیدا کرده و کاربر باید بتواند به راحتی و سادگی هر چه بیشتر محتوای دلخواه خود را پیدا کند ، بدون اینکه زمانی صبر کند تا استایل های سه بعدی قالب سایت مورد نظر و یا تصاویری که به منظور زیباتر کردن آن سایت در قالب آن گنجانده شده لود شود. در این صورت کاربر تنها محتوای سایت ها را با هم مقایسه می کند و به خوبی می تواند تشخیص دهد که چه سایتی محتوای خوبی دارد و چه سایتی محتوای نامطلوبی دارد.

سادگی

طراحی سایت فلت

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

کاربرد

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

رنگ بندی

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

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

طراحی سایت فلت

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

قوانین طراحی فلت

طراحی سایت فلت

شما در طراحی فلت حق استفاده از سایه را ندارید.

در طراحی فلت نباید متن یا هر جزء دیگری را برجسته (bevel) یا تو رفته کرد.

میشه گفت این دوتا مهم ترین قوانین هستن اما حتما بخش پایین رو هم بخونید.

استفاده از فونت های ساده، و ترجیها باریک بدون stroke یا out fill

استفاده از آیکون هایی هماهنگ با رنگ طرح

استفاده از رنگ هایی نزدیک به هم، به طوری که رنگ ها ناگهان عوض نشوند.

استفاده نکردن از رنگ تدریجی یا gradient

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

فضا را کاملا پر نکنید! بذارید کمی فضای خالی توی طرح وجود داشته باشه! و…

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

استفاده نامحدود از رنگ ها

عدم استفاده از رنگ های جیق و براق

استفاده از آیکن های تخت یا Flat

استفاده از تصاویر گرافیکی تخت یا Flat

استفاده بهینه از فضاها در طرح گرافیکی و رعایت فواصل مناسب برای المنت ها

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

عدم استفاده از Gradient و استفاده ۱۰۰% از رنگ های تخت

عدم استفاده از بافت یا Pattern

عدم استفاده از Border های ضخیم

عدم استفاده از سایه های نرم

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

DOTWEB
ما در تیم تولید محتوای شرکت طراحی سایت و برنامه نویسی دات وب در تلاش هستیم تا بهترین مقالات آموزشی در زمینه طراحی سایت و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم.

دیدگاهتان را بنویسید

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

error: