آموزش طراحی وب با فریمورک متریالایز materialize | صفر تا صد

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

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

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

چطور می‌توانم به فایل‌های مفید این دوره دست پیدا کنم؟

می‌توانید از آدرس ریپازیتوری مختص این دوره استفاده کنید:

• https://github.com/qasemB/materialize-project1
• https://github.com/qasemB/materialize-project2

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

فریم ورک‌های متعددی ساخته شده‌اند تا با استفاده از آن‌ها بتوانیم طراحی‌های بسیار زیبایی مبتنی بر 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 را تهیه کنید و در کمترین زمان تبدیل به طراح قالب حرفه‌ای بشوید.