یک زبان بصری درست مانند هر زبان دیگری یک راه برای انتقال داده و ارتباط برقرار کردن است.
در حالیکه معمولا منظور از زبان چیزی است که با آن حرف می‌زنند و می‌نویسند، اما زبان بصری یک قدم از این موارد پیشی می‌گیرد و جامعه منحصر به فرد خود را دارد. المان‌هایی مانند رنگ، استایل، نوع تصاویر و تصویر‌سازی‌ها و… همه اینها نشان دهنده آن هستند که یک شرکت مشغول چکاری‌ست. در نهایت برای فهمیدن و درک منظور این المان‌ها، آن‌ها را در کنار همدیگر قرار می‌دهیم. اینگونه با یک گروه از المان‌های بصری سر و کار داریم که مشغول ارتباط برقرار کردن با ما هستند.
هر زبان بصری از طریق المان‌ها و تکنیک های طراحی که دارد صحبت می‌کند. ما از زبان بصری به این دلیل استفاده می‌کنیم که شرکت و یا محصول خود را به بقیه جهان معرفی نماییم. اما نکته جالب ماجرا اینجاست که کاربران زبان بصری را متوجه نمی‌شوند، آن‌ها تنها زمانی که یک بار دیگر المان‌های بصری شما (سازندگان زبان بصری منحصر به فردتان) را ببینند سریعا متوجه شما می‌شوند و شما را تشخیص می‌دهند.
در این مطلب قصد داریم ۱۰ نکته برای ایجاد یک زبان بصری مناسب که کاربران بتوانند آن را به خوبی درک بکنند به اشتراک بگذاریم.
۱. ایجاد یک پالت رنگی
یک پالت رنگی قدرتمند راهی بسیار عالی برای کاربران است تا شما را تشخیص دهند. در واقع از طریق یک پالت رنگی کاربران به خوبی می‌توانند با وبسایت و شرکت شما ارتباط برقرار کنند. در این صورت آن‌ها وقتی با یک رنگ یا مجموعه رنگی برخورد می‌کنند می‌توانند تشخیص دهند که این رنگ مربوط به چه شرکتی است. اینگونه ما تلاش داریم تا در دنیای بزرگ وب گم نشویم و لنگری برای خودمان و ذهن کاربران ایجاد کنیم.
پالت رنگی لزوما نباید منحصر به فرد باشد. بلعکس بهتر است از پالت رنگی استفاده بکنید که جهان شمول بوده و توانایی استفاده در فیلدهای مختلف کاری‌تان – شبکه‌های اجتماعی، بیزینس کارت، بسته‌بندی و...- را دارد.
از طرفی دیگر، پالت رنگی باید سعی در تقویت ارزش برندتان بکند.
برای مثال بیایید به رنگ‌های مربوط به شرکت McDonald’s نگاهی بیاندازیم: زرد و قرمز. زرد نشانه‌ای است از خوشحالی و قرمز نیز نشانه‌ای از گرسنگی و اشتیاق به خوردن. آیا تا به حال شده که در جایی -شبکه‌های اجتماعی، بسته‌بندی‌ها و…-، کمانه‌های زرد رنگ موجود در برند این شرکت را نبینید؟
۲. ایجاد یک تایپوگرافی سلسله مراتبی
درست به همان میزان که انتخاب یک فونت اهمیت دارد، شیوه استفاده از آن نیز مهم است.
استفاده از یک سیستم سلسله مراتبی برای تایپوگرافی می‌تواند ارتباط بسیار بهتری را با کاربران ایجاد کند. برای مثال در زمانی شما نیاز دارید که از تایپوگرافی قوی و بعضی اوقات از تایپوگرافی نُرمال استفاده کنید. با این حال هیچ انتخاب عالی یا بدی وجود ندارد شما تنها باید هوشمندی کافی را برای سنجش شرایط در نظر بگیرید و از گزینه مناسبی برای ارتباط برقرار کردن استفاده بکنید.
نکته اصلی برای ایجاد یک تایپوگرافی مقیاس‌پذیر آن است که هر سطح از تایپوگرافی را به اندازه کافی متفاوت از سطح قبلی و سطح بعدی ایجاد کنید. اینگونه کاربران می‌توانند با سادگی بیشتری تفاوت‌ها را مشاهده نمایند.
Airbnb یک سیستم مقیاس‌پذیر بسیار مناسب را برای تایپوگرافی خود ایجاد کرده است که هر سطح در آن وزن و اندازه مختلفی دارد. البته این سیستم فارغ از وزن و اندازه، به پالت رنگی نیز توسعه داده شده است.
۳. پیاده‌سازی یک Grid
شیوه فضادهی و قرارگیری المان‌ها درست به اندازه خود المان‌ها مهم و تاثیرگذار است. آیا هویت بصری شما به اندازه کافی تمیز و سازمان‌دهی شده هست؟
سیستم Grid شما می‌تواند به این سوال پاسخ بدهد. با استفاده از یک سیستم شبکه‌بندی شده مناسب، میتوانید محتوا را در یک شکل ویژه به کاربران تحویل دهید. این موضوع می‌تواند ارتباط بصری قدرتمندی را با کاربران ایجاد بکند.
۴. ایجاد یک کتابخانه از کامپوننت‌ها
برای ایجاد هماهنگی در بین المان‌های طراحی مختلف رابط کاربری در وبسایت، بهتر است یک کتابخانه را برای تمام المان‌های‌تان داشته باشید. میتوانید این کتابخانه را ایجاد کنید و یا آنکه یک مورد آماده را استفاده نمایید.
یک دکمه در وبسایت نباید در یک صفحه آبی و دایره‌ای باشد و در صفحه‌ای دیگر قرمز و مربعی! یک آیکون نباید به سبک طراحی خطی در صفحه ۱ ایجاد شده باشد و در صفحه ۲ سبک متریال به خودش بگیرد! تمام این ناسازگاری‌ها می‌تواند روی تخریب زبان بصری وبسایت‌تان تاثیرگذار باشد.
یک کتابخانه خوب از کامپوننت‌ها شامل تمامی المان‌هایی می‌شود که برای ایجاد یک وبسایت نیاز است. همچنین در کنار این نسخه‌های مختلف و یا مقیاس‌پذیری از این المان‌ها نیز باید در کتابخانه قرار بگیرد.
درحالیکه به نظر می‌رسد این کار در ابتدا دشوار باشد، اما بعد از آن روند طراحی وبسایت و توسعه Front-End را بسیار سریع می‌کند.
۵. اهمیت دادن به استایل تصاویر
خواه که شما مشغول استفاده از تصاویر، ویدیوها و یا هر المان گرافیکی دیگری از این دست باشید، باید در نظر بگیرید که ایجاد و پیاده‌سازی یک استایل تصویری موضوع مهمی است. این مورد مطمئنا قوی‌ترین و بهترین ویژگی بصری خواهد بود که کاربران به خاطر می‌سپارند و برای به یاد آوری وبسایت و برندتان از آن استفاده می‌کنند.
این استایل‌ها می‌توانند به هر ویژگی ویرایش تصویری مربوط شوند. از یک فیلتر ساده تا برش‌های تصویری و موارد دیگر.
به تصویر زیر از وبسایت Smashmallow دقت کنید. حتی اگر المان‌ها در این وبسایت با همدیگر گروه‌بندی نشده بودند باز هم می‌توانستند از طریق استایل تصاویر با یکدیگر ارتباط برقرار بکنند. تمام این فیلترهای تصویری، کمک بسیار زیادی در جهت ارتباط برقرار کردن کاربر با وبسایت شرکت می‌کنند.
6. ایجاد قواعد برای انیمیشن‌ها
المان‌های متحرک در وبسایت‌تان نیز باید از یکسری قواعد پیروی بکنند. آیا آن‌ها باید سریع حرکت بکنند یا آهسته؟ آیا آن‌ها باید براساس یک رویداد خاص متحرک شوند و یا نه در حالت عادی باید متحرک باشند؟
این تعاملات نیز باعث می‌شود که یک هویت بصری را ایجاد بکنید. انیمیشن‌ها می‌توانند معنای دیگری به پروژه شما اضافه بکنند. خواه که از آن‌ها استفاده بکنید و یا نه، در نهایت به ایجاد برند وبسایت شما در حالت‌های مختلف کمک می‌کنند.
۷. ترکیب کلمات و المان‌های بصری
برای آنکه یک زبان بصری مؤثر و مفید واقع شود، نیاز است که از زبان واقعی (کلمات) در ساخت آن استفاده بکنید. اگر المان‌های بصری (در اینجا منظور غیر از متن است) با کلمات در یک طراحی نتوانند سازگاری داشته باشند در نهایت باعث خواهند شد که کاربر تجربه سردرگم کننده‌ای داشته باشد.
المان‌ها باید در کنار همدیگر به خوبی کار بکنند تا بتوانند یک ارتباط را ایجاد نمایند.
Steffany یک وبسایت است که دقیقا چنین موضوعی را به خوبی پیاده‌سازی کرده است. اگر دقت کنید میتوانید متوجه شوید که المان‌های متنی و گرافیکی موجود در این وبسایت کاملا با یکدیگر سازگاری دارند.
۸. با خودتان روراست باشید
یک زبان بصری تنها زمانی به خوبی کار می‌کند که به آن اعتقاد داشته باشید. این زبان باید کیستی و چیستی شما را نمایان سازد.
برنامه Sesame Street را بدون شخصیت‌های آن تصور بکنید! مطمئنا کاملا برنامه متفاوتی خواهد بود.
در واقع شما باید سعی بکنید که میان فضای واقعی که در دنیا وجود دارد و زبان بصری استفاده شده در وبسایت‌تان ارتباطی برقرار کنید.
۹. استوار باشید
وقتی که یکسری قواعد را برای زبان بصری‌تان ایجاد می‌کنید، سعی کنید که به آن‌ها متعهد باشید و بیشتر توسعه‌شان دهید. بزرگ‌ترین اشتباهی که می‌تواند برای یک ایجاد یک زبان بصری درست شود ناسازگاری در آن است.
در یک تعریف FreeCodeCamp می‌گوید که طراحی باید به سوالات زیر پاسخ دهد:
- از چه رنگی استفاده می‌کنیم؟
- لوگو در کجا قرار می‌گیرد؟
- آيا از این پترن قبلا استفاده شده است؟
- آخرین مستندات تهیه شده کدام است؟
- چگونه این انیمیشن را ایجاد کنیم؟
- آیا این المان در کتابخانه کامپوننت‌ها وجود دارد؟
۱۰. یک شیوه استایل ایجاد کنید
یک زبان بصری ایجاد کنید و آن را به دنیای کدها بیاورید. زبان بصری که استفاده می‌کنید بسیار مهم است. باید به هر صورتی که شده یک شیوه استایل برای کاری که در حال ایجاد آن هستید درست بکنید. این المان‌های بصری هستند که همه چیز را به همدیگر متصل می‌کنند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید