آموزش نرم افزار Adobe XD بصورت مقدماتی

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

نرم افزار Adobe XD چیست؟

بذارید خیلی ساده بگیم: Adobe XD یه ابزار طراحیه که مخصوص ساخت رابط کاربری (UI) و تجربه کاربری (UX) ساخته شده. یعنی به‌جای اینکه بشینید توی فتوشاپ یا روی کاغذ طرح بزنید، اینجا خیلی سریع‌تر و تمیزتر می‌تونید ظاهر سایت یا اپلیکیشنتون رو بچینید. نکته خوبش هم اینه که ادوبی کاملاً رایگان در اختیارمون گذاشته، پس بابت هزینه‌اش هیچ نگرانی‌ای ندارید.

دانلود رایگان نرم افزار Adobe XD

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

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

چرا اصلاً باید سراغ Adobe XD بریم؟

حالا شاید بگید مگه فتوشاپ نداریم؟ چرا این؟ بذارید چند تا دلیل خوبش رو بگیم.

طراحی حالت‌های ریسپانسیو

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

سایز استاندارد در ایران

یه نکته کاربردی: سایز ۱۳۶۶ در ۷۶۸ همون سایزیه که اکثر کاربرهای ایرانی باهاش وب رو می‌بینن. اگه بخوایید طرحتون با تجربه‌ی واقعی کاربرها جور دربیاد، این سایز یه انتخاب مطمئن و میانگین حساب می‌شه.

از طرح اولیه تا طرح نهایی

با Adobe XD هم می‌تونید یه طرح اولیه سریع بزنید که ایده‌تون رو نشون بده، هم می‌تونید همون رو ببرید جلو و به یه طرح نهایی و آماده برسونید. بعدش با خیال راحت می‌رید سراغ برنامه‌نویسی.

Adobe XD یا فتوشاپ؟ کدوم برای طراحی سایت؟

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

روند کارش هم قشنگه: اول طرح رو آماده می‌کنید، می‌دید دست مشتری. اگه تایید نهایی رو گرفتید، اون‌وقت می‌شینید کدهای HTML، CSS و WordPress رو می‌نویسید و در نهایت طرح رو بدون دردسر تحویل می‌دید.

حالا فتوشاپ هم نداشته باشید مشکلی نیست. یه راهش اینه که روی کاغذ طرح بزنید که خب معمولاً اون‌قدرها تمیز از آب درنمیاد. ولی Adobe XD دقیقاً همون‌جاست که به کارتون میاد. مخصوصاً توی حوزه UI و UX، اول خیلی راحت طراحیتون رو اینجا انجام می‌دید، بعد اگه خواستید می‌بریدش توی فتوشاپ برای گرفتن خروجی. راستی خود XD هم خروجی HTML و CSS بهتون می‌ده، ولی خب صادقانه بگیم کامل و بی‌نقص نیست و بیشتر یه کمک‌حاله.

آشنایی با بخش‌های مختلف Adobe XD

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

نوار ابزار (ToolBar)

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

پنل اصلی طراحی (Design)

این بخش قلب کاره. سایت یا اپلیکیشنی که دارید طراحی می‌کنید رو همین‌جا می‌بینید. روی هرکدوم از لایه‌ها (Art Boards) که کلیک کنید، می‌تونید از پنل سمت راست مدیریتش کنید و تنظیماتش رو عوض کنید.

پنل Assets

پایین منوی ToolBar (سمت چپ پایین) چند تا پنل مختلف دارید. پنل اول Assets هست که در واقع میراث پروژه‌تون حساب می‌شه. هر فایلی که می‌خوایید توی پروژه ازش استفاده کنید رو میارید همین‌جا می‌ذارید تا دم دستتون باشه.

پنل لایه‌ها (Layers / Art Boards)

پنل بعدی هم مربوط به لایه‌هاتونه. یه نکته که ممکنه اولش گیجتون کنه: توی این نرم‌افزار به لایه‌ها می‌گن آرت‌بورد (Art Board). پس اگه جایی این اسم رو دیدید، بدونید منظور همون لایه‌هاتونه.

ساخت Prototype در Adobe XD

اینجا یکی از باحال‌ترین قابلیت‌های نرم‌افزاره. توی بخش Prototype (سمت راست Design) می‌تونید آرت‌بوردهای مختلف رو به هم وصل کنید. مثلاً می‌گید اگه کاربر روی دکمه «درباره ما» کلیک کرد، این آرت‌بورد رو نشون بده.

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

اشتراک‌گذاری و پیش‌نمایش طرح

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

دکمه Share

بالا سمت راست دکمه Share رو دارید. باهاش می‌تونید از لایه‌هاتون ویدیو بگیرید یا طرحتون رو با دوستایی که اکانت ادوبی دارن به اشتراک بذارید. برای گرفتن فیدبک عالیه.

دکمه Play

سمت چپ دکمه Share هم دکمه Play قرار داره. با این یکی می‌تونید به‌صورت زنده پیش‌نمایش طرحی که زدید رو ببینید. یعنی همون لحظه می‌بینید که کارتون روی صفحه چه شکلیه.

جمع‌بندی

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

پیشنهادمون اینه همین الان دانلودش کنید و یه طرح ساده باهاش بزنید. بهترین راه یادگیری همینه که دست به کار بشید. شاد و سربلند باشید. 🙂

تیم تولید محتوا

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