عناصر بصری و تاثیر آن در ساختار طراحی وب
نوشته سودابه امیر اکبری • 23 مرداد 1390
اکثر اوقات در طراحی آنقدر درگیر رنگ و تصویر میشویم که فراموش میکنیم به پایه و ساختار آن برسیم. در واقع ترکیب بندی یکی از اصولیترین مسائل در طراحی است که مانند پایه و ستون طرح عمل میکند. در این مبحث به بررسی ترکیب بندی، عناصر بصری و تاثیر آن در هدایت چشم کاربر به نقاط مهم و کلیدی میپردازیم.
ترکیب بندی چیست؟
ترکیب بندی در واقع همان ایجاد تعادل و هماهنگی بین فرم، رنگ و اجزای تشکیل دهنده طرح میباشد که چشم بیننده را در صفحه به سمت نقاط مهم هدایت میکند و باعث زیباتر شدن طرح میگردد.
استفاده از ترکیب رنگی مناسب، محل قرار گیری و هماهنگی عناصر کنار یکدیگر و تاثیری که بر هم میگذارند عواملی هستند که باید در طراحی مد نظر قرار گیرند.
در واقع مجموع این عناصر تشکیل دهنده و تاثیر گذار را “عناصر بصری” مینامند که عبارتند از: نقطه، خط، سطح، بافت، حجم و … که به بررسی آنها میپردازیم.
عناصر بصری در طراحی
استفاده درست و هماهنگ از این عناصر تاثیر چشمگیری در زیبایی و تاثیر گذار بودن سایت شما دارد.
نقطه
سادهترین عنصر در طراحی، نقطه است. اولین شکلی که از نقطه در ذهن ما پدید میآید گرد بودن آن است اما نقطه میتواند اشکال گوناگونی داشته باشد و بسته به شکل (دایره، مربع، مثلث و …) و اندازه آن، حس خاصی را انتقال دهد. اما به طور کلی نقطه یکی از قویترین عناصر بصری است و چشم بیننده را به خود جلب میکند، بنابراین میتوان از آن برای تاکید بر مهمترین بخش سایت و جلب توجه کاربر استفاده کرد.
در این طرح اسم سایت در قالب یک نقطه نمایان شده است که چشم را به سمت خود جذب میکند و پر انرژیترین بخش سایت است.
با استفاده از رنگ و سایز دایرهها تعادل در صفحه حفظ شده، و همچنین پراکندگی آنها در صفحه باعث حرکت چشم میشود.
سه موضوع کلیدی و مهم با سه نقطه رنگی مشخص شده تا بیننده به راحتی بخش مورد نظر خود را پیدا کند.
نقطه همیشه به صورت دایره نیست و میتواند اشکال مختلفی داشته باشد.
خط
دومین عنصر بعد از نقطه، خط است که از امتداد نقطه بر روی صفحه بهوجود میآید. خط دارای انرژی است و همیشه در حال حرکت است، این عنصر نقش هدایت چشم از محلی خاص به محل دیگر را دارد.
خط بسته به نوع آن (افقی، عمودی، منحنی، شکسته و …) مفهوم خاصی را منتقل میکند.
خطوط افقی: حس آرامش، سکون، تعادل، بیحرکتی و خواب است. حالت افقی بدن هنگام خواب یا خط افقی جدا کننده آسمان و دریا نمونه این خط در طبیعت هستند.
خطوط عمودی: متعادل و دارای استحکام، نیرومندی و ایستایی
خطوط مورب: خطی ناپایدار و دارای حرکت
خطوط منحنی: حرکتی نرم دارند و چشم را در صفحه میچرخاند و حس لطیفی به کار میدهد.
خطوط شکسته: بر خلاف خطوط منحنی عمل میکنند و خشونت و سرسختی را نشان میدهند زیرا دو خط با جهت خلاف یکدیگر به هم برخورد میکنند و انرژی آنها در نقطه تلاقی باعث ایجاد این نا آرامی میگردد؛ مانند خطوط زاویهدار مثلث.
در این طرح هر قسمت از سایت به وسیله خط به بخش دیگری وصل شده که چشم را هدایت میکند.
خطوط زیر لوگو چشم را به سمت نمونه کارهای پایین سایت میکشاند.
خطوط عمودی در وسط صفحه چشم را به سمت مرکز که محل قرارگیری مطالب است میآورد.
خطچین آبی مسیر کلی مطالب سایت را مشخص کرده که چشم، آنرا به راحتی دنبال میکند.
استفاده از خطوط مورب تعادل را در صفحه از بین برده است.
خطوط مثلثی شکل که نقاط مختلف در صفحه را به هم متصل کرده. این نقاط از پدر و پسر شروع میشود و در امتداد نگاه آنها به سمت بادبادک و لوگوی سایت هدایت شده و پس از آن دنباله بادبادک چشم را به سمت منوهای سایت میآورد.
سطح
سطح فضای دو بعدی است که از بسته شدن یک خط بهوجود میآید. سطوح مختلف به دو دسته تقسیم میشوند؛ سطوح هندسی مانند مثلث، دایره، مربع و … و سطوع غیر هندسی که به اشکال نامنظم گفته میشود و معمولا این اشکال از قانون خاصی پیروی نمیکنند.
با استفاده از این اشکال میتوان در تصویر، تعادل ایجاد کرد و حس خاصی را به بیننده انتقال داد.
اشکال گوناگون هم مانند خطوط، خصوصیات خاصی دارند. برای مثال دایره حس لطافت، حرکت، نرمی و آرامش را به طرح میدهد. مثلث با توجه به جهت قرارگیری ضلعهایش مفاهیم مختلفی دارد اما به طور کلی جنبش و حرکت را میرساند. استفاده از مربع نیز ثبات و پایداری را به طرح میبخشد.
استفاده از دایره حس حرکت و جنبش را در طرح ایجاد کرده است.
در این طرح استفاده از مربع باعث ایستایی و استحکام در ساختار طرح شده است.
مثلث بزرگ در مرکز کار و خطوط مورب چشم را در صفحه به حرکت در آورده و جهت نگاه را از بالای صفحه به سمت پایین و نوک مثلث هدایت میکند. نوع قرار گیری مثلث بر روی یکی از زاویهها، ناپایداری و عدم تعادل را القا میکند که البته طراح با استفاده از سطوح پایینی که مثلثی در خلاف جهت است کمی تعادل به آن بخشیده است.
استفاده از سطوح مورب و ایجاد ناپایداری و حرکت در صفحه
در این سایت از اشکال نامنظم و غیر هندسی استفاده شده که نوعی اغراق و نامنظمی را در کار بوجود آورده است.
بافت
بافت از دیگر عناصر بصری است که تاثیر زیادی بر بیننده و طرح میگذارد. این عنصر، رابطه مستقیم با حس لامسه دارد. هنگام دیدن یک بافت، مغز همان حسی را دریافت میکند که هنگام لمس آن به شما دست میدهد بنابراین میتوان مفاهیم زیادی مانند خشونت، لطافت، قدمت و … را از طریق بافت منتقل کرد.
در این سایت از بافت پارچه کنفی که پوششی سنتی برای قهوه محسوب میشود استفاده شده است.
ایجاد فضایی کهنه و قدیمی با استفاده از بافت کاغذ کاهی
در مطلب بعدی این مقاله در وبلاگینا به بررسی سایر عناصر بصری، انواع ترکیب بندی و تاثیر آنها در طراحی وب میپردازیم.
علی اقدم
بسیار جالب و آموزنده، ممنون
SaeidMazloomi
مقاله ی خیلی خوبی بود.
در واقع یکی از اصلی ترین کارهایی که یک طراح باید انجام بده هدایت یک بیننده به سمتی است که قرار ِ بره.
این نکته ای بود که خانوم سودابه به خوبی بهش اشاره کردن.
مثلا در اولین طراحی که در قسمت نقطه وجود داشت یا خیلی از طراحی ها شما اگر به هر قسمت از صفحه ی طراحی نگاه کنید همیشه یک قسمت هست که در زاویه ی نگاه شما وجود داره ولی شما به اون توجه نمیکنید.کار سختی نیست با کمی تمرین میشه متوجه اش شد. این اولین کلید برای رو کردن دست طراح سایته.اینجوری شما متوجه میشید که اون میخواد چه احساسی رو در سایه اطلاعات هدف به وجود بیاره.
behzad
یه سوال تقریبا غیر مرتبط دارم
من قصد دارم دوره طراحی وب رو بگذرونم (بصورت کاملا حرفه ای)
ولی متاسفانه نمی دونم از کجا باید شروع کنم
کدوم آموزشگاه ، چه دوره هایی و …
اگر کمک کنید خیلی ممنون میشم.
با تشکر
ح.مراداف
سلام،
باید دوره های HTML-CSS-JavaScript-jQuery-XML رو بگذرونین تا بتونین قالب و طرح صفحات وب رو بسازین.
برای اتصال به دیتابیس و تبدیل کردن سایتتون به یک سایت پویا ، 2 تا راه حل دارین:
1- برنامه نویسی با PHP : که برای اون باید دوره آموزش پایگاه داده MySql و دوره برنامه نویسی به زبان PHP رو بگذرونین.
2- برنامه نویسی با تکنولوژی های مایکزوسافت (زبان ASP.Net) که برای این باید دوره های زیر رو بگذرونین:
– سی شارپ مقدماتی
– سی شارپ پیشرفته
– پایگاه داده SQL
– ADO.Net و برنامه نویسی چند لایه
– ASP.Net
و تمام :دی
آموزشگاه و …. زیاده که فکر کنم اینجا جاش نباشه که اسم ببرم ولی در کل هیچ آموزشگاهی 100% مطلب رو آموزش نمیده و بهترین بهترینش 70% رو میگن و خود دانشجو باید بره دنبال بقیه اش و مهمترین مسئله این است که تجربه حرف اول رو تو برنامه نویسی میزنه.
برنامه نویسی علاقه خیلی زیادی می طلبه.
موفق باشید
علی
بسیار عالی،
منتظر مطالب بعدی هستیم.
مرتضی
خوب بودش
منتظر شماره ی بعدی هستیم . 🙂
دوستدار گجت
مطالب خانم امیر اکبری عالی هستند……
این مقاله هم خیلی خوب بود. مرسی
کوروش
جالب بودن ولی این قرتی بازیها برای خارجیهاست! تو ایران اگر سایتی از همچین گرافیک و زمینه هایی استفاده کنه احتمالا نصف بازدیدکنندگانش رو بخاطر سرعت بارگذاری خیلی پایین از دست میده!
سودابه
البته ترکیب بندی پایه اصلی یک طرحه و شما میتونید با رنگ و متن خالی هم به یک ترکیب بندی درست برسید بدون اینکه سرعت بارگذاری پایین بیاد و از چند تا عکس کوچیک اما حساب شده استفاده کنید.
خیلی از سایت ها تو ایران هم نصف بازدیدکنندهاشون رو به خاطر طراحی بد و سر در گمی کاربر از دست میدن!
ندرلو
حرفهایتر این بود که منبع این مطالب هم گذاشته می شد!
raha
عالی بود ممنونم
misagh jafari
بی نظیر
Global
سلام
ممنون از مقاله ی خوبتون.
بسسیار جالب بود.
خانم سودابه امیر اکبری یه سوال داشتم ممنون میشم اگه جواب بدید.
من مقاله تون رو برای ارائه میخوام…
خواستم بپرسم که منابع این تحقیق را برایم معرفی کنید … چون به منابع نیاز دارم … با تشکر
طراحی سایت
عالی بود
همت
سلام
با تشکر از زحمات شما لطفاً آدرساستنادی را هم اعلا م بفرمایید ممنون
احمد
“رای مثال دایره حس لطافت، حرکت، نرمی و آرامش را به طرح میدهد”
و
“استفاده از دایره حس حرکت و جنبش را در طرح ایجاد کرده است.”
یکم تناقض ندارن؟