۲۳ پلاگین برتر برای پیش طراحی سایت

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

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

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

 

۱٫MAGIC MIRROR

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

 

  1. EXPORT MORE

می توانید با EXPORT MORE آیکون های آماده و GIF های انیمیشنی را بسازید.

در نسخه های قبلی EXPORT MORE دو پلاگین وجود داشت که در ورژن جدید، این دو با هم ادغام شدند –یکی برای ساخت GIF و دیگری برای ICNS. این پلاگین باعث می شود تا نواقصات موجود در طراحی را با گزینه های موجود تکمیل نمایید. با این پلاگین شما می توانید آیکون هایی را در قالب فایل ICNS بسازید و انیمیشن هایی را به وجود آورید که در نهایت می توانید به عنوان GIF از آن ها در طراحی خود به کار ببرید، تمامی این موارد گفته شد بدون خارج شدن از مرحله پیش طراحی انجام می شود.

 

  1. SKETCH STYLE INVENTORY

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

 

طراحی می تواند ترکیبی از گزینه های رایگان و پروسه هایی باشد که به خوبی ساختار بندی شده اند و SKETCH STYLE INVENTORY به شما این امکان را می دهد تا این دو مورد را با هم یکی کنید: این امر باعث می شود تا تمامی سبک هایی که استفاده کرده اید را مرور کنید و هم چنین شما را قادر می سازد تا سبک لایه های مختلف را با هم ادغام و یکی نمایید.

 

  1. DAY PLAYER

زمان خود را برای مشخص نمودن کادر ها و محل تصاویر طراحی تان هدر ندهید- DAY PLAYER این کار را برای شما انجام می دهد.

 

اضافه کردن مکان تصاویر به طراحی وب سایت و یا اپلیکیشن، یک بخش ضروری در پیش طراحی ها می باشد، اما یافتن تصاویر واقعی نیز می تواند بسیار سخت و دشوار باشد. از این رو بدون اینکه زمان تان را در این راه هدر دهید، اجازه دهید تا این کار را DAY PLAYER برای شما انجام دهد. این امر شما را قادر می سازد تا کادر ها و مکان های مشخصی را برای تصاویر در هر بخش از پیش طراحی اضافه کنید. بزرگ ترین تصمیمی که باید در این زمینه توسط شما گرفته شود، این است که کدام یکی از BILL MURRAY، NICOLAS CAGE و یا KITTENS را به عنوان سبک کادر ها و موقعیت تصاویر در پیش طراحی می خواهید به کار ببرید.

 

  1. MARKETCH

طراحی های تان را توسط MARKETCH تبدیل به CSS زیبا و دلنشینی نمایید.

 

اگر می خواهید تا سبک های CSS را در پیش طراحی های تان بازیابی کنید، پلاگین هایی مانند MARKETCH در این زمینه برای شما ضروری می باشند. این مورد به شما این امکان را می دهد تا فایل پیش طراحی تان را به عنوان یک فایل فشرده از اسناد HML استخراج کنید تا بتوانید به این وسیله موارد CSS را در طراحی خود اعمال نمایید.

 

  1. SYNC SKETCH PLUGIN

این پلاگین راحت ترین روش هماهنگی برای عوامل موجود در طراحی وب سایت را ارائه می دهد.

 

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

 

  1. SEGMENTED CIRCLES

SEGMENTED CIRCLES نمودارهایی را برای شما به وجود می آورد.

 

در این جا یک روش سریع برای ساخت نمودار های دایره ای برای نشان دادن آمارها وجود دارد. این پلاگین می تواند انواع مختلف نمودارهای دایره ای را به وجود آورد (مانند تصویر بالا) که ضخامت دایره آن ها با مقادیر کاما یا خط فاصله، قابل کنترل می باشد.

 

۸٫ ICON FONTS

استفاده از ICON FONTS در پیش طراحی.

 

خود را از شر کپی و پیست کردن آیکون ها توسط برنامه ICON FONTS رها کنید. این پلاگین به شما این امکان را می دهد تا آیکون هایی را مشاهده نمایید و به پیش طراحی تان اضافه کنید. این پلاگین باعث می شود تا مدت ها وقت خود را صرف یافتن نام آیکون ها نکنید، مخصوصا اگر این آیکون ها را افراد دیگر به طراحی تان اضافه کرده اند که شما از نام آن ها بی خبر می باشید. در این پلاگین نام آیکون همراه با اضافه شدن آن در طراحی، نمایان می شود.

 

۹٫CSSKETCH

از مزیت های CSS در پیش طراحی تان استفاده نمایید.

 

اگر همیشه به دنبال این بودید که از CSS در پیش طراحی خود استفاده کنید، این مورد می تواند برای شما سودمند باشد. این پلاگین شما را قادر می سازد تا به وسیله پیوست کردن یک الگو، عوامل طراحی مورد نظر خود را در آن وارد نمایید. این پلاگین حتی SASS و LESS را نیز پشتیبانی می کند.

 

  1. FIND AND REPLACE

می توانید قابلیت ها و ویژگی هایی را بیابید و در پیش طراحی خود جایگزین نمایید.

 

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

 

  1. SKETCH TOOLBOX

SKETCH TOOLBOX به راحتی پلاگین هایی را برای شما می یابد.

 

پلاگین های پیش طراحی در تمام وب سایت ها پراکنده می باشند، مخصوصا در GITHUB، از این رو یافتن پلاگین های متناسب، بسیار سخت می باشد. خوشبختانه SHAHRUZ SHAUKAT تصمیم گرفت تا اپلیکیشنی را بسازد که به شما امکان جستجو، نصب و بروزرسانی پلاگین های مورد نظرتان را می دهد.

نام اپلیکیشن SKETCH TOOLBOX بوده و به سادگی قابل استفاده می باشد- تنها یک پلاگین را جستجو نمایید و شروع به نصب آن کنید. می توانید روی “VIEW ON GITBUB” کلیک نمایید و آخرین اخبار و دستورالعمل های ویژه در این زمینه را بررسی نمایید.

 

  1. CONTENT GENERATE

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

 

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

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

 

  1. SKETCH DOCKPREVIEWS

نحوه پروسه طراحی خود را در OS X DOCK به صورت پیش فرض مشاهده نمایید.

 

اگر روی آیکون های اپلیکیشن MAC کار می کنید، این گزینه می تواند بسیار به شما کمک نماید- با استفاده از SHIFT+CMD+D می توانید کار خود را در یک بورد و صفحه در OS X BOX مشاهده نمایید و پیش طراحی های تان را در آن جایگذاری نمایید.

 

  1. SWATCHES

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

 

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

 

  1. COLOR CONTRAST ANALYSER FOR SKETCH

توسط این پلاگین دریابید که آیا ترکیبات رنگی شما در پیش طراحی با دستورالعمل های MCAG مطابقت دارد یا خیر.

 

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

 

  1. SKETCH DYNAMIC BUTTON

این اولین پلاگینی می باشد که ما دیده ایم، این پلاگین باعث می شود تا مزیت انواع پلاگین ها را دریابیم. SKETCH DYNAMIC BUTTON به شما این امکان را می دهد تا دکمه هایی را به صورت مسطح – فرقی ندارد چقدر متن موجود در آن طولانی باشد- درست مانند آن چه در CSS می ساختید، در طراحی سایت و یا اپلیکیشن و یا در پیش طراحی های خود به وجود آورید.

در این جا به شما نشان می دهیم که چگونه این امر کار می کند. شما یک کادر متنی را می سازید و cmd+j را فشار می دهید. این پلاگین سپس گروهی را با کادرهای متنی تان می سازد و شکلی را برای ساختار و یا پیش زمینه دکمه های تان مشخص می سازد و کادر های متنی را به صورت ” ۰:۰:۰:۰″ دوباره نام گذاری می کند. این موارد باعث می شود تا دکمه های طراحی تان به خوبی مانند syntax css لایه گذاری شوند.

شما به این صورت می توانید این لایه را مانند “۱۰:۲۰:۱۰:۲۰” دوباره تغییر نام دهید و دکمه های تان می توانند ۱۰px در بالا و پایین و ۲۰px در سمت چپ و راست لایه گذاری شوند. اگر متن موجود در کادر را تغییر دهید، تمام چیزی که نیاز دارید انجام دهید این است که از کیبورد استفاده کنید تا به صورت اتوماتیک شکل و حالت اطراف آن را بروزرسانی نمایید.

 

۱۷٫SKETCHSQUARS

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

 

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

درست مانند CONTENT GENERATOR، با SKETCHSQUARS نیز می توانید ساخت لایه ای را شروع کنید که می خواهید با یک تصویر جایگذاری کنید و پلاگین خود را راه اندازی نمایید. شما می توانید از گزینه های موجود در این پلاگین، موارد بسیاری را انتخاب نمایید، مانند منبع صفحات، اندازه توصیه شده و غیره.

 

  1. GENERATE ANDROID ASSETS

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

یک بار طراحی کنید، پلاگینی را فعال نمایید و انتخاب کنید که کدام تراکم پیکسلی باید استفاده کنید و به این ترتیب این پلاگین می تواند به صورت اتوماتیک کارتان را به صورت MPDI، HDPI، XHDPI، XXHDPI و XXXHDPI استخراج نماید.

 

  1. SKETCH TO APP STORE

این پلاگین ابر قدرت تمامی اسکرین شات های که برای APP STORE نیاز دارید را ساخته و استخراج می کند.

 

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

موردی که این پلاگین انجام می دهد این است که اسکرین شات های مورد نیاز شما را انجام می دهد و الگوی ساده و قابل شخصی سازی را به شما ارائه می دهد و متنی را در بالای آن مشخص می نماید و به این ترتیب می تواند ۴۵ تصویر اسکرین شات را برای شما مهیا نماید: همگی این تصاویر با فرمت JPG می باشند.

 

  1. SKETCH NOTEBOOK PLUGIN

می توانید نظریات مشتریان خود را در یک نوار در کنار طراحی سایت و یا اپلیکیشن تان نمایان سازید.

 

زمانی که وقت نمایان کردن طراحی های تان به یک مشتری و یا یک همکار می شود، همیشه خیلی عالی می شود تا ایده و تفکری که در پس آن وجود دارد را توضیح دهید. این پلاگین می تواند نوار بسیار زیبایی را به قسمت راست طراحی تان اضافه نماید. شما تنها باید یک عامل از پروژه را انتخاب کنید و CTRL+ALT+CMD+9 را انتخاب نمایید و نظرات مشتریان خود را در آن جا تایپ نمایید. این پلاگین می تواند شمار بسیار مناسب و نظرات بسیار کاربردی از مشتریان را در این نوار قرار دهد.

 

  1. SKETCH MEASURE

می توانید توسط اطلاعات مفیدی، محتواهایی را برای طراحی سایت و اپلیکیشن تان فراهم سازید.

 

اگر در کنار اشخاص دیگری کار می کنید، مخصوصا افرادی که برنامه نویس می باشند، خیلی عالی می شود که نمونه سازی های خود را با مشخصات ویژه ای کامل سازید- مواردی مانند فاصله بین عوامل، ابعاد آیکون ها، برنامه نویسی HEX رنگی هایی که استفاده می کنید، فونت تر برچسب و نامگذاری و غیره.

اگر این موارد برای شما آشنا باشد، SKETCH MEASURE باعث می شود تا زندگی تان آسان تر شود. با دوبار کلیک کردن روی ماوس، می توانید به صورت اتوماتیک محتواهایی را برای طراحی تان مهیا سازید که شامل عواملی است که در بالا، آن ها را نام برده ایم.

 

۲۲٫DIVINE PROPORTIONS

طراحان از شبکه ها در طراحی وب سایت استقبال می کنند. آن ها عاشق منطق موجود در احساسات می باشند و به این صورت DIVINE PRPORTIONS می تواند بسیار در این زمینه کمک کننده باشد. این پلاگین می تواند شما را قادر سازد تا از GOLDEN SPIRAL AND GLDEN RATIO در طراحی سایت و یا طراحی اپلیکیشن تان استفاده نمایید تا به این وسیله شبکه ای را بسازید که روند کاری تان را تسهیل ببخشد. زمانی که بحث طرح بندی در طراحی سایت و یا اپلیکیشن می شود، این ابزار یک گزینه بنیادی می باشد.

 

  1. ۲۳٫

    SEND TO SLACK

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

X