منابع و ابزارهای کاربردی برای طراحان UI در سال ۲۰۲۱

در سال ۲۰۲۱ هستیم و منابع طراحی وب از همیشه بیشتر شده اند. من در این مقاله لیستی از مهم ترین و کاربردی ترین منابع برای طراحان UI را آماده کرده ام. امیدوارم هرکدام از این منابع بتوانند به شما در طراحی هایتان کمک کنند.

ویدیو و تصویر

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

وب سایت Mixkit یک وب سایت جامع و کامل برای ویدیوهای استوک، موسیقی متن و قالب های adobe premiere pro می باشد. منابع این وب سایت نیز کاملا رایگان هستند.

برای پیدا کردن تصاویر استوک زیبا و با کیفیت می توانید سری به وب سایت Pexels بزنید. این وب سایت دارای آرشیو بزرگی از انواع تصاویر با کیفیت می باشد که می توانید در پروژه هایتان از آن ها استفاده کنید.

وب سایت Photo Creator به شما اجازه می دهد که با استفاده از تصاویر مدل ها، اشیاء و تصاویر پس زمینه یک تصویر استوک بسازید!

اگر می خواهید تصویر پس زمینه یک ویدیو را حذف کنید، وب سایت Unscreen ابزاری عالی برای شما محسوب می شود. این وب سایت می تواند پس زمینه ویدیوها یا فایل های GIF را به صورت رایگان برایتان حذف کند. از طرف دیگر برای حذف پس زمینه تصاویر می توانید از وب سایت Remove Background استفاده کنید.

آیا تا به حال به دنبال تصاویر افراد مختلف برای وب سایت خود بوده اید؟ وب سایت بزرگ و هوشمند Generated Photos با استفاده از هوش مصنوعی تصاویر افراد مختلفی را ساخته است. توجه داشته باشید که این افراد واقعی نیستند بلکه توسط هوش مصنوعی ساخته شده اند (تصاویر جعلی است) بنابراین استفاده از آن ها آزاد است.

وب سایت Duotone به شما اجازه می دهد که هر تصویری را به یک تصویر duotone (تصاویر که فقط دو tone یا رنگ دارند) تبدیل کنید.

طراحی گرافیکی

وب سایت بزرگ Open Peeps شامل هزاران طراحی دستی است که می تواند در پروژه هایتان مورد استفاده قرار بگیرد. توجه داشته باشید که تمام طراحی های موجود در این وب سایت با دست کشیده شده اند.

وب سایت Smash Illustrations به شما اجازه می دهد تا از بین طرح های دیجیتال مختلف، طرح های خاصی را ویرایش کرده و طرح مورد نظر خود را بسازید.

حتما با نقاشی های doodle آشنا هستید. وب سایت Open Doodles آرشیو بزرگی از این طرح ها را دارد که می توانید در طراحی خود از آن ها استفاده کنید.

وب سایت Control Illustrations بیش از ۱۸۰ طرح مختلف را به صورت رایگان ارائه می دهد و البته کاراکتر های هر طرح نیز قابلیت شخصی سازی و ویرایش دارند.

وب سایت !Ouch نیز با ارائه انواع طرح های دستی می تواند باعث زیبایی بیشتر پروژه هایتان شود.

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

یکی از ابزارهای بسیار کاربردی برای طراحان UI ابزاری برای تولید کد واقعی به faux code (تصاویر SVG شبیه به قالب آن کد) می باشد. این قابلیت معمولا برای نمایش حالت loading در صفحات وب استفاده می شود. وب سایت Faux Code Generator این کار را به صورت رایگان برایتان انجام می دهد.

Palette های رنگ

به احتمال زیاد در برنامه موزیک پلیر خود قسمت equalizer را دیده اید. وب سایت Parametric Color Mixer ایده equalizer را برای رنگ ها پیاده کرده است و ابزاری بسیار قدرتمند به وجود آورده است که می تواند رنگ های مختلفی را میکس و ایجاد کند.

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

یکی از مشکلات طراحی UI ایجاد کردن یک تم یا همبستگی معنادار میان رنگ ها است. وب سایت Colorsinspo با ارائه صد ها palette رنگی مختلف که از قبل دسته بندی شده اند، این مشکل را حل می کند.

وب سایت Color Hexa یک ابزار رنگ است که اطلاعات جامعی را درباره رنگ ها ارائه می دهد. همچنین palette های یک دست و متناظر را ارائه داده و رنگ های تیره تر برای ایجاد سایه در طرح هایتان را نیز تولید می کند.

وب سایت Color Space یکی دیگر از وب سایت هایی است که می تواند در زمینه تولید رنگ های وابسته و همبسته به شما کمک کند.

اگر می خواهید تولید pallette رنگی را خودتان و به صورت دستی انجام بدهید نیز وب سایت Palettte App گزینه مناسبی می باشد.

در نهایت وب سایت Colorable را داریم که یک contrast tester است؛ یعنی کنتراست رنگ های مختلف با یکدیگر را به شما نشان می دهد تا بتوانید رنگ هایی را انتخاب کنید که باعث ناخوانایی متن ها در طرح هایتان نشود.

انیمیشن و افکت های تصویری

تمامی طراحان CSS می دانند که هنگام طراحی UI یک وب سایت، ایجاد سایه برای قسمت های مختلف سایت فرآیند آزار دهنده ای است چرا که باید دائما شدت و زاویه سایه را تست کنید تا به طرح مورد نظر خود برسید. وب سایت Smooth Shadow Generator به شما اجازه می دهد که از یک محیط گرافیکی حرفه ای برای تولید سایه ها استفاده کنید و در نهایت کد CSS آن را استخراج نمایید.

حالا که صحبت از سختی کار با کدهای CSS رسیده است باید درباره مبحث انیمیشن ها نیز صحبت کنیم. ایجاد انیمیشن در زبان CSS یکی از کارهایی است که در سطح ابتدایی ساده است اما در سطوح متوسط و پیشرفته واقعا زمان بر خواهد بود. وب سایت محبوب CSSeffectsSnippets یکی از وب سایت های شناخته شده در این زمینه است که انواع و اقسام انیمیشن های مختلف را دارد و شما می توانید تنها با یک کلیک ساده روی هر کدام از این افکت ها تمام کدهای CSS آن را دریافت کنید. به طور مثال با کلیک روی انیمیشن اسپینر loading کدهای آن برایمان کپی می شود:

.donutSpinner {

    display: inline-block;

    border: 4px solid hsl(222, 100%, 95%);;

    border-left-color: hsl(243, 80%, 62%);

    border-radius: 50%;

    width: 30px;

    height: 30px;

    animation: donut-spin 1.2s linear infinite;

}




@keyframes donut-spin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

حالا می توانیم به راحتی این کدها را در پروژه خودمان قرار دهیم. تمامی این انیمیشن ها با Vue.js ساخته شده اند اما شما کدهای خالص CSS آن را دریافت می کنید.

احتمالا شما نیز طراحی وب سایت های مدرن را دیده اید. در طراحی های مدرن (معمولا در قسمت header یا قسمت footer) از عنصری به نام divider یا separator (به معنی جداکننده) استفاده می شود. جدا کننده همان عنصری است که به شکل های مختلف دو قسمت صفحه را از هم جدا می کند. از آنجایی که جدا کننده ها یک کامپوننت رایج در طراحی وب سایت های مدرن هستند، وب سایت Separator Generator این کار را به صورت خودکار برایتان انجام می دهد.

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

آیا تا به حال خواسته اید عنصری در صفحه خود را به حالت drag & drop طراحی کنید؟ اگر چنین طرحی را در ذهن دارید اما دوست ندارید کدهایش را به صورت دستی بنویسید پکیجی بسیار معروف به نام Draggable را به شما پیشنهاد می کنم. این پکیج در گیت هاب حدود 14 هزار ستاره گرفته و توسط تیم shopify نوشته شده است.

آیا با افکت Block Reveal در CSS آشنایی دارید؟ این افکت همان افکتی است که در آن یک باکس به عنوان transition بین صفحات عمل می کند. وب سایت Block Reveal Effects یک ابزار کامل از این نوع افکت را به شما می دهد و کدهایش را به صورت آماده در اختیارتان می گذارد.

آیکون ها

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

بیش از ۷۰۰ آیکون با کیفیت برای CSS و همچنین در قالب SVG و Figma UI در وب سایت CSS Icons موجود هستند و شما می توانید از آنها در پروژه های خود استفاده کنید. این آیکون ها در قالب NPM نیز در دسترس هستند.

حالا که صحبت از آیکون ها شده است باید در مورد transition ها در آیکون ها نیز صحبت کنیم. ایجاد انیمیشن و transition به طور کلی کار زمان بری است اما ایجاد transition بین دو آیکون معمولا سخت تر از حالت عادی می باشد. وب سایت Icon Transition Generator به شما کمک می کند تا اینکار را به صورت خودکار انجام بدهید. چطور؟ کافی است تنها دو آیکون SVG خود را روی این وب سایت آپلود کنید و سپس کدهای CSS مربوط به آن ها را دریافت کنید.

وب سایت Tilda Icons نیز یکی از وب سایت های کاربردی در زمینه آیکون ها می باشد که حاوی بیش از ۷۰۰ آیکون مخصوص صفحات landing است.

در صورتی که می خواهید آیکون های خود را قبل از استفاده ویرایش کنید باید به وب سایت Ikonate سری بزنید. این وب سایت مجموعه بزرگی از آیکون های وکتور را دارد و قابلیت ویرایش قسمت های مختلف آن ها مانند رنگ، سایز، زاویه خطوط، داشتن یا نداشتن حاشیه، حالت dark mode و غیره را دارد.

در نهایت در صورتی که با After Effects یا lottie کار می کنید، وب سایت Animated Icons انتخاب خوبی برای شما است.

ابزارهای متفرقه

وب سایت Nucleo App یک ابزار کامل برای مدیریت آیکون های مختلف است و با استفاده از آن می توانید آیکون های مورد علاقه خود در پروژه های خود را مدیریت کنید.

وب سایت Checklist design مجموعه ای از مقالات در رابطه با بهترین روش ها و قراردادها بین طراحان UI است. همچنین وب سایت Design System Repo مجموعه ای جامع از آموزش های مختلف UI می باشد و در صورتی که با زبان انگلیسی آشنایی دارید حتما آن را به شما پیشنهاد می دهم.

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

امیدوارم از این مقاله لذت برده باشید.