عناصر بصری و تاثیر آن در ساختار طراحی وب – بخش دوم
نوشته آرش زاد • 10 آبان 1390
سودابه امیر اکبری: عناصر بصری پایه و ساختار یک طرح را تشکیل میدهند و آشنا بودن با این عناصر به خلق یک اثر هنری جذاب کمک میکند. در قسمت قبلی به بررسی تعدادی از این عناصر پرداختیم و در این قسمت با دیگر عناصر بصری آشنا میشویم تا با استفاده از آنها به خلق تصاویر حرفهای بپردازیم.
در این مطلب که بخش دوم و پایانی این مقاله است، المانهای ریتم، حجم، فضا، حرکت، تعادل و فضای مثبت و منفی را معرفی خواهیم کرد.
ریتم
ریتم در زندگی روزمره ما جاری است، ریتم موجود در تغییر فصلها، تپش قلب انسان، شب و روز و … به طور کلی به تکرار یک عنصر و یا اتفاق به صورت متناوب و با یک نظم خاص ریتم میگوییم. در طراحی وب ریتم از تکرار یک شکل، رنگ، متن، عکس و یا یک استایل خاص در صفحه به وجود میآید که باعث یکپارچگی و وحدت در کل کار میگردد.
استفاده از ریتم برای تاکید بر یک موضوع خاص و ثبت آن در ذهن بیننده تاثیرگذار است و عناصر صفحه را به هم ارتباط میدهد. این عنصر انواع گوناگونی دارند که سادهترین حالت آن تکرار یکنواخت است.
استفاده از ریتم، یکپارچگی به کل کار بخشیده است.
در این سایت ریتم یکنواختی را میبینیم که با تکرار یک عنصر با تغییری جزیی به وجود آمده است.
ریتم افزایشی که یک تصویر با تغییری جزئی تکرار شده و این تکرار با افزایش سایز همراه است.
حجم
حجم عنصری سه بعدی است که فضای قابل لمسی را برای کاربر ایجاد میکند، استفاده از حجم صفحه را از حالت دو بعدی بیرون میآورد و جلوه بصری زیبایی به کار میبخشد.
از انواع حجم میتوان به سادهترین حالت آن که شامل مکعب، کره، منشور و … اشاره کرد که حجم هندسی نامیده میشوند و نوع غیر هندسی آن از ترکیب حجمهای هندسی بهوجود میآید. همچنین حجم میتواند از فضای منفی میان دو سطح ایجاد شود.
استفاده از مکعب در طرح و ایجاد حجم سه بعدی
فضا
فضا در واقع همان محیطی است که ما همیشه با آن در ارتباط هستیم و در آن زندگی میکنیم و در هنرهای بصری، به تصویر کشیدن یک فضای سه بعدی بر روی صفحهای دو بعدی است و هنرمند با استفاده از سطح، خط و رنگ تصاویر سه بعدی خلق میکند.
این عنصر به چند صورت دیده میشود: فصای مسطح (که از کنار هم قرار گرفتن سطوح مسطح ایجاد میشود) و فضای غیر واقعی (که شامل فضایی است که نوعی توهم وجود فضای سه بعدی را ایجاد میکند.)
همانطور که میبینید طراح با استفاده از تصویر و سطوح، حس سه بعدی بودن را در این تصویر ایجاد کرده است.
حرکت
حرکت عاملی است که به زندگی جریان میدهد. اما این عنصر بر روی سطح دو بعدی به گونهای دیگر جلوه میکند. حرکت در تصویر به وسیله خطای دید ایجاد میشود و در واقع همان القای حس حرکت و چرخش چشم در تصویر است.
به حرکت در آوردن چشم به وسیله خطوط و سطوح منحنی
تعادل
استفاده بهجا از عناصر مختلف در صفحه مانند جایگذاری ستونهای یک بنا در معماری است بنابراین همیشه باید در نظر داشت که اجزای مختلف در کجای صفحه قرار میگیرند.
هر عنصری در طرح با توجه به رنگ، اندازه و جایگاهش دارای انرژی و وزن خاصی است و جایگیری این عناصر در کنار یکدیگر نیازمند یک هماهنگی بصری است که تعادل نامیده میشود.
برای مثال یک سطح بزرگ، انرژی بیشتری نسبت به سطوح کوچکتر دارد و یا خط بسته بیشتر از خط باز انرژی دارد. هم چنین جای اجزا در صفحه و تیرگی و روشنی آن و بسیاری عوامل دیگر میتواند تاثیرگذار باشد.
در سمت راست یک تصویر بزرگ با انرژی زیاد آمده است و در سمت چپ سعی شده با استفاده از اجزای زیادی مانند متن و تصاویر کوچکتر نوعی تعادل را در صفحه ایجاد کرد.
فضای مثبت و منفی
فضای مثبت فضایی است که المانها در آن قرار گرفتهاند و فضای منفی، فضای خالی اطراف آن است. فضای منفی هم به اندازه مثبت ارزش دارد و همین فضای خالی است که به عناصر صفحه ارزش میدهد و تعادل را در صفحه ایجاد میکند. مانند تاریکی و روشنایی که تا تاریکی وجود نداشته باشد روشنایی معنایی ندارد.
استفاده از سطوح خالی در اطراف باعث میشود که کل توجه بیننده به عناصر موجود در صفحه جلب شود.
اگر شما نیز اطلاعاتی را در زمینه استفاده از عناصر بصری در طراحی وب دارید، آنرا با ما بهاشتراک بگذاریدو
محسن محمدی
سلام؛
کلیات بهخوبی بیان شده، ممنون.
خوب بود بهجای واژه «بصری»، از واژه «دیداری» استفاده میشد.
سـپاس
MRahi
ممنون از آموزش خوبتون
یک طراح وب برای اینکه کارهاش حرفه ای بشه باید یک گرافیست هم باشه.
هرچند که CSS و JQuery، خیلی از کارهای گرافیکی را بعهده گرفته اند 🙂
meysam
واقعا عالی بود. ولی چرا اینقدر دیر به دیر مطلب از شما تو سایت قرار داده می شه؟ از مدیر های ارشد وبلاگینا میخوام شما رو بیشتر حمایت کنند تا ما کاربرانم هم بیشتر از وجود شما استفاده کنیم.
MRahi
چرا منفی میدید ؟!
خب css و jquery خیلی کار را جذاب میکنه. غیر از اینه؟
درسته، کارهای گرافیکی باهاش نمیشه انجام داد اما از نظر ظاهری بخوایم نگاه کنیم، خیلی کار را شکیل میکنن.
اونایی که طراح وب هستند میفهمند چی میگم.
elyas
من با صحبت شما موافق نیستم !!! مثل اینه که بگیم یک متخصص مغز و اعصاب باید یک متخصص قبل و عروق هم باشه !!! من خودم کارشناس طراحی گرافیک هستم و شغلم طراحی و مدیریت و نظارت هنری بر پروژه های هنری،رسانه ای و تبلیغاتی از جمله وب ، تیزر و …
من فکر میکنم هر شاخه ای متخصصین مربوط به خودشو می خواد !
برنامه نویس و متخصص IT و شبکه کارشون مشخصه ! و هنرمند و طراح گرافیک و تصویرساز و همچنین کارگردان و مدیر هنری هم به همین صورت !
ضعف وب سایتهای ایرانی به همین خاطر هست !
یک فوق دیپلم یا لیسانس نرم افزار شروع به طراحی گرافیک و کد نویسی سایت میکنه !
باید بدونیم این 2 کاملا از هم جدا هستند و 2 تخصص کاملا متفاوت !
محمد رضا محمودی
خیلی مفید بود…ممنون
korosh
مطلب خوبی بود
مرسی
سودابه
من کاملاً با نظر شما موافقم، یه گرافیست خوب باید علمش به روز باشه و از تمام تکنیکهای css و JQuary اطلاع کامل داشته باشه تا بتونه تو کارش از اونها استفاده کنه.
حالا اگه یه برنامه نویس میخواد طراحی کنه باید دانش گرافیکی داشته باشه که به جا و به موقع از هر تکنیک استفاده کنه، برای همین ما یک سری آموزشهای گرافیکی برای برنامهنویسها گذاشتیم که امیدوارم مفید باشه.
elyas
سلام . نمیدونم شما نویسنده بخش اول این مقاله هستین یا نه . و اصلا چرا نام نویسنده آرش زاد ثبت شده و در ابتدای مقاله نام “سودابه امیراکبری : ” اومده .
ولی در کل من به کار گروهی و تیمی اعتقاد دارم و در گروه خودم هر بخش تعریف شده هست.
گروه برنامه نویسی ( فوق دیپام یا لیسانس نرم افزار و یا آی تی )- تحلیل گر اطلاعات ( کارشناس ارشد مدیریت اطلاعات در حوزه آی تی ) – گرافیست تصویر ساز، عکاس و … – مدیر هنری
اصلا اصولی نیست همه این کارها توسط 1 نفر انجام بشه
آشنایی کلی با ادبیات مشترک بین این 2 لازم هست اما ایده و طرح گرافیکی با نظارت مدیر هنری میتونه انجام و در اختیار گروه مولتی مدیا و کد نویسی قرار بگیری و با اطلاعاتی که مدیر تحلیل داده ها و نمودار درختی که ارائه میشه کار زیر نظر مدیر پروژه ( کارشناس MBA ) انجام میشه.
مهران ا.
عالی بود.
من هم با MRahi خان موافق هستم.
خیلی اوقات با این مساله برخورد داشتم که طراحی قالب یا حتی در بعضی موارد طراحی Server-Side (!) با گرافیک قالب سازگاری نداشته باشه…
ممنون از پست مفیدتون.
salatin
سلام خیلی مفید بود ایا میشه پیام گذاشت برای همه ی کابران شما که خانم هستند
kazem
salam,fekre khobie
سيامك غلامعلي
سلام عالي و مفيد بود…..ممنون
نمایندگی سایپا
ایجاد افکتهای متنوع تاثیر زیادی در جذب بیننده داره و گاها حتی شده برایچند لحظه کاربر رو برای تجزیه و تحلیل صفحه شما نگه میداره.