خط مستقیم: ۰۹۲۱۴۸۴۹۰۱۷

طراحی سایت متریال با فریم ورک متریال - طراحی وب سایت متریال

طراحی سایت متریالReviewed by احسان اسکندری on May 6Rating: 4.5طراحی سایت متریال

متریال – Material یکی از جدید ترین فرم ورک های کدنویسی و طراحی سایت متریال است که توسط شرکت گوگل طراحی، توسعه و عرضه داده شده است، این فرم از چهار بخش اصلی تشکیل شده است که به شرح زیر می باشد:

  • CSS – سی اس اس
  • Components – اجزاء
  • JavaScript – جاوا اسکریپت و جی کوئری
  • Mobile – اجزاء ریپانسیو کننده (Grid Columns)

طراحی سایت متریال چیست

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

جالب است بدانید که این فریم ورک تنها توسط ۴ نفر از اعضای گوگل طراحی شده است که تمامی آن ها نیز آسیایی هستند و هیچ تیم و پشتیبانی برزگی پشت آن ها نیست! یکی دیگر نکات جالب این فریم ورک این است که خود گوگل نیز در بعضی از وب سایت های خود مانند: Google Trends از این فریم ورک استفاده کرده است و سایت خود را به صورت طراحی سایت متریال ساخته است. برای ورود به وب سایت رسمی متریال می توانید بر روی این لینک کلیک نمایید.

تفاوت طراحی سایت متریال با طراحی سایت بوت استرپ

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

 اجزا، هسته و ابزار های طراحی سایت متریال

همانطور که گفتیم هسته ی این ورک از چهار اجزای: CSS – Components – JavaScript و Mobile تشکیل شده است که در ادامه تمامی آن ها را به صورت مجزا معرفی خواهیم کرد تا در طراحی سایت meterial خود از آن ها استفاده نمایید.

CSS – سی اس اس – متریال

هسته ی اصلی این فرم را مانند بوت استریپ CSS تشکیل می دهد. هسته ی سی اس اس متریال به ما اجزا می دهد تا در هنگام طراحی وب سایت متریال از امکانات از پیش تعریف شده و آماده ی متریال که شامل ۹ اجزاء است استفاده کنیم.

Color – رنگ ها: ابزار اول

اولین ابزاری که این فریم ورک به ما ارائه می دهید ابزاری به اسم Meterial Color است، وظیفه ی این ابزار معرفی رنگ های استاندارد و فلت به ما است کد در هنگام طراحی سایت متریال از آن استفاده نماییم.

Grid – چیدمان: ابزار دوم

اگر کمی با بوت استرپ – Bootstrap کار کرده باشید می دانید که Grid چیست و به چه دردی می خورد، اما ما باز توضیح آن را برای خوانندگان تازه کار بازگو می کنیم:

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

Helpers – کمکی: ابزار سوم

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

Media – رسانه: ابزار چهارم

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

Sass  – متغیر ها: ابزار پنجم

وظیفه اصلی متغیر ها در طراحی سایت متریال مشخص سازی سریع رنگ ها است: به مثال زیر دقت کنید:
$primary-color: color("materialize-red", "lighten-2") !default;

Shadow – سایه: ابزار ششم

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

Table – میز: ابزار هفتم

Table یا جداول یکی از پر کاربرد ترین المان های مورد استفاده در طراحی سایت متریال است. جدول پیش تعریف شده ی متریال جدولی است بسیار زیبا، فلت و سبک که کارایی بسیاری در هنگان طراحی سایت متریال دارد.

Typography – نوشتار: ابزار هشتم

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

Components – اجزاء – متریال

Components ها و اجزاء متریال را می توان پر استفاده ترین بخش در طراحی سایت متریال دانست، کامپونت ها به اجزای از پیش ساخته شده ی Meterial می گویند که کار طراحی سایت را برای طراحان سایت آسان تر می کند و آن ها از نوشتن کدهای اضافی و تکراری و به نوعی ساخت دوباره ی چرخ منع می کند.

استفاده از اجزاء کامپونت ها بسیار آسان است و تنها لازم است تا کد مورد نظر خود را در طراحی سایت متریال درج نمایید. ما در لیست زیر اجزایی از کامپونت ها که می توانید در طراحی سایت متریال استفاده نمایید را معرفی می کنیم:

  • Badges – مدالها
  • Buttons – دکمه ها
  • Breadcrumbs – نشانگر صفحات
  • Cards – بلاک ها
  • Chips – دکمه های کلیکی
  • Collections – مجموعه ها
  • Footer – فوتر
  • Forms – فرم ها
  • Icons – آیکو ها
  • Navbar – منو
  • Pagination – صفحه بندی

JavaScript – جاوا اسکریپت و جی کوئری متریال

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

  • Collapsible
  • Dialogs
  • Media
  • Modals
  • Parallax
  • Pushpin
  • ScrollFire
  • Scrollspy
  • SideNav
  • Tabs
  • Transitions
  • Waves

طراحی وب سایت متریال

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *