این روزها ابزارهای طراحی وب فوق العاده ای ساخته شده اند. فرقی نمی کند قصد حل چه مشکلی را در جریان کاری طراحی وب دارید؛ بالاخره ممکن است بتوانید یک ابزار ابزاری مستقل یا یک قابلیت تعبیه شده در یک اپلیکیشن بزرگ تر برای آن پیدا کنید. اگرچه جامعه طراحی وب نسبت به‌روزهای اولیه دستخوش تغییراتی شده اما هنوز هم روحیه به اشتراک گذاری کارها در افراد زنده مانده است؛ پس بیشتر این ابزارهای درجه یک رایگان اند.
تعدد ابزارها مزیتی عالی محسوب می شود اما عیبش این است که می تواند موجب سردرگمی در انتخاب شود چراکه روش های مختلفی برای انجام یک کار مشابه وجود دارد.
در این مقاله فهرستی از ابزارهایی را تهیه کرده ایم که ازنظر ما در حال حاضر بهترین های موجودند. اگرچه لیست ما کامل نیست اما امیدواریم با مختصر و مفید کردن آن بتوانیم کار انتخاب ابزار مناسب برای جریان کاری شما را راحت تر کنیم.
ازآنجایی‌که این فهرست نسبتاً طولانی است، ابزار ها را دسته بندی کرده ایم تا راحت تر بتوانید برنامه مدنظر خود را پیدا کنید. در قسمت اول به معرفی نرم افزارهای جامع طراحی وب می پردازیم؛
سپس در مورد ابزارهای مقدماتی وایرفریمینگ، فریم ورک های طراحی وب و کتابخانه ها توضیح می دهیم. در قسمت دوم ابزارهای کوچک تر و تخصصی تر برای انجام همه کارها از کار با تصاویر گرفته تا ورود به فضای واقعیت افزوده (AR) را پیدا خواهید کرد.
برای مطالعه بیشتر در زمینه ابزار های طراحی به مقاله https://amanjacademy.com/ui-design-tools/مراجعه کنید
ابزارهای طراحی جامع
اینویژن استودیو (InVision Studio)
هدف اینویژن استودیو (InVision Studio) تحت پوشش قرار دادن تمام پایگاه ها است و تنها ابزار رابط کاربری (UI) است که به آن نیاز پیدا خواهید کرد. این ابزار ویژگی های بسیار زیادی دارد که به شما در خلق رابط های تعاملی زیبا کمک می کند.
این ویژگی ها شامل ابزارهایی برای نمونه سازی اولیه سریع، طراحی پاسخگو و مشارکتی و همچنین کار با سیستم های طراحی است.
اگر شما به همراه اینویژن از ابزارهایی مثل اسکچ (sketch) استفاده می کنید باید بدانید که برخی از ویژگی هایشان مشابه اند. اگرچه قدرت اینویژن استودیو (InVision Studio) در بخش نمونه سازی اولیه است به ویژه اگر طرح شما شامل پویانمایی نیز باشد.
نمونه سازی اولیه سریع به شما اجازه می دهد ترنزیشن های پیچیده و تخیلی خلق کنید و شما را قادر می سازد تا بتوانید پویانمایی را متناسب با همان سطحی خلق کنید که می خواستید.
فقط مشخص کنید می خواهید رابط کاربری تان (UI) در ابتدای ترنزیشن خود به چه شکل باشد و بعد نتیجه ی نهایی را طراحی کنید. اینویژن استودیو (InVision Studio) بقیه کارها را برایتان انجام می دهد.
به‌علاوه می توانید این پویانمایی ها و ترنزیشن های سفارشی را از طریق انجام حرکات و تعاملاتی مثل کشیدن، کلیک کردن و بردن موس روی آیتم مورد نظر خلق کنید.
وقتی همه کارها را انجام دادید از طریق اینویژن از نمونه ی اولیه خود خروجی بگیرید و از دیگران برای مشارکت دعوت به عمل آورید. می توانید پروژه خود را در پلتفرم هدف به نمایش بگذارید که روش خیلی خوبی برای بررسی و آزمایش طرح تان است. بعداً مشتری ها می توانند دقیقاً روی طرح نظر دهند.
به علاوه دیگر لازم نیست فکرتان را درگیر خلق بُرد های هنری متعدد برای چند دستگاه (پلتفرم) مختلف کنید؛ موتور چیدمان اینویژن استودیو (InVision Studio) طرح شما را به طور خودکار متناسب با همه ی پلتفرم‌ها تغییر می دهد.
این ویژگی که باعث صرفه جویی در زمان می‌شود به شما فضای کافی می دهد تا بتوانید بیشتر از قبل در مورد طرح خود فکر کنید.
اسکچ (Sketch)
نرم‌افزار اسکچ (Sketch) که متعلق به شرکت بهمیان کدینگ (Bohemian Coding) است یکی از پرکاربردترین پلتفرم های طراحی وب است؛ ابزار مبتنی بر وکتور بسیار قدرتمندی است که برای ساخت رابط ها و نمونه های اولیه به شکل مشارکتی کاربرد دارد.
اسکچ (Sketch) به‌طور ویژه برای ساخت وب سایت و اپلیکیشن ساخته شد؛ پس ویژگی های غیرضروری وجود ندارد که بخواهد رابطتان را شلوغ کند. همچنین سریع‌تر و مؤثرتر از نرم‌افزاری است که حوزه ی کاربردی گسترده تری دارد.
رُری بری (Rory Berry)، مدیر پروژه در شرکت سوپرب (Superb)، در سال 2017 به اسکچ (Sketch) روی آورد و به شدت استفاده از آن را به دیگران توصیه می کند.
او می گوید: «در مقایسه با فتوشاپ ترتیب کردن تمام سندها و انجام اصلاحات در اسکچ (Sketch) بسیار آسان تر است. اسکچ (Sketch) سندهای کوچکی دارد درحالی‌که فتوشاپ سندهای بزرگی دارد.
از این جهت که این نرم افزار مبتنی بر وکتور است، اندازه ی فایل‌ها نسبت به فتوشاپ بسیار پایین تر است.»
این ها همه‌ی حقایق نیستند. «سیستم گرید (Grid System) تعبیه‌شده در اسکچ (Sketch) عالی است و طراحی رابط را بسیار ساده‌تر می‌کند.
فکر می کنم طراحی کلی رابط کاربری (UI) و نبود ویژگی های غیر ضروری باعث شده بتوان با آن طراحی تمیزتری انجام داد. فتوشاپ در مقایسه با این نرم‌افزار خیلی پیچیده است.»
جامعه این نرم افزار صدها پلاگین اسکچ (Sketch) ارائه می دهد تا روند انجام کارتان بدون دردسرتر و راحت تر پیش رود.
عیب اسکچ (Sketch) این است که فقط برای سیستم عامل مک در دسترس است و هیچ برنامه ای برای پشتیبانی از دیگر سیستم عامل ها وجود ندارد.
این تبدیل به مشکل شده چون طراحان بیشتر مایل اند فایل های «.sketch» خود را با برنامه نویسانی که از ویندوز استفاده می کنند به اشتراک بگذارند.
خوشبختانه فعلاً یک اپلیکیشن «اسکچ (Sketch) برای ویندوز» به نام «Lunacy» وجود دارد که با استفاده از آن می توان فایل های «.sketch» را باز و ویرایش کرد و قسمت اعظم این مشکل را حل کرد.
ادوبی اکس دی (Adobe XD)
ادوبی اکس دی (Adobe XD) بهترین محیط را برای پروژه های دیجیتالی ارائه می دهد و تحت مجموعه ی «Adobe Creative Cloud suite» فعالیت می کند.
اگر از کاربران مشتاق شرکت ادوبی (Adobe) هستید اما با اکس دی (XD) کارنکرده اید در شروع کار احتمالاً متوجه شوید که رابط آن خیلی شبیه رابط دیگر نرم افزارهای ادوبی (Adobe) نیست.
اگرچه در رقابت با دیگر ابزارهای بزرگ موجود عقب نمی ماند. اگر مدتی با فتوشاپ طراحی کرده باشید که خیلی بهتر است اما برای طراحی رابط کاربری (UI) ارزش وقتی را که صرف می کنید دارد.
این ابزارِ طراحی وکتور و وایرفریمینگ (wireframing) با اضافه کردن ویژگی هایی مثل پشتیبانی از نمونه سازی اولیه صوتی که باعث می شود این ابزار با آخرین به‌روزرسانی های موجود در حوزه ی تجربه ی کاربر (UX) مطابقت داشته باشد روزبه روز بهتر می شود.
اکس دی (XD) دارای ابزارهای طراحی، ابزارهایی که به شما اجازه می دهند تعاملات غیر ایستا را تعریف کنید، پیش نمایش موبایل و دسکتاپ و همچنین ابزارهای به اشتراک گذاری به منظور دادن بازخورد در مورد طرح ها است.
این ابزار به شما اجازه می دهد برای شروع یک پروژه اندازه ی برد هنری مختص دستگاه مدنظر خود را انتخاب کنید؛ حتی می توانید یک کیت رابط کاربری محبوب مثلاً متریال دیزاین (Material Design) گوگل- را وارد نرم‌افزار (import) کنید.
از همه مهتر اینکه ادوبی اکس دی (Adobe XD) با دیگر نرم‌افزارهای «Creative Cloud» یکپارچه می شود؛ به این معنی که می توانید به راحتی «asset»های فتوشاپ یا ایلاستریتر (Illustrator) را وارد این نرم‌افزار (import) کرده و با آن ها کارکنید.
اگر با دیگر اپلیکیشن های ادوبی (Adobe) کارکرده باشید، رابط کاربری (UI) به نظرتان آشنا است و یادگیری نحوه ی کار با آن خیلی سخت نیست. آندره رابو (Andrei Robu)، مدیر طراحی شرکت رابو استودیو (Robu Studio) در شهر بارسلون، بین طرفدارانش می گوید: «برای ساخت سریع موکاپ (mock up) عالی است.
رابط خیلی سبکی است که عکس های زیادی در آن بارگذاری شده اند و برای بوم های ترکیب بندی (moodboards) عالی است.
نمونه سازی اولیه خیلی مفید است چون می توان به مشتری ها نشان داد اجزاء پروژه چگونه کار می‌کنند؛ به ویژه برای این خوب است که می توانید محتواها را در چشم بر هم زدنی به صورت آنلاین منتشر کنید.»
الیس راجرز (Ellis Rogers)، طراح گرافیک در شرکت ریسپشنال با مسئولیت محدود (Receptional Ltd) هم استفاده از این نرم افزار را توصیه می کند: «وقتی کار طراحی/ نمونه سازی اولیه یا وایرفریمینگ (wireframe) به اتمام رسید، ادوبی اکس دی (Adobe XD) به شما اجازه می دهد خیلی سریع عناصر را انتخاب کرده و ترنزیشن صفحات را برای نمونه اولیه اجرایی خلق کنید که می توان آن را توسط یک لینک به اشتراک گذاشت.»
سپس این طور توضیح می دهد: «این لینک به شما اجازه می دهد بازخوردها را به ازای هر صفحه جمع آوری کرده و همه چیز را سازمان دهی نمایید. این لینک را می توان داخل ادوبی اکس دی (Adobe XD) به روزرسانی کرد تا مشتری همواره آخرین نسخه را ببیند و نگران دریافت نسخه های به‌روزرسانی نشده نباشد. این ویژگی لذت انجام کار را دوچندان می کند.»
ماروِل (Marvel)
مارول (Marvel)ابزاری دیگر برای طراحی وب است که برای تولید سریع ایده ها، تصحیح یک رابط به همان شکلی که شما مایلید درآید و ساخت نمونه های اولیه بسیار مناسب است.
مارول (Marvel) در ساخت صفحات از روشی بسیار منظم استفاده می‌کند و به شما اجازه می دهد طرح خود را از طریق یک نمونه اولیه شبیه سازی کنید.
گزینه های یکپارچه سازی فوق العاده ای برای درج طراحی هایتان در جریان کاری پروژه وجود دارد. جالب اینکه ویژگی آزمایش کاربر در آن ادغام شده است که استفاده از آن در حال حاضر در حوزه‌ی ابزارهای طراحی وب کمی غیرمعمول است. همه چیز آنلاین است پس نیازی به دانلود هیچ چیز نیست.
فیگما (Figma)
فیگما (Figma) ابزاری برای طراحی رابط است که اجازه می دهد چند طراح بتوانند به‌طور هم زمان در آن مشارکت داشته باشند. این قابلیت وقتی چند ذینفع در پروژه وجود دارند که همگی در شکل دهی به نتیجه نهایی دخالت دارند بسیار مؤثر است.
این ابزار در مرورگر یا ویندوز، مک یا لینوکس در دسترس است. بسته به هدف شما از به‌کارگیری این ابزار می توانید به آن به‌صورت رایگان و غیر رایگان دسترسی داشته باشید. در ادامه به بیان برخی از ویژگی های برجسته آن می پردازیم.
بنیامین رید (Benjamin Read)، طراح سمت کاربر توضیح می دهد: «فیگما (Figma) دارای یو اس پی (USP) مشابه اسکچ (Sketch) است؛ تنها تفاوتی که دارد این است که در چند پلتفرم می توان از آن استفاده کرد.
وقتی از آن برای ساخت چند آیکون استفاده کردم دیدم که جریان کاری واقعاً بدون خلل پیش می رود. خیلی سریع آن را یاد گرفتم و مزیت اضافه ی مشارکتی بودن هم در دسترس من بود: می توانید داخل اپلیکیشن با دیگران به اشتراک گرافیک هم بپردازید.»
او اضافه کرد: «من سعی کردم برای کارم از لینوکس استفاده کنم؛ گاهی هم از ویندوز استفاده می کنم. فیگما (Figma) ازنظر کاربردی برای من خوب است چون در چند سیستم عامل در دسترس است.»
دیوید ایستوود (David Eastwood)، محتوا نویس و سازنده ی کارهای هنری آزادکار نیز نظرات خوبی در مورد فیگما (Figma) دارد: «همچنین وقتی لازم بود به‌سرعت MVTها را با اندازه کامل مدل سازی کنیم واقعاً مفید بود؛
گاهی لازم است به طرح فعلی چند چیز کوچک اضافه شود. اینکه می توان به‌سرعت برای دسکتاپ، تبلت و موبایل طراحی انجام داد را خیلی دوست داریم.»
افینیتی دیزاینر (Affinity Designer)
دن ادواردز (Dan Edwards)، طراح محصول، می گوید: «برخی به افینیتی دیزاینر (Affinity Designer)، محصول شرکت سریف (Serif)، لقب «قاتل فتوشاپ» را داده اند و دلیل آن بسیار واضح است.
چند ویژگی در آن بود که واقعاً دوست داشتم. این ویژگی ها شامل لایه های قابل تنظیم و غیر مخرب بود؛ به این معنی که می توانید تصاویر یا وکتورها را بدون اینکه به آن ها آسیب بزنید تنظیم کنید.»
«قابلیت بزرگ نمایی یک میلیون درصدی آخر امکانات بود! به ویژه وقتی با کارهای هنری مبتنی بر وکتور کار می کنید خیلی به درد می خورد چون می توانید واقعاً در آن دقیق شوید.
ویژگی های بازگرداندن عمل انجام‌شده (Undo) و تاریخچه واقعاً کاربردی است: افینیتی (Affinity) به شما اجازه می دهد تا 8000 مرحله عقب بروید!»
«رابط کاربری (UI) در طراحی اصطلاح آشنایی است. به نظر می رسد هرکسی که می خواهد به جای فتوشاپ از نرم افزار دیگری استفاده کند می خواهد همه چیز مشابه باشد که واقعاً چالش برانگیز است.
افینیتی (Affinity) در این راستا قالب بندی کلی را طوری طراحی کرده که آشنا به نظر بیاید، در عین حال با پنهان سازی عوامل مزاحم باعث مؤثرتر شدن آن گردیده است. من به‌راحتی توانستم کار طراحی را در آن شروع کنم.»
افینیتی دیزاینر (Affinity Designer) در آی پاد هم در دسترس است؛ توجه کنید که این برنامه آن طور که شاید انتظار داشته باشید یک اپلیکیشن موبایل نیست که در مقیاس کوچک عرضه شود: دقیقاً همان نسخه‌ی کاملی است که در دسکتاپ عرضه می‌شود.
توجه کنید شرکت سریف (Serif) جایگزینی برای فتوشاپ به نام «افینیتی فوتو-Affinity Photo» ساخته و همچنین جایگزینی برای این دیزاین به نام (افینیتی پابلیشر-Affinity Publisher) خلق کرده است؛ همه این نرم افزارها با یکدیگر به‌خوبی کار می‌کنند.
موکاپ‌ها (mock up) و نمونه‌های اولیه
یواکس پین (UXPin)
ابزار طراحی بعدی در فهرست ما یواکس پین (UXPin) است. این اپلیکیشن که مختص نمونه سازی اولیه است برای مک، ویندوز یا مرورگرها در دسترس است.
در اغلب ابزارهای دیگر طراحی تنها می توانید تعاملات را بااتصال عناصر مختلف موجود در برد هنری خود ایجاد کنید درحالی‌که یواکس پین (UXPin) به کد نزدیک تر است و به شما اجازه می دهد با حالات مختلف تعاملی، منطقی و مؤلفه های کد کارکنید.
کتابخانه هایی برای آی او اس (iOS)، متریال دیزاین (Material Design) و بوت استرپ (Bootstrap) در آن ادغام شده‌اند؛ علاوه بر آن صدها مجموعه آیکون های رایگان نیز در آن وجود دارد تا به شما در مسیر طراحی کمک کند.
همچنین یواکس پین (UXPin) اخیراً ویژگی های دسترسی را به این نرم‌افزار اضافه کرده که باعث می شود طرح هایتان مطابق استانداردهای خط مشی دسترس پذیری محتوای وب (WCAG) باشد که ما آن را تحسین می‌کنیم.
ای پی آی ریکوست (API Request) آخرین ویژگی اضافه شده به قابلیت های تعاملی یواکس پین (UXPin) است. این ویژگی به شما اجازه می دهد نمونه اولیه اپلیکیشنی را بسازید که با محصول شما دقیقاً از طریق ابزار طراحی تان و بدون نیاز به کد «صحبت» کند؛ درواقع به شما اجازه می دهد درخواست‌های اچ تی تی پی (HTTP) خود را به یک ای پی آی (API) بیرونی بفرستید.
اولین طرح اولیه خود را می توانید در یواکس پین (UXPin) به‌طور رایگان ایجاد کنید و اگر به این نتیجه رسیدید که برایتان مناسب است می توانید با پرداخت پول به‌طور ماهانه مشترک آن شوید (امکان عضویت یک گروه نیز میسر است).
اخیراً یواکس پین (UXPin) ویژگی های ترکیبی خود را با اسکچ (Sketch) بهبود بخشیده است پس اگر از طرفداران اسکچ (Sketch) هستید و فکر می‌کنید توانایی های آن در نمونه سازی اولیه محدود است می توانید یواکس پین (UXPin) را وارد جریان کاریتان کنید.
پروتو دات آی او (io)
پروتو دات آی او (Proto.io) اپلیکیشنی برتر است که با استفاده از آن می توان نمونه های اولیه نزدیک به واقعیتی ساخت که از ایده هایی بر اساس حدس و گمان شروع‌شده و به طرح های کاربردی ختم می شوند. این ابزار احتمالات زیادی را برای پروژه هایتان به شما ارائه می دهد که شامل پویانمایی هایی با جزییات زیاد و سفارشی است.
می توانید کار را با توسعه‌ی ایده های اولیه که به سبک طراحی دستی است شروع کنید، آن ها را به وایرفریم (wireframe) تبدیل کنید و بعد با ساخت نمونه ی اولیه باکیفیت به اتمام برسانید.
پلاگین های اسکچ (Sketch) و فتوشاپ درصورتی که بخواهید از ابزار های دیگری برای طراحی استفاده کنید کمک می کنند. پروتو دات آی او (Proto.io) می تواند فرایند طراحی را به طور کامل و به خوبی مدیریت کند.
ویژگی های دیگر، مثلاً آزمون کاربر، به معتبرسازی طرح شما کمک می کنند. این نرم افزاری است که تمام ویژگی ها در آن جمع شده و برندهای معتبر بسیار زیادی از آن استفاده می کنند.
تعدادی دموی (نمونه کار) عالی برای شروع وجود دارد و حقیقتاً می توانید ببینید این نرم افزار جامع چگونه به راحتی می تواند جایگزین تعداد زیادی از ابزارهایی شود که در حال حاضر وجود دارند.
قابلیت های اضافه ای که تقریباً اخیراً به پروتو دات آی او (Proto.io) اضافه شده است شامل ویژگی های جدید گسترده ای هستند. این ویژگی ها شامل مدیریت «asset»ها، راهنمای برنامه نویسان و توانایی ثبت نمونه اولیه است.
این ویژگی ها باعث شده این ابزار به سطح کیفی تعداد زیادی از ابزارهای بهتر نمونه سازی اولیه برسد.
بالسامیک (Balsamiq)
اگر به دنبال وایرفریمینگ (wireframing) سریع و مؤثرید، بالسامیک (balsamiq) دقیقاً همان چیزی است که می خواهید. به‌راحتی و سریع می توانید برای پروژه هایتان ساختار و قالب بندی ایجاد کنید.
امکان انجام کار به‌صورت درگ اند دراپ (drag and drop) کار را خیلی راحت تر می کند؛ می توانید دکمه ها را به صفحات دیگری نیز متصل کنید. با وایرفریمینگ (wireframing) می توانید به‌سرعت طرح رابط های خود را تهیه کنید و آن ها را با دیگر اعضای گروه یا مشتری هایتان به اشتراک بگذارید.
بالسامیک (Balsamiq) از سال 2008 وارد بازار شده و با داشتن ویژگی هایی همچون تمرکز بر عملکرد بالا به‌جای کیفیت طراحی، سرعت و تمرکز بر رویکرد های مفید افتخار آفرینی کرده است.
پروتوپای (ProtoPie)
پروتوپای (ProtoPie) که ابزاری برای طراحی وب است به شما اجازه می دهد تعاملات پیچیده را خلق کرده و به عملکرد مطلوب نهایی خود نزدیک شوید. شاید ویژگی متمایز آن توانایی کنترل حسگرهای گوشی های هوشمند ازجمله شیب، صدا، قطب‌نما و لمس سه‌بعدی در نمونه اولیه شما است.
این نرم افزار بسته به پروژه تان می‌تواند برای آن هایی که مایل اند تمام ویژگی های اپلیکیشن های نوشته شده با زبان اصلی سیستم عامل را ایجاد کنند عالی است.
انجام این کار مثل آب خوردن است و نیازی به نوشتن یک خط کد هم نیست! نسخه‌ی 4.2 که به‌تازگی منتشر شده شامل دو ویژگی جدید پرطرفدار است: حالا می توانید اس وی جی (SVG)های قابل‌ویرایش را به صحنه هایتان اضافه کنید و فاصله ی بین دولایه را بلافاصله پس از انتخاب پیدا کنید.
ماک فلو (MockFlow)
ماک فلو (MockFlow) مجموعه ای از اپلیکیشن ها برای وایرفریمینگ (wireframing) و ساخت طرح وب سایت ها است. وایرفریم پرو (WireframePro) به شما کمک می کند تا ایده ی اولیه خود را پرورش داده و سپس آن قدر آن را تغییر دهید تا همان طوری شود که دلتان می خواهد؛ یک ره‌گیر اصلاح رابط کاربری (UI) برای کمک به شما در انجام این کار در این نرم افزار تعبیه شده است.
این نرم افزار به همراه هزاران مؤلفه و قالب بندی از پیش ساخته شده عرضه می شود که می توانید آن ها را برای رسیدن به آنچه مدنظرتان است تغییر دهید؛ همچنین یک حالت پیش نمایش نیز وجود دارد که کار شما را به همکاران و مشتری هایتان نشان می دهد.
وایرفریم‌ها (wireframes) را که تکمیل کنید، دیگر اجزاء این مجموعه به شما در تکمیل جنبه های دیگر طرح ریزی وب سایتتان کمک می کنند که شامل معماری اطلاعات و ساخت راهنمای سبک (می تواند به‌طور خودکار ایجاد شود) است.
همچنین کار از طریق فرآیندی انجام می شود که مرحله به مرحله بوده و پس از تکمیل و تأیید هر مرحله توسط ناظر امکان ادامه روند وجود دارد.
ادوبی کامپ (Adobe Comp)
ادوبی کمپ (Adobe Comp) یک ابزار عالی طراحی وب برای آی پاد (iPad) است که در ایجاد وایرفریم ها (wireframes)، نمونه های اولیه و قالب بندی برای صفحات وب کمک می کند.
این نرم افزار مثل یک اسکچ پد هوشمند مبتنی بر «Creative Cloud» کار می کند. دارای الگوهای از پیش آماده برای شماری از قالب بندی های موبایل و وب است و حتی اگر مایل باشید امکان پرینت هم دارد.
می توانید به‌سرعت با کشیدن اشکال بصری برای بیان تصاویر، متن و غیره پلیس هولدر (placeholder) بسازید. کامپ (Comp) طرح های کلی را به خطوط، دایره و مستطیل تبدیل می‌کند.
اینکه ادوبی (Adobe) هنوز امکان گرفتن خروجی مستقیم به اکس دی (XD) را – علی ر‌غم درخواست طولانی‌مدتی که مدت مدیدی است تحت بررسی قرار گرفته- ممکن نکرده بسیار عجیب و غریب است!
اگرچه خروجی گرفتن برای فتوشاپ (به همراه ایلاستریتر-Illustrator و این دیزاین) در داخل نرم افزار تعبیه شده است و بعد از اینکه تغییرات مدنظرتان را در ویرایشگر تصویر فعلی روی موکاپ (mock up) انجام دادید، می توانید از آن برای اکس دی (XD) خروجی بگیرید.
به جز این مرحله ی اضافه ی ناخوشایند در مسیر کاربر این وایرفریم (wireframe) مختص ادوبی (Adobe)، نرم افزار کامپ (Comp) به دلیل توانایی حضور در همه جا، کاربری ساده و رابط کاربری (UI) مجذوب‌کننده لایق حضور در این فهرست است.
فلینتو (Flinto)
فلینتو (Flinto) ابزاری برای طراحی است که به شما اجازه می دهد تعاملات یکتایی در طرحتان خلق کنید. می توانید از تعدادی حرکت استفاده کنید و ترنزیشن های ساده ای را با طراحی حالات قبل و بعد بسازید. فلینتو (Flinto) به‌راحتی تفاوت ها را شناسایی کرده و کار پویانمایی را برایتان انجام می دهد که بسیار مفید است.
به خاطر داشته باشید که این برنامه فقط در آی او اس (iOS) در دسترس است اما وقتی شروع به استفاده از آن می کنید محیط آن برایتان آشنا است. می توانید به‌صورت آنلاین مستند سازی کنید و مستقیماً فایل ها را از اسکچ (Sketch) و فیگما (Figma) وارد این برنامه کنید.
آکژور (Axure)
آکژور (Axure) همیشه یکی از بهترین ابزارهای وایرفریمینگ (wireframing) در بازار بوده و برای ساخت پروژه های پیچیده ای که نیاز به داده های پویا دارند عالی است. با داشتن آکژور (Axure) واقعاً می توانید روی موکاپ (mock up) کردن پروژه هایی تمرکز کنید که فنی بوده و نیازمند توجه اساسی روی ساختار و اطلاعات هستند.
روند انجام کار انتقالی آکژور (Axure) شامل ایجاد مشخصات جامعی است که به برنامه نویسان کمک می کند بتوانند محصول نهایی را طوری تولید کنند که با طراحی شما هماهنگ باشد.
جاستینمایند (Justinmind)
جاستینمایند (Justinmind) کار نمونه سازی اولیه را انجام می دهد و با دیگر ابزارها مثل اسکچ (Sketch) و فتوشاپ سازگار است. می توانید تعاملات و حرکات مدنظر خود را انتخاب کنید تا بتوانید نمونه اولیه خود را سرهم نمایید.
این نرم‌افزار شامل کیت های رابط کاربری (UI) نیز می شود؛ پس می توانید به‌سرعت برای پلتفرم‌های مختلف رابط های کاربری (UI) بسازید؛ این برنامه پاسخگو نیز هست.
فلوید (Fluid)
فلوید (Fluid) ابزاری ساده و کاربرپسند برای ساخت نمونه های اولیه سریع و کار با طرح ها است. این برنامه شامل مجموعه ای از «asset»هایی است که نیازی به تنظیمات خاصی ندارند و به شما در نمونه سازی سریع کمک می کنند.
وقتی اشتراک آن را خریداری می کنید سرهم کردن نمادهای خودتان با «asset»های ترجیحی تان بسیار ساده است. با این ابزار به‌سرعت می توان رابط های کاربری (UI) را طراحی کرد و «asset»هایی دارد که برای نمونه های اولیه سطح بالا و همچنین سطح پایین در دسترس‌اند.
اینترپلی (Interplay)
اینترپلی (Interplay) یک سیستم نمونه سازی اولیه است که ارتباطات و مشارکت را در گروه شما- به‌ویژه بین طراحان و برنامه نویسان- افزایش می دهد.
این نرم افزار با توجه به سیستم های طراحی ساخته شده است و با کد شما ترکیب می شود تا طوری مستند سازی انجام دهد که به‌راحتی بتوان آن را دنبال کرده و به‌طور خودکار به روزرسانی شود.
اینکه همه ی اعضا به‌طور موازی کار کنند و از آخرین تغییرات اطلاع داشته باشند کاری اساسی است؛ پس وقتی کد شما در این نرم افزار تغییر می کند طرحتان نیز به همین شکل به روزرسانی می شود.
اینترپلی (Interplay) هنوز به صورت آزمایشی کار می کند اما با این وجود با تعدادی از ابزار های طراحی و برنامه نویسی سازگار است. برای اموزش طراحی تجربه کاربری ورسیدن به یک شغل خوب و پردرامد می توانید از اموزش های اکادمی امانج استفاده نمایید
ابزار های طراحی سایت