ابزارهای جدید و هیجان‌انگیز برای طراحان (ژوئن ۲۰۲۰)

ترجمه و تالیف : علیرضا داداشی
تاریخ انتشار : 14 شهریور 99
خواندن در 4 دقیقه
دسته بندی ها : طراحی وب

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

بنابراین بهتر است نگاهی به این موارد جدید بیاندازیم.

"The Hero Generator"

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

"Sorted Colors"

گروه‌های Sorted Colors رنگ‌های CSS را به شکلی معرفی کرده‌اند که رنگ‌های مرتبط را با هم نشان می‌دهد. هنگامی که سعی دارید تصمیم‌گیری نهایی در مورد رنگ یا پالت رنگ بگیرید، این ابزار یک روش خوب برای بررسی رنگ‌ها در کنار یکدیگر است. همچنین می‌توانید از آن برای ساخت یک پالت یکنواخت هم استفاده کنید.

"Attention Insight"

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

"Color Copy Paste"

شما می‌توانید از این برنامه برای گرفتن رنگ استفاده کرده و سپس آن را در Sketch، Figma یا یک مرورگر وب قرار دهید. هنگامی که الهامات شما نامنظم بودند، می‌توانید به سرعت با این روش آن الهامات را درک کرده و از آن‌ها استفاده کنید.

"Runme"

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

"Rough Notation

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

"Trials"

این یک ابزار ساده اما در عین حال مفید است. Trials یک دنباله هندسی ساده در محور x و z است که می‌توانید آن را به موارد Three.js متصل کنید. یک انیمیشن ساده می‌تواند خیره‌کننده باشد.

"Pose Animator"

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

"Neumorphism UI

این یک کِیت رابط کاربری با اجزایی به سبک نومورفیس است. این برنامه شامل بیش از ۲۰۰ مولفه، ۱۰ بخش و ۵ صفحه‌ی نمونه برای ساخن یک وبسایت به این سبک است.

عکاسی ۳ بعدی با استفاده از لایه‌های عمقی و محتوا

این پروژه توسط گروهی از محققان انجام شد و ثابت کرد که شما می‌توانید یک تصویر RGB-D را به یک عکس ۳ بعدی تبدیل کنید؛ درست مانند چیزی که شما از iPhone مشاهده می‌کنید. در اینجا کد منبع شامل نحوه استفاده از یک تصویر دارای لایه‌های عمقی به عنوان بخشی از یک مدل مبتنی بر یادگیری است که تاثیری ۳ بعدی را به وجود خواهد آورد.

"Meanderer"

این یک کتابخانه کوچک برای مقیاس‌گذاری رشته‌های مسیر CSS است. این کتابخانه بسیار زیبا به نظر می‌رسد. تمام چیزی که شما نیاز دارید، یک شی با یک مسیر (به طور معمول SVG) است.

"Underline Animation"

گاهی اوقات ساده‌ترین انیمیشن‌ها می‌توانند بیشترین تاثیر را روی یک طرح داشته باشند. این قلم توسط Aaron Iker ساخته شده و نمونه‌ای ساده با خط تیره‌ای کوچک است که به سمت یک فلش حرک می‌کند.

 

"Create a Hamburger Menu in SVG & CSS"

چه خوشتان بیاید و چه نیاید، باید در مقطعی از زمان یک عنصر منوی همبرگری درست کنید. این آموزش عالی که از UX Collective گرفته شده، نحوه انجام کار را از ابتدا تا انتها با استفاده از یک نماد SVG و CSS توضیح می‌دهد. (این درس به شکلی طراحی شده تا تقریباً هر کسی که دانش اندکی از توسعه دادن دارد بتواند با بهره‌گیری از آن به موفقیت دست پیدا کند.)

"Blush"

Blush یک ژنراتور تصویربرداری سرگرم‌کننده است. این برنامه از طراحی‌های هنرمندان سراسر جهان استفاده می‌کند. همچنین دارای گزینه‌های مربوط به بخش و رنگ می‌باشد که به شما این امکان را می‌دهد تا با ادغام کردن و مطابقت دادن بتوانید تصویر مناسب را برای پروژه طراحی خود بدست آورید. فرآیند کار بسیار آسان است. مشخصات خود را انتخاب کرده و سپس PDF مربوطه را دانلود کنید.

"Supabase"

این یک جایگزین منبع باز برایFirebase  است و APIهای لحظه‌ای را بدون کد به Postgres اضافه می‌کند. (در تمام آن مدت این برنامه در نسخه آلفا و به صورت رایگان می‌باشد.)

"Fluent Icons"

این برنامه شامل ۹۶۵ آیکون به سبک مایکروسافت است. این آیکون‌های رنگارنگ و کاربردی برای استفاده در برنامه‌ها، ارائه‌ها، وبسایت‌ها و اینفوگرافی‌ها ایده‌آل هستند. (در این برنامه بخش‌های رایگان و پولی نیز موجود است.)

"One Word Domains"

آیا به دنبال یک نام دامین می‌گردید که بتوان آن را سریع و راحت به یاد آورد؟ این ابزار به شما این امکان را می‌دهد تا تمام دامین‌های تک کلمه‌ای موجود برای خرید را جستجو کنید.

"Free Device Icons"

این مجموعه رایگان از آیکون‌های دستگاه شامل ۶۷ عنصر بوده که نشان‌دهنده رابط‌های کاربری و دستگاه‌ها است. آن‌ها در فرمت‌های مختلفی از فایل‌ها (SVG،EPS،PNG،AI) به عنوان یک بردار خطی نشان داده می‌شوند.

"Windups"

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

"Glorious Glyphs Game"

این ابزار برای سایت ILove Typography.com است و شما می‌توانید به کمک آن ضریب هوشی تایپوگرافی خود را تست کنید. این بازی شامل ۳۰ سوال بوده و این سوالات در مورد کارکترهای گلیف می‌باشد. در اینجا شما می‌بایست یک فونت را شناسایی کنید. در نظر داشته باشید که انجام این کار سخت‌تر از آن چیزی است که فکرش را می‌کنید.

"Ephemera"

این یک تایپ‌فیس به سبک novelty است که دارای خطوط سرگرم‌کننده، اشکال و عناصر مشترک فراوان برای ادغام حروف به شکلی استثنایی است. این می‌تواند یک برند تجاری خوب یا یک نوع عنصر نمایشی جالب را ایجاد کند و شامل حروف بزرگ و کوچک، اعداد و برخی موارد اضافی دیگر است.

"Kavo Serif"

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

"Republiko"

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

"TT Lakes Neue"

یک فونت است که شامل ۹۱ سبک می‌باشد. این بسته شامل یک قلم متغیر است و ظاهر هندسی بسیار خوبی دارد. این یک تایپ‌ فیس پرمیوم است که شما می‌توانید تمام بسته یا سبکی خاص را برای خود خریداری کنید.

"Typo Ring"

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

"XXIX"

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

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید