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

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

1- سایه های بلند

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

2- رنگهای روشن

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

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

4- دکمه های بی رنگ

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

5- مینیمالیسم

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

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

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

نتیجه

طراحی فلت خیلی سازگارپذیره و شما در این طراحی دستتون بازه. تک تک عناصر این طراحی خودشون میتونن به تنهایی در هر سایتی با هر نوع طراحی بکار برن. میتونید این طراحی رو با روشهای دیگه ترکیب کنید و طراحی نیمه فلت خلق کنید که نه تنها انعطاف پذیره بلکه حتی بهتر از طراحی فلت محض هم هست و این روزها داره محبوبیت بیشتری پیدا میکنه.
darkoob.co.ir