22019286مشاوره رایگان طراحی سایت
Material Design چیست؟

Material Design چیست؟

معرفی Material Design و کاربرد آن

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

معرفی material design

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

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

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

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

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

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

در اوایل جولای 2015 (همین سه هفته پیش) گوگل فریم ورک جدید خود را، با نام Material Design Lite منتشر کرد. فریم ورک متریال دیزاین دارای قابلیت نصب آسان، بارگذاری راحت و حجم 25 کیلو بایت (به صورت فشرده) می باشد. متریال دیزاین شامل کتابخانه ای از کامپوننت ها و تم ها در قالب کد های HTML , CSS و Js می باشد.

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

نمونه قالب پنل مدیریت با Material Design

نمونه قالب پنل مدیریت با Material Design

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

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

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

آیا تجربه استفاده از Bootstrap و طراحی سایت با آن را داشته اید؟ پس حتما از Material Design نیز لذت خواهید برد. ورود چنین فریم ورک هایی موجب میشود تا این خلا بزرگ میان طراحی و کدنویسی از میان برود.

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

Review: 4.79 - "Material Design چیست؟" by , written on 27/07/2015

Material Design که در ابتدا تنها یک راهنمای مفهومی در جهت ایجاد ساختاری استاندارد در طراحی وب بود ولی با معرفی نسخه Lite…

پرسش و پاسخ تکمیلی با عضویت در سایت پاسخ به نظرات خود را به راحتی دنبال کنید
1 Star2 Stars3 Stars4 Stars5 Stars
19
  • Pepperoni

    سلام

    بله همونطور که فرمودید بعضی مواقع کد نویسی های پیشرفته و سطح بالا زیر طراحی نادرست باقی میمانند ولی این هم باید در نظر بگیریم که از Bootstrap لذت میبریم باید به فکر مشکل یکی شدن سایت با ظاهر سایر سایت ها هم باشیم و Material Design هم از این قاعده مستثنی!!!

    و در یکی از خطوط هم جای کلمه “تند” اشتباه شده
    “همگی به گونه ای طراحی شده تند که توجه بیننده را به خود جلب می کنند.”

    با آرزوی موفقیت و سر افرازی 🙂

    09/05/2017پاسخ...
    • Websima

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

      11/05/2017پاسخ...
  • محمد رستمی

    سلام.مطالبتون مثل همیشه خواندنی و جالب است.امیدوارم همین‌طور خوب بمانید.
    موفق و پیروز باشید

    26/02/2017پاسخ...
    • Websima

      سلام، ممنون از شما دوست عزیز، با حمایت شما همینطور خواهد بود.

      27/02/2017پاسخ...
  • حسن دهدار

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

    06/11/2016پاسخ...
    • Websima

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

      07/11/2016پاسخ...
  • حسن دهدار

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

    13/10/2016پاسخ...
    • Websima

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

      15/10/2016پاسخ...
  • محمد

    وبسیما، اصلاً خراب این جمله شدم: افراد بسیاری هستند که قدرت تحلیل و کدنویسی بسیار بالایی دارند ولی نتیجه کار آنها معمولا در زیر یک طراحی زشت و ناکارآمد پنهان می ماند.
    یعنی زدی تو خال. یکیش خودم!
    راستی یه فکری به حال این کپچای کامنت بکنید. سوتی زیاد داره! یه دکمه رفرش بزارید براش
    امروز نوشته بود: …+ 7 = 3 !!!! جوابش میشه -4! عجب!

    24/05/2016پاسخ...
    • Websima

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

      24/05/2016پاسخ...
  • zahra

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

    23/05/2016پاسخ...
    • Websima

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

      24/05/2016پاسخ...
  • هادی اسماعیلی

    سلام و خسته نباشید.
    عالی هستی.

    09/03/2016پاسخ...
  • امين خادميان

    واقعا عاليه
    اما مثل هميشه تحريم براي كاربران ايراني …

    31/07/2015پاسخ...
    • Websima

      بله متاسفانه، ایشالا که بزودی برطرف بشه

      01/08/2015پاسخ...
  • Mohammad

    ممنووون. مفید بود

    30/07/2015پاسخ...
    • Websima

      خواهش میکنم، موفق باشید

      01/08/2015پاسخ...
  • علی کنکوری

    محصولات گوگل واقعا بی نظیر هستند یعنی هیچ محصولی از گوگل بد نبوده
    البته با استثناء گوگل پلاس
    🙂

    28/07/2015پاسخ...
    • Websima

      باهاتو موافقم، بخصوص روی گوگل پلاس!

      28/07/2015پاسخ...
ورود رمز عبور خود را فراموش کرده اید؟
ارسال قبلا ثبت نام کردید؟
ثبت نام قبلا ثبت نام کردید؟