موکاپ سایت (طرح PSD سایت)
برای طراحی حرفه‌ای سایت بهتره با طراحی PSD سایت شروع کنید، چرا که در این روش با اعمال تغییرات و نیازهای مشتری روی طرح سایت، کدنویسی اضافه و دوباره کاری از کار شما حذف میشه و پس از تکمیل طراحی می‌تونید به راحتی اون رو به سایت تبدیل کنید.
همچنین در سایت‌های اختصاصی، منحصر به فردی کار در صورتی حفظ میشه که طرحی مخصوص به خودش داشته باشه که با رنگها و الگوی ذهنی و لوگوی سازمانی آن کار یا تجارت سازگار باشه.
موکاپ سایت چیست؟
به طراحی کامل سایت همراه با صفحات و بخش‌های مختلف با تمام جزئیات، طرح PSD سایت یا موکاپ سایت گفته میشه که معمولا در نرم‌افزار فتوشاپ انجام میشه به همین دلیل به اون طرح PSD یا لایه باز میگن (PSD پسوند فایل‌های تهیه شده در نرم‌افزار فتوشاپ هست). طراحی موکاپ معمولا برای هر سه بستر دسکتاپ، تبلت و موبایل انجام میشه تا برنامه نویس به راحتی تمام بخش‌ها را پیاده سازی کنه.
برای طراحی اصولی PSD یک سایت باید مراحل زیر طی بشه:
- پیاده سازی نیازهای مشتری در طرح اولیه دستی یا وایرفریم
- انتخاب تم رنگی سایت
- آماده سازی فتوشاپ برای طرح PSD سایت
- طراحی برای بسترهای مختلف در سایت‌های واکنش گرا
وایرفریم (wireframe)
رسم وایرفریم یکی از مهمترین مراحل در شروع طراحیه، از این روش برای تعیین بخش‌های مختلف سایت استفاده میشه تا معلوم شه صفحات و عناصر در کجا و با چه هدفی در طراحی به کار گرفته میشن. هدف وایرفریم نمایش ظاهر بصری سایت هست که قرارگیری عناصر مختلف یک صفحه وب را به صورت یک طرح کلی نشان میده.
طرح دستی یا اسکچ سایت می‌تواند با استفاده از نرم‌افزارهای در دسترس موجود مانند Balsamiq Mockups یا به صورت دستی روی برگه مخصوص اسکچ ایجاد شود. بنابراین قبل از انجام هر کاری ابتدا وایرفریم را روی کاغذ رسم کنید تا دید روشن‌تری نسبت به نیاز مشتری داشته باشید و مطمئن شوید که درک درستی از بخش‌های مختلف سایت دارید.
مزایای رسم وایرفریم چیست؟
- راحت‌تر شدن تغییرات بخش‌های مختلف طراحی
- بهبود نمایش محتوا
- ساخت یک سایت کارآمد
تصویر پایین یک نمونه از وایرفریم هست؛ در رسم وایرفریم تصاویر با یک مستطیل یا مربعی که ضربدری درون آن رسم شده نمایش داده میشن و متن با خطوط.
اندازه‌ها در وایرفریم
مواردی که باید در رسم اسکچ یا وایرفریم رعایت بشه، اندازه های مناسب و دقیق هست. معمولا عرض یک سند وب ۱۲۰۰ پیکسل و بقیه اندازه‌ها بسته به سلیقه و نیاز مشتری با ثبت “عرض x طول” به پیکسل داخل یا کنار اون نوشته میشه، تا طراحی نهایی آسون‌تر بشه.
برای مثال تصویر زیر نحوه اندازه گذاری در وایرفریم رو نشون میده:
در اندازه گذاری اسکچ تنها اندازه المان‌ها کافی نیست و باید حتما فاصله بین المان‌ها نیز در نظر گرفته بشه تا در طراحی PSD باعث سردرگمی طراح نشه.