مقایسه Photoshop با Adobe XD ، طراحان حرفه ای UI/UX از کدام ابزار استفاده می کنند؟

سلام به شما الینایی های اهل علم و عمل!

در این مقاله به بررسی دو نرم افزار خیلی خفن Adobe XD و Adobe Photoshop پرَ میدازیم!

مقدمه:

اما چرا تصمیم به نوشتن این مطلب گرفتم؟

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

Photoshop و Adobe XD دو مورد از ابزارهای محبوب طراحی هستند و من هم در این مقاله قصد دارم تا دو مورد از ابزارهای محبوب طراحی رو با هم مقایسه کنم تا شما عزیزان هم دید بهتری نسبت به این دو داشته باشید و Adobe XD رو هم بیشتر بشناسید.

اما قبلش اجازه بدین پیشبینی کنم چرا این مقاله را می خوانید؟

شما به دو دلیل در حال خواندن این مقاله هستین!

یک: می خواهید طراحی قالب و اپلیکیشن انجام بدید ولی نمی دونید که باید از فوتوشاپ استفاده کنید یا از Adobe XD . احتمالا (کمی یا خیلی) تجربه کار با فوتوشاپ دارید و حتی شاید چندباری هم سعی کردید با فوتوشاپ طراحی قالب انجام بدید یا شایدم انجام دادید.

دو: بیشتر می خواین بدونین که Adobe XD چیه و مایلید بیشتر با محیطش آشنا بشید.

توجه: اگه به دلیل دیگه ای این مقاله رو می خونید حتما در کامنت برامون بنویسید تا مقاله رو اصلاح کنیم ????

برویم سراغ سر اصل مطلب:

اصل مطلب:

Adobe Photoshop چیست و فلسفه وجودی آن چیست؟

تصویر فوتوشاپ 2020 در حال بارگزاری
تصویر فوتوشاپ ۲۰۲۰ در حال بارگزاری

متولد ۱۹۸۸ میلادی یا ۱۳۶۷ شمسی

فوتوشاپ با هدف ویرایش پیکسلی تصاویر و فایل های گرافیکی ایجاد شد. این نرم افزار توسط آقایون داداشا Thomas Knoll و John Knoll ساخته شد. در واقع Thomas که مهندس نرم افزار و دانشجوی دکترا بود نسخه اولیه رو ساخت و به داداش-جان (John) نشون داد. اونم خوشش اومد و تکمیلش کردند و در نهایت به شرکت Adobe Systems فروختند. پایان ????

توماس نول و جان نول
توماس نول و جان نول

تصویری از محیط نرم افزار فوتوشاپ

تصویری از محیط کاری فوتوشاپ
تصویری از محیط کاری فوتوشاپ

 

فیلمی از تاریخچه فوتوشاپ

 

 

Adobe XD چیست و فلسفه وجودی آن چیست؟

متولد سال ۲۰۱۷ میلادی یا ۱۳۹۶ شمسی

نرم افزار Adobe XD، نرم افزاری است که برای طراحی رابط کاربری وب سایت ها و اپلیکیشن های موبایل ساخته شده و Vector-Base یا برداری است ( یعنی تغییر ابعاد در کیفیت آن بی تاثیر است! مثل فونت).

این نرم افزار برای ویندوز و مک در دسترس هست و از اپلیکیشن نسخه اندروید و یا iOS آن، می توان برای دیدن پروژه ها استفاده کرد ( پس برای کار کردن باید از ویندوز یا مک استفاده کنین! )

تصویری از محیط کاری نرم افزار Adobe XD
تصویری از محیط کاری نرم افزار Adobe XD

فیلم کوتاه معرفی ۳ ویژگی جذاب Adobe XD

خب! پس تا ایجای کار احتمالا به پاسخ آخر رسیدین! بله نرم افزار تخصصی برای طراحی UI/UX، که طراحان حرفه ای استفاده می کنند نرم افزار Adobe XD هست!

سوال! پس یعنی میگی نمی شه با فوتوشاپ رابط کاربری سایت و یا اپلیکیشن موبایل طراحی کرد؟

پاسخ سریع: اولا فوتوشاپ نرم افزار پایه است و ما حتی می تونیم باهاش انیمیشن هم بسازیم. پس قطعا می تونیم باهاش طراحی قالب سایت و اپلیکیشن هم انجام بدیم ولی کارمون به مراتب سخت میشه!

مثال: آیا میشه برای دانلود فایل به جای نرم افزار دانلود منیجر، از خود مرورگر استفاده کنیم؟ بله ولی خیلی کند میشیم و اگه سایز فایل بزرگ باشه بیشتر گرفتار میشیم.

خب برای اینکه بدونیم چرا طراحان UI/UX میان سراغ نرم افزار Adobe XD، باید بدونیم که چه نیازهایی دارن!

طراحان سایت و اپلیکیشن به چه چیز هایی نیاز دارند؟

  1. اینترفیس داینامیک و وسیع برای طراحی

محیط کاری نرم افزار فوتوشاپ طوری طراحی شده تا به شما امکان تمرکز ۱۰۰ درصدی رو بر روی یک پروژه و تصویر بده. هر چند شما می تونید پروژه های دیگه رو هم در تب های دیگه باز کنید و یا به صورت پنجره های کوچیک داشته باشید ولی به هر حال هر کدوم یک پروژه مجزا هستند و تغییرات در هر کدوم از فایل ها، باید به صورت مجزا ذخیره بشه!

اما محیط کاری نرم افزار Adobe XD در مقایسه با Photoshop، طوریه که شما بدونید درون یک پروژه، انواع Artboard یا بوم ایجاد کنید. مثلا ۵ تا Artboard با سایز Full HD برای طراحی صفحات خانه، درباره ما، تماس با ما و بلاگ، داشته باشید و پس از طراحی همشون رو در یک فایل ذخیره کنید. زیبا نیست!

تصویری از محیط کاری فوتوشاب و ادوبی ایکس دی
تصویری از محیط کاری فوتوشاب و ادوبی ایکس دی

 

  1. ابزارها و رابط کاربری مناسب طراحی وب

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

مقایسه ابزارهای فوتوشاپ و ادوبی ایکس دی
مقایسه ابزارهای فوتوشاپ و ادوبی ایکس دی
  1. سایزها و Layout های استاندارد موبایل و دسکتاپ

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

خب باید بگم متاسفانه اشتباه می کنین!

درسته که ما در فوتوشاپ می تویم پروژه رو بر اساس سایز صحفه موبایل یا دسکتاپ ایجاد کنیم ولی مساله اینکه تا پایان کار، این سایز ثابته و تمامی Artboard های ما از لحاظ ابعاد یکسان هستند. در حالی که در Adobe XD ، سایز رو برای Artboard انتخاب می کنیم و می تونیم داخل یک پروژه، به تعداد نامحدود بوم یا Artboard ایجاد کنیم که هر کدومشون دارای ابعاد استاندارد متفاوت باشند. مثلا ۵ تا صفحه برای موبایل، ۵ تا برای تبلت و ۵ تا هم برای دسکتاپ!

سایزها و Layout های استاندارد موبایل و دسکتاپ
سایزها و Layout های استاندارد موبایل و دسکتاپ

 

  1. استفاده از Wireframe

شاید خیلی از شما دوستان ندونین Wireframe چیه. خب باید بگم وایرفریم یک روش مدلینگ و طراحی است که این اهداف رو دنبال می کنه!

  • ساختار و طرح کلی صفحه را نشان می دهد.
  • اطلاعاتی که باید در صفحه نمایش داده بشود را بیان می کند.

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

طراحی رابط کاربری بر روی کاغذ
طراحی رابط کاربری بر روی کاغذ

وایرفریم هم همینطوره! ما با ایجاد طرح Wireframe، در واقع طرح کلی رو ترسیم می کنیم. این طرح رو می تونیم روی کاغذ بکشیم و یا از نرم افزارهای طراحی Wireframe استفاده کنیم، یاد در Adobe XD این کار رو انجام بدیم.

نمونه ای از طراحی Wireframe در یک نرم افزار طراحی
نمونه ای از طراحی Wireframe در یک نرم افزار طراحی

 

قبلناها ( یعنی خیلی قدیما! ) برای طراحی وایرفریم، از نرم افزار های مجزا استفاده می کردیم! اما خوشبختانه الان می تونیم این کار رو به سادگی در Adobe XD انجام بدیم. (البته قبلاناها رو شوخی کردم. الاناها هم می تونیم از این نرم افزاراها استفاده ها کنیم)

 

  1. استفاده از انیمیشن در طرح

همونطور که قبلا گفتم با فوتوشاپ هم می تونیم انیمیشن درست کنیم. با Adobe XD هم می تونیم ولی…

آن یکی شیر است اندر بادیه        وان دگر شیر است اندر بادیه!

ما با استفاده از فوتوشاپ فیلم انیمیشنی می سازیم ( یا می تونیم بسازیم اگه بخوایم )

برشی از فیلم آموزشی ساخت انیمیشن با فوتوشاپ از بردیا علمی

 

ولی در ادوبی ایکس دی، منظورمون از انیمیشن افکت هایی است که روی Object ها اعمال می کنیم. مثلا Slide شدن تصاویر، یا Fade شدن عکس یا متن و موارد این مدلی.

ایجاد افکت انیمیشن در adobe xd
ایجاد Carousel متحرک با انیمیشن اسلاید در Adobe XD

 

ایجاد Carousel متحرک با Adobe XD – Artboard ها و اتصالات
ایجاد Carousel متحرک با Adobe XD – آرت بوردها و اتصالات

 

عمده این نوع انیمیشن ها یا افکت های متحرک سازی، مواردی هستند که برنامه نویس ها می تونین به سادگی با استفاده از کدهای CSS یا JS و یا به کمک Framework هایی مثل Bootstrap و UIKIT اون ها رو به پروژه اضافه کنند.

  1. کپی آسان Object ها

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

کپی پیست در واقعیت!
کپی پیست در واقعیت!

در پروژه های برنامه نویسی هم که Stackoverflow منبعی برای کپی کدهای دیگران هست. برای پروژه های گرافیکی هم که سایت Freepik، معرف حضور همگی هست. البته کپی مقدمه ای است برای یادگیری. خب بگذریم!

در پروژه های گرافیکی به ویژه طراحی سایت و اپلیکیشن، خیلی از اوقات ما به کپی یک Object یا مجموعه از Object ها نیاز داریم. در نرم افزار فوتوشاپ روش های مختلفی برای اینکار هست مثلا با نگه داشتن دکمه Alt و Drag کردن در شرایطی که ابزار Move فعال باشه. یا زدن دکمه CTRL+J.

در نرم افزار Adobe XD قابلیتی وجود داره با نام Repeat Grid که به شما و ما کمک می کنه که Object ها رو هم در راستای محور X و هم در راستای محور Y، تکرار کنیم. فقط با حرکت موس!

Repeat Grid
Repeat Grid

البته این پایان کار نیست! بعد از اینکه به آن سادگی Object ها رو کپی و تکثیر کردید، می تونید ویژگی هاشونم به این سادگی و به صورت همزمان ویرایش کنید! چجوری؟ اینجوری:

ویرایش آیتم های Repeat شده به صورت دسته ای
ویرایش آیتم های Repeat شده به صورت دسته ای

 

  1. تولید آسان محتوای دمو

درون یک خانه هرچقدر هم که زیبا طراحی شده باشه، تا زمانی که وسایلی در اون نباشه و خالی باشه زیبا نیست! مثل یخچال!! سایت هم همینطوره. طرح شما تا زمانی که بدون عکس و متن باشه جذاب نیست.

تفاوت یخچال خالی با یخچال پر
تفاوت یخچال خالی با یخچال پر!

حالا ما محتوا از کجا بیاریم! یکی از ابزارها استفاده از متن ساز (یا جفنگ ساز) Lorem Ipsum هست که میتونه بر اساس تعداد کلمات یا پاراگراف ها، برامون متن چرت و پرت با کلاس و شیک تولید کنه.

Lorem Ipsum
Lorem Ipsum

مشکل اینجاست که ما باید بریم توی این سایت ها و بسته به فونت و ابعاد، متن مناسب رو کپی کنیم.

اما در Adobe XD، ما می تونیم خیلی ساده تر این کار رو انجام بدیم. مثلا می تونیم یک فایل TXT از اسامی رو درست کنیم. همینطور یه فایل دیگه برای متن و البته یک فایل مجزا هم برای تاریخ. بعد فایل ها رو روی Object اعمال می کنیم و خود Adobe XD به صورت هوشمندانه محتوا رو می خونه. علاوه بر این می تونیم از پلاگین های مختلف برای تولید محتوای متنی و تصویری استفاده کنیم.

قرار دادن محتوای دمو از طریق فایل در ادوبی ایکس دی
قرار دادن محتوای دمو از طریق فایل در ادوبی ایکس دی

زیبا نیست؟

  1. Responsive Resize

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

اما نرم افزار Adobe XD در مقایسه با فوتوشاپ، قابلیتی داره با نام Responsive Resize که باعث میشه زمانی که ابعاد Artboard رو تغییر می دهیم، اشیاء رو برامون جابجا میکنه و در صفحه حفظ می کنه!

Responsive Redesign
Responsive Redesign
  1. اشتراک گذاری آسان طرح با اعضای تیم و برنامه نویسان

ممکنه طراحیتون به پایان رسیده و یا این که کار طراحیتون به سطح قابل قبولی رسید و تصمیم گرفتید اون رو با مشتری ها، دوستان و همکاران به اشتراک بذارید. Adobe XD براتون یک لینک Public ایجاد می کنه و شما می تونید اون رو به هر کی که دلتون می خواد بدید!

اشتراک گذاری پروژه در ادوبی ایکس دی
اشتراک گذاری پروژه در ادوبی ایکس دی

جمع بندی:

خب همونطور که دیدین، Adobe XD نرم افزار تخصصی طراحی رابط کاربری یا همون UI/UX هست. بنابراین اگر قصد دارین طراحی سایت یا طراحی اپلیکیشن انجام بدید بهتره از نرم افزار Adobe XD استفاده کنید. اگر تجربه کار با نرم افزار فوتوشاپ رو دارین باید بدونید که کار با این نرم افزار بسیار براتون راحت خواهد بود و با کمی کار کردن با محیط Adobe XD و دیدن چندتا ویدئوی آموزشی، می تونید طراحی کنید.

اگه قصد فعالیت تخصصی روی طراحی رابط کاربری وب و موبایل دارید باید بگم که نرم افزارهای دیگه ای هم برای این کار وجود دارند که مشابه Adobe XD هستند مثل Figma و Sketch. اگه دوش داستین یه سرچی هم در مورد اونا بزنین. در آینده این نرم افزار ها رو با هم مقایسه خواهم کرد، اگر خدا بخواهد.

با سپاس از همراهی شما

 

ایمان شادمهری

ایمان شادمهری

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

ایمان شادمهری

هر سال یک مهارت جدید یاد بگیری بهتر از اینکه سالها به این فکر کنی که چی یاد بگیری.

دیدگاهتان را بنویسید

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

اگر مایلی تا از تخفیف دوره ها با خبر بشی یا جز اولین افرادی باشی که از انتشار دوره ها و آموزش های جدید خبردار میشه، عضو خبرنامه شو.