حسین محمودی هستم، طراح محصول و UI/UX، طراح گرافیکی، صفحه آراء.
تصمیم گرفتم مطالبی در زمینه های مختلفی که بهشون علاقه دارم رو در اینجا قرار بدم که از جمله میشه به طراحی رابط کاربری و تجربه کاربری (UI/UX)، طراحی گرافیک و صفحه آرایی اشاره کرد.
در یک سری ویدیوهای دنباله دارم من میخواهم طراحی UI/UX را با استفاده از Adobe XD به شما آموزش دهم.
در قسمت اول این سری من ابتدا نحوه دانلود و نصب ادوبی ایکس دی را به شما آموزش می دهم و سپس به سراغ معرفی قسمت های مختلف Adobe XD می روم و در ادامه نحوه ساخت و کاربرد آرتبورد های مختلف را به شما آموزش میدهم.
سپس بعضی از تنظیمات مختلف در پنل Inspector را معرفی و در نهایت با محوه فعالسازی و استفاده از خطوط راهنمای مختلف و همچنین ستون بندی آرتبورد این قسمت را ادامه می دهم.
در این آموزش من 10 افزونه فوق العاده را برای مرورگرهای کرومیوم یعنی کروم و مایکروسافت اج به که برای همه ی طراحان به خصوص طراحان رابط و تجربه کاربری ( UI/UX ) خیلی کاربردی است را به شما معرفی و نحوه استفاده از آن ها را آموزش می دهم.
در ادامه آموزش قبل می خواهیم اینبار چند تصویر را به پس زمینه یا Background یک عنصر بدهیم. این کار براحتی قابل انجام هست و کافی است شما به جای دادن یک آدرس، دو یا چند آدرس را به عنوان url در پراپرتی background معرفی کنید که در فیلم کاملا متوجه نحوه نوشتن آن می وشوید.
در این قسمت به سراغ اصل Hierarchy یا سلسله مراتب در دیزاین رفتم به شما نشان می دهم که چطور از آن برای اولویت دادن به عناصر داخل صفحه استفاده کنید. از Hierarchy در همه‌ی حیطه های طراحی از قبیل طراحی رابط کاربری UI/UX ، صفحه آرایی ، طراحی گرافیک مثل طراحی پوستر و... بسیار استفاده می شود.
در این آموزش CSS قصد دارم تا به شما چگونگی طراحی یک منوبار افقی با استفاده از CSS را آموزش دهم. ساخت منو در سی اس اس بوسیله لیست ها انجام میگیرد که شما نحوه چیدمان آیتم ها را بصورت افقی تعریف می کنید و در مرحله بعد حتی می توان برای هر آیتم از منو یک زیر منو طراحی کرد.
شما در هر حوزه ای از طراحی که کار کرده باشید، حتما نام "ماسک کردن" را شنیده اید. در این قسمت من از صفر تا صد ماسک کردن در فتوشاپ را به شما آموزش می دهم. ماسک کردن در واقع این امکان رو به ما می‌دهد که قسمتی از تصویر را پنهان یا ظاهر کنیم و این به این معنی است که دیگر شما نیازی به پاک کردن قسمتی از تصویر که در حال حاضر به آن نیاز نیست ندارید. در نتیجه استفاده از ویژگی ماسک در فتوشاپ شما را در استفاده از ابزار پاک کن یا eraser بی نیاز می کند.
در این فیلم من به شما نشان می دهم که چطور طراحی رابط کاربری ( UI/UX ) که انجام داده اید را در اختیار برنامه نویس با کارفرما قرار دهید تا بتوانند کد های آن را بنویسند و یا اینکه بر روی روند طراحی نظارت داشته باشند.
شرکت ادوبی در جدیدترین نسخه فتوشاپ 2021 ویژگی های زیادی با قدرت هوش مصنوعی اضافه کرده و من در این آموزش میخواهم کارکرد این ویژگی های قدرتمند را به شما نشان دهم. شما با استفاده از این ویژگی ها دیگر نیاز نیست زمان زیادی را برای تنظیم و طراحی عکس های خود کنید و فقط با چند کلیک در فتوشاپ 2021 این کار انجام می شود.
در این فیلم من همه ی ویژگی هایی که برای داشتن یک لندینگ پیج با نرخ بالای تبدیل نیاز دارید را به شما آموزش می دهم. Landing Page در واقع صفحاتی هستند که برای یک هدف طراحی می شوند و آن هم تبدیل یوزر به دنبال کننده یا مشتری ماست.
در قسمت اول آموزش جامع ایندیزاین قصد دارم از صفر و بصورت قدم به قدم و با توضیحات کامل صفحه آرایی را به شما آموزش دهم تا بتوانید با این نرم افزار قدرتمند کتاب، مجله، روزنامه خلاقانه و مخصوص بازار کار طراحی کنید.
اگر شما تا به حال از ایندیزاین برای صفحه آرایی استفاده نکرده اید در این آموزش قصد دارم تا از صفر نکات و تکنیک هایی را که برای شروع صفحه آرایی نیاز دارید را در 20 دقیقه به شما آموزش دهم.
در این قسمت از آموزش Premiere Pro من به نحوه ساخت 10 افکت فوق العاده Smooth Transition را آموزش می دهم.
علاوه بر این شما می توانید فایل پریست این 10 افکت فوق العاده را که در پریمیر 2020 آماده شده است به رایگان دانلود و خیلی سریع از آن ها در فیلم های خود استفاده کنید.
این Effect های انتقال نرم یا smooth transition را شما در فیلم های تبلیغاتی یا تیزرهای ویدیویی که در اینستاگرام دیده اید. این افکت ها را شما می‌توانید بین دوتا فیلم یا کلیپ مختلف قرار دهید و براحتی و بدون اینکه مشخص باشد بین آنها جا به جایی صورت گیرد.
از جمله این افکت ها که بسیار هم معروف است افکت Zoom Transition هست که بین دو ترک فیلم بصورت خیلی نرم و با افکت زوم جا به جایی صورت می گیرد.
ر این فیلم من به این می پردازم که وایرفریم چیه و چطور باید در رابط کاربری ( UI/UX ) اون رو طراحی کنیم. در واقع شما قبل از طراحی رابط یا تجربه کاربری و یا اینکه بصورت کلی در طراحی اپلیکیشن و یا وبسایت می آیید و ساختار کلی صفحه یا Layout آن را پیاده سازی می کنید.
به عبارت دیگر در طراحی Wireframe اسکلت طرح را می کشید که متوجه بشوید عناصر در صفحه در کجا قرار می گیرند.
آیا شما هم برای پروژه های مختلف به دنبال آیکان های SVG هستید؟ در این آموزش من دو نرم افزار برای مدیریت و جستجو در آیکان‌های SVG را به شما معرفی میکنم.
شما به وسیله این نرم افزارها علاوه بر اینکه قادر هستید در بین آیکان های SVG جستجو کنید، خیلی سریع می توانید رنگ و یا اندازه آن را تغییر داده و فقط با کشیدن و رها کردن آن در نرم افزار مورد نظر خود از آن استفاده کنید.
اگر فیلم های من را دیده باشید، در اوایل فیلم نام من بصورت انیمیشن نمایش داده می شود. این قیبل از عناوین یا زیرنویس‌های متحرک که به Lower therid معروف هستن در نرم افزارهایی مانند ادوبی افترافکت ساخته می شوند. در اینجا من 5 عنوان متحرک و ساده را آماده کرده ام که شما می توانید بدون نیاز به داشتن دانش خاصی از افترافکت براحتی و فقط با کشیدن آن بر روی فیلم خودتان در پریمیر از آنها استفاده کنید.
در این آموزش CSS قصد دارم تا به شما چگونگی طراحی یک منوبار افقی با استفاده از CSS را آموزش دهم. ساخت منو در سی اس اس بوسیله لیست ها انجام میگیرد که شما نحوه چیدمان آیتم ها را بصورت افقی تعریف می کنید و در مرحله بعد حتی می توان برای هر آیتم از منو یک زیر منو طراحی کرد.
در این آموزش CSS قصد دارم تا به شما چگونگی طراحی یک منوبار افقی با استفاده از CSS را آموزش دهم. ساخت منو در سی اس اس بوسیله لیست ها انجام میگیرد که شما نحوه چیدمان آیتم ها را بصورت افقی تعریف می کنید و در مرحله بعد حتی می توان برای هر آیتم از منو یک زیر منو طراحی کرد.
در این فیلم آموزشی تمام مراحل و مسیرهایی که من برای یادگیری طراحی رابط کاربری (UI/UX) را رفتم به شما نشان دهم تا در مسیر یادگیری طراحی رابط کاربری (و همچنین تجربه کاربری) دچار سردرگمی نشوید.
در این فیلم در ابتدا توانایی هایی که شما باید داشته باشید برای اینکه تبدیل به یک طراح شوید را مطرح می کنیم.
در این آموزش پریمیر پرو من قصد دارم این نرم افزار ادیت فیلم را برای کسانی که هیچ آشنایی با آن ندارند از صفر آموزش دهم و شما در کمتر از 30 دقیقه آموزش دهم.
در این قسمت من به سراغ لیست‌ها در CSS می روم که به دو دسته مرتب و نامرتب تقسیم می شوند و در این فیلم آموزشی به لیست های نامرتب می پردازم. لیست نامرتب یا همان Unordered List با استفاده از تگ ul ساخته می‌شود. همچنین گزینه‌های لیست یا همان List Item با استفاده از تگ li نوشته می‌شوند.
