نمونه طراحی وب ریسپانسیو بدوی‌‌

https://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.htmlهمانطور که از نام مستعار مشخص می‌شود، وبسایت به عنوان نمونه‌ای کامل از طراحی وب ریسپانسیو عمل می‌کند. حتی شایسته‌ی عنوان “یک شبکه‌ی انعطاف‌پذیر” نیز هست؛ بنابراین مشخص می‌شود که همه چیز در حال رعایت قوانین طراحی است. اما همانطور که مشخص است، تیم توجه بیشتری به ارائه‌ی داده‌ی ایده‌آل دارد تا زیبایی شناسی، به طوری که طراحی ظاهری به حاشیه رفته است.

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

Naomi Atkinson

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

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

Forefathers Group

https://forefathersgroup.com/در مورد این وبسایت چه می‌توانید بگویید؟ این مطمئنا یک تصور متمایز و کاملا خیره‌کنندهبا طراحی بی نظیر و پیچیده خود را ارائه می دهد. تیم از جنبه‌ی هنری کار، مضایقه نکرده و این در تمام لحظات، قابل مشاهده است.

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

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

Spigot Design

https://spigotdesign.com/در اینجا رفتار ریسپانسیو، نه تنها باید بر روی طرح استاندارد شامل ارائه‌ی داده‌ها به صورت شبکه ای و خط به خط اثر کند، بلکه باید روی ویدئوی مقدمه، گرافیک‌های پویا و همچنین منو هم تأثیر بگذارد.

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

New Adventures In Web Design Conference 2012

https://2012.newadventuresconf.com/

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

Illy Issimo

https://us.illyissimo.com/ریسپانسیو بودن یکی از ویژگی‌های اساسی هر وبسایت تبلیغاتی با کیفیت است که قوانین جذب را درک می‌کند. Illy Issimo این را درک کرده و از یک شبکه‌ی انعطاف‌پذیر استفاده کرده تا:

  • یک تجربه‌ی کاربری دلپذیر بسازد؛
  • مخاطبان هدفمند خود را گسترش دهد؛
  • مشتریان بالقوه‌ای که از دستگاه‌های کوچک استفاده می‌کنند را جذب کند.

در نتیجه، کمپین تبلیغاتی آن به وضوح رو به جلو و خوش شانس است.

Arrrrcamp Conference

https://arrrrcamp.be/وبسایت بیشتر روی متن و نه چندرسانه‌ای متمرکز شده است. بنابراین بخش بزرگی از وبسایت بر پایه‌ی پس‌زمینه‌ی یکنواخت سفید است که به سادگی متن و برخی از دکمه‌های “ارواح” (که در ترندهای جهان هستند) را برجسته می‌کند. برای مشاهده ترندهای طراحی وب در سال ۲۰۱۸، اینجا کلیک کنید.
صفحه اول پس از تغییر اندازه‌ی پنجره مرورگر دچار تغییر می‌شود و تمامی رزولوشن‌ها از ۱۹۲۰ پیکسل تا ۲۴۰ پیکسل را پشتیبانی می‌کند که این مسئله بسیار مناسب است؛ زیرا دوستداران روبی (Ruby) قطعا می‌دانند که چگونه از تبلت‌ها و موبایل‌ها در جستجوی موارد لازم مانند کنفرانس‌ها در اینترنت استفاده کنند.

Robot or Not؟

http://robot-or-not.com/«ربات یا نه؟» یک وبسایت نسخه‌ی آزمایشی است که از شبکه‌ی انعطاف پذیر استفاده می‌کند.
این مجموعه ترکیبی از اطلاعات متنی و چندرسانه‌ای است که کل صفحه مرورگر را در بر می‌گیرد (همان طور که اغلب موارد همینطور است) و تمام تزئینات و استایل‌های خلاقانه را از بین می‌برد؛ تیم تلاش می‌کند تا از یک صفحه‌ی معمولی، یک نمونه‌ی عالی برای تازه کارهایی بسازد که می‌خواهند به طور واضح تغییرات پایه‌ای را هنگام تغییر اندازه‌ی صفحه ببینند.

Earth Hour

https://earthhour.fr/«ساعت زمین» یک وبسایت بسیار پیشرفته و پیچیده است که با تعداد زیادی از چندرسانه ای از جمله فیلم‌ها و عکس‌های چشم نواز پر شده است. علاوه بر این، یک اینفوگرافی آنلاین است که با استفاده از گرافیک زیبا و تغییرات نرم سعی در جلب توجه مخاطب به موضوع دارد.
متأسفانه تطبیق با سایزهای مختلف به درستی ساخته نشده و به طور کامل توسعه نیافته است. زیرا برخی از ناهماهنگی‌ها از نسخه‌ی تبلت ‌سایت شروع می‌شود و وقتی به دستگاه‌های کوچکتر نظیر موبایل‌ها می‌رسیم، حرفی برای گفتن نمی‌ماند.

Teixidó

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

 

۲