طراحی وب سایت به سبک فلت (تخت) و نکات کاربردی

صفحه اصلی / وبلاگ /
طراحی وب سایت به سبک فلت (تخت) و نکات کاربردی

طراحی تخت چیست؟

طراحی تخت، همان گونه که از نامش پیداست، به معنی ایجاد یک ترکیب تخت و یکدست در طراحی است. این کار با ساده سازی رابط گرافیکی (user interface) اجرا می شود. عناصری نظیر: سایه ها، خطوط و اشکال اریب، بافت ها و گرادیِنت ها (gradients) که ظاهری 3ـ بعدی را در طراحی ایجاد می کنند و زائدند اصولاً باید حذف شوند.

ایده این است که طراحی نهایی را فقط 2ـ بعدی کنیم، بدون این که طراحیمان کارکردهای یک رابط گرافیکی متعارف (دارای ویژگی های 3ـ بعدی) را از دست بدهد. همین ایده، بحث داغی را بین طراحان روز ایجاد کرده که حذف عناصر و افکت های 3ـ بعدی، فهم و دریافت کارکرد عناصر اصلی از سوی کاربران را دشوارتر می کند.

آشنایی با طراحی فلت
آشنایی با طراحی فلت

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

 

مایکروسافت و طراحی تخت

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

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

 

طراحی دکمه های تخت

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

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

طراحی فرم‌ها

طراحی تخت فرم ها دشوار است چرا که باکس ها، فیلدها و منوهای کشویی نباید سایه و افکت داشته باشند. شما میتوانید با css به آن ها استایل بدهید.

 رنگ ها در فلت دیزاین

یکی از اساسی ترین مسائلی که در طراحی باید به آن اهمیت بدهیم انتخاب رنگ ها و رنگ بندی است. ترکیب رنگی که در یک طراحی تخت مورد نظر است باید برجسته تر و جذاب تر از سایر شیوه های طراحی باشد. وبسایت flat ui color یکی از وبسایت هایی است که برای این منظور ایجاد شده است. شما میتوانید رنگ های انتخابی خود را اینجا چک کنید.

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

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

اشکال (Shapes) در طراحی تخت

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

 

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

 

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

کاربردگرایی همواره مهمتر از زیبایی بصری است.

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

چنانچه وبسایت زیبایی بیافرینید که کاربران را سردرگم میکند، شما به خروجی نهایی صدمه زده اید. ترندها و استایل ها باید همواره با المان ها و بخش های وبسایت تناسب خوبی داشته باشند. شما ممکن است در طول روز و در هنگام طراحی در خود فرو روید و ایده هایی که در ذهن دارید را اجرا کنید و از نظر خودتان کارهای بصری گویایی را ایجاد کنید، اما بهتر است در انتهای روز کار خود را با چند کاربر تست و ارزیابی کنید تا بفهمید همه چیز درست کار میکند یا نه! گاهی یک تغییر جزئی میتواند تفاوت چشمگیری را در نگاه کاربران ایجاد کند.

نهایتاً، آیا من هم باید از طراحی تخت استفاده کنم؟

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

توجه : اطلاعات شما در دنیار وب محفوظ می ماند