طراحی سایت متریال با فریم ورک متریال چیست؟ چه مزایایی برای ما دارد؟

    موضوعات: آموزش طراحی سایت وبلاگ 

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

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

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

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

طراحی سایت متریال و اصول کاری آن

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

حال بعضی از بخش های آن را با هم بررسی می کنیم:

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

  • بخش CSS
  • بخش javascript
  • بخش components

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

بخش CSS در فریم ورک متریال

بخش های css برای طراحی از قرار زیر می باشند:

  • color
  • Grid
  • Helpers
  • Media
  • Sass
  • Shadow
  • table
  • typography

color

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

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

Grid

گرید بندی طراحی متریال نیز مانند گرید بندی بوت استرپ است. این گرید بندی 12 تایی می باشد و شما می توانید از کلاس های خاص این گرید بندی استفاده کنید. در این روش نیز کلاس های خاص خود فریم ورک وجود دارد که مانند بوت استرپ می باشد. برای مثال اگر شما در بوت استرپ از col-md-6  استفاده می کردید در این فریم ورک باید از به این صورت کلاس بدهید: col m6

بیشتر بخوانید
کنیبالیزیشن (cannibalization) در سئو چیست و روش رفع همگون خواری

در تصویر زیر نمونه کد های موجود را مشاهده می کنید.

طراحی سایت متریال با فریم ورک متریال چیست؟ چه مزایایی برای ما دارد؟

Helpers

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

Media

در بخش مدیا کلاس هایی برای ریسپانسیو کردن عکس و ویدئو بیان شده است. در این کلاس ها ویدئو ها و تصاویر برای طراحی موبایل بهینه می شوند. البته در این کلاس های یه کلاس جالب به نام circle  دیده می شود. در این کلاس تصویر شما به صورت دایره ای تغییر شمایل میدهد.

Sass

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

Shadow

کلاس جالبی که در طراحی متریال دیده می شود، کلاس z-depth می باشد. شما به راحتی با این کلاس می توانید به باکس خود سایه بدهید. این درجه بندی بین 1 تا 5 می باشد. یعنی شما برای این که سایه ی ملایمی بزنید می توانید z-depth-1 استفاده کنید یا سایه ی بیشتری را در طراحی با کد z-depth-5 استفاده نمایید.

طراحی متریال- سایه

 

 

tableطراحی متریال- گریدبندی

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

در شکل مقابل این قابلیت را می بینید.

 

typography

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

 

 

بخش جاوا اسکریپت فریم ورک متریال

بخش جاوا اسکریپت متریال از بخش های زیر تشکیل شده است.

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

Collapsible

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

طراحی سایت متریال با فریم ورک متریال چیست؟ چه مزایایی برای ما دارد؟

Dialogs

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

برای این کار نمونه کد زیر در سایت سازنده وجود دارد:

  <a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>

آنچه شما با این کد خواهید دید به صورت زیر خواهد بود:

طراحی سایت متریال با فریم ورک متریال چیست؟ چه مزایایی برای ما دارد؟

 

Media

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

Parallax

قابلیت پارالکس نیز جز قابلیت هایی است که از همان ابتدا در این فریم ورک قرار گرفته است.

بخش های دیگر جاوا اسکریپت را خودتان با تماشا کردن نمونه ها می توانید تفاوت و روش کار آن را به خوبی بفهمید.

بخش components

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

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

این بخش ها را در آینده به صورت مفصل بررسی خواهیم کرد. با ایران وبر همراه باشید.

موضوعات مرتبط: , , , , , , ,
به این مقاله امتیاز دهید!
نظر شما

اشتراک در شبکه های اجتماعی
آخرین مقالات و ویدئو ها
چرا لوگو شیائومی تغییر کرد؟ | حقایق لوگو 300 هزار دلاری شیائومی

شرکتها و برندها بر اساس ایده های بازاریابیِ تیم مارکتینگ خود تصمیم به ریدیزاین لوگو میگیرند. این تغییر یا تغییرات ممکن گاهی چشمگیر و اساسی باشد، گاهی هم ریز و به دور از چشم. در هر صورت هدف و انگیزه ای در پس آن نهفته است و هیچ برندی از سر بیکاری دست به این حرکت کمابیش ریسکی نمیزند. در سال 2021 خبری جنجالی از تغییر لوگو شیائومی منتشر شد. همه به سراغ موتورهای جستجو رفتند تا ببینند این تغییری که حرفش را میزنند چگونه و به چه دلیل بوده است! این همان چیزی است که ما در این مقاله به آن میپردازیم. برند شیائومی شیائومی در آوریل 2010 به عنوان یک شرکت سفت‌افزار سفارشی برای دستگاه‌های اندرویدی توسط لی […]

نگهداری وب سایت چیست و چه هزینه هایی دارد؟

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

یک وبسایت خوب چگونه است وساختار آن چه ویژگی هایی دارد؟

نحوه ظاهر آنلاین برند یا کسب و کار شما مهمتر از همیشه است. و در حالی که وب سایت شما باید ظاهر خود را با محتوای بصری با کیفیت حفظ کند، 31 درصد از مصرف کنندگان نیز معتقدند که یک تجربه کاربری جذاب باید در اولویت باشد. هنگامی که به تنهایی یک وب سایت ایجاد می کنید، ایجاد یک تجربه کاربری تأثیرگذار اغلب به توجه به جزئیات ناشناخته مانند ساختار وب سایت شما بستگی دارد. در این مقاله، ساختار وب‌سایت را تعریف می‌کنیم، نحوه ساخت آن را از طریق دید UX یا تجربه کاربری توضیح می‌دهیم و در مورد محبوب‌ترین مدل‌هایی که امروزه در طراحی وب‌سایت و قالب‌های وب‌سایت استفاده می‌شوند، صحبت می‌کنیم. ساختار وب سایت چیست؟ ساختار وب سایت […]

لوگو اچ پی | آیا لوگو hp خلاقانه است؟

HP نام جدید هیولت پاکارد (Hewlett-Packard)، شرکت فناوری اطلاعات آمریکا است که در سال 1939 تأسیس شد. این شرکت بیشتر به دلیل تولید رایانه و لوازم جانبی شناخته شده است، اما در همان ابتدای تاریخ خود، روی نرم افزار و خدمات محاسباتی برای تجارت و خدمات متمرکز بود. شما حتما یا لپتاپ اچ پی را داشته اید یا پرینتر این برند را در خانه یا محل کارتان! داستان لوگو این برند و تغییراتش را در این مقاله بخوانید. تاریخچه لوگو hp مونوگرام نمادین “HP” روی یک دایره، از زمان معرفی اولین لوگو در سال 1939، همیشه بخشی از هویت بصری شرکت بوده است. اگرچه در طول سال ها رنگ، خطوط و همه چیز این نماد کمال یافت. اولین نماد شرکت […]

نرخ پرش چیست (Bounce Rate) و چرا اهمیت دارد؟

نرخ پرش یکی از مهم ترین معیارها در طراحی وب است – بنابراین مطمئن شوید که می دانید چگونه آن را اندازه گیری کرده و بر آن تأثیر بگذارید. هنگامی که یک وب سایت ایجاد می کنید، یک فروشگاه آنلاین راه اندازی می کنید یا در یک تیم بازاریابی حضور دارید، جذب بازدیدکننده به سایت شما اغلب اولین قدم است. مدت زمانی که یک بازدیدکننده به آن نزدیک می شود می تواند به شما بگوید که محتوای شما چقدر جذاب است – یا نیست. نرخ پرش معیاری است که این مورد را مشخص می کند. در ادامه به بررسی بخش های مختلف تاثیر گذار بر روی نرخ پرش خواهیم پرداخت. معنی نرخ پرش یا بونس ریت چیست؟ نرخ پرش یا […]

با ما تماس بگیرید!
021-91018852
آدرس
تهران- بلوار ایت الله کاشانی - خیابان کیهان - کیهان دوم - پلاک 23 - واحد 4