حسین محمودی

حسین محمودی

سلام! من حسین محمودی هستم. دنیای من حول دو محور می‌چرخد: طراحی محصولات دیجیتال (UI/UX) و کشف پتانسیل‌های هوش مصنوعی و تکنولوژی‌های جدید. اینجا جایی است که دانش و تجربیات سال‌ها کارم را در قالب مقالات و آموزش‌های کاربردی با شما به اشتراک می‌گذارم. از معرفی جدیدترین ابزارهای AI تا تکنیک‌های دیزاین و بهره‌وری.

آموزش جامع CSS: چطور حالت‌های نمایش یک شی در صفحه را کنترل کنیم؟

maxresdefault-1679018

از ویژگی display برای تعیین نوع ساختار یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع ساختار هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.

در CSS دو نوع چارچوب اصلی وجود دارند: inline و block. اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت.

در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.

آموزش جامع CSS: چطور از رنگ‌ها بدرستی استفاده کنیم؟

maxresdefault-3902671

از پراپرتی color برای تعریف رنگ ها در سی اس اس استفاده می شود. رنگ ها می توانند یک کلمه کلیدی باشند, یا دسته ای از اعداد و یا آنها را می توان از طریق فرمت های متفاوت که در ادامه آمده اند معرفی کرد.
می توان از یک رنگ با استفاده از کلمه کلیدی تعریف شده برای آن در سی اس اس استفاده کرد.به عنوان نمونه کلمات کلیدی balck, white و غیره… در رنگهای RGB که کوتاه شده کلمات قرمز, سبز و آبی می باشد.

آموزش جامع CSS: چطور هر چیزی را در وسط صفحه قرار دهیم؟

maxresdefault-8668861

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

آموزش InDesign – چطور در ایندیزاین نمودار و چارت طراحی کنیم؟

آموزش InDesign - چطور در ایندیزاین نمودار و چارت طراحی کنیم؟

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

نمونه‌کار: رابط کاربری وبسایت سالن خدمات زیبایی XBeauty

نمونه‌کار: رابط کاربری وبسایت سالن خدمات زیبایی XBeauty

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

در همان ابتدای سایت خدمات ویژه سایت بصورت اسلایدر درآمده و نمایش داده میشود و بلافاصله همه ی خدمات این سالن آرایشی در دید کاربر قرار میگیرد. بعد از این مرحله به معرفی سالن زیبایی XBeauty پرداخته می شود و پس آن نمونه کارهای این سالن زیبایی به کاربر ارائه می شود.

نظرات مشتریان در مرحله بعد نمایش داده می شود و پس از آن یک آفر یا پیشنهاد ویژه به کاربر ارائه می شود تا وارد مرحله سفارش خدمات زیبایی شود و اگر از این مرحله عبور کرد در انتها قسمت رزرو نوبت قرار داده شد که بتواند یک نوبت بصورت آنلاین رزرو کند.

آموزش InDesign – چطور در ایندیزاین فرمول های پیچیده بنویسیم؟

آموزش InDesign - چطور در ایندیزاین فرمول های پیچیده بنویسیم؟

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

آموزش جامع CSS: چطور حالت نمایش لینک ها را تغییر دهیم؟

آموزش جامع CSS: چطور حالت نمایش لینک ها را تغییر دهیم؟

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

آموزش فتوشاپ: چطور به چشم جزئیات اضافه کنیم؟

آموزش فتوشاپ: چطور به چشم جزئیات اضافه کنیم؟

در این فیلم آموزشی فتوشاپ از اَستریکس آرتس میخواهم به شما یاد بدهم که چطور به یک چشم جزئیات اضافه کنید تا آن زیباتر و موثر تر جلوه کند. اگر شما یک دوربین حرفه ای و به همراه یک لنز…

آموزش فتوشاپ: چطور پشت سوژه را در فتوشاپ تار کنیم؟

آموزش فتوشاپ: چطور پشت سوژه را در فتوشاپ تار کنیم؟

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