آشنایی با سبک طراحی سایت متریال (Material Design)

طراحی متریال (Material Design)

آیا شما با کاربردهای این سبک آشنایی دارید ؟

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

material design
امروزه شرکت های زیادی به دنبال این هستند ، که از همه لحاظ ، مشتریان را برای خود نگه دارند و در همه زمینه ها برای آن ها امکانات عرضه می نمایند .
شرکت هایی مثل گوگل که سالیان سال ، در تمام مسیر طراحی سایت و پروژه های مربوط به آن ، با کاربران خود همکاری می نمایند .
گوگل توانسته اپلیکیشن ها یا منابعی را در اختیار کاربران قرار دهد تا آنها بتوانند پروژه های طراحی سایت و برنامه نویسی خود را با درصد بالایی از موفقیت به اتمام برسانند ، حالا چه در ازای پرداخت پول و یا رایگان .
این ابر شرکت ، اکنون دست به کار مقوله طراحی قالب شده است و قالب هایی با نام متریال دیزاین طراحی و تولید می نماید و با قدرت وارد این عرصه شده تا کاربران گوگل بتوانند از قالب های اختصاصی خود این شرکت ، به راحتی در جهت رفع نیاز طراحی سایت و برنامه نویسی  استفاده نمایند.
پس از اینکه فریم ورک بوت استرپ توانست ، در دنیای فناوری اطلاعات و طراحی سایت قدم های محکمی بردارد و توجه همگان از جمله طراحان سایت را به قابلیت ها و استانداردهای این قالب محبوب که توسط شرکت توییتر معرفی و توسعه پیدا کرده بود ، جلب نمایند .
سلطان وب و فناوری اطلاعات به این فکر افتاد که چرا  تیم گوگل به دنبال طراحی قالب های کاربردی نرود و مخاطبان خود را بیش از پیش به خود وابسته ننماید.
پس نوبت به گوگل رسید .
طراحی متریال (Material Design)  در ابتدا فقط یک راهنمایی مفهومی برای ایجاد و بهره برداری از ساختاری استاندارد در طراحی وب بود .
ولی در زمان کوتاه توانست با یک قدم بزرگ که به جلو برداشت ، قالب های حرفه ای  Material Design Lite  را معرفی نماید ، که یک روش عملی برای برنامه نویسان و طراحان وب بود و کاربران به راحتی می توانند بهترین و به روزترین سایت ها را برای خود و دیگران طراحی و ارائه نمایند.

آیا شما با کاربردهای این سبک آشنایی دارید؟

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

  1. همگام سازی با اصول طراحی کلاسیک
  2. دارا بودن امکانات ، ابزارهای جدید و مدرن
  3. برخورداری از ایده هایی خلاقانه

تمام نیازهای کاربردی یک طراح سایت را پاسخ دهند .

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

هدف از طراحی و معرفی Material Design چیست؟

گوگل با این فرآیند به دنبال چه چیزی می باشد؟

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

هدف از طراحی و معرفی Material Design چیست؟

متریال دیزاین راه حلی مناسب برای تولید وب سایت های مدرن

پس از توضیحاتی که در بالا برای آشنایی شما عزیزان با متریال دیزاین آورده شد و آشنایی شما با این نمونه از قالب ها ،  اگر هنوز سوال مهمی مثل : چرا از طراحی متریال (Material Design) گوگل استفاده کنیم؟ در ذهنتان وجود دارد .

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

به عنوان مثال عناصراصلی وب سایت که شامل:

  • تایپوگرافی
  • فضا های خالی و فاصله ها
  • انتخاب آگاهانه ی رنگ
  • نمایش متن در سایز مناسب
  • المان های گرافیکی زیبا

هستند باید به صورتی باشند که توجه بیننده را به خود جلب نمایند و  این هماهنگی موجب می شود که:

  • تمرکز چشم کاربر روی مفاهیم بیشتر شود.
  • و باعث خلق تصاویری گرافیکی چشم نواز می شوند.

متریال دیزاین راه حلی مناسب برای تولید وب سایت های مدرن

فریم ورک جدید با نام  Material Design Lite

شرکت گوگل در اوایل جولای 2015 توانسته فریم ورک جدید خود به نام Material Design Lite منتشر کند .

این فریم ورک از Material Design  دارای امکاناتی همچون :

  • قابلیت نصب آسان
  • بارگذاری راحت
  • شامل کتابخانه ای از کامپوننت ها و تم ها در قالب کد های HTML , CSS و Js

که همگی شامل حجم 25 کیلو بایت (به صورت فشرده) می باشند.

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

در زیر تصویری از نمونه یک قالب طراحی شده با متریال دیزاین برای شما قرار داده شده است.
فریم ورک جدید با نام  Material Design Lite

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

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

  • کلیدهای تولتیپ
  • صفحه بندی ریسپانسیو

و … اشاره کرد .

توسعه کنندگان و طراحان این قالب ها  وعده داده اند که درصدد هستند این قالب ها را توسعه داده و برای آنها امکانات جذاب جدیدی در نظر بگیرند و  به آن اضافه نمایند.

چگونه متریال دیزاین (Material Design) را دریافت نماییم؟

چگونه متریال دیزاین (Material Design) را دریافت نماییم؟

دو روش برای دانلود فریم ورک متریال دیزاین و منابع وابسته به آن برای شما ذکر می نماییم که شما عزیزان بنا به دلخواه خود از هر روش که راحت تر هستید می توانید بهره ببرید :

  • می توانید به سایت GitHub مراجعه نمایید و از آنجا به دانلود این برنامه بپردازید .
  • مستقیما به سایت Material Design Lite رفته و آخرین نسخه را دانلود و دریافت نمایید.

مرورگر هایی مانند اپرا، فایر فاکس، گوگل کروم و … به آسانی طراحی متریال (Material Design) را پشتیبانی می کنند ، ولی این قالب ها در اینترنت اکسپلورر ورژن 9 کمی با مشکل مواجه شده اند .

آیا تا به حال از Bootstrap برای طراحی سایت استفاده کرده اید و تجربه کار با آن را دارید؟

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

طراحی چنین فریم ورک هایی در عرصه طراحی وب باعث شده که خلا بزرگ میان طراحی و کدنویسی از میان برداشته شود و افراد زیادی که توانایی تحلیل و کدنویسی خوبی دارند و در پایان کار دچار مشکل طراحی می شوند ، بتوانند با بکارگیری طراحی متریال (Material Design) راه حل مناسبی برای رفع این مشکل بیابند .

2 دیدگاه برای “آشنایی با سبک طراحی سایت متریال (Material Design)

    • عرفان سراج گفته:

      سلام خدمت شما دوست گرامی، از منابع زیر می‌توانید قالب ها یا رنگ های متریال را مشاهده کنید:
      www.design.google
      https://material.io/collections/color

پاسخی بگذارید

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

ثبت شماره تماس

شماره همراه خود را بصورت کامل وارد نمایید

مثال : 09120000000

درخواست فارسی سازی قالب

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