آموزش طراحی وب با فریمورک materialize

به دنبال ابزاری هستید که به راحتی و جذابیت هر چه تمام به طراحی و کدنویسی بپردازید؟ پیشنهاد مجموعه‌ی کدیاد استفاده از فریم ورک متریالایز است. این مجموعه تشکیل شده از رابط‌های کاربری به کمک   CSS و HTML و JavaScript می‌باشد. با ما همراه باشید تا در ادامه شما را بیشتر با این فریم ورک آشنا کنیم.

قیمت: 99,000 تومان 59,400 تومان

X
08 : 49 : 60
38 جلسه
3 فصل
2 سال پشتیبانی

آموزش طراحی وب با فریمورک materialize

به دنبال ابزاری هستید که به راحتی و جذابیت هر چه تمام به طراحی و کدنویسی بپردازید؟ پیشنهاد مجموعه‌ی کدیاد استفاده از فریم ورک متریالایز است. این مجموعه تشکیل شده از رابط‌های کاربری به کمک   CSS و HTML و JavaScript می‌باشد. با ما همراه باشید تا در ادامه شما را بیشتر با این فریم ورک آشنا کنیم.

 

Material Design یا متریالایز چیست؟

سبکی جدید در طراحی است که گوگل در یکی از کنفرانس‌های خبری خودش در سال 2014 آن را معرفی کرد. یکم دقیق‌تر بشویم Material Design بیش از هر سیستمی به انیمیشن‌ها اهمیت می‌دهد و عمق و سایه‌ها برای آلمان‌های طراحی شده در این پروژه بسیار مهم است. شاید بتوان گفت ورژن بروز شده‌ی طراحی تخت باشد اما با جلوه‌ای خیلی زیباتر. با انیمیشن‌ها و ترنزیشن‌های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی ما الهام گرفته از مرکب و کاغذ است. ماتیاس دوارت یکی از طراحان مشهور جهان و معاون طراحی گوگل می‌گوید همان گونه که اجسام در دنیای واقعی قابل حس کردن هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید به همین فیس منتقل شود.

 

طراحی با متریالایز

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

 

 

Material Design یا Bootstrap ؟

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

 

هدف از طراحی هرکدام

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

 

بوت‌استرپ توسعه‌ یافته‌تر از متریالایز

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

 

سازماندهی صفحات

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

نحوه طراحی

 

نحوه‌ی طراحی هر کدام

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

 

اصول متریالایز

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

 

باید طراحی جذاب داشته باشیم

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

طراحی توپر

انتخاب رنگ‌های جذاب

تایپوگرافی در مقیاس بزرگ

فضای سفید عمدی

به کمک متریالایز حرکت معنی دار ایجاد کنید.

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

 

  UI  و  UX  منسجمی ایجاد کنید.  

Ui   در واقع همان رابط کاربری است و Ux  به معنای تجربه‌ی کاربری یا میزان رضایت کاربر از عملکرد سایت و اپلیکیشن می‌باشد. شما به عنوان یک برنامه‌نویس حرفه‌ای برای کسب رضایت کاربر باید سایت و اپلیکیشنی داشته باشد که UI و UX شما در دستگاه‌هایی با اندازه صفحات مختلف ثابت و منسجم باقی بماند. کاربران با سیستم عامل‌های متفاوتی از سایت و اپلیکیشن شما بازدید می‌کنند یکی از راه‌های رسیدن به هدفی که مطرح شد این است که به کمک این فریم ورک طراحی شما به گونه‌ای صورت بگیرد که بدون هیچ بهم ریختگی  قالب اصلی سایت و اپلیکیشن برای کاربر حفظ شود. با استفاده از متریال دیزاین می‌توانید تجربه‌ای کاربر پسند و خوب در تمام دستگاه‌های موجود داشته باشید. و جالب است بگویم که UX تاثیر بسیار زیادی در سئو سایت شما خواهد داشت.

 

 

مزایای متریالایز:

  •  UI  یکپارچه و ساده

 

  • متریالایز اصول و اهداف ثابت را برای طراحان فراهم می‌کند.

 

  • با ایجاد محور Z در عمق طراحی سه بعدی را امکان‌پذیر می‌کند.

 

  • طراحی‌ها روی صفحه قابل حرکت‌اند. در نتیجه به خوبی می‌توان اتفاقات روی صفحه را به کاربر نمایش داد.

 

  •  قابلیت Responsive  يا واکنش‌گرایی صحیح را برای سایت و اپلیکشن فراهم می‌کند.

 

  •  با تمام مرورگرها سازگاری مناسب دارد.

 

  • در متریال دیزاین به راحتی می‌توان از قالب‌های آماده استفاده کرد.

 

  • با دادن حرکت و طراحی‌های مناسب به کمک متریالایز توجه و تمرکز کاربر نسبت به محتوا بیشتر جلب می‌شود.

 

  • به دلیل سبک‌‌تر شدن و کاهش استفاده از عکس این فریم ورک از بازدهي و سرعت بالاتری برخوردار است.

 

  • طراحان سایت در هر یک از مراحل می‌توانند از ویژگی‌های این پلتفرم بهره ببرند. چه زمانی که صرفا به عنوان یک منبع از آن استفاده می‌کنند و چه حتی زمانی که کل اساس کارشان را بر مبنای متریال دیزان جلو می‌برند.

 

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

 

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

 

معایب متریال دیزاین:

  • المان‌هایی مانند دکمه‌های عملکرد شناور تا حدود می‌توانند اضافه و بدون کاربرد باشند.

 

  • متاسفانه طرح‌های ارائه شده به کمک این پلتفرم  فقط برای دستگاه‌های Android قابلیت پشتیبانی دارد.

 

  • همراهی زیادی با Google دارد و فضای کمتری برای مارک تجاری دارد.

 

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

 

  • متریالایز طراح را قدم به قدم برای ارائه‌ی یک کار حرفه‌ای راهنمایی می‌کند. متاسفانه این امر  از خلاقیت و آزادی طراح می‌کاهد.

 

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

 

  • سایت به کمک دستورالعمل‌هایی طراحی (مانند رابط های رنگارنگ، استفاده گسترده از نمادها و انیمیشن‌ها) بسیار جلوه‌ی زیبایی خواهد داشت. اما باید در نظر بگیریم که با مسائلی مثل کندی وب همراه هستیم.

 

در پایان

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

 

سرفصل های دوره

مقدمات و آشنایی اولیه با materialize
  • آماده سازی و افزودن نیازهای پروژه

  • سیستم grid

  • آشنایی با کلاسهای materialize - استفاده از git

  • ساخت navbar

  • ساخت قالب موبایلی مدیریت ساختمان
  • پروژه اول (استایل دهی sidenav)

  • پروژه ( تب بندی آیتم ها)

  • پروژه اول (منوی دسترسی سریع موبایل)

  • پروژه اول ( جاوااسکریپت در منوی دسترسی سریع)

    منتشرشده 00:13:00
  • پروژه اول (animate style برای منو و gradiant background برای داشبورد)

    منتشرشده 00:12:00
  • پروژه اول (آشنایی با svg و ساخت progressbar)

    منتشرشده 00:10:00
  • پروژه اول (حالت animate برای progressbar)

    منتشرشده 00:12:00
  • پروژه اول (ساخت فرم ثبت همسایه جدید)

    منتشرشده 00:15:00
  • پروژه اول (شروع ساخت صفحه مدیریت همسایگان)

    منتشرشده 00:10:00
  • پروژه اول (responsive table )

    منتشرشده 00:11:00
  • پروژه اول (فرم ثبت هزینه ها - autocomplete)

    منتشرشده 00:12:00
  • پروژه اول (پایان - collapsible items)

    منتشرشده 00:14:00
  • جمع بندی پروژه اول و استارت پروژه دوم

  • ساخت قالب پروژه تجاری دکوراسیون
  • نصب گیت روی پروژه دوم و قرار دادن پروژه اول در GitHub

    منتشرشده 00:14:00
  • پروژه دوم (top navbar)

    منتشرشده 00:09:00
  • پروژه دوم (تکمیل navbar و ...)

    منتشرشده 00:16:00
  • پروژه دوم (اسلایدر تصاویر)

    منتشرشده 00:12:44
  • پروژه دوم (تکمیل اسلایدر تصاویر)

    منتشرشده 00:16:08
  • پروژه دوم (منوی دسترسی سریع)

    منتشرشده 00:14:21
  • پروژه دوم (ساخت قسمت گالری)

    منتشرشده 00:16:27
  • پروژه دوم (نمایش ویدئو در پروژه)

    منتشرشده 00:13:01
  • پروژه دوم (ساخت کارد های مقاله)

    منتشرشده 00:13:14
  • پروژه دوم (ساخت قسمت ارتباط با کاربر - صفحات اجتماعی)

    منتشرشده 00:16:44
  • پروژه دوم (تکمیل فوتر و صفحه index )

    منتشرشده 00:15:29
  • پروژه دوم (استارت صفحه سرچ)

    منتشرشده 00:11:47
  • پروژه دوم (صفحه سرچ - 1)

    منتشرشده 00:13:33
  • پروژه دوم (تکمیل صفحه سرچ)

    منتشرشده 00:16:40
  • پروژه دوم (شروع صفحه مقاله)

    منتشرشده 00:20:38
  • پروژه دوم (تکمیل صفحه مقاله)

    منتشرشده 00:12:32
  • پروژه دوم (افزودن قسمت ثبت نظر - toast)

    منتشرشده 00:15:27
  • پروژه دوم (ساخت صفحات ورود و ثبت نام)

    منتشرشده 00:17:20
  • پروژه دوم (ساخت گالری تصاویر)

    منتشرشده 00:12:57
  • پروژه دوم (نکات مهم سئو در طراحی وب)

    منتشرشده 00:17:00
  • پروژه دوم ( تکمیل - متغیر ها در CSS و minify فایل ها)

    منتشرشده 00:13:58
  • پیشنیاز های دوره چه چیزهایی هستند؟

    • این دوره پیشنیازی ندارد

    نظرات دانشجویان

     نادر  راستگو

    نادر راستگو | دانشجوی دوره آموزش طراحی وب با فریمورک materialize

    خیلی متشکرم از توضیحات جامعه شما

     نادر  راستگو

    نادر راستگو | دانشجوی دوره آموزش طراحی وب با فریمورک materialize

    متشکرم از زحمات شما

     نادر  راستگو

    نادر راستگو | دانشجوی دوره آموزش طراحی وب با فریمورک materialize

    بسیار ممنون از زحمات شما

    AliTitan 0508

    AliTitan 0508 | دانشجوی دوره آموزش طراحی وب با فریمورک materialize

    مرسی برای دوره عالی تون و ممنون بخاطر گفتن نکات seo

    امیرعلی ‌رضائی

    امیرعلی ‌رضائی | دانشجوی دوره آموزش طراحی وب با فریمورک materialize

    سلام. بسیار دوره خوبی هست مخصوصا این افکت ها که نشان میدهد حداقل یکبار ویدیو رو نگاه میکنید، استاد یه خواهشی دارم اون هم اینکه این پروژه اول رو تو حالت دسکتاپ هم درست کنیم چون میشود به PWA تبدیلش کرد.

    مدرس دوره

    قاسم بساکی


    عاشق برنامه نویسی

    عاشق یادگیری

    عاشق تدریس و انتقال علم