یکی از مهمترین مواردی که یک توسعه دهنده رابط کاربری (همان توسعه دهندگان Frontend) باید مدنظر قرار دهد انتخاب فریمورک طراحی وب است. انتخاب صحیح فریمورک به دلیل امکانات بسیار زیادی که در اختیار توسعه دهنده قرار می دهد، نه تنها باعث صرفه جویی شدید در وقت خواهد شد، بلکه در فازهای بعدی توسعه نیز دست شما را باز خواهد گذاشت. بعضا مشاهده می شود حتی کارفرما یکی از شروط قرارداد طراحی را استفاده از فریمورکی خاص مطرح می کند بنابراین انتخاب فریمورک صحیح برای یک توسعه دهنده Frontend امری ضروریست که امروز در مرجع UI و UX فارسی آمده ایم که با بررسی نقاط قوت و ضعف فریمورک های مختلف طراحی وب شما را در انتخاب درست فریمورک طراحیتان یاری کنیم.
یک توسعه دهنده می تواند بر اساس پارامترهای مختلفی از قبیل میزان محبوبیت ،امکانات، سادگی ، پشتیبانی و … فریمورک مورد نظر خود را انتخاب کند. ما در این مقاله 10 فریمورک طراحی وب را با بررسی نقاط قوت و ضعفشان بررسی خواهیم کرد.
چه عواملی را در انتخاب فریمورک طراحی وب مد نظر قرار دهیم؟
سطح مهارت: مهم ترین موردی را که میبایست قبل از انتخاب فریمورک مد نظر قرار دهید این است که در چه سطح مهارتی قرار دارید؟ اگر تازه کار هستید نیازمند فریمورکی خواهید بود که گزینه های متعددی را به صورت پیشفرض در خود جای داده و همه چیز را برای شما از قبل آماده کرده است (مانند Bootstrap) ولی اگر حرفه ای هستید ممکن است به دنبال فریمورکی باشید که تنها گزینه های ضروری را در خود جای داده باشد و بیشتر بخواهید با مهارت خودتان برخی موارد را برای هر پروژه تعریف کنید.
طراحی واکنش گرا (Responsive): از مهمترین مواردی که تقریبا در تمام قراردادهای طراحی وب مورد درخواست کارفرماست، سازگاری صحیح پروژه با انواع دستگاه ها مانند موبایل،تبلت، کامپیوتر و… می باشد بنابراین از فریمورکی استفاده کنید که قابلیت واکنش گرایی را در خود جای داده باشد.
پشتیبانی از پیش پردازنده های CSS: اگر در پروژه های خود از پیش پردازنده های CSS مانند LESS یا Sass استفاده می کنید حتما مطمئن شوید که فریمورک مورد نظر شما از آن پشتیبانی کند.
شخصی سازی: کارفرماهای بسیار کمی را پیدا خواهید کرد که به المان های پیشفرض یک فریمورک قانع باشند. (به جرات می گویم در ایران هیچ کارفرمایی با این مشخصات پیدا نمی کنید!) فریمورک مد نظر شما باید به سادگی قابلیت شخصی سازی ظاهر برای استفاده در پروژه های مختلف را داشته باشد.
پشتیبانی: تا دلتان بخواهد فریمورک Frontend وجود دارد! اما بسیاری از این فریمورک ها تاریخ آخرین آپدیتشان با تاریخ تولدشان یکی است! با پیشرفت سریعی که دنیای تکنولوژی در جامعه امروز دارد، حتما این مورد را به عنوان یکی از مهمترین پارامترهای انتخاب فریمورک دلخواهتان انتخاب کنید. فریمورک طراحی وب شما باید دارای داکیومنت قوی ، آپدیت های منظم و پشتیبانی پاسخگو باشد.
معرفی و مقایسه 10 فریمورک برتر طراحی وب
1-Bootstrap:
فکرش را بکنید بوت استرپ در این لیست نباشد! بوت استرپ در سال 2011 توسط توییتر معرفی شد و به سرعت به محبوب ترین فریمورک طراحی Frontend تبدیل شد و اکنون هم پراستفاده ترین فریمورک متن باز در جهان است. در ایران هم محبوبیت این فریمورک بسیار بالاست و بیشتر کارفرمایان تماسل به توسعه وبسایتشان با Bootstrap دارند.
هسته بوت استرپ از Html , CSS و JS تشکیل شده است. بوت استرپ از طراحی واکنش گرا به خوبی پشتیبانی می کند و به شما این امکان را می دهد که طراحی خود را همزمان برای سایزهای مختلف انجام دهید. Bootstrap دنیایی از امکانات و قابلیت های مختلف است و تقریبا تمام امکانات و ویژگی هایی که برای طراحی یک وبسایت نیازمندید را در خود جای داده است (مانند انواع منوها ، فرم ها،کروژل،کارت ها،دکمه ها و…). شما می توانید تنها با ترکیب کردن المان های مختلف بوت استرپ قالب مورد نظر خود را بدون حتی یک خط کد اضافی طراحی کنید.
علاوه بر این ها بوت استرپ از پیش پردازنده Sass نیز پشتیبانی می کند و نقطه قوت دیگر آن آپدیت های منظم این فریمورک می باشد که باعث می شود مرتبا المان ها و کامپوننت های مختلف به آن افزوده شوند و سازگاری خوبی با مرورگرهای مختلف داشته باشد. یادگیری بوت استرپ برای بنده بسیار آسان بود البته توقع من از این فریمورک فقط در حد طراحی رسپانسیو و استفاده از برخی المان ها مانند فرم ها و منو ها بود که انصافا تا زمان نگارش این مقاله هیچ مشکلی با آن نداشته ام. به دلیل وسعت استفاده از این فریمورک توسط توسعه دهندگان مختلف، می توانید با یک جستجوی ساده تقریبا هر المانی را به صورت سازگار با این فریمورک برای دانلود پیدا کنید و در طرح خود استفاده کنید.
نقاط قوت Bootstrap:
2-Semanti UI:
فریمورک سمانتیک از جمله فریمورک های تازه واردی است که در بازار طراحی وب حرف های زیادی برای گفتن دارد. شهرت اصلی این فریمورک به سادگی آن است و سازندگان آن روی این ویژگی فریمورک خود شدیدا مانور می دهند و مدعی هستند که کسی که تنها تجربه اندکی در طراحی وب داشته باشد می تواند به سادگی این فریمورک را فرا بگیرد.
ویژگی دیگری که این فریمورک سازگاری آن با طیف وسیعی از پلاگین های دیگر است که روند توسعه را آسان می کند همچنین این فریمورک سازگاری خوبی با برخی فریمورک های جاوا اسکریپ مانند React دارد.
نقاط قوت Semantic-UI:
فاندیشن توسط یک شرکت طراحی وب به نام Zurb طراحی و منتشر شد. این فریمورک یک فریمورک بسیار با کیفیت و حرفه ای و پیچیده می باشد که در توسعه وبسایت هایی مانند Ebay ، فیسبوک و موزیلا نیز استفاده شده. اگر مبتدی هستید استفاده از این فریمورک را به دلیل پیچیدگی های آن پیشنهاد نمی کنیم.
این فریمورکِ مملو از امکانات و قابلیت، از ویژگی شتابدهی GPU استفاده می کند که باعث می شود با استفاده از منابع سخت افزار گرافیک دستگاه، لود وبسایت ها سریعتر،بهتر و با کیفیت تر انجام شود. فاندیشن از Sass پشتیبانی می کند و قابلیت مهم دیگری که دارد این است که توانایی استفاده از تگ های Html را به صورتی دارد که به توسعه دهنده این امکان را می دهد که دو نوع صفحه وب تولید کنند.صفحات سبک برای بارگذاری در دستگاه هایی مانند موبایل و صفحات سنگین تر برای دستگاه هایی با ابعاد بزرگتر.
نقاط قوت Foundation:
4-Materialize:
متریالایز فریمورک طراحی وبی است که از خصوصیات و ویژگی های Material Design گوگل پیروی می کند. متریالایز طیف وسیعی از کامپوننت ها مانند دکمه ها، فرم ها ، کارت ها و آیکون ها را در خود جای داد است که اتفاقا به نظر من یکی از قابلیت های مهم این فریمورک وجود همین آیکون هاست. متریالایز از سیستم گرید بندی مبتنی بر CSS استفاده می کند که در طراحی رسپانسیو به شما کمک خواهد کرد. همچنین وجود افکت های انیمیشنی، منوهای موبایلی پیشرفته تر، و کامپوننت های فراوان از قابلیت های دیگر این فریمورک طراحی وب هستند.این فریمورک از Sass هم پشتیبانی می کند.
نقاط قوت Materialize:
اگر از عاشقان Material Design گوگل هستید و از آن در طرح های خود استفاده کنید، بهتر است قبل از آن از فریمورک Material UI استفاده کنید چرا که به شما در یادگیری متریال دیزاین کمک خواهد کرد. این کامپوننت تعداد زیادی از المان های متریال دیزاین را در خود جای داده است و از قابلیت CSS in JS استفاده می کند که انعطاف پذیری و شخصی سازی آن را بالا می برد اما واقعیتی که وجود دارد این است که ممکن است تمام نیازهای پروژه شما را پوشش ندهد و ضمنا برای استفاده از آن هم نیاز به درک نسبی از React دارید.
نقاط قوت Material UI:
مقایسه انجام شده بین فریمورک های طراحی وب، بر اساس میزان محبوبیت آن ها نبوده و برای بررسی محبوبیت فریمورک ها تعداد ستاره هی 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
یک توسعه دهنده می تواند بر اساس پارامترهای مختلفی از قبیل میزان محبوبیت ،امکانات، سادگی ، پشتیبانی و … فریمورک مورد نظر خود را انتخاب کند. ما در این مقاله 10 فریمورک طراحی وب را با بررسی نقاط قوت و ضعفشان بررسی خواهیم کرد.
چه عواملی را در انتخاب فریمورک طراحی وب مد نظر قرار دهیم؟
سطح مهارت: مهم ترین موردی را که میبایست قبل از انتخاب فریمورک مد نظر قرار دهید این است که در چه سطح مهارتی قرار دارید؟ اگر تازه کار هستید نیازمند فریمورکی خواهید بود که گزینه های متعددی را به صورت پیشفرض در خود جای داده و همه چیز را برای شما از قبل آماده کرده است (مانند Bootstrap) ولی اگر حرفه ای هستید ممکن است به دنبال فریمورکی باشید که تنها گزینه های ضروری را در خود جای داده باشد و بیشتر بخواهید با مهارت خودتان برخی موارد را برای هر پروژه تعریف کنید.
طراحی واکنش گرا (Responsive): از مهمترین مواردی که تقریبا در تمام قراردادهای طراحی وب مورد درخواست کارفرماست، سازگاری صحیح پروژه با انواع دستگاه ها مانند موبایل،تبلت، کامپیوتر و… می باشد بنابراین از فریمورکی استفاده کنید که قابلیت واکنش گرایی را در خود جای داده باشد.
پشتیبانی از پیش پردازنده های CSS: اگر در پروژه های خود از پیش پردازنده های CSS مانند LESS یا Sass استفاده می کنید حتما مطمئن شوید که فریمورک مورد نظر شما از آن پشتیبانی کند.
شخصی سازی: کارفرماهای بسیار کمی را پیدا خواهید کرد که به المان های پیشفرض یک فریمورک قانع باشند. (به جرات می گویم در ایران هیچ کارفرمایی با این مشخصات پیدا نمی کنید!) فریمورک مد نظر شما باید به سادگی قابلیت شخصی سازی ظاهر برای استفاده در پروژه های مختلف را داشته باشد.
پشتیبانی: تا دلتان بخواهد فریمورک Frontend وجود دارد! اما بسیاری از این فریمورک ها تاریخ آخرین آپدیتشان با تاریخ تولدشان یکی است! با پیشرفت سریعی که دنیای تکنولوژی در جامعه امروز دارد، حتما این مورد را به عنوان یکی از مهمترین پارامترهای انتخاب فریمورک دلخواهتان انتخاب کنید. فریمورک طراحی وب شما باید دارای داکیومنت قوی ، آپدیت های منظم و پشتیبانی پاسخگو باشد.
معرفی و مقایسه 10 فریمورک برتر طراحی وب
1-Bootstrap:
فکرش را بکنید بوت استرپ در این لیست نباشد! بوت استرپ در سال 2011 توسط توییتر معرفی شد و به سرعت به محبوب ترین فریمورک طراحی Frontend تبدیل شد و اکنون هم پراستفاده ترین فریمورک متن باز در جهان است. در ایران هم محبوبیت این فریمورک بسیار بالاست و بیشتر کارفرمایان تماسل به توسعه وبسایتشان با Bootstrap دارند.
هسته بوت استرپ از Html , CSS و JS تشکیل شده است. بوت استرپ از طراحی واکنش گرا به خوبی پشتیبانی می کند و به شما این امکان را می دهد که طراحی خود را همزمان برای سایزهای مختلف انجام دهید. Bootstrap دنیایی از امکانات و قابلیت های مختلف است و تقریبا تمام امکانات و ویژگی هایی که برای طراحی یک وبسایت نیازمندید را در خود جای داده است (مانند انواع منوها ، فرم ها،کروژل،کارت ها،دکمه ها و…). شما می توانید تنها با ترکیب کردن المان های مختلف بوت استرپ قالب مورد نظر خود را بدون حتی یک خط کد اضافی طراحی کنید.
علاوه بر این ها بوت استرپ از پیش پردازنده Sass نیز پشتیبانی می کند و نقطه قوت دیگر آن آپدیت های منظم این فریمورک می باشد که باعث می شود مرتبا المان ها و کامپوننت های مختلف به آن افزوده شوند و سازگاری خوبی با مرورگرهای مختلف داشته باشد. یادگیری بوت استرپ برای بنده بسیار آسان بود البته توقع من از این فریمورک فقط در حد طراحی رسپانسیو و استفاده از برخی المان ها مانند فرم ها و منو ها بود که انصافا تا زمان نگارش این مقاله هیچ مشکلی با آن نداشته ام. به دلیل وسعت استفاده از این فریمورک توسط توسعه دهندگان مختلف، می توانید با یک جستجوی ساده تقریبا هر المانی را به صورت سازگار با این فریمورک برای دانلود پیدا کنید و در طرح خود استفاده کنید.
نقاط قوت Bootstrap:
- پشتیبانی از طراحی رسپانسیو
- طیف وسیع المان ها
- محبوبیت میان توسعه دهندگان در ایران و جهان
- مستندات جامع و کامل
- بروزرسانی مداوم
- حجم نسبتا بالای فایل ها
- تعداد فراوان کلاس Html که در بسیاری از پروژه ها هیچ استفاده ای ندارند.
- جامع بودن بوت استرپ می تواند یادگیری آن را کمی سخت کند.
2-Semanti UI:
فریمورک سمانتیک از جمله فریمورک های تازه واردی است که در بازار طراحی وب حرف های زیادی برای گفتن دارد. شهرت اصلی این فریمورک به سادگی آن است و سازندگان آن روی این ویژگی فریمورک خود شدیدا مانور می دهند و مدعی هستند که کسی که تنها تجربه اندکی در طراحی وب داشته باشد می تواند به سادگی این فریمورک را فرا بگیرد.
ویژگی دیگری که این فریمورک سازگاری آن با طیف وسیعی از پلاگین های دیگر است که روند توسعه را آسان می کند همچنین این فریمورک سازگاری خوبی با برخی فریمورک های جاوا اسکریپ مانند React دارد.
نقاط قوت Semantic-UI:
- نامگذاری با مفهوم کلاس های Css که باعث می شود حتی مبتدی ها هم بتوانند به سادگی آن را فرا بگیرند.
- برای استفاده از هر کامپوننت نیازی به بارگذاری کل فایلهای فریمورک نمی باشد.هر کامپوننت دارای فال Css و JS مختص به خود می باشد.
- شخصی سازی آسان
- سازگاری با سایر فریمورک ها مانند React
- حجم پکیج ها نسبت به بوت استرپ خیلی بالاتر است.
- این فریمورک ممکن است نتواند نیازهای پیچیده طراحان حرفه ای را براورده کند.
فاندیشن توسط یک شرکت طراحی وب به نام Zurb طراحی و منتشر شد. این فریمورک یک فریمورک بسیار با کیفیت و حرفه ای و پیچیده می باشد که در توسعه وبسایت هایی مانند Ebay ، فیسبوک و موزیلا نیز استفاده شده. اگر مبتدی هستید استفاده از این فریمورک را به دلیل پیچیدگی های آن پیشنهاد نمی کنیم.
این فریمورکِ مملو از امکانات و قابلیت، از ویژگی شتابدهی GPU استفاده می کند که باعث می شود با استفاده از منابع سخت افزار گرافیک دستگاه، لود وبسایت ها سریعتر،بهتر و با کیفیت تر انجام شود. فاندیشن از Sass پشتیبانی می کند و قابلیت مهم دیگری که دارد این است که توانایی استفاده از تگ های Html را به صورتی دارد که به توسعه دهنده این امکان را می دهد که دو نوع صفحه وب تولید کنند.صفحات سبک برای بارگذاری در دستگاه هایی مانند موبایل و صفحات سنگین تر برای دستگاه هایی با ابعاد بزرگتر.
نقاط قوت Foundation:
- استایل پذیری فوق العاده و انعطاف در طراحی
- استفاده از واحد REM به جای پیکسل که باعث می شود نیاز به تعریف سایز برای هر دستگاه نداشته باشید.
- حجم زیاد فایل های مربوط به فریمورک
- پیچیدگی بسیار و یادگیری مشکل
4-Materialize:
متریالایز فریمورک طراحی وبی است که از خصوصیات و ویژگی های Material Design گوگل پیروی می کند. متریالایز طیف وسیعی از کامپوننت ها مانند دکمه ها، فرم ها ، کارت ها و آیکون ها را در خود جای داد است که اتفاقا به نظر من یکی از قابلیت های مهم این فریمورک وجود همین آیکون هاست. متریالایز از سیستم گرید بندی مبتنی بر CSS استفاده می کند که در طراحی رسپانسیو به شما کمک خواهد کرد. همچنین وجود افکت های انیمیشنی، منوهای موبایلی پیشرفته تر، و کامپوننت های فراوان از قابلیت های دیگر این فریمورک طراحی وب هستند.این فریمورک از Sass هم پشتیبانی می کند.
نقاط قوت Materialize:
- طیف وسیع کامپوننت های داخلی
- قابلیت طراحی رسپانسیو
- وجود تعداد زیادی آیکون پیشفرض
- حجم بالای فایل ها
- عدم پشتیبانی از Flexbox
اگر از عاشقان Material Design گوگل هستید و از آن در طرح های خود استفاده کنید، بهتر است قبل از آن از فریمورک Material UI استفاده کنید چرا که به شما در یادگیری متریال دیزاین کمک خواهد کرد. این کامپوننت تعداد زیادی از المان های متریال دیزاین را در خود جای داده است و از قابلیت CSS in JS استفاده می کند که انعطاف پذیری و شخصی سازی آن را بالا می برد اما واقعیتی که وجود دارد این است که ممکن است تمام نیازهای پروژه شما را پوشش ندهد و ضمنا برای استفاده از آن هم نیاز به درک نسبی از React دارید.
نقاط قوت Material UI:
- بهترین و ساده ترین راه برای فراگیری Material Design
- شخصی سازی و توسعه پذیری آسان
- برای طراحی یک پروژه از صفر مناسب نیست.
- برای استفاده از آن نیاز به درک ابتدایی از مباحث React دارید.
مقایسه انجام شده بین فریمورک های طراحی وب، بر اساس میزان محبوبیت آن ها نبوده و برای بررسی محبوبیت فریمورک ها تعداد ستاره هی 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
