معرفی و مقایسه ۱۰ فریمورک محبوب طراحی وب

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

یک توسعه دهنده می تواند بر اساس پارامترهای مختلفی از قبیل میزان محبوبیت ،امکانات، سادگی ، پشتیبانی و … فریمورک مورد نظر خود را انتخاب کند. ما در این مقاله ۱۰ فریمورک طراحی وب را با بررسی نقاط قوت و ضعفشان بررسی خواهیم کرد.

چه عواملی را در انتخاب فریمورک طراحی وب مد نظر قرار دهیم؟

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

طراحی واکنش گرا (Responsive): از مهمترین مواردی که تقریبا در تمام قراردادهای طراحی وب مورد درخواست کارفرماست، سازگاری صحیح پروژه با انواع دستگاه ها مانند موبایل،تبلت، کامپیوتر و… می باشد بنابراین از فریمورکی استفاده کنید که قابلیت واکنش گرایی را در خود جای داده باشد.

پشتیبانی از پیش پردازنده های CSS: اگر در پروژه های خود از پیش پردازنده های CSS مانند LESS یا Sass استفاده می کنید حتما مطمئن شوید که فریمورک مورد نظر شما از آن پشتیبانی کند.

شخصی سازی: کارفرماهای بسیار کمی را پیدا خواهید کرد که به المان های پیشفرض یک فریمورک قانع باشند. (به جرات می گویم در ایران هیچ کارفرمایی با این مشخصات پیدا نمی کنید!) فریمورک مد نظر شما باید به سادگی قابلیت شخصی سازی ظاهر برای استفاده در پروژه های مختلف را داشته باشد.

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

 

معرفی و مقایسه ۱۰ فریمورک برتر طراحی وب

۱-Bootstrap:

فکرش را بکنید بوت استرپ در این لیست نباشد! بوت استرپ در سال ۲۰۱۱ توسط توییتر معرفی شد و به سرعت به محبوب ترین فریمورک طراحی Frontend تبدیل شد و اکنون هم پراستفاده ترین فریمورک متن باز در جهان است. در ایران هم محبوبیت این فریمورک بسیار بالاست و بیشتر کارفرمایان تماسل به توسعه وبسایتشان با Bootstrap دارند.

هسته بوت استرپ از Html , CSS و JS تشکیل شده است. بوت استرپ از طراحی واکنش گرا به خوبی پشتیبانی می کند و به شما این امکان را می دهد که طراحی خود را همزمان برای سایزهای مختلف انجام دهید. Bootstrap دنیایی از امکانات و قابلیت های مختلف است و تقریبا تمام امکانات و ویژگی هایی که برای طراحی یک وبسایت نیازمندید را در خود جای داده است (مانند انواع منوها ، فرم ها،کروژل،کارت ها،دکمه ها و…). شما می توانید تنها با ترکیب کردن المان های مختلف بوت استرپ قالب مورد نظر خود را بدون حتی یک خط کد اضافی طراحی کنید.

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

نقاط قوت Bootstrap:

• پشتیبانی از طراحی رسپانسیو
• طیف وسیع المان ها
• محبوبیت میان توسعه دهندگان در ایران و جهان
• مستندات جامع و کامل
• بروزرسانی مداوم

نقاط ضعف Bootstrap:

• حجم نسبتا بالای فایل ها
• تعداد فراوان کلاس Html که در بسیاری از پروژه ها هیچ استفاده ای ندارند.
• جامع بودن بوت استرپ می تواند یادگیری آن را کمی سخت کند.

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

۲-Semanti UI:

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

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

نقاط قوت Semantic-UI:

• نامگذاری با مفهوم کلاس های Css که باعث می شود حتی مبتدی ها هم بتوانند به سادگی آن را فرا بگیرند.
• برای استفاده از هر کامپوننت نیازی به بارگذاری کل فایلهای فریمورک نمی باشد.هر کامپوننت دارای فال Css و JS مختص به خود می باشد.
• شخصی سازی آسان
• سازگاری با سایر فریمورک ها مانند React

نقاط ضعف Semantic-UI:

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

۳-Foundation:

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

این فریمورکِ مملو از امکانات و قابلیت، از ویژگی شتابدهی GPU استفاده می کند که باعث می شود با استفاده از منابع سخت افزار گرافیک دستگاه، لود وبسایت ها سریعتر،بهتر و با کیفیت تر انجام شود. فاندیشن از Sass پشتیبانی می کند و قابلیت مهم دیگری که دارد این است که توانایی استفاده از تگ های Html را به صورتی دارد که به توسعه دهنده این امکان را می دهد که دو نوع صفحه وب تولید کنند.صفحات سبک برای بارگذاری در دستگاه هایی مانند موبایل و صفحات سنگین تر برای دستگاه هایی با ابعاد بزرگتر.

نقاط قوت Foundation:

• استایل پذیری فوق العاده و انعطاف در طراحی
• استفاده از واحد REM به جای پیکسل که باعث می شود نیاز به تعریف سایز برای هر دستگاه نداشته باشید.

نقاط ضعف Foundation:

• حجم زیاد فایل های مربوط به فریمورک
• پیچیدگی بسیار و یادگیری مشکل

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

۴-Materialize:

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

نقاط قوت Materialize:

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

نقاط ضعف Materialize:

• حجم بالای فایل ها
• عدم پشتیبانی از Flexbox

۵-Material UI:

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

نقاط قوت Material UI:

• بهترین و ساده ترین راه برای فراگیری Material Design
• شخصی سازی و توسعه پذیری آسان

نقاط ضعف Material UI:

• برای طراحی یک پروژه از صفر مناسب نیست.
• برای استفاده از آن نیاز به درک ابتدایی از مباحث React دارید.

۶- Pure CSS:

فریمورک Pure توسط تیم توسعه یاهو ساخته شده است. همان طور که از نام آن پیداست (Pure در زبان انگلیسی یعنی خالص) ، این فریمورک تنها از کلاسها و صفات CSS ساخته شده است و از هیچ گونه پلاگین جاوا اسکریپت یا جی کوئری استفاده نمی کند. از Pure می توان برای استفاده از المان های واکنش گرا مانند دکمه ها، فرم ها و… استفاده کرد و انتخاب خوبی برای واکنش گرا کردن پروژه برای دستگاه های مختلف می باشد اما به دلیل عدم پشتیبانی از JS قابلیت های شخصی سازی چندانی ندارد و نمی توان به صورت گسترده از آن استفاده کرد.

هنگامی که از ورژن Min (مینیفای شده) این فریمورک استفاده کنید،حجم آن کمتر از ۵ کیلوبایت خواهد بود و این یعنی بهترین انتخاب برای لود سریع صفحات در پایینترین سرعت های اینترنت!

نقاط قوت Pure:

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

نقاط ضعف Pure:

• عدم پشتیبانی از جاوااسکریپت از قابلیت های شخصی سازی آن می کاهد.

۷-Skeleton:

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

Skeleton با یک سیستم گرید ۱۲ ستونی به خوبی از طراحی Responsive پیروی می کند همچنین دارای طیف زیادی از المان های ضروری Responsive مانند فرم ها،دکمه ها،جدول و… می باشد.

نقاط قوت Skeleton:

• حجم بسیار پایین
• کارایی فراوان برای پروژه های کوچک

نقاط ضعف Skeleton:

• تعداد محدود المان های موجود

۸-UI Kit:

UI Kit یک فریمورک ماژولار طراحی وب است که به دلایل مختلفی از جمله پشتیبانی از پیش پردازنده هایی مانند Sass و LESS در میان سایر فریمورک ها سربلند ایستاده است.این فریمورک بیش از ۳۰ کامپوننت کاملا رسپانسیو را در خود جای داده است.در این فریمورک حتی مواردی همچون منوهای کناری،نمودارها،بج ها و مودال ها را می توان دید.

نقاط قوت UI Kit:

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

نقاط ضعف UI Kit:

• به دلیل جدید بودن این فریمورک منابع زیادی برای آن موجود نیست

۹-Milligram:

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

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

نقاط قوت Milligram:

• استفاده از خاصیت Flexbox برای گرید بندی
• سایز بسیار کم (حدود ۲ کیلوبایت)

نقاط ضعف Milligram:

• تعداد محدود کامپوننت ها و المان های موجود
• به دلیل بودن تنها منابع محدودی برای آن وجود دارد.

۱۰-Susy:

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

نقاط قوت:

• انعطاف فوق العاده برای تولید گریدهای پیچیده
• انجام اتوماتیک محاسبات گرید بندی

نقاط ضعف:

• تمام نیازهای طراحی یک سایت را پوشش نمی دهد.
• هیچ گرید از پیش تعریف شده ای ندارد.

محبوبیت فریمورک های طراحی وب:

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

Bootstrap : 134400

Material UI: 48500

Semantic UI : 45800

Materialize : 36000

Foundation : 28200

Pure : 20000

Skeleton : 16800

UI Kit : 14600

Milligram : 8200

Susy : 3950

امیدواریم که این مقاله از مرجع آموزش UI و UX فارسی از سری مقالات آموزش تجربه کاربری (UX) و آموزش طراحی رابط کاربری (UI) برای شما مفید واقع شده باشد.