نکات کلیدی طراحی گرافیک سایت ۱

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

 

۱٫ خط

 

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

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

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

 

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

 

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

۲٫ مقیاس

 

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

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

 

گرچه این مقیاس از نظر فنی بر اساس واقع‌گرایی طراحی نشده است، چون در واقعیت چهره همه افراد عموماً هم‌اندازه است (و نقش اول فیلم، رایان گاسلینگ هم یک غول نیست!)، اما مقیاس بندی متفاوت چهره‌های بازیگران این فیلم، به بیننده کمک می‌کند که به سرعت دیدی کلی از اهمیت نقش هر یک از کاراکترها در فیلم بیابد و پوستر را به یک طراحی مؤثر و کارآمد تبدیل می‌کند.

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

۳٫ رنگ

 

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

 

 

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

 

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

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

۴٫ تکرار

 

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

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

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

 

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

 

 

۵٫ فضای منفی

 

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

 

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

 

۶٫ تقارن

 

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

 

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

 

 

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

هر مجله‌ای را که باز کنید و به خصوص در مقاله‌های طولانی‌تر می‌بینید که متن نوشته‌ها به ستون‌های متنی تقسیم شده است و این ستون‌ها غالباً به صورت متقارن تنظیم می‌شوند تا همه چیز، منظم، منطقی و از لحاظ بصری خوشایند به نظر برسد.

 

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

۷٫ شفافیت

 

 

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

 

 

شفافیت یک تکنیک عالی برای تولید حس حرکت در تصاویر ثابت محسوب می‌شود.

 

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

۸٫ بافت

 

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

 

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

 

 

۹٫ تعادل

 

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

یک تکنیک خوب این است که تصور کنید طراحی شما به صورت ۳ بعدی چاپ شده است.

 

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

 

۱۰٫ سلسله‌مراتب

 

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

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

 

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

 

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

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

۱۱٫ کنتراست

 

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

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

 

نمونه عالی دیگر برای رعایت کنتراست بالا در طراحی، اثری است که در ادامه مشاهده می‌کنید و نه تنها بین تیرگی و روشنی کنتراست دارد؛ بلکه رعایت کنتراست بخش ضخیم و نازک باعث ایجاد حس برجستگی و جذابیت در طراحی شده است.

 

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

 

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

۱۲٫ قاب‌بندی

 

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

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

 

 

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

۱۳٫ شبکه‌بندی

 

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

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

 

۱۴٫ تصادفی بودن

 

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

 

 

 

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

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

 

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

 

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

۱۵٫ جهت‌گیری

 

یکی از جنبه‌های مهم بسیاری از طراحی‌ها، نحوه حرکت چشم بر روی صفحه و جهت‌گیری آن است. این جهت‌گیری، گاهی اوقات «گردش» نیز نامیده می‌شود. چشم شما در صفحه چگونه به گردش درمی‌آید؟ آیا خوانندگان دقیقاً می‌دانند که بعد از هر جزء باید به کدام جزء طراحی نگاه کنند؟ آیا جهت‌گیری که چشم آن‌ها طی می‌کند، منطقی است؟

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

 

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

 

نکات کلیدی طراحی گرافیک سایت ۱