آموزش Adobe Xd Webdesign: طراحی وب سایت های حرفه ای از ابتدا - UI UX Design
Learn Adobe Xd Webdesign: Design professional websites from scratch - UI UX Design
آیا Adobe Xd در طراحی وب واقعا بهتر از فتوشاپ است؟
مشکل
مشکل طراحی وب سایت در ابزارهای طراحی قدیمی (مانند Photoshop یا Illustrator) این است که این ابزارها ندارند. ویژگی‌هایی که طراحان UX/UI واقعاً برای کمک به طراحی وب‌سایت‌ها به آن‌ها نیاز دارند. مانند کار با پالت های رنگی، راهنمای سبک فونت و عناصر تکراری. یا مواردی مانند به اشتراک گذاری کار خود از طریق نمونه های اولیه. این ابزارهای نرم افزاری قدیمی نیز بردار نیستند، که می تواند مشکلی برای توسعه باشد.
راه حل چیست؟
کار با Adobe Xd! زیرا Adobe Xd با در نظر گرفتن طراحان UI/UX ساخته شده است. این به این معنی است که Adobe همه چیز را انجام داده است تا مطمئن شود که می توانید کار خود را بدون محدودیت طراحی و به اشتراک بگذارید. تنها کاری که باید انجام دهید این است که چند چیز را از قبل آماده کنید و سپس از عناصر خود در کل وب سایت دوباره استفاده کنید.
اگر هیچ عنصر طراحی نداشته باشم چه می شود؟
در این دوره آموزشی برای افرادی ساخته شد که فقط Adobe Xd را روی کامپیوتر خود دارند. من فایل های طراحی خود را در اختیار شما قرار می دهم تا تمرین کنید و وب سایت هایی را به شما می دهم که می توانید فونت ها، رنگ ها و تصاویر را به صورت رایگان (برای پروژه بعدی خود) دریافت کنید.
فرصت
یادگیری طراحی وب سایت ها فرا می رسد. با فرصت های عظیم شما می توانید وب سایت خود را طراحی کنید (مانند من در این دوره) یا طراحی وب سایت برای افراد یا مشاغل دیگر. این باعث می شود ایجاد وب سایت به یک مهارت بسیار سودآور تبدیل شود. شرکت ها حاضرند هزاران دلار برای هر وب سایت هزینه کنند.
چرا این دوره متفاوت است؟
بیشتر دوره های Adobe Xd در این پلتفرم بر روی طراحی اپلیکیشن تمرکز دارند. این جالب و بسیار فانتزی است، اما من رویکرد واقع بینانه تری را دوست دارم. زیرا بر اساس تجربه من، یک طراح UI/UX اولین پروژه طراحی رابط کاربری خود را برای یک راه اندازی جالب شروع نمی کند. ما با طراحی وب سایت برای وب و موبایل شروع می کنیم. به همین دلیل است که من معتقدم این دوره با اکثر دوره های مربوط به Adobe Xd بسیار متفاوت است. باز هم، طراحی اپلیکیشن شیک است، اما من دوست دارم به شما مهارتی بدهم که در واقع می توانید از هفته آینده استفاده کنید (زیرا احتمالاً قبلاً چند نفر را می شناسید که برای وب سایت فعلی خود نیاز به طراحی مجدد دارند، اینطور نیست؟).
من در این بازی جدید نیستم
در چند سال گذشته بیش از 30000 مشترک در YouTube جمع آوری کرده ام و بیش از 4 میلیون بازدید ایجاد کرده ام. من خیلی ممنون و خوشحال بودم که مردم محتوای من را دوست دارند. به همین دلیل است که اکنون دوره های ویدیویی آنلاین ایجاد می کنم.
گام به گام
در این دوره ما عجله نداریم و بدون یادگیری اصول اولیه یک وب سایت سریع و سریع طراحی می کنیم. به اندازه کافی در اینترنت وجود دارد. من قصد دارم یک پروژه واقعی را به شما نشان دهم که در آن از ابتدا شروع می کنم و به آرامی 4 صفحه در Adobe XD ایجاد می کنم. این به این معنی است که من تمام مراحل را به شما نشان خواهم داد، از اولین عنوان تا آخرین دکمه.
هنگامی که در دوره پیشرفت کردیم (و شما تکنیک های مشابه را بارها و بارها مشاهده کردید) به آرامی سرعت را افزایش خواهیم داد، بنابراین می توانیم با تماشای این دوره مهارت های شما را افزایش دهیم.
مراقب باشید
نمی‌دانم چه مدت این دوره را زنده نگه خواهم داشت، زیرا من نیز روی پلتفرم دوره خودم کار می‌کنم.
نظرات دیگران
"من ویدیوهای شما را تماشا می کنم و هر بار به خاطر کار/طراحی شما الهام می گیرم." - سام
"کانال شما به من انگیزه داد تا خودم طراحی کنم." - جوردی
"من نمی توانم تا ویدیوی بعدی صبر کنم. من 4 سال است که شما را دنبال می کنم و یاد گرفته ام که چگونه به این روش طراحی کنم :)" - طبقه
دریافت Adobe Xd در اینجا:
امیدوارم شما را در داخل دوره ببینم!
---------------------------------------------
مرحله بعدی را بردارید: به دوره آموزشی وردپرس من در مورد نحوه تبدیل این طرح به یک وب سایت واقعی فقط با استفاده از ابزارهای رایگان بپیوندید.
پروژه
در این دوره ما روی یک پروژه کامل طراحی وب 4 صفحه ای کار خواهیم کرد. 4 صفحه برای وب و 1 صفحه برای طراحی موبایل طراحی خواهیم کرد.
- من تمام تصاویر، فونت ها، تصاویر و آیکون هایی که برای تکمیل این پروژه استفاده کردم را در اختیار شما قرار می دهم.
- همچنین وب سایت های مختلفی را برای دریافت تصاویر، نمادها، فونت های در اختیار شما قرار خواهم داد رایگان !
همه فایل‌ها را می‌توانید در اینجا پیدا کنید:
دریافت Adobe Xd در اینجا:
اگر سؤالی دارید، به من بگویید!
درود بر رینو.
درس ها Lessons
-
طراحی ریسپانسیو موبایل - قسمت 2 Responsive mobile design - Part 2
-
صفحه نمونه کارها The portfolio page
-
تابلوهای هنری. همه ی چیزهایی که لازم است بدانی. Artboards. All you need to know.
-
منوی چسبنده در بالا The Sticky Menu on top
-
بخش Call to Action با شیب Call to action section with gradients
-
پاورقی به عنوان نماد قابل استفاده مجدد Footer as a reusable symbol
-
طراحی ریسپانسیو موبایل - قسمت 1 Responsive mobile design - Part 1
-
در حال آماده سازی اولین آرت بورد و گرید ما Preparing our first artboard & grid
-
پنل بسیار مفید Assets The very useful Assets panel
-
بخش گواهی با ابزار قلم Testimonial section with the pen tool
-
بخش Client Logo با ابزار Repeat Grid Client Logo section with the Repeat Grid tool
-
آماده سازی فونت های ما Preparing our fonts
-
صفحه تماس با نمادهای برداری Contact page with vector icons
-
تقسیم کننده شکل موج The wave shape divider
-
آموزش Adobe Xd Webdesign: طراحی وب سایت های حرفه ای از ابتدا - UI UX Design Learn Adobe Xd Webdesign: Design professional websites from scratch - UI UX Design
-
یک وب سایت مسافرتی با تاری پس زمینه A travel website with background blur
-
از کجا می توان جدیدترین قالب های از پیش ساخته شده را دریافت کرد Where to get the latest pre-made templates
-
به دوره خوش آمدید! انتظار چه چیزی Welcome to the course! What to expect
-
بخش آمار با کادرهای خالی Statistics section with empty boxes
-
دانلودهای شما در اینجا هستند (نصب فونت را فراموش نکنید) Here are your downloads (don’t forget to install fonts)
-
ساخت ویدیو و لینک قابل اشتراک گذاری Making a video and shareable link
-
آماده کردن رنگ هایمان Preparing our colours
-
درک لایه ها در Xd Understanding Layers in Xd
-
دریافت فونت‌ها و نمادها و تصاویر و پالت‌های رنگی و متن پرکننده رایگان Getting free fonts & icons & images & color pallets & filler text
-
تبریک میگم + بیشتر میخوای؟ Congratulations + Do you want more?
-
درباره صفحه قسمت 3: بخش پرسش و پاسخ About page part 3: FAQ section
-
تصویر و منوی هدر بزرگ The big header image & menu
-
مبانی رابط کاربری Adobe Adobe Interface Basics
-
صادرات تابلو و المنت Artboard and Element exporting
-
اصول تراز Alignment fundamentals
-
تصاویر شناور با سایه ها Floating images with shadows
-
ایجاد یک نمونه اولیه برای وب و موبایل Creating a prototype for web & mobile
-
درباره صفحه قسمت 2: برگه ها + گالری About page part 2: Tabs + Gallery
-
درباره صفحه قسمت 1: یک شروع سریع About page part 1: A Quick Start
-
وب سایت کتابفروشی با ماسک A book store website with masks
-
انتخاب، جابجایی و تکثیر Selecting, moving and duplicating
https://donyad.com/d/4368
Rino De Boer
طراح و سازنده محتوا
سلام، من رینو هستم و بیش از 10 سال است که در زمینه طراحی فعالیت دارم. من با طراحی به عنوان یک سرگرمی شروع کردم، اما به سرعت متوجه شدم که این برای من بیش از یک سرگرمی است. بنابراین به همین دلیل به مدرسه طراحی رفتم و در دانشگاه علوم کاربردی روتردام (هلند) در رشته طراحی ارتباطات و چند رسانه ای تحصیل کردم.
من آنقدر به آن علاقه داشتم که اولین کانال YouTube خود را (به زبان هلندی) در مورد طراحی راه اندازی کردم. من این کانال را به حدود 30.000 مشترک افزایش دادم و پس از آن اولین کانال انگلیسی خود را ایجاد کردم که در آن در حال حاضر بیش از 150.000 مشترک دارم. در مجموع من بیش از 10 میلیون کل بازدید را تنها در YouTube ایجاد کردم.
به دلیل این کانال یوتیوب، تأثیرگذاران و برندهای بزرگ به من مراجعه کردند، و من این فرصت را پیدا کردم که شرکت خود را راه اندازی کنم و برای برندهای مانند: Coca Cola، ICI Paris XL، کار کنم. RTL و بسیاری از اینفلوئنسرهای بزرگ (با حدود 100 هزار تا 1 میلیون دنبال کننده).
به دلیل این پروژه‌ها و ویدیوهای YouTube، یاد گرفتم که چگونه به روش کارآمد ایجاد کنم، و مهمتر از همه: در سناریوهای زندگی واقعی . من همه چیز را خودم ایجاد می کنم و به الگوها متکی نیستم، که به من این آزادی را می دهد که هر آنچه را که می خواهم ایجاد کنم. اگر این روش را دوست دارید، پس فکر می کنم دوره های من را دوست خواهید داشت.
امیدوارم دوره های من را دوست داشته باشید!
نمایش نظرات