آموزش طراحی‌وب با استفاده از Adobe xd

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

 

Adobe XD چیست؟

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

 

 

طراحی واسط کاربری و طراحی تجربه کاربری

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

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

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

 

 

شروع کار با Adobe XD

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

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

 

کاربرد ابزارهای Adobe XD در طراحی‌وب

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

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

 

کاربرد ابزار Artboard

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

ابزار Artboard بعد از ابزار text در نوار سمت چپ قرار داده شده است. با کلیک کردن روی این ابزار نوار سمت راست صفحه تغییر می‌کند، و انواع سایز‌های موجود در برنامه Adobe XD را به شما نمایش می‌دهد، از جمله سایز‌‌های تلفن همراه، تبلت، صفحه نمایش کامپیوتر و سایز‌های اختصاصی نمایش را به شما نمایش می‌دهد. با کلیک کردن روی یک سایز مدنظر فضای جدیدی برای فعالیت شما باز می‌شود.

 

ایجاد سایز دلخواه

سایز‌هایی که در برنامه Adobe XD به شما ارائه می‌شود مناسب برای کسانی است که می‌خواهند وب‌سایت طراحی کنند. اگر از برنامه Adobe XD برای طراحی لوگو و بنر استفاده می‌کنید، قطعا سایز مورد نظر خود را نمی‌توانید مشاهده کنید و باید آن را ایجاد کنید. ایجاد کردن سایز مورد نظر بسیار ساده است، تنها کافی است روی فضای جدیدی که با استفاده از ابزار Artboard ایجاد کرده‌اید کلیک کنید. مشاهده می‌کنید با کلیک کردن روی فضای ایجاد شده قسمت transform در سمت راست فعال می‌شود، حالا با استفاده از width  و height در این قسمت فضای مورد نظر خود را ایجاد کنید.

 

ایجاد کردن اشکال مختلف در Adobe XD

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

 

 

تفاوت Adobe Photoshop و Adobe XD

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

 

شباهت Adobe Photoshop  و Adobe XD

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

امیدوارم این جلسه از آموزش برای شما مفید بوده باشد. در صورت وجود هرگونه سوال در خدمت شما عزیزان هستیم.
نظر شما شاید برای شما هزینه ای نداشته باشد ولی باعث انرژی ما می‌شود.
 

قسمت اول

 

 

قسمت دوم