طراحان حرفه ای ترجیح می دهند از فوتوشاپ برای ترسیم وایرفریم استفاده کنند. هر چند ممکن است برای تازه کارها طراحی با فوتوشاپ مشکل باشد اما جذابیت کار با ابزارهای فوتوشاپ هرکسی را شیفته خود می کند پس مطمئن باشید با کسب مهارت لازم و رسم چند وایرفریمدرفوتوشاپ، دیگر سراغ سایر نرم افزارهای طراحی وایر فریم نخواهید رفت؛ در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا شما عزیزان را با اصول طراحی وایرفریم در فوتوشاپ بیشتر آشنا کنیم.
پیشنهاد می کنیم پست دیگر ما را که درباره معرفی وایرفریم است مطالعه بفرمائید.
چگونه در فتوشاپ وایرفریم طراحی کنیم؟
قبل از شروع آموزش طراحی وایرفریم ، باید از خودتان بپرسید کدام صفحه را مایلید طراحی کنید. چه چیزی آن را از سایر سایت های طراحی شده متفاوت می کند و وجود کدام عناصر در این صفحه ضروریست.
حالا یک قلم بردارید و طرح اولیه خود را روی کاغذ رسم کنید تا ایده های ذهنی خود را به یک شکل قابل دیدن تبدیل کرده باشید. با این کار یک دید کلی از طرحی که می خواهید در فوتوشاپ ایجاد کنید بدست می آورید. در طراحی وایرفریم ها، سادگی و وضوح المان ها خیلی مهم است.
نکاتی که باید در طراحی وایرفریم رعایت کرد:
1- به جای تصاویر از اشکال هندسی مانند مستطیل و ضربدر استفاده کنید
2- جزئیات مهم نیست و تنها عناصر اصلی را به شکلی واضح طراحی کنید
2- به رنگ آمیزی نپردازید و تمام شکل ها را یک رنگ (مثلاً خاکستری) ترسیم کنید
3- از خطوط راهنما برای ترسیم دقیق تر کمک بگیرید
4- بخش های مختلف سایت (استخوان بندی کلی) را ایجاد کرده و پوشه بندی کنید
مثال:
خطوط راهنما (Guide Lines)
برای ایجاد خطوط راهنما، از تب View گزینه New Guide Layout را انتخاب کنید:
در این قسمت می توانید تعداد خطوط راهنما، فاصله شان از یکدیگر و میزان حاشیه (Gutter and Margin) را تعیین کنید؛ برای نمونه در شکل زیر می بینید که 12 عدد خط راهنمای عمودی با گاتر 30 پیکسل و 10 عدد راهنمای افقی بدون گاتر و با حاشیه 30 پیکسلی از چپ و راست صفحه ایجاد کرده ایم:
در صورتی که width و height را مقدار دهی نکنید، فاصله ها به طور مساوی تقسیم می شوند.
پوشه بندی
برای راحتی دسترسی به لایه ها و همچنین تبدیل سریع تر PSD به HTML و CSS بهتر است در فوتوشاپ از پوشه بندی استفاده کنید و برای هر لایه، نامی منحصر به فرد و مرتبط با محتویاتش انتخاب کنید. تمام لایه هایی که در قسمت هدر سایت ایجاد می کنید را در پوشه Header قرار دهید و به همین شکل برای بقیه قسمت های سایت عمل کنید. پوشه بندی های رایج از این قرارند: Header ، Sidebar ، Content و Footer
استاندارد های سایز
هر وسیله هوشمندی که به اینترنت دسترسی دارد و می تواند از مرورگر استفاده کند، دارای ابعاد صفحه مخصوص خود است. امروزه هم بیشمار گوشی و تبلت و لپ تاپ در انواع سایز وجود دارد که منطقی نیست برای هرکدام از این صفحات، طراحی جداگانه ای انجام شود. پس بهتر است برای چند سایز مختلف رایج طراحی خود را ایجاد کنیم و به اصطلاح ریسپانسیو ( واکنشگرا) بودن آن را تضمین نماییم.
بعضی از این ابعاد عبارتند از:
XL – با 1200px < width مناسب برای لپ تاپ و مانیتورهای PC
LG – با 991px < width < 1200px مناسب برای مینی لپ تاپ
MD – با 768px < width < 991px مناسب برای تبلت
SM – با 576px < width < 768px مناسب برای موبایل های بزرگ (فبلت)
XS – با width < 576px مناسب برای گوشی های رایج وکوچکتر
معمولاً وایرفریم ها را برای عرض 1400px طراحی می کنند و سایر سایزها را با CSS و با کمک مدیاکوئری ها یا با استفاده از بوت استرپ (Bootstrap) می سازند. استانداردهای سایز تصاویر و سایر المان های صفحه را می توانید در اینجا ببینید.
