Principles-of-visual-communication-in-graphic-design

اصول ارتباط بصری و تصویری در طراحی گرافیک

نوشته شده توسط: امیرحسین طهماسبی

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

مطالب پیشین مربوط:

 

چه اصولی طراحی را چشم نواز و زیبا نشان میدهد و جلب توجه میکند؟

من و شما طراحی های زیادی در سطح شهر و در اینترنت مشاهده کرده ایم که برخی به نظرمان جذاب و برخی حال به همزن است! چرا؟

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

اصل اول طراحی گرافیک : سازماندهی و نظم دادن اطلاعات

خوب میخواهم بحث را با یک مثال شروع کنم. فرض کنید یک نامه از طریق پست به دست شما ارسال رسیده (همانند عکسی که مشاهده میکنید)

نظم دادن اطلاعات در طراحی گرافیک

در نگاه اول به نامه، کمی گنگ و بی مفهوم به نظر میرسد باید چند بار نامه را مرور کنید تا دقیق متوجه شوید این چیست که به دست شما رسیده و از شما چه میخواهد!

به نظر شما وقتی نامه یا هر چیز دیگری به دست ما میرسد در اولین نگاه چه چیزی به ذهنمان خطور میکند؟ این چیست؟ از طرف کیست؟ به چه دردم میخورد؟ و چرا به دست من رسیده است؟ باید چه کاری انجام دهم؟ درست است؟

حالا میخواهیم به ساختار این نامه کمی سر و سامان بدهیم. مثلا اینگونه:

نظم دادن اطلاعات در طراحی گرافیک

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

نظم دادن اطلاعات در طراحی گرافیک

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

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

نظم دادن اطلاعات در طراحی گرافیک

اصل دوم طراحی گرافیک : alignment یا همان تراز بندی

از همان مثال قبلی خودمان کمک بگیریم، که در اصل قبلی (نظم دادن اطلاعات) استفاده کردیم.

راست چین، چپ چین یا وسط چین

همانطوری که میدانید ترازبندی نوشته ما میتواند راست‌چین، وسط‌چین یا چپ‌چین باشد. مثل این:

ترازبندی

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

ترازبندی

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

ترازبندی

به نظرم نتیجه خیلی بهتری نسبت به اولین نسخه نامه داریم. (اولین نامه یادتان می آید؟ نظم دادن اطلاعات)

جاستیفای یا Justify

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

ترازبندی

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

ترازبندی

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

رعایت ترازبندی در همه طراحی ها

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

ترازبندی

اصل سوم طراحی گرافیک : ریتم کلی طراحی

ریتم طراحی باعث میشود طراحی شما در ذهن مخاطب ثبت شود و اگر بار دیگر به طراحی های شما برخورد کند احتمال اینکه شما را به یاد آورد بیشتر هست. حالا ریتم طراحی چیست؟ مترادف قانون “تکرار” در دوره آموزشی ۸ قانون طراحان گرافیک حرفه ای است.

ریتم طراحی چیست؟

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

با چند مثال خیلی ساده میخواهم این موضوع را توضیح دهم. تصویر زیر را نگاه کنید(بازم از مثال اصل های پیش استفاده کردم) به نظر شما کدام یک ریتم خاصی دارد؟

ریتم طراحی

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

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

اصل چهارم طراحی گرافیک : کنتراست بین اجزا و المان ها

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

کنتراست

کنتراست در طراحی یعنی ایجاد تفاوت بین یک المان و سایر المان ها. به نظر شما در این مثال چگونه کنتراست ایجاد شده؟

کنتراست

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

طرز صحیح به وجود آوردن کنتراست در طراحی

کنتراست

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

اصل پنجم طراحی گرافیک : استفاده از فضای خالی

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

بررسی فضای خالی برند اپل

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

فضای خالی در طراحی اپل

با یک صفحه خیلی خلوت و خالی مواجه شده ایم، با چند عکس، نوشته و لینک های هدایت کننده (Call To Action). یک طراحی بسیار تمیز دارد و در عین حال تمرکز کاربر را با المان های بیهوده بهم نمیریزد. مقدار فضای خالی (زیاد یا کم بودن فاصله) را با توجه به سلسله مراتب اجزا، رعایت کرده و در جای مناسبی مقدار فاصله مناسب را اعمال کرده است و این نکته هم یادآوری کنم اپل با ارزش ترین برند دنیاست، باز میتوانید این اصل را قبول نکنید! (یکم با لحن شوخی بخونید آخرشو)

بررسی فضای خالی برند شنل

فضای خالی در طراحی شنل

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