چرا از Sketch استفاده می‌کنم؟

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

در بین اهالی سُخَن مثالی هست که اگر مجبور شدی یک مطلب را به ۲ نفر توضیح بدی یک سخنرانی - جلسه - برگزار کن! دلیلِ نوشتن این پست هم همین است. موضوعی که این روزها زیاد مجبور به توضیح دادنش به دوستان و همکاران می‌شوم؛ که «چرا از اسکچ استفاده می‌کنم؟»

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

این شرایط و آنچه که در ادامه توضیح می‌دهم همگی باعث شدند تا در طول یک سال گذشته نه تنها Sketch تبدیل به برنامه اصلی من برای طراحی شود بلکه دیگر هیچ علاقه‌ای به برگشتن به سمت Adobe Photoshop , Illustrator که عمری عاشقشان بودم ندارم.

توضیح ضروری: من به مدت ۱۰ سال است که به عنوان طراحی رابط کاربری وب‌سایت و موبایل اپلیکیشن‌ها فعالیت میکنم. تا سال گذشته اپلیکیشن‌های ادوبی نظیر Photoshop , Illustrator جزئی جدایی ناپذیر از میزکار من بود اما در طول یک سال گذشته میزان کل استفاده من از این ۲ برنامه شاید به ۱۰ ساعت هم نرسد. به همین دلیل شاید بعضی از مواردی که در متن به آن اشاره می‌کنم در نسخه‌‌های جدید این برنامه‌ها برطرف/اضافه شده باشد که از شما می‌خواهم در صورت اطلاع آن‌را در کامنت اعلام کنید.

اسکچ چیست؟

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

اسکچ یک برنامه Vector Based برای طراحی رابط کاربری وب و موبایل ، آیکن ، پروتوتایپ و وایرفریم است.

مزایای اسکچ نسبت به فوتوشاپ

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

در اینجا تعدادی از بهترین امکانات اسکچ برای طراحان را معرفی می‌کنم.

ویژگی Artboards

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

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

قابلیت گرید بندی

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

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

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

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

شما مجبورید به Vector احترام بگذارید!

این بهترین و البته سخت‌ترین قسمت اسکچ برای من بود. تا زمانی که از فوتوشاپ استفاده می‌کردم به خاطر پشتیبانی خوبش از المان‌های پیکسلی هیچ وقت خودم رو موظف به استفاده از المان‌های وکتور نمی‌کردم با اینکه می‌دانستم کارایی آن‌ها برای کاری که من می‌کنم بیشتر و بهتر است. اما اسکچ همانطور که از شعارش هم پیداست یک برنامه برای طراحی بر اساس وکتور است و شما مجبورید از المان‌های وکتوری استفاده کنید. از Shape گرفته تا آیکن‌ها که برخلاف فوتوشاپ از SVG هم پشتیبانی می‌کند (و حالا با قدرت می‌گویم که این یکی از بزرگترین دلایل برتری Sketch نسبت به Photoshop است.)

ذخیره استایل متن و رنگ‌های پروژه برای دسترسی راحت‌تر

یکی دیگر از نکات قوت اسکچ این است که شما برای هر پروژه می‌توانید رنگ‌ برند و سایر رنگ‌های مورد نیازتان را ذخیره کنید تا همیشه به راحتی بتوانید به آن‌ها دسترسی داشته باشید.

در فوتوشاپ بخشی به نام Swatches وجود دارد که کارکردی مشابه دارد اما مشکل آن این است که محدود به پروژه نیست و در هر پروژه شما همه رنگ‌هایی که تاکنون به فوتوشاپ اضافه کرده اید را میبینید که این شلوغی اذیت کننده است.

دیگر امکان اسکچ که کار من را خیلی ساده کرده امکان استایل دهی به نوشته هاست. شما می‌توانید استایل‌های مختلفی بسازید و فونت ، سایز ، ارتفاع خط (line-height) ، رنگ ، بولد بودن یا نبودن و هرچیزی که مربوط به متن است را برای آن تعیین کنید. به این شکل شما دیگر نیاز نیست هر بار متن خود را تنظیم کنید.

به عنوان مثال من همیشه در شروع پروژه چند استایل برای پاراگراف، تایتل ، منو و… ایجاد میکنم و اگر در طول پروژه نیاز شد تغیری در هر یک از آن‌ها بدهم تنها کافی است روی یکی از متن‌ها تغییر بدهم و سایر متن‌ها به صورت اتوماتیک تغییر می‌کنند.

حجم نهایی فایل

من از لپ‌تاپ ۱۲۸ گیگ استفاده می‌کنم و به شکل جدی با مشکل کمبود فضای خالی مواجه هستم. علاوه بر این به دلایل مختلف دوست دارم پروژه‌های اخیرم همیشه همراهم باشد. تا زمانی که پروژه های خودم را روی فوتوشاپ انجام میدادم به خاطر حجم بالای فایل PSD نهایی نمی‌توانستم تعداد زیادی از آن‌ها را همراه خودم داشته باشم. اما فایل فرمت اسکچ به شکل تعجب آوری کم حجم است. تقریبا در پروژه‌های مشابه حجم نهایی اسکچ کمتر از نصف فایل PSD است که این مورد برای اشتراک گذاری طرح با توسعه دهنده هم خیلی ارزشمند است.

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

خروجی از پروژه و المان‌های مورد نیاز توسعه دهنده

یکی دیگر از مواردی که واقعا اسکچ به من کمک کرده در زمان خروجی گرفتن از پروژه برای رساندن آن به دست توسعه دهنده است. از حدود ۳ سال پیش که من شروع به استفاده از المان های وکتوری نظیر SVG , Font Icon ها کردم. به خاطر عدم پشتیبانی فوتوشاپ مجبور بودم که همیشه در کنار پروژه ام فایل همه این آیکن‌ها را نگه دارم. از این بدتر برای پروژه‌های موبایل بود که باید خروجی‌های 1x ، 2x و 3x را به توسعه دهنده می‌دادم. این یعنی اینکه آیکن SVG را یک بار باید در Illustrator باز میکردم و از آنجا برای فوتوشاپ خروجی می‌گرفتم. در انتهای پروژه هم یک بار همه آیکن‌ها را باید در ۳ سایز مختلف خروجی میگرفتم که برای من همیشه بدترین قسمت پروژه بود. یک کار روتینِ اعصاب خرد کن.

اما اوضاع در اسکچ جور دیگری است. اولا همانطور که در بالا گفتم اسکچ از همه فرمت‌های وکتور پشتیبانی می‌کند و من راحت می‌توانم فایل SVG آیکن ها را در پروژه داشته باشم و روز آخر همه آن‌ها را یک باره خروجی بگیرم و به توسعه دهنده بدهم. از طرف دیگر المان‌هایی که میخواهم خروجی بگیرم را می‌توانم انتخاب کنم (شبیه به قابلیت Slice در فوتوشاپ) و به راحتی از همه ‌آن‌ها در سایزهای 1x ، 2x و 3x خروجی بگیرم. این خروجی می‌تواند پسوند‌های PNG ، JPG ، TIFF ، WEBP ، PDF ، ESP و از همه مهمتر SVG باشد.

به شخصه موارد مهم دیگری برای برتری اسکچ به فوتوشاپ نیز دارم. به عنوان مثال قابلیت Symbol یا integrated بودن (کلمه مناسب فارسی در ذهنم نیست!) آن با سرویس Invision یا پلاگین های قدرتمندی مانند Craft که به دلیل طولانی شدن متن ترجیج می‌دهم از توضیح آن‌ها خودداری کنم و شاید در پستی دیگر در مورد آن‌ها بنویسم.

و حرف آخر

متاسفانه Sketch نسخه‌ ویندوزی ندارد اما اگر شما طراح هستید و از لپ‌تاپ یا کامپیوترهای اپل استفاده می‌کنید توصیه می‌کنم پروژه بعدی خود را از اسکچ استفاده کنید. به خاطر ساختار مشابه (و البته مناسب) اسکچ با فوتوشاپ شما خیلی سریع با اسکچ احساس راحتی می‌کنید و هیچ وقت با مشکلی به نام یادگیری اسکچ مواجه نخواهید شد.

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

عکسهای اول و آخر نوشته توسط Toptal طراحی شده