یکی از مهمترین و جذابترین توانایی هایی که یک طراح وب سایت میتواند از آن برای جذب مخاطبان وب سایت استفاده نماید قابلیت تعامل صفحات وب با کاربران وب سایت است . قابلیتی که تا کنون با مواردی کوچک مانند تغییر حالت نشانه گر موس بر روی لینک ها ، تغییر رنگ لینک ها با حرکت موس بر روی آنها ، باز شدن منوها و …. با آنها آشنایی داشته ایم . تا پیش از این برای خلق آثاری با قابلیت پاسخگویی بالا در برابر حرکات کاربر از ابزارهایی مانند فلش استفاده می شد که با توجه به رشد تکنولوژی های تحت وب امروزه می توان آثاری بسیار زیبا و هوشمندانه با استفاده از – HTML , CSS و معمولا کتابخانه محبوب JQuery خلق نمود .
خوشبختانه با پیشرفت تکنولوژی های تحت وب و استفاده بیش از پیش از ابزار وب سایت برای تجارت و … ، فضای رقابتی بسیار مطلوبی در بین طراحان وب سایت ایجاد شده است و این فضا باعث خلق آثار بسیار خلاقانه و هوشمندانه ای می گردد .
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 و استفاده از ساختار شناور را ملاحظه نمائید
در طراحی تعاملی بیشترین تمرکز بر روی پاسخ دهی به حرکات کاربر در وب سایت خواهد بود . سعی میشود با پاسخ های جذاب و هوشمندانه به اکشن ها و حرکات کاربر فضای تعاملی مناسبی برای کاربر وب سایت ایجاد گردد . پاسخ به کلیلک ها ، دکمه های کیبورد ، اسکرول و یا حرکات موس نکاتی مهم در این گونه از طراحی به شمار می رود .
دیدن وب سایتهایی با خصوصیات تعاملی بسیار جذاب و هوشمندانه ، از بهترین طراحان وب دنیا خالی از لطف نیست و میتواند ایده های زیادی را در ذهن شما ایجاد کند . پیشنهاد میکنم تمامی وب سایتها را با دقت ببینید و اگر یک طراح وب سایت حرفه ای هستید آنها را تحلیل کنید .
در پست های آبنده به بهترین طراحی های واکنشگرا نیز خواهیم پرداخت . تعدادی از این وب سایت ها واقعا فوق العاده هستند .
www.hardgraft.com
slaveryfootprint.org
www.wanda.net
planetpropaganda.com
www.dangersoffracking.com
editsquarterly.com
www.hanzell.com
springsummer.dk
smallstudio.com.au
www.mccormackmorrison.com
www.bagigia.com
www.socketstudios.com
www.mustache.dk
encandle.com
www.oncarbure.com
blindbarber.com
www.unitedpixelworkers.com
squarefactor.com
www.neotokio.it
inze.it
captaindash.com
www.graydenpoper.com
www.secondstory.com
www.superlovers.fr
thepenthouseproject.com
jamesanderson613.com
محسن
7 April 2012
سلام.
اگر ممکنه در مورد تکنیک هایی که برای این نوع وبسایت ها استفاده میشه، مطالبی قرار بدین.
مثلا همین خصوصیتی که با تغییر اندازه صفحه نمایشگر، وبسایت هم تغییر اندازه میده.
مهدخت
7 April 2012
مفید بود مرسی :)
Amir
8 April 2012
میشه آموزش این تکنیک رو تو سایتتون بزارین؟
مرسی.
امیر سروری
8 April 2012
Amir @ مرسی امیر جان . مشکل اینجاست که مجموعه ای از تکنیک ها این وب سایتها رو میسازن و گاهی برای یادگیری هر کدوم از اینها باید چندیم ماه تجربه کسب کرد . اما خوب تلاش می کنیم که به این سطح از دانش برسیم و دانشمون رو با همدیگه قسمت کنیم تا همگی با هم رشد کنیم .
saeidrad
10 April 2012
فرق این طراحی با بقیه در اینه که شما به جای اینکه در اندازه دادن از پیکسل استفاده کنین از درصد استفاده می کنین.
امیر سروری
10 April 2012
saeidrad @ بله سعید جان . البته این همه ماجرا نیست ;-)
سوران
14 April 2012
امير سروري عزيز مطلب جالبي بود
مرسي
امیر سروری
14 April 2012
سوران @ مرسی سوران ، ما همچنان منتظر مطالبت هستیم ;-)
امید
14 April 2012
سلام
مطلب جالبی بود
من یه ریز قطره از دنیای اقیانوس آبی طراحی وب هستم
یه سوال دارم
چرا طراحان خارجی با اینکه طرح های ساده میزنن ولی فوق العاده جذاب هستند؟
در ضمن تقاضا دارم بیشتر در مورد usability و accessibility مطالبی رو ارائه کنید
در مورد اصول و قواعد و پایه ها بگید
مثل اینکه مرور گرها چطور صفحات رو رندر میکنن
در مورد رنگ ها بگید
اینکه از ترکیب رنگ ابزارهایی مثل Adobe kuler چگونه استفاده کنیم
در مورد استخوان بندی ها بگید
و … که خودتون میدونید چقدر مطالب زیاده
ممنون
saeed
19 April 2012
سلام
مطلب جالبی بود ، در خصوص چنین ویژگی بابید بگم توی Dreamweaver هستش و زیاد هم پیچیده نیست.
یک سوال دارم
مثلا من یک قالب توی Dreamweaver طراحی کردم و می خواهم آن را به سیتم مدیریت محتوا بدم (جوملا،دروپال یا وردپرس) باید چه کار کنم ؟
در ضمن من در خصوص سیستم مدیریت محتوا چیزی نمی دونم ، میشه خودم برای قالب وب اسایت خودم سیستم مدیریت محتوا طراحی کنم؟ لطفا راهنمایی کنید.
میترا
19 May 2012
خیلی پیچیده بود من سر در نیوردم :(
mahdi
25 May 2012
ali bod
Akbar
17 July 2012
جالب بود!
من تابحال همچین چیزی ندیده بودم یا توجه نکرده بدوم!
سامان
10 November 2012
میشه آموزش طراحی این گونه وبسایت ها رو هم داشته باشید
با سپاس فراوان
ali
13 March 2015
very thanks
farhad jafari
8 September 2015
در مورد تغییر اندازه باید بگم که به اینگونه سایت ها واکنش گرا میگن و یکی از تکنولوژی های این کار bootstrap هست البته نمونه های زیادی وجود دارد.
اینگونه طرح ها نمیشه بگی سایت هستن و بیشتر یه تبلیغ هستن تا یک سایت ولی بسار زیبا و خلاقانه بود.برای ساخت قالب ورد پرس شما بهتر است که اول وردپرس رو نصب کنید بعد همون قالب آماده ی ورد پرس راویرایش کنید
هادی عظیمی
22 February 2023
سلام مطالبتون بسیار آموزنده بود مچکرم