آشنایی با تکنیک تون دوگانه در طراحی سایت (با معرفی نمونه های برتر)

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

Adidas Football

طراحی آدیداس

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

Mirage Festival

رنگ ها در طراحی

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

Fjord Trend

تون دوگانه

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

Triple 9

2تون دوگانه

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

La Marine Nationale on Board Careers

طراحی دورنگ

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

Heroes and History

طراحی با قالب قهرمانانه

وب‌سایت Heroes and History از قالبی قهرمانانه که از دو رنگ اصلی تشکیل‌شده، استفاده کرده است. هرچند که رنگ قرمز ممکن است کمی تهاجمی به نظر برسد، اما در این مورد به‌خوبی ایفای نقش می‌کند.

Holm Marcher & Co

طراحی دورنگ 2

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

MailChimp

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

Year in Review by Atomic.io

ترکیب رنگ

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

Finesse Design Atelier

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

Jonkopingssodra

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

Year in Review by Tumblr

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

Campaign by Lois Jeans

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

New Deal Design

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

Year in Music by Spotify

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

Majorette Events

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

The Art of Travel

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

Lois Jeans Campaign

طراحی کمپین جین2
این کمپین نیز از طرف Lois Jeans برگزارشده و به مجموعه لباس‌های بهاره و تابستانه ۲۰۱۶ اختصاص دارد. اما برخلاف کمپین قبلی، طراحی ایستا و محتاطانه‌‌تری دارد. در این پروژه از رنگ‌های سرد برای تون دوگانه استفاده‌شده و بارگذاری صفحه آن‌ها به‌صورت ماهرانه‌ای طراحی‌شده است.

Wheels and Bearings

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

Standby

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

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

سعید مداحی

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