چگونه سریع تر ظاهر سایت خودمون رو طراحی کنیم؟

طراحی سایت به سادگیخب میبینم که شما هم داری طراحی سایت میکنی یا می خوای که طراح سایت بشی ولی برات سخته که کل سایت رو از صفر بزنی. خب ایراد نداره! اصلا کی گفته که وقتی آدم میخواد سایت طراحی کنه حتماً باید همه چیز سایت رو از صفر، خودش بزنه.من امروز میخوام یک سری فریم ورک و وبسایت بهتون معرفی کنم که تا چند روز پیش حتی خودم هم از وجود بعضی هاشون خبر نداشتم ولی سر یک پروژه که داشتم انجام میدادم دیدم آقا، نمیشه که همه چیز سایت رو خودم بزنم، برای همین گفتم بزار یه سر به گوگل عزیز بزنم تا ببینم که چی گیرم میاد (دقیقا همون طوری که شما داشتی تو گوگل سرچ میکردی و من رو پیدا کردی ? ).بعد از یکی دو ساعت گشتن توی گوگل و پیدا کردن چند سایت که هم معتبر باشه و هم کدی که ارائه میده، کد خوبی باشه و قابلیت شخصی سازی داشته باشه، تونستم یک سری سایت و فریم ورک پیدا کنم که به شما در طراحی سریع تر سایت خودتون کمک زیادی میکنه. برای همین گفتم که یک لیست از اون سایت ها درست کنم که هم خودم و هم شما ها راحت تر به اون سایت ها دسترسی داشته باشید.حالا میرسیم به بخشی که قراره من چند تا سایت و فریم ورک خوب رو بهتون معرفی کنم تا از این به بعد بتونید سریع تر سایت های خودتون رو طراحی کنید.بوت استرپبوت استرپ یک فریم ورک هست که یک سری چیز هایی که برای طراحی ظاهر سایت مثل دکمه ها، input ها و از همه مهم تر سیستم grid بندی که برای طراحی سایت های ریسپانسیو ( واکنش گرا‌ ) اجباری هست رو آماده و با اضافه کردن چند تا کلاس به اون تگی که میخواید بهتون میده و باعث میشه که با سرعت ۱۰۰ برابر بیشتر سایت خودتون رو طراحی کنید و خیلی راحت اون رو برای انواع سایز ها ریسپانسیو کنید و از طراحی سایت خودتون لذت ببرید.نصب بوت استرپ:برای نصب بوت استرپ باید به صفحه زیر مراجعه کنید و آخرین ورژن بوت استرپ رو انتخاب کنید. الان که دارم این نوشته رو آماده میکنم آخرین ورژن، ۴.۵ هست. https://getbootstrap.com/docs/4.5/getting-started/introduction/ سایت UIKITاین فریم ورک هم مثل بوت استرپ هست ولی به اندازه بوت استرپ محبوب و شناخته شده نمیباشد ولی یک سری امکانات بیشتری نسبت به بوت استرپ دارد مثل اسلایدر های آماده، منو موبایل آماده، دکمه پیمایش صفحه به بالا به صورت آماده و کلا هر چیزی رو به صورت آماده درست کرده و کافیه که شما اون رو تو پروژه خودتون اضافه کنید و از امکاناتش لذت ببرید.نصب uikit:برای نصب uikit دقیقا مثل بوت استرپ عمل میکنیم و کافیه که فایل های اون رو کنار پروژه خودمون قرار بدیم و یا از CDN اون استفاده کنیم که از لینک زیر میتونید آخرین نسخه uikit رو نصب کنید و طرز استفاده از اون رو هم یاد بگیرید. https://getuikit.com/docs/introduction سایت Animate.cssسایت Animate.cssتا حالا شده که بخوای یه انیمیشن رو به یک تگ بدی ولی به هر دلیلی نتونستی اون انیمیشن رو بسازی. خب با این فریم ورک دیگه کارت راحته چون کافیه که فایل css اون رو کنار فال پروژه ات بزاری و فقط با استفاده از کلاس هایی که داره خیلی راحت از اون انیمیشن ها استفاده کنی. کلی هم انیمیشن داره واسه هر کاری که نیاز داشته باشی.نصب Animate.css:برای نصب کافیه به لینک زیر بری و فایلش رو دانلود کنی و کنار پروژه ات قرار بدی. آموزش استفاده از انیمیشن ها هم خودش قرار داده که خیلی راحت میتونی ازش استفاده کنی. https://animate.style/ سایت Hover.cssسایت Hover.cssاین سایت هم مثل سایت قبل هست فقط با این تفاوت که به جای انیمیشن های آماده hover های آماده داره که دیگه لازم نیست شما خودتون hover دکمه ها و دیگر المان هاتون رو درست کنید و فقط کافیه که کلاس اون hover رو بهش بدین تا راحت انجام بشه. شما حتی میتونید که فایل css اون رو شخصی سازی کنید و رنگ، استایل، تایمر و هر چیز دیگه ای خودتون نیاز دارید رو بهش اضافه کنید.نصب hover.css:برای استفاده از این کلاس های زیبا میتونید به سایت زیر مراجعه کنید. https://ianlunn.github.io/Hover/ سایت CSS Gradientسایت CSS Gradientفکر نکنم طراح سایت باشید و تا به حال از رنگ های gradient استفاده نکرده باشید چون خیلی جلوه زیبایی به سایت شما میده ولی خب ساختن این نوع رنگ ها یکم زمان بره اما سخت نیست ولی خب وقتی شما میتونید خیلی راحت با استفاده از این سایت رنگ های gradient خودتون رو در عرض چند ثانیه درست کنید، فکر نکنم دیگه جای تردید برای استفاده از این سایت وجود داشته باشه.طرز استفاده خیلی ساده ای هم داره. فقط کافیه به سایت زیر برید و رنگ هایی که نیاز دارید رو انتخاب کنید و در آخر خروجی کد css رو کپی کنید و هر جایی از پروژه خودتون ازش استفاده کنید. https://cssgradient.io/ سایت Font Awesomeسایت fontawesomeمگه میشه بخوای یه سایت طراحی بکنی و از آیکون داخلش استفاده نکنی، یعنی همچین چیزی امکان نداره پس حتما به یک سایت نیاز داری که آیکون های کاملی رو بهت بده که از هر سایت دیگه ای بی نیاز بشی. خب اون سایت چیزی نیست جز fontawesome، دقیقا همون چیزی که هر طراح سایتی بهش نیاز داره. الان که دارم این نوشته رو مینوسم ورژن ۵ این فریم ورک اومده و جدیدا هم داره ورژن ۶ خودش رو معرفی میکنه حتما چیز معرکه ای خواهد بود.برای استفاده از این فریم ورک کافیه که داخل سایت ثبت نام کنی و اسکریپتی که بهت میده رو داخل کد html خودت قرار بدی. برای انتخاب آیکون هم میتونی داخل سایت سرچ کنی و از تکه کدی که بهت میده هر جای پروژه خودت استفاده کنی، به همین راحتی، پس همین الان برو و ثبت نام کن. https://fontawesome.com/ سایت Freepikسایت Freepikاین روز ها اکثر طراحان سایت از وکتورهای ایلاستریتور و svg در سایتشون استفاده میکنن و زمان زیادی رو برای ساخت این طرح ها صرف میکنند، سایت freepik ، سرویس جدیدی رو به سایتش اضافه کرده که کاربران میتونن بسته به موضوع موردنظرشون، وکتور با رنگ بندی دلخواه، سبک های مختلف و همینطور انیمشین های زیبا رو انتخاب کنن و با چیدمان دلخواه، تصویر خودشون رو سفارشی سازی کنند!!برای استفاده از این سایت کافیه که تو بخش سرچ سایت اون چیزی که میخوای رو سرچ کنی و طرح مورد نظرت رو انتخاب کنی و رنگشو تغییر بدی و خروجی svg یا png اون طرح رو دانلود کنی و ازش توی سایت خودت استفاده کنی.البته این سایت تحریم می باشد و برای استفاده از اون باید از فندقشکن استفاده کنید. ? https://stories.freepik.com/ سایت Colorhuntسایت ColorHuntاگر شما هم جزء افرادی هستید که همیشه مشکل انتخاب رنگ برای طراحی سایت را دارید حتما از این سایت استفاده کنید چون یک سری پالت رنگ آماده رو برای شما قرار میده که خیلی راحت میتونید کد رنگ های اون رو کپی کنید و داخل پروژه خودتون استفاده کنید.برای استفاده هم کافیه که فقط وارد سایت بشید تا از هزاران پالت رنگ آماده استفاده کنید. https://colorhunt.co/ سایت thispersondoesnotexistبه تصاویر این سایت نگاه کنین.باورتون میشه تمامی چهره ها با علم هوش مصنوعی ساخته شده‌اند و این اشخاص وجود خارجی ندارند و به عنوان چهره‌های فیک شناخته شده‌اند!!شما طراحان میتونین در سایت زیر از این چهره‌ها استفاده کنین و بدون نگرانی از این که اون شخص وجود داشته باشه میتونید از عکس های ساخته شده توسط این سایت داخل سایت خود استفاده کنید. https://thispersondoesnotexist.com/ سایت Icons8سایت Icons8یک سایت رایگان وکتور، ولی با قابلیت متفاوت!!!توی این سایت خودت میتونی چندین وکتور رو با drag & drop کنار هم بچینی و ازشون توی اپلیکیشن و سایت استفاده کنی. https://icons8.com/vector-creator/ سایت Kapwingسایت Kapwingاگه برای طراحی صفحات پیج 404 ایده ای نداشتین و به مشکل برخورد کردین به این سایت یه سر بزنین تا بتونین با استفاده ‌ از عکسای رایگانش یه طراحی خوب برای این دسته از صفحات داشته باشین. https://www.kapwing.com/404-illustrations سخن پایانیتا ۱۵ سال آینده همون‌طور که خوندن و نوشتن رو به بچه‌ها یا می‌دیم، برنامه‌نویسی رو هم یاد خواهیم داد و افسوس می‌خوریم که چرا زودتر این‌کار رو شروع نکردیم.خیلی ممنون که این نوشته رو مطالعه کردین اگر دوست داشتید که باز هم ابزار ها و سایت های بدرد بخور دیگه رو هم براتون پیدا کنم تا توی طراحی سایت هاتون سریع تر و حرفه ای تر عمل کنید حتما حتما این نوشته رو لایک کنید و اگر هم نظری راجب به این نوشته بود خیلی خوشحال میشم که بهم بگید.