عناصر بصری و تاثیر آن در ساختار طراحی وب

نوشته سودابه امیر اکبری 23 مرداد 1390

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

visual-elements-4.jpg

ترکیب بندی چیست؟

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

visual-elements-6.jpg

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

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

عناصر بصری در طراحی

استفاده درست و هماهنگ از این عناصر تاثیر چشم‌گیری در زیبایی و تاثیر گذار بودن سایت شما دارد.

نقطه

visual-elements-11.jpg

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

visual-elements-12.jpg

در این طرح اسم سایت در قالب یک نقطه نمایان شده است که چشم را به سمت خود جذب می‌کند و پر انرژی‌ترین بخش سایت است.

visual-elements-13.jpg

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

visual-elements-14.jpg

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

visual-elements-15.jpg

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

خط

visual-elements-20.jpg

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

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

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

خطوط عمودی: متعادل و دارای استحکام، نیرومندی و ایستایی

خطوط مورب: خطی نا‌پایدار و دارای حرکت

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

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

visual-elements-17.jpg

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

visual-elements-18.jpg

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

visual-elements-19.jpg

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

visual-elements-16.jpg

خط‌چین آبی مسیر کلی مطالب سایت را مشخص کرده که چشم، آن‌را به راحتی دنبال می‌کند.

visual-elements-5.jpg

استفاده از خطوط مورب تعادل را در صفحه از بین برده است.

visual-elements-7.jpg

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

سطح

visual-elements-23.jpg

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

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

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

visual-elements-8.jpg

استفاده از دایره حس حرکت و جنبش را در طرح ایجاد کرده است.

visual-elements-9.jpg

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

visual-elements-24.jpg

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

visual-elements-10.jpg

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

visual-elements-21.jpg

در این سایت از اشکال نا‌منظم و غیر هندسی استفاده شده که نوعی اغراق و نامنظمی را در کار بوجود آورده است.

بافت

visual-elements-1.jpg

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

visual-elements-2.jpg

در این سایت از بافت پارچه کنفی که پوششی سنتی برای قهوه محسوب می‌شود استفاده شده است.

visual-elements-3.jpg

ایجاد فضایی کهنه و قدیمی با استفاده از بافت کاغذ کاهی

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