استفاده از نشانه ها چیدمان صفحه را آسان می کند


یک طراحی ممکن است تأثیر داشته باشد. ممکن است سبک داشته باشد. اما داشتن اینها کافی نیست.

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

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

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

برای جزئیات بیشتر و نکاتی برای ایجاد طرح‌بندی‌هایی که در طرح‌های شما کار می‌کنند، به ادامه مطلب مراجعه کنید.

با مثال زیر، اکثر مردم ابتدا عکس یا عنوان، سپس متن و در نهایت پیوندها را متوجه می شوند.

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

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

page layout with text, photo and headline

 

ترتیب بر اساس احترام متقابل

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

page layout diagrams

شکل 1 طرح‌بندی استفاده شده در مثال بالا را نشان می‌دهد. بلوک های خاکستری نشان دهنده عنوان، عکس و متن هستند.

شکل 2 نشان می‌دهد که چگونه همان اصول برای وارونگی آن اعمال می‌شود: یک عنصر بزرگ که توسط دو عنصر کوچک‌تر متعادل شده است. اگرچه این عکس خاص در سمت راست بهتر به نظر می رسد.

page layouts, reversed

مدل ما به سمت چپ نگاه می کند. در شکل 1، او به متن نگاه می کند. در شکل 2، او به دور از متن نگاه می کند. اگر او به دوربین نگاه می کرد، ممکن بود کار کند، اما از آنجایی که او به دور نگاه می کند، تاثیر خود را از دست می دهد. زیاد نیست، اما به اندازه کافی مهم است.

directions in page layout

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

 

تراز بر اساس نشانه‌ها

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

how alignment and space work in a design

خطوط ضمنی بین نشانه‌ها در تایپوگرافی و تصویر در این ترکیب فراوان است:

  • چشم و لب های مدل و لبه بینی او با لبه ستون سمت راست متن برخورد می کند.
  • ستون سمت چپ متن با لبه چپ تیتر مطابقت دارد. تقریبا به لبه موهای مدل می‌رسد، اما برای ثابت ماندن با ستون سمت راست کوتاه می‌شود.
  • چهره مدل (مخصوصاً چشم ها و دهان) فضای عمودی تیتر را مشخص می کند.
  • پایین عکس یک سوم پایین ترکیب بندی را نشان می دهد (در قانون یک سوم).
  • چشمان مدل یک سوم از بالای ترکیب فاصله دارد.
  • مرکز صورت مدل و لبه سمت راست تیتر در نقاط یک سوم و دو سوم عرض ترکیب به هم می رسند.

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

 

استفاده از ویژگی‌ها برای ایجاد هارمونی

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

examples of layout, before and after

شکل 5 عناصر را با فضای صفحه تراز می‌کند و همه چیز را بر روی مرزهای بوم قرار می‌دهد.

شکل 6، با این حال، طرح خود را بر اساس نقاط کانونی در عکس است. نتیجه ظاهری ساده تر است.

direction of flow in layouts

شکل 5 ناکارآمد است زیرا بینندگان بین نقاط کانونی می‌چرخند: به عنوان، تا چهره، تا متن. ساده ترین خط مستقیم است. از این رو، شکل 6نگاه بیننده را به راحتی از چپ به راست، از یک عنصر به عنصر دیگر هدایت می کند. محور طرح دوم یک نوار باریک است که در امتداد تراز تیتر-چهره-متن قرار دارد.

space and alignment work better in unison

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

 

پاسخ صحیح

هر سه طرح‌بندی زیر از عناصر تیتر، عکس و متن یکسان استفاده می‌کنند:

comparing three layouts

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

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

deliberately breaking the rules

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

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

نوشته شده به طور انحصاری برای Webdesigner Depot توسط Ben Gremillion. بن یک نویسنده و طراح آزاداست > چه کسی مشکلات ارتباطی را با طراحی بهتر حل می کند.

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

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *