1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

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

شروع موضوع توسط Amir_Dragon ‏14/8/11 در انجمن طراحی سایت

  1. کاربر فوق حرفه ای

    تاریخ عضویت:
    ‏8/12/10
    ارسال ها:
    2,305
    تشکر شده:
    583
    امتیاز دستاورد:
    113
    اکثر اوقات در طراحی آن‌قدر درگیر رنگ و تصویر می‌شویم که فراموش می‌کنیم به پایه و ساختار آن برسیم. در واقع ترکیب بندی یکی از اصولی‌ترین مسائل در طراحی است که مانند پایه و ستون طرح عمل می‌کند. در این مبحث به بررسی ترکیب بندی، عناصر بصری و تاثیر آن در هدایت چشم کاربر به نقاط مهم و کلیدی می‌پردازیم.


    [​IMG]
    ​


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


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


    [​IMG]
    ​


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

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

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

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

    نقطه


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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

    خط


    [​IMG]
    ​


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

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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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

    سطح


    [​IMG]
    ​


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

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


    [​IMG]
    ​


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


    [​IMG]
    ​



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


    [​IMG]
    ​


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


    [​IMG]
    ​


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


    [​IMG]
    ​


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

    بافت


    [​IMG]
    ​


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


    [​IMG]


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


    [​IMG]
    ​


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


    وبلاگینا
     
    AftabGardoon از این پست تشکر کرده است.