ارائه نمونه کار طراحی سایت از روش درست

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

سلام امیدوارم که عالی باشید!

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

تهیه تصویر و ویدیو از نمونه کارهای طراحی سایت

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

تهیه اسکرین‌شات از صفحات سایت در دسکتاپ

اولین قدم برای نمایش کارهایتان، گرفتن اسکرین‌شات از صفحات وب است. این روش ساده و سریع است و می‌تواند تمام جزئیات یک صفحه را به نمایش بگذارد.

• ابزارهای داخلی مرورگر: بیشتر مرورگرهای مدرن مثل Chrome و Firefox امکان گرفتن اسکرین‌شات از صفحات وب را فراهم می‌کنند. در Chrome، می‌توانید با کلیک راست روی صفحه و انتخاب گزینه “Inspect” به ابزارهای توسعه‌دهنده دسترسی پیدا کنید. سپس با کلیک روی سه نقطه در بالای ابزارها، گزینه‌ی “Capture full size screenshot” را انتخاب کنید. این ابزار به شما امکان می‌دهد از کل صفحه یک تصویر کامل بگیرید، حتی اگر صفحه به صورت عمودی اسکرول شود.
• افزونه‌ها و ابزارهای آنلاین: افزونه‌های مرورگر مانند GoFullPage در Chrome به شما امکان می‌دهند به راحتی از کل صفحه وب یک اسکرین‌شات کامل تهیه کنید. همچنین ابزارهای آنلاین مانند Full Page Screen Capture گزینه‌های مناسبی هستند.

استفاده از افزونه های مرورگر کروم

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

GoFullPage – Full Page Screen Capture

GoFullPage یکی از محبوب‌ترین افزونه‌ها برای گرفتن اسکرین‌شات از صفحات وب به صورت کامل است. این افزونه به شما اجازه می‌دهد با یک کلیک از کل صفحه وب (حتی بخش‌هایی که خارج از نمایشگر فعلی هستند) اسکرین‌شات بگیرید.

نحوه استفاده:

1. افزونه را از Chrome Web Store نصب کنید.
2. پس از نصب، روی آیکون افزونه در نوار ابزار کلیک کنید.
3. افزونه به صورت خودکار به پایین صفحه اسکرول کرده و از کل صفحه اسکرین‌شات می‌گیرد.
4. پس از اتمام، می‌توانید تصویر را دانلود یا به صورت PDF ذخیره کنید.

Fireshot

Fireshot یکی دیگر از افزونه‌های قدرتمند برای گرفتن اسکرین‌شات از صفحات وب به صورت کامل است. این افزونه امکان ذخیره تصاویر را در فرمت‌های مختلف از جمله PDF، PNG، و JPEG فراهم می‌کند. همچنین می‌توانید پس از گرفتن اسکرین‌شات، آن را ویرایش کنید.

نحوه استفاده:

1. افزونه را از Chrome Web Store نصب کنید.
2. با کلیک روی آیکون افزونه، گزینه‌های مختلفی برای گرفتن اسکرین‌شات خواهید داشت (از جمله گرفتن اسکرین‌شات از کل صفحه یا فقط بخش قابل مشاهده).
3. تصویر را می‌توانید به صورت مستقیم ذخیره کنید یا قبل از ذخیره ویرایش نمایید.

Awesome Screenshot & Screen Recorder

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

نحوه استفاده:

1. افزونه را از Chrome Web Store نصب کنید.
2. روی آیکون افزونه کلیک کنید و حالت‌های مختلف اسکرین‌شات (از جمله گرفتن اسکرین‌شات کامل) را انتخاب کنید.
3. تصویر گرفته شده را می‌توانید دانلود کرده و یا به اشتراک بگذارید.

Nimbus Screenshot & Screen Video Recorder

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

نحوه استفاده:

1. افزونه را از Chrome Web Store نصب کنید.
2. پس از نصب، روی آیکون افزونه کلیک کرده و گزینه‌ی “Entire Page” را انتخاب کنید تا از کل صفحه اسکرین‌شات بگیرید.
3. پس از گرفتن اسکرین‌شات، می‌توانید تصویر را ویرایش و سپس دانلود کنید.

Full Page Screen Capture

این افزونه به شما امکان می‌دهد به سادگی و تنها با یک کلیک، اسکرین‌شات کامل از صفحات وب بگیرید. از ویژگی‌های آن سادگی و سرعت عمل بالاست.

نحوه استفاده:

1. افزونه را از Chrome Web Store نصب کنید.
2. روی آیکون افزونه کلیک کنید تا اسکرین‌شات کامل صفحه گرفته شود.
3. پس از پردازش، تصویر آماده دانلود خواهد بود.

نکات کلی برای استفاده از افزونه‌ها:

• استفاده در سایت‌های بلند: افزونه‌های ذکر شده قابلیت اسکرول کردن و گرفتن اسکرین‌شات از سایت‌هایی که محتوای زیادی دارند و نیاز به اسکرول کردن دارند را دارند.
• ویرایش تصویر: برخی از افزونه‌ها (مثل Nimbus و Fireshot) امکانات ویرایش تصویر را نیز در خود دارند. این ویژگی به شما اجازه می‌دهد بدون نیاز به نرم‌افزارهای خارجی، اسکرین‌شات‌های خود را اصلاح و بهینه‌سازی کنید.

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

ساخت موکاپ (Mockup) برای نمایش حرفه‌ای

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

• سایت‌های ساخت موکاپ: سایت‌هایی مانند Placeit و Smartmockups به شما این امکان را می‌دهند که به راحتی اسکرین‌شات‌های خود را در موکاپ‌های حرفه‌ای قرار دهید. این سایت‌ها مجموعه‌ای از قالب‌ها را در اختیار شما قرار می‌دهند که می‌توانید متناسب با نوع پروژه خود یکی را انتخاب کنید.

ضبط ویدیو از کارکرد سایت

برای نمایش نحوه عملکرد سایت، انیمیشن‌ها و تعاملات کاربری، ضبط ویدیو از سایت بهترین گزینه است. ویدیوها به مشتریان شما نشان می‌دهند که چگونه کاربران با سایت تعامل دارند و عملکرد سایت در زمان واقعی چگونه است.

• نرم‌افزارهای ضبط صفحه: نرم‌افزارهایی مانند OBS Studio، Camtasia، Loom و Snagit ابزارهای قدرتمندی برای ضبط صفحه نمایش هستند. این نرم‌افزارها به شما امکان می‌دهند ویدیوهایی با کیفیت بالا از عملکرد سایتتان ضبط کنید. همچنین می‌توانید توضیحات صوتی به ویدیو اضافه کنید تا نحوه استفاده از سایت را بهتر توضیح دهید.
• ساخت GIF: اگر نیاز به ویدیوهای طولانی ندارید، می‌توانید از GIF‌ استفاده کنید. ابزارهایی مانند Giphy Capture و ScreenToGif به شما امکان می‌دهند بخش‌های کوتاهی از ویدیوها را به صورت فایل GIF ذخیره کنید. این فایل‌ها حجم کمتری دارند و به سرعت لود می‌شوند، بنابراین برای نمایش بخش‌های کوتاه از انیمیشن‌ها و تعاملات کاربری مناسب هستند.

افزودن توضیحات و جلوه‌های ویژه

پس از ضبط ویدیو یا گرفتن اسکرین‌شات، می‌توانید آن‌ها را ویرایش کنید تا ظاهر حرفه‌ای‌تری پیدا کنند.

• ویرایش ویدیو: با استفاده از نرم‌افزارهای ویرایش ویدیو مانند Adobe Premiere Pro یا Final Cut Pro می‌توانید جلوه‌های بصری، توضیحات متنی، لوگوی برند و موسیقی به ویدیوها اضافه کنید. این کار به ویدیوهای شما کمک می‌کند تا بیشتر جذاب و حرفه‌ای به نظر برسند.
• ویرایش تصویر: برای تصاویر، می‌توانید از نرم‌افزارهای گرافیکی مانند Adobe Photoshop یا ابزارهای آنلاین مانند Canva استفاده کنید. این ابزارها به شما امکان می‌دهند که تصاویر خود را بهینه‌سازی و تزئین کنید تا نمایشی بهتر از طراحی‌های خود ارائه دهید.

در نهایت، در هنگام تهیه تصاویر و ویدیوها از سایت‌های طراحی‌شده‌تان، به این نکات توجه کنید:

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

تهیه اسکرین‌شات از صفحات سایت در موبایل

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

استفاده از مرورگر برای شبیه‌سازی موبایل

مرورگرهای مدرنی مانند Chrome و Firefox دارای ابزارهای توسعه‌دهنده‌ای هستند که به شما امکان می‌دهند طراحی سایت خود را در ابعاد مختلف شبیه‌سازی کنید و از آن اسکرین‌شات بگیرید.

روش کار در Chrome:

1. باز کردن ابزارهای توسعه‌دهنده (Developer Tools):
   • ابتدا سایت مورد نظر را باز کنید.
   • کلیک راست کرده و گزینه‌ی “Inspect” یا “باز کردن ابزارهای توسعه‌دهنده” را انتخاب کنید.
2. تغییر به حالت نمایش موبایل:
   • در بالای صفحه ابزارهای توسعه‌دهنده، یک آیکون موبایل و تبلت می‌بینید. روی این آیکون کلیک کنید تا وارد حالت نمایش موبایل شوید.
   • سپس می‌توانید از منوی بالای صفحه، نوع دستگاه موبایلی که می‌خواهید طراحی سایت خود را در آن مشاهده کنید، انتخاب کنید (برای مثال iPhone 12 یا Galaxy S21).
3. گرفتن اسکرین‌شات:
   • پس از تنظیم اندازه صفحه‌نمایش موبایل، می‌توانید از سایت خود در این حالت اسکرین‌شات بگیرید. برای این کار می‌توانید از گزینه‌ی “Capture Screenshot” در منوی سه‌نقطه ابزارهای توسعه‌دهنده استفاده کنید.
   • همچنین می‌توانید از افزونه‌هایی مانند GoFullPage برای گرفتن اسکرین‌شات کامل صفحه در حالت موبایل استفاده کنید.

استفاده از موبایل واقعی

اگر می‌خواهید از سایت خود بر روی یک دستگاه موبایل واقعی اسکرین‌شات بگیرید، می‌توانید به صورت دستی این کار را انجام دهید. این روش به شما این امکان را می‌دهد که دقیقا همان تجربه‌ای که کاربران واقعی دارند را به تصویر بکشید.

مراحل کار:

1. باز کردن سایت در مرورگر موبایل: سایت مورد نظر خود را در مرورگر موبایل باز کنید (مثل Chrome یا Safari).
2. تهیه اسکرین‌شات:
   • در دستگاه‌های Android: معمولاً می‌توانید با فشار دادن دکمه‌ی پاور و دکمه‌ی کاهش صدا به صورت همزمان، اسکرین‌شات بگیرید.
   • در دستگاه‌های iPhone: برای گرفتن اسکرین‌شات، دکمه‌ی پاور و دکمه‌ی افزایش صدا را همزمان نگه دارید.
3. ویرایش اسکرین‌شات: پس از گرفتن اسکرین‌شات، می‌توانید از ابزارهای ویرایش عکس در موبایل یا نرم‌افزارهای دیگر مانند Adobe Lightroom یا Snapseed برای بهینه‌سازی و زیباتر کردن تصویر استفاده کنید.

ساخت موکاپ موبایل

یکی از راه‌های جذاب برای نمایش سایت در موبایل استفاده از موکاپ‌هاست. موکاپ‌ها تصاویری از سایت شما را درون یک دستگاه موبایل شبیه‌سازی می‌کنند و جلوه‌ای حرفه‌ای‌تر به نمونه‌کار شما می‌دهند.

استفاده از ابزارهای موکاپ:

• Placeit و Smartmockups: این ابزارها به شما امکان می‌دهند که اسکرین‌شات‌های خود را در قالب‌های موکاپ موبایل قرار دهید. این موکاپ‌ها می‌توانند تصویر سایت شما را در حالتی حرفه‌ای روی یک گوشی موبایل نمایش دهند.

مراحل کار:

1. گرفتن اسکرین‌شات: ابتدا اسکرین‌شات طراحی موبایل سایت خود را تهیه کنید.
2. انتخاب موکاپ مناسب: در سایت‌های مثل Placeit یا Smartmockups، یک قالب موکاپ موبایل انتخاب کنید.
3. آپلود اسکرین‌شات: اسکرین‌شات خود را در قالب موکاپ آپلود کنید تا تصویر نهایی ایجاد شود.

ضبط ویدیو از عملکرد سایت در موبایل

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

مراحل ضبط در Android:

1. استفاده از قابلیت داخلی ضبط صفحه:
   • در بسیاری از دستگاه‌های اندروید، قابلیت ضبط صفحه داخلی وجود دارد. برای شروع ضبط، نوار اعلان (Notification Bar) را پایین بکشید و گزینه‌ی “Screen Recorder” را انتخاب کنید.
2. ضبط ویدیو: حالا می‌توانید با باز کردن سایت در مرورگر موبایل و نمایش نحوه عملکرد آن، ویدیو ضبط کنید.

مراحل ضبط در iPhone:

1. استفاده از قابلیت Screen Recording:
   • در iPhone، از Control Center گزینه “Screen Recording” را انتخاب کنید تا ضبط صفحه شروع شود.
2. ضبط ویدیو: سایت خود را در مرورگر باز کنید و نحوه عملکرد آن را ضبط کنید.

با این روش‌ها می‌توانید مطمئن باشید که مشتریان شما طراحی سایت شما را به بهترین شکل ممکن مشاهده و ارزیابی خواهند کرد.

روش های صحیح ارائه نمونه کار

این روش را ما در تیم میهن وردپرس در سال های 1399تا1400 بررسی کردیم و به نتایج خوبی رسیدیم. اولین موضوعی که باید به آن دقت کنید این است که اگر نمونه‌کارها را به صورت ویدیو یا تصویر ذخیره دارید، خیلی ساده آن ها را ارائه ندهید. این کار برای مشتری جالب به نظر نمی‌رسد.

اگر قصد داشته باشید در سایت خود و با صفحه ساز المنتور این کار را انجام دهید، چندین المان مختلف برای ارائه نمونه‌کارهای خود وجود دارد. اما اگر به نمونه کاری نیاز دارید که در همه‌جا از آن استفاده کنید. کافی است در گوگل جستجو کنید “mockup طراحی سایت” مانند تصویر زیر:

فایل‌های Mockup

فایل‌های موکاپ فایل‌هایی با فرمت PSD هستند که می‌توانید پس از دانلود در فتوشاپ به صورت لایه باز آن‌ها را ویرایش کنید. این فایل ها مثلا اگر به صورت سه بعدی هستند، فایل ساده‌ای که شما از نمونه‌کار خود دارید را به صورت سه بعدی به شما می‌دهد. پس دیگر با ارائه نمونه‌کار به صورت ساده خداحافظی کنید.

فایل های After Effect

اگر در گوگل سرچ کنید website presentation after effect پروژه‌های رایگانی را مشاهده خواهید کرد. در سایت‌های ایرانی اکثرا به صورت رایگان می‌توانید آن ها را دانلود کنید. با افترافکت، پریمیر و… می‌توانید آن ها را ویرایش کنید و در فضاهای مجازی، اینستاگرام، یوتیوب و وبسایت خود ارائه دهید.

این مدل ارائه نمونه‌کارها می‌تواند مشتری را به سمت شما سوق دهد. همچنین می‌تواند به روند پیشرفت شما کمک کند.

استفاده از خلاقیت خودتان

یک ui/ux designer حرفه ای باید از خلاقیت خودش برای ارائه نمونه‌کارهایش استفاده کند. به عنوان مثال شما می‌توانید تصاویری که از صفحه دارید را با به صورت اسلایدی در اینستاگرام قرار دهید که کاربر با ورق زدن آن ها بتواند کل سایت را مشاهده کند. خلاقیت‌های زیادی می‌توانید در این زمینه داشته باشید.

نتیجه‌گیری

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

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...