پنج قانون طلایی برای طراحی واکنش گرا در وب (2)

 پنج قانون طلایی برای طراحی واکنش گرا در وب (2)

پنج قانون طلایی برای طراحی واکنش گرا در وب (2)

طراحی "درون مرورگر"

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

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

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

راه حل این مشکل، ساختن نمونه اولیه واکنش گرا به وسیله HTML  و CSS می باشد. آنرا در محیطی بسازید که محصول نهایی روی آن عرضه خواهد شد و بوسیله ی مرورگر، پروژه را ارائه دهید. به مشتری نشان دهید که در عرض های مختلف، سایت به چه صورت نمایش داده می شود.

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

اما اگر به جای آن از کلاس های CSS استفاده کنیم، ویرایش این 60 تصویر را می توان با تغییر یک یا چند خط کد، انجام داد.

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

به اشتراک گذاری این مطلب :
آیـا به مشـاوره نیـاز دارید؟
021-88171021
ارتـباط از طریـق تـلگرام