جلب توجه کاربران طراحی سایت از طریق رنگ ها

نویسنده :

ضحی بنام

۹۶/۱۲/۲۶

۱۱:۰۷

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

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

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

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

رنگ های نئونی و یا کنتراستی تنها مواردی نیستند که زمانی که به مفهوم طراحی توسط رنگ ها فکر می کنیم، می توانند تاثیر برانگیز باشند.

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

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

اولین مثال، THE NATURE CONSERVANCY در کالیفرنیا می باشد. این سایت به دو دلیل بهترین مثال می باشد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

به طور طبیعی، رنگ یکی از بخش های بزرگ هر زبان بصری می باشد ، البته بخش اعظمی از سبک راهنما را نیز در سایت ها در بر می گیرد. اگر شما به دنبال مثال عالی از استفاده از زبان بصری در سایت ها می باشید می توانید به MATERIAL DESIGN DOCUMENTATIONS نگاهی بی اندازید.

در هر صورت این وب سایت درباره MATERIAL DESIGN نمی باشد. بلکه درباره زبان بصری WYRE می باشد که یک سرویس انتقالات بانکی آنلاین است. برند این شرکت به شدت روی اشکال برگ مانندی به صورت تکراری تمرکز دارد که در لوگو نیز این مورد به کار رفته است.

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

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

این چنین ارتباطاتی بدون ایجاد فراوانی در شکل و رنگ، امکان پذیر نمی باشد.

کمبود ترکیبات رنگی می توان یک مورد بسیار خوبی باشد
در هر طراحی وب سایتی از ترکیبات رنگی رنگارنگ به کار نمی رود. اولین مثال در این پست STORQ بود که به خوبی توانست با محدودیت رنگ هایی که داشت، توجه کاربران را جلب نماید. بیایید به دو مثال دیگر که به خوبی توانسته است تا نظر کاربران را به بخش های مشخصی توسط حذف رنگ ها به عنوان ایجاد نقطه عطف جلب نماید، نگاه کنیم.
اولین مثال مربوط به صفحه اصلی سایت DONA می باشد که یک اپلیکیشن قدرتمند برای انجام کارهای روزانه است. مورد یکه قابل توجه می باشد این است که این طراحی وب سایت به طور کامل رنگ را حرف نمی نماید.
در این جا بخش هایی را به رنگ آبی در صفحه اصلی مشاهده می کنیم. به علاوه، اسکرین شات در IPHONE دارای بخش های کوچکی از رنگ ها دیگر نیز می باشد.ایده اصلی در این جا حذف کامل رنگ ها نمی باشد، اما از عدم حضور رنگ ها در این وب سایت به بهترین نحو استفاده شده است.
دومین مثال مربوط به سایت نمونه کار برای THE LOGO SHOP می باشد. این سایت از پیش زمینه های صورتی یک دستی استفاده کرده است و مابقی موارد با رنگ خاکستری تیره دیده می شود. حالا، هر دوی این طراحی از رنگ ها به گونه ای سنتی به کار نبردند. به صورت همزمان، هیچ یک کدام از آن ها اساسا سیاه و سفید هم نمی باشند. موردی که این دو طراحی انجام می دهند، تاکید روی رنگ های اندک در  طراحی سایت  ها می باشد.
چون در این طراحی سایت ها یک رنگی وجود دارد که در بیشتر بخش ها پایدار می ماند، تایید زبان بصری روی مقدار رنگی استفاده شده و یا اندازه عوامل است. در شرایط THE LOGO SHOP، تیتر بزرگ ترین عامل در بالای صفحه می باشد. این مورد به طور آشکاری مهم ترین مورد در این جا است که به صورت بصری به صحبت کردن می پردازد.
همان طور که می توانید ببینید، کمبود تنوع رنگی یک مورد خوبی در طراحی وب سایت ها می باشد. در صفحه اصلی DONA، تاکید به سادگی روی اسکرین شات های متحرک ر IPHONE بود. اگر تیتر و یا تصویر ایمیل رنگ روشنی داشتند، تمرکز اصلی از این بخش ها برداشته می شد.


های لایت کردن برخی بخش های  طراحی سایت 

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

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

دیدگاه ها

برای این نوشته تا کنون دیدگاهی ثبت نشده