نکاتی مهم برای طراحی ریسپانسیو (مقاله شماره ۱)

نکاتی مهم برای طراحی ریسپانسیو (مقاله شماره 1), پیشرو وب, طراحی سایت در کرج, طراحی وب سایت در کرج, طراحی سایت

۱) نقاط شکست را بدانید
قبل از شروع هر پروژه ای باید نقاط شکست صفحه را مشخص کنید، یک قانون ثابت و همیشگی میگوید سعی کنید ابتدا یک لایه برای تلفن های هوشمند طراحی کنید، سپس یک لایه برای تلبت طراحی کنید و سپس برای دسکتاپ طراحی کنید و اگر نیاز دارید برای سایزهای بزرگ تر طراحی کنید میتوانید برای عرض های ۱۲۰۰ یا ۱۴۰۰ پیکسل نیز طراحی کنید.

هیچ می‌دونستید یکی از بزرگترین اشتباهاتی که طراحان واکنش‌گرا می‌کنند اینه که بر اساس دستگاه‌های مختلف طراحی خودشون رو انجام میدن نه بر اساس ابعاد صفحه مختلف؟!
متکی بودن به دستگاه و بررسی اون فقط در دستگاه‌های دور و برمون باعث وجود اشتباهاتی خواهد شد! بهتره که بر اساس ابعاد صفحه که می‌تونیم بطور کل به ۵ دسته زیر تقسیم کنیم، طراحی‌هامون رو انجام بدیم:
۱- صفحات میکرو (Micro-screens)
۲- صفحات کوچک (Small screens)
۳- صفحات متوسط (Mid-range)
۴- صفحات بزرگ (Lrage)
۵- صفحات خیلی بزرگ (Extra-large)

۲)اسکچ بکشید
اسکچ کشیدن میتواند بهترین دوست شما در این مسیر باشد. یک تیکه کاغذ بردارید و به ۳-۴ قسمت تقسیم کنید و هر قسمت را به یک لایه بندی اختصاص دهید. قراردادن تمام لایه ها در یک صفحه باعث میشود که به یک لایه توجه بیشتری نسبت به بقیه لایه ها نداشته باشید و با همه لایه ها به صورت یکسان رفتار کنید، برای کشیدن هر لایه ابتدا مهم ترین المنت ها قرار دهید و سپس بقیه المنت ها را در کنار آن بچینید، خیلی سریع یاد میگیرید که تمام المنت ها را نباید در لایه ی تلفن های هوشمند قرار داد و رسیدن به این نتیجه هنگام اسکچ کشیدن خیلی بهتر از تغییر یک طرح کامل شده است.

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

۴) همه چیز در یک فایل PSD
به شدت توصیه میشود هنگام طراحی رسپانسیو تمام المنت هارا در یک فایل psd قرار دهید، یک مثال ساده میزنم، از ۱۲۰۰ پیکسل به عنوان بزرگترین سایز عرض طرحمان استفاده میکنیم، بنابراین یک فایل psd جدید میسازیم با ۱۲۰۰ پیکسل عرض و ۲۰۰۰ پیکسل ارتفاع، سایز عرض های بعدی را به ترتیب ۱۰۲۴ ، ۷۶۸ و ۴۸۰ پیکسل قرار میدهیم.
برای شروع لایه ی بک گراند را از حالت قفل در می آوریم و به تعداد لایه های بک گراندی که نیاز داریم یکی بیشتر کپی میگیریم و میسازیم، لایه ی بک گراند اصلی را کاملا به رنگ سیاه در می آوریم و بقیه را سفید میکنیم. هر لایه ی بک گراند سفید را درون یک پوشه می اندازیم و نام سایز صفحه را نام پوشه قرار میدهیم برای مثال ۴۸۰ .
سپس خطوط راهنمای فتوشاپ را در نقاط شکست خود قرار دهید. بر روی View کلیک کنید سپس New Guide را بزنید و سپس Vertical را انتخاب کنید و به آن مقادیر ۹۰ ، ۲۱۶ ، ۳۶۰ ، ۸۴۰ و ۱۱۱۰ پیکسل بدهید. از ابزار Rectangular Marquee استفاده کنید برای اینکه لایه ی درونی را انتخاب کنید ( ۴۸۰ پیکسلی )
سپس اطراف لایه را ماسک کنید تا فقط قسمت وسط نمایش داده شود، اکنون میبینید که لایه ی تلفن هوشمند شما از بقیه لایه ها متمایز شده است و به راحتی میتوانید طرح خود را در آن رسم کنید.

لینک منبع