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

 

 1.Pattern Lab

Pattern Lab یک ابزار طراحی سایت است که بر اساس الگو ها می باشد که توسط Dave Oslen  و Brad Frost درست شده است. این ابزار بر اساس طراحی اتمیک است به این معنی که طراحی شما را به کوچیک ترین اجزای تشکیل دهنده ی آن ها می شکاند و از کوچکترین جز سازنده به اسم اتم و ترکیب کردن اونا با هم کم کم کامپوننت ها رو می سازیم و طراحی رو پیش می بریم. این اجزایی که از ترکیب کردن این اتم ها به دست میاد قابلیت استفاده ی دوباره دارند. 
اگر چه هسته ی سایت طراحی استاتیک یک وب سایت می باشد اما Patter Lab  خیلی بیشتر از ایناست. هم زبان و هم ابزاری مناسب و عالی است. به شما اجازه می دهد تا الگو های UI را درون الگوهای دیگر قرار دهید و همین طور با داده های پویا طراحی کنید و ویژگی هایی داره که به شما اطمینان میده که بتونین با viewport های مختلف و صفحه های مختلف کار کنین تا کاملا مطمئن بشید که طراحی شما واکنش گرا می باشد. به شما همچنان این اطمینان را می دهد که طراحی شما کاملا قابل گسترش و توسعه می باشد.

 

2.Vivaldi

بعضی وقت ها بهترین ابزار می تونه یه چیزی به راحتی یه مرورگر جدید باشه. Vivaldi یک مرورگر قابل شخصی سازی است که برای قدرت کاربران که به دست کسانی که Opera را درست کردند، ساخته شده است. با دوبرابر کردن مرورگر برای شما و دوستان، Vivaldi به وسیله تکنولوژی های وب ساخته شده است. JavaScript و React  که استفاده می کنیم تا ارتباط کاربری خود را بسازیم همراه با Node.js و همین طوری بسیاری از ماژول های NPM.

Vivaldi بیشترین مرورگر قابل شخصی سازی است که در خارج در حال حاضر وجود دارد و کنترل های جذاب دیگری مثل ابزاری برای command line ها و صفحه ای برای نت برداری و... دارد که به شما اجازه می دهد همین طور سایت های مورد علاقه ی خودتان را در یک جا نگه داری کنید.

 

3.Affinity Designer

طراح Serif’s Affinity به عنوان کشنده ی فتوشاپ شناخته شده است و این بی دلیل نیست و به راحتی علت آن قابل مشاهده می باشد. اولین تاثیر آن این است که این ابزار واقعا انگار که فقط برای طراحی وب ساخته شده است و همینطور ابزار های گرافیکی آن کاملا مختص به این کار است.

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

می تونین بزرگ نمایی در حد و اندازه ی 1000000 داشته باشید که برای فتوشاپ به میزان 32000 بود که این میزان بزرگ نمایی برای کارهای طریف با وکتورها بسیار مناسب هستند و می تونین کاملا به چیزی که میخواین تغییرش بدین، نزدیک بشین. برگشت و همین طور تاریخچه خصوصیت ها بسیار کارآمد می باشند و به شما اجازه می دهد 8000 قدم بر میگردد!

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

 

4.Avocode

Avocode  ابزاری است که به توسعه دهندگان ظاهر کمک می کند تا به راحتی از Photoshop و Sketch طرح طراحی شده ی خود را کد نویسی کنند. این ابزار به وسیله همان گروهی ساخته شده که PNG hat و CSS hat را به بازار آورده اند و خب از آن ها بعید نبود تا پروسه ی خروجی را یک قدم جلوتر حرکت بدهند. اگر چه قدم های قبلی هم به شما اجازه می داد که از دارایی خود خروجی بگیرید، چیزی که Avocode را خیلی ویژه می کند این است که می توانید فقط با یک کلیک و با استفاده از پلاگین Photoshop ، PSD خود را با Avocode  همگام یا Sync کنید. 
Avocode  سریعا و به صورت اتوماتیک PSD و یا فایل Sketch  شما را آنالیز می کند و همه چی رو به صورت یک UI طراحی شده ی زیبا در می آورد. شما بعد از کنترل همه جانبه ای بر روی صادر کردن دارایی های خود دارید به طور نمونه می توانید به صورت استاندارد به صورت SVG خروجی بگیرید.

همچنین می توانید با کلیک کردن بر روی المان های خود کد مربوط به اون المان را کپی کرده و روی ویرایشگر دلخواه خودتون قرار دهید. 
گفته ی یکی از بنیان گذاران Avocode: " به شما هرچیزی را که برای کد زدن نیاز دارید را ارائه می دهد، یک پیش نمایشی از طراحی  و همین طور دسترسی به تمامی لایه ها و صادر کردن دارایی ها".
"بهترین قسمت اینه که دیگه توسعه دهندگان نیازی به استفاده از Photoshop و همین طور Sketch را ندارند و این جریان کاری کنونی افتضاح بود! برای همین هم ما Avocode را به آن ها عرضه کردیم".
در کل نمیتونم بگم ممکنه یک ابزاری توسعه دهندگان رو 100% قانع کنه ولی خب من از این ابزار برای برگرداندن PSD ها و فایل های Sketch به طراحی های قابل تعامل استفاده می کنم.

 

5.Antetype

ابزاری برای طراحی های واکنشگرا برای وب سایت ها و اپلیکیشن ها می باشد. در اصل به نظر می آید که این ابزار فقط برای ساخت نمونه های با وابستگی بالا ساخته شده است و نه برای تولید فایل ها که خب این چیز خوبیه. تیم سازنده ی این ابزار دقیقا برای هدفی که داشتند وقت صرف کردند و تلاش آن ها رو این که توسعه دهندگان را جایگزین کنند نبوده است.
به گفته ی Tim Lauck ،UX director at Antetype: " استفاده ی خسته کننده و ناامید کننده از ابزار های ویرایش عکس ها برای طراحی UX  باعث شد که ما ابزاری رو بخوایم که با فهم بیشتر از محتوا و لایه ها حواسش به طراحی UX باشه".

"لایه های اتوماتیک و همین طور ابزارهایی که داره به ما اجازه می دهد تا تو کدها دست کاری کنیم و وابستگی کدها و لایه ها به هم نخوره".

با دانلود کردن این ابزار به شما دسترسی داده می شود تا از همه ی ابزار ها استفاده کنید بلافاصله طراحی خودتون رو شروع کنید و نمونه های خود را بسازید. Antetype به شما کتابخونه ای از وسیله ها و سیستم عامل هایی از جمله iOS  ،Android و Windows رو برای شروع میده. و همین طور کمیته های فعالی هم روی سایت وجود داره که میتونید UI kits های خود را از کاربران دیگر Antetype بگیرید. 

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

راستش برای خود من خیلی اینکه از “drag-and-drop” استفاده میکنه و همینطور UI اون فوق العاده نبود ولی یادگیری اون تاثیر گذار و سریع است. یه کم که زمان باهاش بگذرونید می تونید نمونه های اولیه ی عالی ای رو  خیلی سریع بسازید.

 

6.Sketch

از زمانی که این ابزار به بازار اومد یعنی از سال 2009 خیلی دنبال کنندگان عظیمی رو به خودش جذب کرد. سرعت ای که Bohemian Coding، سازنده ی Sketch داره واقعا فوق العاده بود و تیم همچنان در حال عرضه چیز های عالی مثل صادرات و الگوها و... می باشند.

" وقتی ما تصمیم به ساخت Sketch گرفتیم، ما ابزاری رو پیش بینی کرده بودیم که به برنامه نویسان مدرن کمک میکنه".

گفته ی Pieter Omvlee از بنیان گذاران Sketch، "ما سعی کردیم این کار رو به کمک نکات کلیدی ای در رابطه با کاربردهای آن و همین طور ویژگی های به ثمر برسونیم و نتیجه ی اون هم کارهای فوق العاده ای است که امروزه می بینید با Sketch  انجام شده است، می باشد".

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

من واقعا منتظر قدم های بعدی Sketch  هستم! 

 

7.Form

RelativeWave’s Form یک ابزار برای طراحی های اولیه است که خب شبیه هیچ ابزار دیگه ای نیست. استفاده کردن از این ابزار به نظر میاد که یک ترکیبی از کد و طراحی باشه. 
درحالیکه شما نمی تونین در حقیقت در اپلیکیشن خود گرافیک هایی بسازید، باید اون رو با اسم های patches به حرکات خودتون اضافه کنید. ابزار مک دی حقیقت با استفاده از یک دستگاه iOS ای به شما اجازه میده که بتونید نمونه اولیه خودتون رو در جهان واقعی ببینید با اون تعامل بر قرار کنید.
"Form در اصل با این منظور آمده است تا شما بتونید با طراحی ای که قراره در نهایت تولید کنید نزدیک تر ارتباط برقرار کنید".

گفته ی Max Weisel کدنویس خلاق Relative Wave: "هدف ما این است که طراحان دقیقا با قسمت تولیدی طراحی خود در ارتباط باشن و به حل مشکلات پیچیده تری بپردازند".

 

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

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

 

8.UXPin

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

من عاشق اینم که تیم انقدر انعطاف پذیری در اختیار ما قرار می دهد. شما از همون اول این انتخاب رو دارید که با یک صفحه ی خالی آیفون شروع کنید یا با یک وب سایت واکنشگرا و می تونید همه چی رو در app خود طراحی کنید. و اگر پروژه ای از قبل دارید که فقط می خواهید یک سری تعاملات بهش اضافه کنید می تونید با ابزار هایی که داره از Photoshop  و Sketch این کار را انجام دهید.

اگه شما قصد دارید تا از ابتدا طراحی قابی را شروع کنید کتابخانه های مختلفی از جمله UX pattern ها مختلفی مثل foundation  و bootstrap و همین طور حتی iOS و خیلی چیزای دیگه رو در اختیار شما قرار میدهد.

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

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

 

9.Macaw

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

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

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

کدی که ابزار ساخت در اصل خیلی مفهومی و درست ساخته شده بود. بیشتر ابزارهای از این دست نقطه ی ضعف خود را در این موضوع نشان می دهند در حالیکه Macaw  عالی بود! من واقعا برای قدم های بعدی آن لحظه شماری می کنم!

 

10. Marvel

گفته ی Marut Mutlu یکی از بنیان گذاران این ابزار: "خواسته ی ما این بود که فشاری که شما برای پیاده سازی ایده های دیجیتالی خود دارید را به حداقل برسونیم و برای همین ابزار رها از کد نویسی Marvel را ساختیم. که به راحتی عکس ها و طرح های اولیه ی شما رو به صورت تعاملی به prototype ها تبدیل کرده که به نظر شما یک وب سایت واقعی خواهد آمد".

اولین باری که شما Marvel را باز می کنید از شما می خواهد که فایل های خود را از طریق Dropbox به پروژه خود اضافه کنید و خب اگر شما از Dropbox استفاده نمی کنید راه دیگه ای سر راه شما نیست. وقتی شما PSDs خودتون رو در محل داشته باشید، می توانید از Maravel استفاده کنید تا به راحتی صفحات خودتون رو به هم ربط دهید.

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

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

 

11. Webflow

این ابزار طراحی وب به شما اجازه می دهد که وب سایت هایی رو به راحتی بسازید و کد نزنید! UI به شما این اجازه رو می دهد که فقط روی طراحی خودتون تمرکز کنید. به شما اجازه میده که وب سایت خودتون رو در نقاط شکست معروف ببینید و همین طور پیش نمایشی به شما ارائه می دهد که روی اندازه ی صفحه ی خود کاملا کنترل داشته باشید. خیلی از ابزار های طراحی ای که وجود دارند فقط این امکان را به شما می دهند که که با استفاده از drag-and-drop طراحی کنید که خب این ابزار چیزی متفاوت است.

گفته شده ی Vlad Magdalin بنیان گذار: "Webflow نتیجه ی جریان کاری خسته کننده ای بود که بین برادرم Sergie ( طراح)  و من ( کد زن) بود در حالیکه داشتیم برای مشتری ها سایت می زدیم". 

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

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

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