بایدها و نبایدهای طراحی وب تاریک


طراحی های وب تیره بسیار محبوب هستند و می توانند جذابیت ظریف و خلاقانه ای داشته باشند.

آن‌ها همچنین برای بسیاری از انواع کار مشتری مناسب هستند، اما برای هر وب‌سایتی مناسب نیستند و باید فقط در صورت مناسب استفاده شوند.

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

با طراحی تیره خوانایی کمتر، جذابیت کمتر برای اکثر خوانندگان و فرصت کمتری برای عناصر طراحی معمولی وجود دارد.

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

یک نظرسنجی اخیر نشان می‌دهد که طرح‌های سبک توسط مخاطبان عمومی وب‌گردی با 47% ترجیح داده می‌شوند. دلیل اصلی خوانایی است. اکثر مردم دیدن متن روشن در پس زمینه تاریک در وب سایت ها را دوست ندارند زیرا چشمان آنها را خسته می کند و تجربه بسیار کمتری لذت بخشی را برای آنها ایجاد می کند.

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

بنابراین، پاسخ صحیح چیست؟ وقتی نوبت به آن می رسد، هرکس نظر خود را دارد، و این است.

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

این به معنای متقاعد کردن همه معتقدان واقعی پس‌زمینه‌های روشن است که طراحی تیره می‌تواند خواناتر و کاربرپسندتر باشد.

 

از فضای سفید بیشتر استفاده کنید

یا باید آن را “فضای سیاه” نامید؟ استفاده موثر از فضای سفید برای هر نوع طراحی مهم است، اما برای وب سایت هایی با پس زمینه تیره ضروری است.

طرح های تیره تمایل به احساس “سنگینی” دارند، و بهم ریختن آنها می تواند این احساس را تقویت کند. به برخی از طراحی های وب تاریک محبوب در زیر نگاهی بیندازید و به استفاده آزادانه آنها از فضای سفید برای تأثیرگذاری عالی توجه کنید.

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

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

BlackEstate

 

محتوای برجسته در Tictoc و تصویر همراه در این طرح با بیشترین قاب‌بندی فضای سفید. همانطور که به سمت پایین حرکت می کنیم، فضای سفید کمتری می بینیم که باعث می شود به محتوای نمایش داده شده توجه کنیم.

نکته در اینجا این است که فضای سفید به تدریج کاربر را به انتهای صفحه هدایت می کند.

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

TicToc

 

وب‌سایت Mark Dearman دارای فضای سفید آزاد و یکنواخت در سراسر طرح‌بندی خود است.

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

فضای سفید فراوان برای طرح‌های تیره ضروری است زیرا نه تنها به از بین بردن چیدمان کمک می‌کند، بلکه به کادربندی عناصر مهم و افزودن ظرافت به نمای کلی کمک می‌کند.

MarkDearman

 

فضای سفید متنی

از آنجایی که خوانایی دغدغه شماره یک کسانی است که از پس زمینه تیره خوششان نمی آید، طراحان باید به خود متن توجه بیشتری داشته باشند.

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

مثال زیر نشان می‌دهد که فاصله بین و اطراف کاراکترها چه تفاوتی در مقایسه طرح‌بندی‌های تاریک و روشن ایجاد می‌کند.

Text White Space

 

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

به عنوان مثال، حرف “a” زیر با بزرگتر شدن فضای سفید بیشتری پیدا می کند، هم در ناحیه اطراف آن و هم در فضای داخل محفظه a و زیر برآمدگی.

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

Text Size Matters

 

تضاد متن

بسیاری از مردم موافق هستند که بدترین وب سایت های تاریک باعث خستگی چشم می شوند. کنتراست خیلی زیاد یا خیلی کم معمولاً مقصر است. چگونه می توان تعادل کامل را پیدا کرد؟

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

یافتن کنتراست کامل به معنای متعادل کردن تاریکی پس‌زمینه و روشنی متن است.

در زیر یک راهنمای تقریبی (بسیار) وجود دارد که نشان می‌دهد تضاد بین متن و پس‌زمینه چگونه کار می‌کند. یکی متوجه می‌شود که با روشن‌تر شدن پس‌زمینه، متن نیز روشن‌تر می‌شود.

پیدا کردن کنتراست دلپذیر برای متن با پس‌زمینه مشکی خالص بسیار دشوارتر است.

برای یافتن تعادل کامل، با سایه های مختلف آزمایش کنید. بهترین نتیجه معمولاً پس‌زمینه‌ای است که سیاه خالص نیست و متنی که سفید خالص نیست.

Text Contrast

 

برخورد با فونت ها

فونت‌ها نقش مهمی در طراحی دارند و قطعاً باید در طرح‌بندی‌های تاریک مورد توجه قرار گیرند. تصویر زیر یک فونت 14 نقطه ای را در پس زمینه تیره در هر دو فونت serif و sans-serif نشان می دهد.

فونت sans-serif آشکارا خواناتر است. اما بسیاری از طراحان همچنان فونت های سریف را برای ظرافت خود انتخاب می کنند.

هر چند، ترفند این است که فقط متن بزرگ‌تر را در فونت‌های سریف قرار دهید، به طوری که فضای سفید اضافی در اطراف هر کاراکتر هجوم آورده و متن را بسیار خوانا می‌کند.

Font Choice

 

تصویر زیر مربوط به وب سایتی است که قبلاً در این مقاله مورد بحث قرار گرفته است. هر دو فونت serif و sans-serif را دارد، اما از آنها به روشی هوشمندانه استفاده می‌کند.

متن بزرگ‌تر، مانند سرفصل‌ها، پیمایش و سرصفحه‌ها، برای ظرافت بیشتر در فونت سریف هستند. برای کنتراست بهتر و خوانایی بهتر، متن متن با فونت sans-serif تمیز است.

Serif and Sans-serif

 

از طرح های رنگی حداقلی استفاده کنید

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

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

به یک یا دو رنگ بچسبید. برای افزودن رنگ بیشتر، پس زمینه تیره رنگ را امتحان کنید.

Color

 

مسلماً، بسیاری از طراحی‌های وب تاریک دارای طرح‌های رنگی هیجان‌انگیزتری هستند. بنابراین این قانون اغلب شکسته می شود، اما فقط با تکنیک های مناسب.

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

 

یک Style Switcher پیشنهاد دهید

در حالی که روش‌های خوب بسیاری برای جذاب‌تر کردن طراحی‌های وب تاریک در اختیار داریم، هیچ تلاشی هر کاربر را راضی نمی‌کند.

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

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

SitePoint یک آموزش عالی در این زمینه دارد: ساخت Style Switcher ساده در CSS. به جای استفاده از نسخه های «نارنجی»، «آبی» و «سفید» در آموزش، فقط از شیوه نامه های «روشن» و «تاریک» استفاده کنید.

 

وقتی طراحی وب تاریک بهترین کار را انجام می دهد

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

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

 

طراحی تاریک زیبا

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

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

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

بیشتر ما الگوهای قدیمی را با کلاس بالا مرتبط می‌دانیم، بنابراین ایجاد یک وب‌سایت با کلاس بالا به این روش آسان است.

Larissa Meek

 

Depth Core طراحی بسیار تمیزی دارد، با پس‌زمینه‌ای تیره که به سبک و کلاس اضافه می‌کند. حس اقتدار در طراحی نیز مشهود است. این ظرافت همچنین ممکن است در نتیجه کار نمونه کارها یک طراح را ارزشمندتر نشان دهد.

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

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

Depth Core

 

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

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

Tapbots

 

طراحی خلاقانه تاریک

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

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

و چون به فضای سفید بیشتری نیاز دارند، طراح فضای بیشتری برای کار دارد.

Inca

 

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

به نظر می‌رسد طرح‌های گرانج تیره مانند Trozo همه قوانین را زیر پا می‌گذارند: بافت‌های شلوغ، شلوغ طرح و طیف گسترده ای از رنگ ها. و با این حال این وب سایت هنوز کار می کند. چگونه ممکن است؟

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

پس‌زمینه بلوک‌های کاملاً چیده‌شده‌ای دارد که چشم کاربر را هدایت می‌کند و به تقسیم محتوا به بخش‌های قابل مدیریت کمک می‌کند.

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

این فضای سفید بیشتر در سمت چپ نشان‌واره، زیر پیمایش و در امتداد سمت راست نمایان است.

حتی بین “نمایش 01” و “نمایش 02” فضای خالی بیشتری نسبت به وب‌سایتی مانند این وجود دارد.

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

Trozo

 

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

و پس‌زمینه تیره باعث می‌شود هدر روشن‌تر و خارق‌العاده‌تر به نظر برسد.

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

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

Drew Wilson

 

در حال تکمیل

پس‌زمینه‌های تیره حسی زیبا و خلاقانه به طراحی‌های وب می‌دهند و آن‌ها را برای برخی از نمونه کارها عالی می‌کند، اما برای هر سایتی مناسب نیستند.

برای وب‌سایت‌های بزرگ‌تر، به‌ویژه وب‌سایت‌هایی که برای افراد دارای اختلال بینایی و سایر ناتوانی‌ها هستند، طراحی‌های تیره حتی با تغییر سبک، غیرممکن است.

امیدواریم زمانی که نیاز به طراحی وب سایتی با پس زمینه تیره دارید، این نکات و استراتژی ها به شما کمک کند.

 

نوشته شده به طور انحصاری برای WDD توسط Kayla Knight.

تکنیک‌ها و استراتژی‌های بیشتری برای بهبود طراحی‌های وب تاریک وجود دارد، بنابراین لطفاً مواردی را که انتخاب کرده‌اید در بخش نظرات زیر به اشتراک بگذارید.

 

بدون دیدگاه

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

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