گروه مهندسی کدکرنر

طراحی واکنشگرا: نمونه‌ها و بهترین روش‌ها – بخش 2

طراحی واکنشگرا: نمونه‌ها و بهترین روش‌ها – بخش 2

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

برای مشاهده قسمت اول این مقاله اینجا کلیک کنید.

نمونه‌هایی از طراحی واکنشگرا

·         Seminal Responsive Web Design Example

Seminal Responsive Web Design Example

 

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

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

·         Naomi Atkinson

Naomi Atkinson

 

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

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

·         Forefathers Group

Forefathers Group

 

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

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

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

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

·         Spigot Design

Spigot Design

 

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

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

·         New Adventures In Web Design Conference 2012

New Adventures In Web Design Conference 2012

 

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

·         Illy Issimo

Illy Issimo

 

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

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

بنابراین کمپین تبلیغاتی آن قطعاً در جبهه پیروز است.

·         Arrrrcamp Conference

Arrrrcamp Conference

 

وب سایت Arrrrcamp Conference بیش از چند رسانه‌ای روی متن تمرکز می‌کند. در نتیجه قسمت اعظم این وب سایت براساس یک پس‌زمینه صاف و یکنواخت است که بر روی متن و برخی از دکمه‌های "روح" مد روز قرار دارد.

صفحه اول زمانی تحت تغییرات قرار می‌گیرد که شما اندازه پنجره جستجوگر خود را اندازه بگیرید ؛ آن با توانایی تمام تصمیمات را با استاندارد ۱۹۲۰ تنظیم می‌کند و با ۲۴۰ به پایان می‌رساند. به طور حتم می‌دانند که چگونه از لوح‌ها و تلفن‌های همراه در جستجوی چیزهای لازم نظیر کنفرانس‌ها در اینترنت استفاده کنند.

·         Robot or Not

Robot or Not

 

Robot or Not، یک وب سایت آزمایشی است که یک شبکه انعطاف‌پذیر را در عمل قرار می‌دهد.

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

·         Earth Hour

Earth Hour

 

Earth Hour یک وب سایت واقعاً پیشرفته و پیچیده است که پر از تعداد زیادی چند رسانه‌ای از جمله هم ویدئو و هم عکس‌های چشم گیر است. علاوه بر این، یک اینفوگرافی آنلاین نیز وجود دارد که از برخی گرافیک زیبا و گذاره‌ای نرم برای جلب توجه به این موضوع استفاده می‌کند.

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

·         Teixidó

Teixidó

 

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

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

·         Ribot

Ribot

 

Ribot یک استودیوی طراحی دیجیتالی با کیفیت بالا است که در موبایل، تبلت و فراتر از آن تخصص دارد.

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

·         Deren Keskin

Deren Keskin

 

Deren keskin یک پورتفولیوی کامل مرتب و مرتب دارد که بدیهی است به یک قاعده متوسل می‌شود که هر صفحه وب باید تنها صفحه مرورگر را اشغال کند، حتی بلاگ هم تحت این نیاز قرار می‌گیرد.

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

به زودی قسمت سوم این مقاله تهیه و منتشر خواهد شد.

با ما همراه باشید.

 

منبع: designmodo

 

به اشتراک گذاری

Design and development by © CODECORNER & All Right Reserved