نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3516
تاریخ بروزرسانی ۵ فروردین ۱۴۰۱

طراحی وایرفریم در فوتوشاپ

طراحی وایرفریم در فوتوشاپ

 

wireframe-in-photoshop-webyar

 

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

پیشنهاد می کنیم پست دیگر ما را که درباره معرفی وایرفریم است مطالعه بفرمائید.

 

چگونه در فتوشاپ وایرفریم طراحی کنیم؟

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

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

 

نکاتی که باید در طراحی وایرفریم رعایت کرد:

  1. 1- به جای تصاویر از اشکال هندسی مانند مستطیل و ضربدر استفاده کنید
  2. 2- جزئیات مهم نیست و تنها عناصر اصلی را به شکلی واضح طراحی کنید
  3. 2- به رنگ آمیزی نپردازید و تمام شکل ها را یک رنگ (مثلاً خاکستری) ترسیم کنید
  4. 3- از خطوط راهنما برای ترسیم دقیق تر کمک بگیرید
  5. 4- بخش های مختلف سایت (استخوان بندی کلی) را ایجاد کرده و پوشه بندی کنید

 

مثال:

wireframe-photoshop-example

 

 

خطوط راهنما (Guide Lines)

برای ایجاد خطوط راهنما، از تب View گزینه New Guide Layout را انتخاب کنید:

Photoshop-GuideLayout

 

در این قسمت می توانید تعداد خطوط راهنما، فاصله شان از یکدیگر و میزان حاشیه (Gutter and Margin) را تعیین کنید؛ برای نمونه در شکل زیر می بینید که 12 عدد خط راهنمای عمودی با گاتر 30 پیکسل و 10 عدد راهنمای افقی بدون گاتر و با حاشیه 30 پیکسلی از چپ و راست صفحه ایجاد کرده ایم:

 

خطوط راهنما در وایرفریم Guide-Layout

در صورتی که 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) می سازند. استانداردهای سایز تصاویر و سایر المان های صفحه را می توانید در اینجا ببینید.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.