مجموعه ای بسیار زیبا از وب سایت های تعاملی – interactive

نمونه ایی از بهترین طراحی وب سایت تعاملی - interactive website design و طراحی وب سایت واکنشگرا - Responsive Web Design


امیر سروری ۱۶ دیدگاه ایده و خلاقیت شنبه, ۱۹ام فروردین , ۱۳۹۱ 23235 بازدید

یکی از مهمترین و جذابترین توانایی هایی که یک طراح وب سایت میتواند از آن برای جذب مخاطبان وب سایت استفاده نماید قابلیت تعامل صفحات وب با کاربران وب سایت است . قابلیتی که تا کنون با مواردی کوچک مانند تغییر حالت نشانه گر موس بر روی لینک ها ، تغییر رنگ لینک ها با حرکت موس بر روی آنها ، باز شدن منوها و …. با آنها آشنایی داشته ایم . تا پیش از این برای خلق آثاری با قابلیت پاسخگویی بالا در برابر حرکات کاربر از ابزارهایی مانند فلش استفاده می شد که با توجه به رشد تکنولوژی های تحت وب امروزه می توان آثاری بسیار زیبا و هوشمندانه با استفاده از – HTML , CSS و معمولا کتابخانه محبوب JQuery خلق نمود .

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


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.bagigia.com

طراحی وب سایت تعاملی – interactive website design و طراحی وب سایت واکنشگرا – Responsive Web Design

واژگانی مانند وب سایت های تعاملی یا واکنشگرا – interactive website design – Responsive Web Design – چندیست که در بین طراحان وب سایت استفاده میشوند و استفاده از این نوع از تکنیک ها در بین طراحان وب بسیار مرسوم گردیده . در واقع طراحان وب در فکر تعامل هر چه بیشتر وب سایت با مخاطبان هستند تا بتوانند حس زیبای تعامل و مهم شناخته شدن مخاطب را منتقل کنند . در اینگونه از طراحی ها پاسخ های مناسبی به اکشن ها یا حرکات کاربر در وب سایت داده خواهد شد و کاربر را بیش از پیش برای گشت و گذار و حرکت در تمامی صفحات وب سایت مشتاق خواهد کرد

هر چند مباحث طراحی واکنش گرا – Responsive Web Design – و تعاملی – interactive website design – دارای مفاهیم مشترکی هستند و هدف هر دو راحتی و افزایش تعامل در وب سایت است ولی میتوان آنها را دو مبحث مجزا در طراحی وب سایت نام برد .

طراحی واکنشگرا در مورد تکنیک های CSS3 برای واکنش وب سایت نسبت به تغییر دستگاه های مختلف مانند تبلت ها ، موبایلها ، لپ تاپ ها و تلویزیون های هوشمند و همچنین تغییر رزولوشن ها مورد استفاده قرار میگیرد . در این تکنیک با استفاده از ویژگی های جدید CSS3 – W3C CSS3 media queries – و همچنین طراحی های شناور – fluid proportion-based grids – وب سایت را بدون نیاز به نسخه های متفاوت برای دستگاه ها و رزولوشن های مختلف طراحی می کنند .

کافیست در همین صفحه ( وب تارگت ) پنجره مرورگر خود را بزرگ و کوچک کنید تا نوعی از طراحی واکنشگرا – Responsive و استفاده از ساختار شناور را ملاحظه نمائید

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

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

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


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.hardgraft.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

slaveryfootprint.org


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.wanda.net


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

planetpropaganda.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.dangersoffracking.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

editsquarterly.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.hanzell.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

springsummer.dk


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

smallstudio.com.au


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.mccormackmorrison.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.bagigia.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.socketstudios.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.mustache.dk


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

encandle.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.oncarbure.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

blindbarber.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.unitedpixelworkers.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

squarefactor.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.neotokio.it


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

inze.it


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

captaindash.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.graydenpoper.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.secondstory.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

www.superlovers.fr


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

thepenthouseproject.com


طراحی وب سایت های تعاملی و واکنش گرا webtarget.ir

jamesanderson613.com



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۶ دیدگاه برای این نوشته ثبت شده است


  1. محسن
    ۱۹ فروردین ۱۳۹۱

    سلام.

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

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




  2. مهدخت
    ۱۹ فروردین ۱۳۹۱

    مفید بود مرسی :)




  3. Amir
    ۲۰ فروردین ۱۳۹۱

    میشه آموزش این تکنیک رو تو سایتتون بزارین؟
    مرسی.




    • امیر سروری
      ۲۰ فروردین ۱۳۹۱

      Amir @ مرسی امیر جان . مشکل اینجاست که مجموعه ای از تکنیک ها این وب سایتها رو میسازن و گاهی برای یادگیری هر کدوم از اینها باید چندیم ماه تجربه کسب کرد . اما خوب تلاش می کنیم که به این سطح از دانش برسیم و دانشمون رو با همدیگه قسمت کنیم تا همگی با هم رشد کنیم .




  4. saeidrad
    ۲۲ فروردین ۱۳۹۱

    فرق این طراحی با بقیه در اینه که شما به جای اینکه در اندازه دادن از پیکسل استفاده کنین از درصد استفاده می کنین.




  5. سوران
    ۲۶ فروردین ۱۳۹۱

    امیر سروری عزیز مطلب جالبی بود
    مرسی




  6. امید
    ۲۶ فروردین ۱۳۹۱

    سلام
    مطلب جالبی بود
    من یه ریز قطره از دنیای اقیانوس آبی طراحی وب هستم
    یه سوال دارم
    چرا طراحان خارجی با اینکه طرح های ساده میزنن ولی فوق العاده جذاب هستند؟
    در ضمن تقاضا دارم بیشتر در مورد usability و accessibility مطالبی رو ارائه کنید
    در مورد اصول و قواعد و پایه ها بگید
    مثل اینکه مرور گرها چطور صفحات رو رندر میکنن
    در مورد رنگ ها بگید
    اینکه از ترکیب رنگ ابزارهایی مثل Adobe kuler چگونه استفاده کنیم
    در مورد استخوان بندی ها بگید
    و … که خودتون میدونید چقدر مطالب زیاده
    ممنون




  7. saeed
    ۳۱ فروردین ۱۳۹۱

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




  8. میترا
    ۳۰ اردیبهشت ۱۳۹۱

    خیلی پیچیده بود من سر در نیوردم :(




  9. mahdi
    ۵ خرداد ۱۳۹۱


  10. Akbar
    ۲۷ تیر ۱۳۹۱

    جالب بود!
    من تابحال همچین چیزی ندیده بودم یا توجه نکرده بدوم!




  11. سامان
    ۲۰ آبان ۱۳۹۱

    میشه آموزش طراحی این گونه وبسایت ها رو هم داشته باشید
    با سپاس فراوان




  12. ali
    ۲۲ اسفند ۱۳۹۳

    very thanks




  13. farhad jafari
    ۱۷ شهریور ۱۳۹۴

    در مورد تغییر اندازه باید بگم که به اینگونه سایت ها واکنش گرا میگن و یکی از تکنولوژی های این کار bootstrap هست البته نمونه های زیادی وجود دارد.
    اینگونه طرح ها نمیشه بگی سایت هستن و بیشتر یه تبلیغ هستن تا یک سایت ولی بسار زیبا و خلاقانه بود.برای ساخت قالب ورد پرس شما بهتر است که اول وردپرس رو نصب کنید بعد همون قالب آماده ی ورد پرس راویرایش کنید



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





نشانی ایمیل شما منتشر نخواهد شد.

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

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.