12 سایت ضروری برای طراحی سایت

12 سایت ضروری برای طراحی سایت

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

سایت های انتخاب رنگ

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

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

Flat UI Colors

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

Color Safe

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

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

Colorblind Web Page Filter

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

Adobe color

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

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

Canva

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

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

سایت های ریسپانسیو

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

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

Responsive Design Check

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

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

Mobile Friendly Google

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

یکی از مزیت های خوب این سایت  : میتواند کد html را مستقیما وارد سایت کرد و نیازی نیست که حتما سایت شما روی هاست باشد گرچه میتوان از این ابزار برای سایت های موجود در دنیای وب استفاده کرد .

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

Layoutit

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

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

Css3gen

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

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

سایت های انتخاب تصویر و آیکون

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

Lorem Pixel

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

Flaticon

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

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

در این سایت آیکون ها با فرمت های مختلف برای مثال SVG, PNG , PSD به دو صورت رایگان و پولی اراِئه میشوند ولی خوشبختانه تعداد آیکون های رایگان بسیار زیاد مییاشد به طوری که میتوان گفت تقریبا برای هر آیکون پولی چندین آیکون رایگان مشابه نیز وجود دارد .

Glyphicons

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

FontAwesome

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

امیدواریم تا از مقاله 12 سایت ضروری برای طراحی سایت لذت برده و آنرا برای دوستانتان هم به اشتراک بگذارید .

باتشکر سئو 90