خرید ابزارهای طراحی سایت | ابزارهای بصری و فریم‌ورک‌های طراحی

فریم ‌ورک ‌های طراحی و کتابخانه‌ ها

18. بوت سترپ (Bootstrap)

پرواضح است که بوت استرپ (Bootstrap) ابزار جدیدی نیست اما انقلابی در برنامه ‌نویسی ایجاد کرده و به‌ طور مستمر در شیوه‌ ی ساخت عناصر موجود در وب سایت تعیین ‌کننده است.

در زمان نگارش این مقاله، آخرین نسخه‌ ی آن (4.4.1 که در نوامبر 2019 عرضه شد) کانتینرهای (container) پاسخگوی جدیدی را معرفی کرده که تا یک نقطه انفصال خاص به‌ خوبی عمل می ‌کنند و کلاس ‌های «.row-cols» پاسخگوی جدیدی را برای تعیین مؤثر تعداد ستون‌ های بین نقاط انفصال عرضه کرده است.

همچنین بوت استرپ (Bootstrap) اخیراً کتابخانه ‌ی آیکون منبع ‌باز جدید خود، بوت استرپ آیکونز (Bootstrap Icons) را عرضه کرده که برای کار با مؤلفه‌ های بوت استرپ (Bootstrap) طراحی‌شده است.

19. استارت‌ آپ 3 (Startup 3)

اگر بوت استرپ (Bootstrap) را دوست دارید اما نمی‌خواهید همه‌چیز را از ابتدا شروع کنید، یک روش ساده‌تر وجود دارد و آن استفاده از استارت ‌آپ 3 (startup 3) است؛

اپلیکیشن آنلاینی که الگوهای از پیش ‌ساخته و تم ‌هایی در آن تعبیه ‌شده که با استفاده از آن‌ ها می ‌توان اقدام به ساخت وب ‌سایت بر مبنای بوت استرپ 4 (Bootstrap 4) با یک گرید (grid) 12 ستونی کرد.

می ‌توانید سایت خود را بدون نوشتن کد و با استفاده از رابط درگ اند دراپ (Drag and drop) بسازید اما برای نهایی کردن آن نیاز به دانش اچ ‌تی ‌ام ‌ال (HTML) و سی ‌اس ‌اس (CSS) دارید.

20. js

Vue.js یک فریم‌ ورک برای ساخت رابط‌ های کاربری (UI) است و از یک مدل شیء گرای سند (DOM) مجازی استفاده می‌ کند. همان‌ طور که از نام آن پیداست، کتابخانه مرکزی «Vue» روی لایه ‌ی نمایش (view) متمرکز است.

به کدهای نمونه از سندهای «Vue» گرفته‌ شده است نگاه کنید که از ورودی کاربر استفاده می ‌کند و جزییات کتابخانه را نشان می ‌دهد. با کدهای اچ‌ تی ‌ام ‌ال (HTML) شروع می ‌کنیم:

<div id=”example”> <p>{{ message }}</p> <buttonv-on:click=”reverseMessage”>ReverseMessage</button></div>

به کنترل‌کننده v-on سفارشی که متد «reverseMessage» را فراخوانی می ‌کند دقت کنید.

این هم کدهای جاوااسکریپت:

var myApp = new Vue({ el: ‘#example’, data: {  message: ‘Hello Vue.js!’ }, methods: {  reverseMessage: function () {   this.message = this.message.split(”).reverse().join(”)  } }});

این نمونه کدها این پاراگراف را با داده پرکرده و متد «reverseMessage» را تعریف می‌ کند. «Vue» نه‌ تنها برای کسانی که تجربه ‌ی کمی در کتابخانه‌ های پیچیده دارند عالی است بلکه پلاگین ‌های متعددی برای کمک به توسعه اپلیکیشن‌ های وب تک ‌صفحه‌ ای پیچیده نیز دارد.

21. پترن لب (Pattern Lab)

پترن لب (Pattern Lab) ابزار زیبای طراحی مبتنی بر الگو است که توسط دیو اولسون (Dave OIsen )  و برد فراست (Brad Frost) خلق‌شده است.

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

اگرچه این ابزار اساساً تولید کننده‌ی سایت ‌های ایستا است که مؤلفه‌ های رابط کاربری (UI) را در کنار یکدیگر قرار می ‌دهد اما کاربردی بیش از این دارد.

پترن لب (Pattern Lab) مستقل از زبان و ابزار عمل می‌کند؛ شما را قادر می ‌سازد تا الگو های رابط کاربری (UI) را داخل یکدیگر قرار دهید و کار طراحی را با استفاده از داده‌ های پویا انجام دهید.

دارای ابزارهای تغییر اندازه نمایشگر مستقل از دستگاه است و به شما کمک می‌کند مطمئن شوید سیستم طراحی ‌تان کاملاً پاسخگو و قابل‌گسترش است؛ این‌ گونه اطمینان دارید که طراحی‌تان آن‌ قدر گسترش می ‌یابد تا نیاز های شما را برآورده سازد.

22. متریال دیزاین (Material Design)

متریال دیزاین (Material Design )   زبانی بصری متعلق به گوگل است که اصول کلاسیک طراحی مفید را با نوآوری‌ های علم و فناوری ترکیب می ‌کند تا بتواند پایه‌ای منسجم و منعطف برای وب ‌سایتتان بسازد.

وب‌ سایت ‌ها و اپلیکیشن ‌هایی که با استفاده از فریم ‌ورک متریال دیزاین (Material Design )   تولید شده‌ اند دارای ظاهری مدرن بوده و برای کاربر آشنا هستند؛ درنتیجه مردم فکر می‌کنند استفاده از محصول نهایی آسان است.

ابزارهای زیادی برای کمک به کار با این سیستم طراحی در دسترس ‌اند؛ روی منابع (Resources) در نوار ناوبری کلیک کنید تا آن ‌ها را بیابید.

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

بخش ‌هایی برای کار با تصاویر، ابزارهای پویانمایی، آزمودن، تحویل به مشتری یا برنامه نویسان و کار با واقعیت افزوده (AR) وجود دارد.

ابزارهای بصری

23. کانوا (Canva)

می ‌خواهید اقدام به موکاپ (mock up) سریع و ساده چیزی مثل اطلاع ‌نگاشت نمایید؟ اگر این‌طور است لارنس هارمر (Lawrence Harmer)، مؤسس «Solve Web Media»، استفاده از کانوا (Canva) را توصیه می ‌کند.

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

هارمر (Harmer) می ‌گوید: «کانوا (Canva) برای ساخت تصاویر باکیفیت بسیار خوب است. تصاویر دریچه ‌ای به هسته‌ ی اصلی وب ‌سایت شما و رسانه ‌های اجتماعی‌ اند؛ پس چنین ابزاری می ‌تواند کلید موفقیت باشد.»

24. افینیتی فوتو (Affinity Photo)

به دنبال جایگزینی برای فتوشاپ یا ایلاستریتر (Illustrator) هستید؟ افینیتی فوتو (Affinity Photo) مختص حرفه‌ ای ‌هاست چراکه شامل تقریباً تمام چیزهایی است که ممکن است به آن ‌ها نیاز پیدا کنید. روی دسکتاپ عالی عمل می ‌کند و یک نسخه ‌ی فوق‌ العاده‌ی آی ‌پاد (iPad) نیز دارد.

این برنامه، ایلاستریتر (Illustrator) و فتوشاپ را در یکجا جمع کرده و ویژگی‌ ها و قدرت زیادی دارد که شما را قادر می ‌سازد تا بتوانید طرح ‌های شگفت‌ انگیزی خلق کنید.

25. اوریون آیکون (Orion Icon)

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

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

اگر برای شما نیز چنین اتفاقی افتاده به اوریون آیکون (Orion Icon) نگاهی بیندازید. این ابزار برای یافتن آیکون ‌های مناسب بسیار مفید است و علاوه بر آن می ‌توانید سبک آیکون خود را که شامل گزینه ‌های آیکون ‌های توپُر، خطی، رنگی و تخت است تغییر دهید.

همه آیکون ‌ها با فرمت «SVG» و وکتور در دسترس ‌اند و تعدادی کنترل ‌کننده دارند که نهایتاً منجر به ساخت یک مجموعه بی ‌نقص برای شما می ‌شوند.

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

26. SVGito

SVGito یک اپلیکیشن وب رایگان است که فایل ‌های اس ‌وی‌ جی (SVG) شما را سر و سامان می ‌دهد تا لازم نباشد آن ‌ها را به‌طور دستی ویرایش کنید.

این اپلیکیشن کوچک تروتمیز که ساخته ‌ی پیتر نوول (Peter Nowell) است به‌طور خودکار و با لمس یک دکمه فایل ‌های اس ‌وی ‌جی (SVG) شما را بهینه می ‌کند؛ معمولاً اندازه و پیچیدگی آن‌ ها را کاهش می ‌دهد بدون اینکه تغییری در شکل ظاهری آن‌ها در صفحه ‌نمایش به وجود آید.

27. اسکوش (Squoosh)

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

شما تصاویر خود را با درگ اند دراپ (Drag and Drop) وارد اپلیکیشن می ‌کنید و با یک لغزنده (Slider) بازی می ‌کنید تا میزان فشرده‌ سازی را تغییر دهید؛ به این صورت می ‌توانید بین کیفیت و اندازه‌ ی فایل به تعادل منطقی برسید.

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

انیمیشن

28. پرینسیپل (Principle)

پرینسیپل (Principle) برای طراحی تعاملی- به ‌ویژه برای اپلیکیشن‌ های موبایل– عالی است. تغییر و جلوه دادن به تعاملات پویانمایی شده با استفاده از پرینسیپل (Principle) مثل آب خوردن است.

می‌ توانید به هر «asset» نگاه کنید و بفهمید چگونه به‌ طور مستقل کار پویانمایی را انجام می دهد؛ حتی می ‌توانید زمان‌ بندی و سرعت پیش رفت پویانمایی را نیز بررسی کنید. این اپلیکیشن فقط روی مک اجرا می ‌شود.

29. انیما (Anima)

اگر می ‌خواهید از اسکچ (Sketch) برای نمونه ‌سازی اولیه پیشرفته‌تر استفاده کنید، پلاگین انیما (Anima) به دردتان می‌خورد. برای بسیاری از کاربران اسکچ (Sketch)، این پلاگین می ‌تواند قطعه ‌ی گمشده ‌ی خلق ترنزیشن ‌های فوق ‌العاده و پویانمایی ‌های پیچیده‌ تر رابط ‌ها باشد.

30. انیمه دات جی‌اس (Anime.js)

اگرچه پویانمایی صفحات وب زمانی بدنام بود اما اگر از آن به‌ درستی استفاده شود می ‌تواند ناوبری یک وب ‌سایت را آسان ‌تر کند. پویانمایی ‌ها و ترنزیشن ‌های سی ‌اس ‌اس (CSS) بسیار کمک کردند اما تعاملات پیچیده ‌تر اغلب به یک کتابخانه نیاز دارند.

اگر می ‌خواهید مؤلفه ‌های پویانمایی شده‌ی پیچیده‌ ای را به اپلیکیشن ‌هایتان اضافه کنید انیمه دات ‌جی ‌اس (Anime.js) از آن موتور های پویانمایی است که بد نیست به آن نگاهی بیندازید.

رابط برنامه‌نویسی اپلیکیشن (API) به شما اجازه می ‌دهد مؤلفه ‌ها را با استفاده از انتخاب‌کننده ‌های سی‌ اس ‌اس (CSS)، مؤلفه ‌های مدل شیء گرای سند (DOM) یا حتی آبجکت ‌های جاوااسکریپت هدف ‌گذاری کنید.

31. هایپ پروفشنال (Hype Professional)

هایپ پروفشنال (Hype Professional) اپلیکیشنی است که به شما اجازه می ‌دهد از قالب ‌بندی ‌های تعاملی و پویانمایی شده خارق ‌العاده اچ‌ تی ‌ام ‌ال 5 (HTML 5) خروجی بگیرید.

مؤلفه ‌ها را با حرکات و برخوردهای طبیعی بدون نیاز به فریم کلیدی (keyframe) یا کد پویانمایی کنید. این ویرایشگر که کار با آن بسیار ساده است به شما ابزاری ارائه می ‌دهد تا بتوانید به طرح ‌هایتان جان دهید و با رابط ‌های ایستا را خداحافظی کنید.

32. سیزی (Sizzy)

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

خالق آن کریستیان ریستووسکی (Kristijan Ristovski) قبلاً از «react-storybook» استفاده می ‌کرد تا بتواند نسخه ‌های مختلف هر جزء را ببیند اما از اینکه مجبور بود با دستگاه‌ های مختلف کار کند اذیت می ‌شد.

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

33. لینک اسپیلیت (Linksplit)

مؤثرترین روش برای بهتر کردن وب ‌سایتتان انجام آزمایش ای‌ بی (A/B testing) است: ترافیک را بین دو یا چند نسخه‌ ی مختلف تقسیم کنید و ببینید کدام‌ یک بهتر عمل می ‌کند.

لینک اسپلیت (Linksplit) انجام این کار را بسیار ساده می‌کند. استفاده از آن برای 10 هزار کلیک اول رایگان است و حتی نیازی به ثبت‌نام نیز ندارید.

وقتی به سایت رفتید، یوآرال ‌های (URL) مقصد را وارد کنید تا به شما یک یوآرال (URL) آزمایشی کوتاه داده شود و بتوانید آن را با مخاطبین خود به اشتراک بگذارید. اگر مایل باشید می ‌توانید قانون هم تعیین کنید.

مثلاً اگر بخواهید کسانی که در انگلستان هستند و در پلتفرم آی ‌او‌اس (iOS) از کروم (Chrome) استفاده می ‌کنند نسبت به افرادی که در آمریکا هستند به ‌جایی متفاوت هدایت شوند می ‌توانید به‌ راحتی این کار را انجام دهید.

34. وریفایر (Verifier)

آدرس ‌های ایمیل جعلی ثبت ‌شده در سرویس ‌های ارائه‌دهنده ایمیل‌ های منقضی شونده (یک‌بارمصرف) به جامعه ‌ی اینترنتی آسیب وارد می کند و این ابزار ساده می ‌تواند نجات ‌بخش سایت شما باشد.

می ‌توانید وریفایر (verifier) را در قسمت ثبت ایمیل سایتتان قرار دهید تا ایمیل ‌های وارد شده را در اسرع وقت و با استفاده از فهرستی که شامل بیش از 18 هزار سرویس ارائه ‌دهنده ایمیل ‌های منقضی شونده (یک ‌بارمصرف) است بررسی کند و در صورت نیاز به کاربر بگوید آدرس ایمیل واقعی برای ثبت ارائه دهد.

این ابزار دامنه ‌ی آدرس ارائه‌ شده را نیز بررسی می ‌کند تا ببیند معتبر است و وجود دارد یا نه؛ به‌علاوه نحو (سینتکس) را بررسی می ‌کند تا از درست بودن آن اطمینان حاصل کند.

استفاده از وریفایر (Verifier) به همراه یک کلید رابط برنامه ‌نویسی اپلیکیشنِ (API key) همیشه رایگان می ‌تواند گام مهمی در از بین بردن خطر هرز نامه ‌ها در جوامع آنلاین هدفی که سازنده برنامه مشتاق رسیدن به آن است باشد.

مشقتِ پایان ‌ناپذیر پاک کردن وب از لوث وجود هرز نامه‌ ها دقیقاً از همین ‌جا شروع می ‌شود.

35. لوناسی (Lunacy)

ظهور لوناسی (Lunacy) برای کاربران اسکچ (Sketch) آبی روی آتش بود چون مشکل «محبوس شدن» فایل ‌های «.sketch» روی مک را حل می‌کرد.

حالا می ‌توانید با استفاده از این نرم ‌افزار رایگان در بستر ویندوز این فایل ‌ها را بازکرده، ویرایش و نهایتاً ذخیره نمایید.

لوناسی (Lunacy) برنامه‌ ای سریع است- فایل‌ های بزرگ را بدون این‌که از کار بیفتد باز می ‌کند- و چند ابزار ویرایش دارد پس می ‌توانید تغییراتی را در فایل اعمال کنید، آن را ذخیره نمایید و برای همکارانتان ارسال کنید.

می ‌توانید از فایل ‌ها با فرمت پی ‌‌ان ‌جی (PNG) و اس ‌وی ‌جی (SVG) خروجی بگیرید و لوناسی (Lunacy) می ‌تواند به‌طور خودکار فونت ‌های گوگل موردنیاز را دانلود کند.

هدف گروه سازنده‌ی لوناسی (Lunacy) این است که به‌تدریج مجموعه ویژگی ‌های این نرم‌افزار را به ویژگی ‌های اسکچ (Sketch) نزدیک کند.

36. زپلین (Zeplin)

زپلین (Zeplin) ابزاری است که مناسب مرحله ‌ی پس از طراحی و پیش از برنامه ‌نویسی است. این ابزار به شما اجازه می ‌دهد طراحی و نمونه‌ های اولیه خود را با تمام مشخصات، کد اسنیپت‌ها و «asset»هایی که از فایل ‌های طراحی موردنیاز است و می‌ توان از آن ‌ها خروجی گرفت به برنامه نویسان منتقل نمایید.

می ‌توانید فایل ‌های اسکچ (Sketch)، فتوشاپ، اکس دی (XD) و فیگما (Figma) را در زپلین (Zeplin) بارگذاری کنید تا این ابزار محیطی برای برنامه نویسان و طراحان ایجاد کند تا بتوانند پروژه را بدون ایجاد راهنما که وظیفه ‌ای وقت ‌گیر است ارسال کنند.

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

جیمز استیف (James Stiff) می ‌گوید: «بهترین قسمت ماجرا این است که زپلین (Zeplin) از رنگ‌ ها، ابعاد و فونت‌ های طرح‌ هایتان مرجعی درست می‌کند که سریع می ‌توان به آن دسترسی پیدا کرد.

این برنامه حتی فایل سی ‌اس ‌اس (CSS) و راهنمای سبک ‌ها را نیز می ‌سازد. به نظر من زپلین (Zeplin) به‌ شدت باعث کاهش اتلاف وقت می ‌شود و به نظر می رسد دوستان برنامه ‌نویس من هم آن را خیلی دوست دارند.»

37. ری اکت اسکچ دات اپ (React Sketch.app)

ری اکت اسکچ دات اپ (React Sketch.app) روشی ساده برای مدیریت «asset»های اسکچ (Sketch) در سیستم ‌های طراحی بزرگ ارائه می‌کند.

این برنامه توسط گروه مجموعه‌ ی ایربی ‌ان‌ بی (Airbnb) ساخته ‌شده تا فاصله ‌ی بین طراحان و مهندسان را از میان بردارد و در حقیقت یک کتابخانه منبع باز است که به شما اجازه می ‌دهد بتوانید مؤلفه ‌های ری اکتی (React) بنویسید که در سند های اسکچ (Sketch) رندر (Render) می‌ شوند.

ازآنجایی‌ که ری اکت اسکچ دات اپ (React Sketch.app) از فلکس باکس (Flexbox) بهره می ‌برد، مؤلفه ‌های آن می ‌توانند قالب ‌بندی‌ های غنی مشابه مؤلفه‌ های واقعی شما را داشته باشند. این یعنی دیگر لازم نیست مستطیل ‌ها را با دست بکشید (درگ کنید)؛ همه‌چیز درست مثل موتور قالب ‌بندی هدف شما کار می‌ کند.

پس ری اکت اسکچ دات اپ (React Sketch.app) وظیفه ‌ی گرفتن و قرارداد داده ‌ها در فایل ‌های اسکچ (Sketch) را آسان می‌ کند. همچنین روشی ساده برای ساخت ابزارهای طراحی سفارشی خودتان در اسکچ (Sketch) فراهم می‌ سازد.

38. یوآرال (URL) به پی‌ دی ‌اف (PDF)

یوآرال (URL) به پی ‌دی اف (PDF) که ساخته ‌ی گروه الوار کارتو (Alvar Carto) است یک رابط برنامه ‌نویسی اپلیکیشن (API) خود میزبان است که با استفاده از آن می ‌توانید فایل ‌های اچ ‌تی ‌ام‌ال (HTML) خود را به پی ‌دی ‌اف (PDF) تبدیل کنید؛

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

رابط برنامه‌ نویسی اپلیکیشن (API) معمولاً قوانین سی ‌اس ‌اسِ (CSS) «@media print» صفحات یا هر نوع محتوای دیگر مبتنی بر اچ‌ تی ‌ام ‌ال (HTML) را به‌طور پیش ‌فرض نادیده می ‌گیرد و باعث می ‌شود کروم (Chrome)، «@media screen» را اجرا کند تا پی ‌دی ‌اف (PDF) پیش ‌فرض بیشتر شبیه به سایت اصلی شود.

می‌ توانید آن را در فواصل زمانی معین طوری تنظیم کنید که به ‌طور خودکار عمل کند و از همه بهتر اینکه رایگان است!

39. اووکد (Avocode)

اووکد (Avocode) باعث می ‌شود برنامه نویسان سمت کاربر با استفاده از طرح ‌های فتوشاپ و اسکچ (Sketch) خیلی راحت بتوانند وب ‌سایت یا اپلیکیشن ‌هایی را کد نویسی کنند.

همان گروهی که سی ‌اس ‌اس هت (CSS Hat) و پی ‌ان ‌جی هت (PNG Hat) را ساخته ‌اند این برنامه را نیز توسعه داده ‌اند پس دانستن این‌که فرآیند خروجی گرفتن را در این برنامه پیشرفته ‌تر کرده‌ اند تعجب ‌آور نیست.

بااینکه اپلیکیشن ‌های قبلی به شما اجازه می‌ دادند از «asset»ها خروجی بگیرید اما آنچه اووکد (Avocode) را خاص می ‌کند این است که می‌ توانید از پلاگین فتوشاپ آن استفاده کنید تا فایل پی ‌اس ‌دی (PSD) خود را فقط با یک کلیک وارد اووکد (Avocode) کنید.

اووکد (Avocode) به‌طور خودکار و در چشم برهم زدنی فایل پی ‌اس ‌دی (PSD) یا اسکچ (Sketch) شما را تحلیل می ‌کند و همه‌ چیز را وارد یک رابط کاربری (UI) می ‌کند که به ‌خوبی طراحی ‌شده است.

پس ‌از آن دیگر شما روی خروجی گرفتن از «asset» ها کنترل کامل دارید مثلاً می ‌توانید به‌طور استاندارد از فایل ‌های اس ‌وی‌ جی (SVG) خروجی بگیرید.

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

وو هوانگ آنه (Vu Hoang Anh) هم‌ بنیان‌ گذار اووکد (Avocode) می ‌گوید: «هر آنچه کاربران برای کد نویسی نیاز دارند در اختیار آن‌ ها قرار داده ‌شده است مثل پیش ‌نمایش طرح، دسترسی به تمام لایه‌ها و امکان خروجی گرفتن از «asset»ها.

بهترین مزیت آن این است که برنامه نویسان اصلاً به فتوشاپ یا اسکچ (Sketch) نیازی پیدا نخواهند کرد. جریان کاری فعلی اصلاً خوب نیست و به همین دلیل است که ما اووکد (Avocode) را ساخته ‌ایم.»

هیچ اپلیکیشنی جایگزین برنامه ‌نویس نمی‌ شود اما طراحان زیادی را می ‌شناسیم که با مشکلات متعدد مواجه ‌اند و با رضایتمندی تمام از این ابزار برای تبدیل فایل ‌های اسکچ (Sketch) و پی‌ اس ‌دی (PSD) خود به طرح‌ های تعاملی که بعداً می ‌توانند اساس ساخت یک وب ‌سایت را تشکیل دهند استفاده می ‌کنند.

40. کیت واقعیت افزوده (ARKit)

واقعیت افزوده- ترکیب اشیاء و اطلاعات دیجیتالی با محیط اطراف- حوزه‌ ای از فناوری است که در حال حاضر در جامعه‌ ی برنامه ‌نویسی وب و تولید اپلیکیشن هیجان بسیار زیادی ایجاد کرده است.

قسمت اعظم این هیجان به دلیل ظهور کیت واقعیت افزوده (ARKit) شرکت اپل است. این کیت، فریم ‌ورکی است که به شما اجازه می ‌دهد با استفاده از آیفون و آی ‌پاد بتوانید به‌راحتی واقعیت افزوده (AR) را تجربه کنید.

با روی کار آمدن کیت واقعیت افزوده 3 (ARKit 3) که با آی ‌او‌ اس 12 (iOS 12) سازگار است، چندین کاربر به‌طور هم‌ زمان می ‌توانند از اپلیکیشن ‌های واقعیت افزوده (AR) استفاده کنند و بعداً در حالت مشابهی ادامه آن را تجربه کنند.

همچنین می ‌توانید اشیاء واقعی را به تجربه‌ ی خود از واقعیت افزوده (AR) اضافه کنید و فرصت‌ های بشمار بهتری را در اختیار کاربران خود قرار دهید.

«People Occlusion» به محتواهای واقعیت افزوده (AR) اجازه می دهد تا به‌طور واقع‌ گرایانه از پشت و جلوی افراد در دنیای واقعی عبور کنند و باعث می ‌شود تجربه ‌های واقعیت افزوده (AR) کامل‌تر شده و درعین‌حال جلوه‌ های سبک پرده سبز را تقریباً در هر محیطی ممکن می ‌سازد.