جلب توجه کاربران طراحی سایت از طریق رنگ ها
رنگ در طراحی سایت یکی از مهم ترین رکن های اصلی توجه کاربر به سایت و وابستگی به آن است . اگر نمیدانید چگونه در طراحی سایت رنگ به کار ببرید این مقاله را حتما بخوانید . در ادامه همراه با طراحی سایت باشید
تایپوگرافی و توجه در طراحی سایت
طراحی سایت های بسیار وجود دارند که از رنگ ها به شیوه استراتژیک بهره می برند. رنگ ها بسیار تطبیق پذیر می باشند و در اشکال و فرم های بسیار در طراحی وب سایت ها مورد استفاده قرار می گیرند. برای مثال، زمانی که من درباره رنگ ها بیشتر در طراحی سایت صحبت می کنم، مردم گمان می کنند که درباره مواردی مانند متن و یا دکمه ها می خواهم صحبت به میان بیاورم. البته که به این موضوع نیز خواهم پرداخت. اما حالا، من می خواهم درباره یک راه کم تر دیده شده ای صحبت کنم که می توانیم از طریق رنگ ها بر طراحی وب سایت ها تاثیر بگذاریم: تصاویر.
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 بود. اگر تیتر و یا تصویر ایمیل رنگ روشنی داشتند، تمرکز اصلی از این بخش ها برداشته می شد.
