یکی از مهمترین بخش های طراحی سایت در عصر حاضر استفاده از فریم ورک متناسب با کار می باشد. فریم ورک در صورت کلی به بسته ی از پیش ایجاد شده گفته می شود که برای طراحی از کد های خاصی استفاده کرده و حالت کاربری یکسانی را برای ما ایجاد می کند. فریم ورک های معروفی در حال حاضر وجود دارند. از جمله معروف ترین آن ها بوت استرپ می باشد. طراحی سایت به صورت بوت استرپ قابلیت های زیادی به سایت اضافه می کتد. مهمترین ویژگی فریم ورک های طراحی به صورت موبایل فرست و یا ریسپانسیو می باشد. با استفاده از فریم ورک ها به راحتی می توان طراحی ریسپانسیو را انجام داد. اما با یک سرچ ، می توانید فریم ورک های مختلفی را پیدا نمایید که هر کدام ویژگی های خود را دارند. یکی از طراحی هایی که جدیدا در برنامه های موبایل پیاده سازی می شود، طراحی متریال گوگل می باشد. این طراحی حالا پا به طراحی سایت گذاشته است و فریم ورک طراحی متریال سایت ها نیز منتشر شده است. برای بررسی فریم ورک متریال و طراحی سایت متریال با ایران وبر همراه باشید.
یکی از مهمترین بخش ها در گام اول طراحی مشخص کردن هدف است. شما با مشخص کردن هدف از طراحی به راحتی می توانید فریم ورک مورد نظر خود را انتخاب کنید. در این بین بسیاری بین فریم ورک های مختلف قیاس هایی را انجام می دهند اما در حالت در صورتی که هر فریم ورکی را برای طراحی سایت بشناسید و بتوانید بهترین استفاده را از آن انجام دهید، آن فریم ورک بهترین فریم ورک برای شما خواهد بود.
البته نباید بعضی موارد و تفاوت های بین فریم ورک ها را نادیده گرفت. یکی از بخش های متفاوت سرعت بارگذاری است که بعضی از فریم ورک ها زمان بیشتری برای لود سایت نیاز دارند.
فریم ورک تازه معرفی شده ی متریال، توسط گوگل طراحی شده است. این فریم ورک با طراحی فلت اجزا مختلف ظاهری مدرن را به سایت می بخشد.
طراحی سایت متریال و اصول کاری آن
هر فریم ورک بر اصولی پایه گذاری می شود و اصول کاری سایت با فریم ورک متریال و یک طراحی متریال، استفاد از گرافیک فلت می باشد. اما باید در یک کلام گفت که به غیر از این حالت تفاوت خاصی با بوت استرپ نمی توان دید. البته شاید بگویید که کد نویسی های خاص متفاوتی دارد ! البته که این موضوع وجود دارد اما در حالت کلی و در یک جمع بندی می توان گفت که طراحی سایت متریال فقط به المان های متریال آن شناخته می شود.
حال بعضی از بخش های آن را با هم بررسی می کنیم:
در هر فریم ورک طراحی سایت بخش های متفاوتی وجود دارد. از جمله مهمتری بخش ها می توان به موارد زیر اشاره کرد:
بخش CSS
بخش javascript
بخش components
این سه بخش از مهمتری بخش های هر فریم ورک هستند. برای بررسی فریم ورک متریال نیز این سه بخش را به ترتیب بررسی می کنیم.
بخش CSS در فریم ورک متریال
بخش های css برای طراحی از قرار زیر می باشند:
color
Grid
Helpers
Media
Sass
Shadow
table
typography
color
شما در طراحی با فریم ورک متریال می توانید از رنگ های از پیش تعیین شده ای استفاده کنید. در این طراحی با انتخاب یک رنگ از رنگ های این فریم ورک و وارد کردن کلاس ان ها در هر قسمت می توانید آن رنگ را مشاهده کنید.
شما می توانید برای استفاده از رنگ های استاندارد طراحی فلت از این رنگ ها استفاده کنید.
Grid
گرید بندی طراحی متریال نیز مانند گرید بندی بوت استرپ است. این گرید بندی 12 تایی می باشد و شما می توانید از کلاس های خاص این گرید بندی استفاده کنید. در این روش نیز کلاس های خاص خود فریم ورک وجود دارد که مانند بوت استرپ می باشد. برای مثال اگر شما در بوت استرپ از col-md-6 استفاده می کردید در این فریم ورک باید از به این صورت کلاس بدهید: col m6
در تصویر زیر نمونه کد های موجود را مشاهده می کنید.
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 – صفحه بندی
این بخش ها را در آینده به صورت مفصل بررسی خواهیم کرد. با ایران وبر همراه باشید.
طراحان اپلیکیشن موبایل همیشه به دنبال ابزار مناسبی هستند که طراحی هایشان را برای تجربه کاربر نهایی ارزشمند کند. توسعه یک اپلیکیشن موبایل ارزشمند به مهارت، خلاقیت و البته ابزار مناسب نیاز دارد. چه یک حرفه ای طراحی اپلیکیشن باشید و چه یک مبتدی در دنیای طراحی اپلیکیشن موبایل، این مقاله عالی میتواند تاثیر زیادی بر مهارت های شما بگذارد. قرار است در این مقاله با معرفی 5 ابزار برتر طراحی اپلیکیشن به بررسی آنها بپردازیم. طراحی اپلیکیشن چیست؟ طراحی اپلیکیشن ظاهر و احساس یک اپلیکیشن موبایل است. این شامل تمام عناصر بصری و عناصر تعاملی است که بر عملکرد برنامه تأثیر می گذارد. طراحی اپلیکیشن موبایل دو مفهوم UI و UX را ترکیب می کند. رابط کاربری (UI) ظاهر […]
عکسی که در بالا مشاهده میکنید، لوگوی جدید نوکیا است! این لوگو نه تنها از یک برند نمادین، بلکه استراتژی جدید شرکت را نیز میرساند. درست یک روز قبل از MWC2023، نوکیا با تغییر لوگوی نمادین و شناخته شده خود، جهان را شوکه کرد. لوگوی نوکیا با گذشت زمان تغییر کرده است، که طبیعی است زیرا تغییر تنها ثابت در این جهان است. با این حال، لوگوی جدید از لوگوی کلاسیک، اثبات شده و شناخته شده نوکیا فاصله می گیرد و صفحه جدیدی در تاریخ نوکیا باز می شود. لوگوی جدید، که ما را به یاد برخی از لوگوهای مدرن می اندازد، نشان دهنده تمام انرژی است که نوکیا برای تغییری که بیش از 10 سال پیش آغاز شد، به […]
نیازهای افراد با گذشت زمان تغییر می کند. پس از مدتی استفاده از یک اپلیکیشن، اغلب ارزش بیشتری از آن می خواهند. اگر اپلیکیشن شما نیاز داشته باشد که با نشان دادن تفاوت آن با سایرین، از رقبا متمایز شود، کل زیرساخت فناوری شما رشد خواهد کرد. فرآیند طراحی اپلیکیشن تجاری همه قبول دارند که تعامل کاربر بیشتر است، تعاملات موفقیت آمیزتر است، و تجربه کاربری (UX) با رابط کاربری عالی اپلیکیشن موبایل (UI) بهتر است. به این فکر کنید که چگونه ویژگی‌های برنامه خاص ممکن است بر ادراک و احساسات کاربران در هنگام استفاده از برنامه تأثیر بگذارد، هنگام انتخاب ویژگی‌هایی که باید در آن گنجانده شود. ارائه دهندگان خدمات طراحی UX/UI همیشه به عناصری که بر انتخاب کاربران […]
لوگو ورساچه و تصویر مدویا در آن شاید یکی از معروف ترین لوگوهای دنیای مد باشد. در چهل و پنج سال گذشته، خود برند ورساچه یکی از شناخته شده ترین برندها در دنیای مد لوکس بوده است. برندی که لباس هایش اغلب به فرش قرمز می رسد و توسط بسیاری از افراد مشهور پوشیده می شود. همه می دانیم که این شرکت مد لباس های شگفت انگیز طراحی و عرضه می کند، اما چقدر درباره لوگوی ورساچه می دانیم؟ برند در سال 1978 تأسیس شد، بنابراین سال‌های زیادی از فعالیت آن می‌گذرد. نکته جالب این است که لوگو آن توانسته مد روز باقی بماند و هنوز هم مرتبط با برند باشد. لوگو واقعاً با اولین مجموعه ای که توسط این […]
شرکتها و برندها بر اساس ایده های بازاریابیِ تیم مارکتینگ خود تصمیم به ریدیزاین لوگو میگیرند. این تغییر یا تغییرات ممکن گاهی چشمگیر و اساسی باشد، گاهی هم ریز و به دور از چشم. در هر صورت هدف و انگیزه ای در پس آن نهفته است و هیچ برندی از سر بیکاری دست به این حرکت کمابیش ریسکی نمیزند. در سال 2021 خبری جنجالی از تغییر لوگو شیائومی منتشر شد. همه به سراغ موتورهای جستجو رفتند تا ببینند این تغییری که حرفش را میزنند چگونه و به چه دلیل بوده است! این همان چیزی است که ما در این مقاله به آن میپردازیم. برند شیائومی شیائومی در آوریل 2010 به عنوان یک شرکت سفت‌افزار سفارشی برای دستگاه‌های اندرویدی توسط لی […]
