طراحی نرم افزار اندروید
طراحی اپلیکیشن موبایل
11 ابزار طراحی وب که بدون آنها نمیشه زندگی کرد!
از طراح ها اولیه تا طراحی دلخواه ، 11 ابزار وجود دارد که باعث میشه که جریان کاری خود را تبدیل کنید.
جهان طراحی وب سایت هیچگاه ثابت نمی ماند.همیشه تکنولوژی ها در حال پیشرفت هستند ، استاندارد ها پیوسته در حال تکامل اند و هر ماه چیز های جدید برای امتحان کردن هستند و میتونه زندگی شما رو به عنوان طراح وب یه کم بهتر کنه.
پیکرنما ها استاتیک کمتر مورد استفاده قرار میگیرن و خط بین توسعه دهنده ها و طراحان هی داره محو تر میشه. ازونجا که اونا بیشتر دارن با هم همکاری می کنن ابزار هایی که استفاده می کنیم باید تغییر کنند.
در اینجا 11 ابزار ضروری برای زندگی به عنوان طراح وب است. اونا رو امتحان کنید، ببینید چطوری کار میکنن ولی خیلی به اونا دل نبندین. یه چیز جدید تری ممکنه در زمان کمی عرضه بشه که ممکنه خیلی راحت خیلی چیزارو تغییر بده.
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
" خواسته ی ما این بود که فشاری که شما برای پیاده سازی ایده های دیجیتالی خود دارید را به حداقل برسونیم و برای همین ابزار رها از کد نویسی Marvel را ساختیم. که به راحتی عکس ها و طرح های اولیه ی شما رو به صورت تعاملی به prototype ها تبدیل کرده که به نظر شما یک وب سایت واقعی خواهد آمد." گفته ی Marut Mutlu یکی از بنیان گذاران این ابزار.
اولین باری که شما Marvel را باز میکنید از شما میخواهد که فایل های خود را از طریق Dropbox به پروژه خود اضافه کنید و خب اگر شما از Dropbox استفاده نمیکنید راه دیگه ای سر راه شما نیست.
وقتی شما PSDs خودتون رو در محل داشته باشید ، می توانید از Maravel استفاده کنید تا به راحتی صفحات خودتون رو به هم ربط دهید.
همینطور یه سری خصوصیت های کارامد هم از جمله تراکنش هایی بین لینک ها و صفحه ها دارد که باعث میشه شما به سرعت ببینید که در مرورگر چطوری به نظر خواهد رسید ، دارد.
و خصوصیت دیگری که برای شما ممکنه جالب باشه که اینه که شما فقط مشخص می کنید که برای چه سیستمی میخواهید طراحی کنید مثلا اگر برای iOS است فقط کافیه اون رو انتخاب کنید و بقیه ی تنظیمات برای شما نمایش داده خواهد شد.
اینکه خیلی راحت میتونین با همکارای دیگه و مشتری ها اون رو به اشتراک بگذارید و همینطور بقیه ی خصوصیت ها استفاده از این ابزار را راحت کرده و به شما پیشنهاد می شود.
11. Webflow
به شما اجازه می دهد این ابزار وب که وب سایت هایی رو به راحتی بسازید و کد نزنید! UI بی نقص این دارد که به شما این اجازه رو می دهد که فقط روی طراحی خودتون تمرکز کنید. به شما اجازه میده که وب سایت خودتون رو در نقاط شکست معروف ببینید و همینطور پیش نمایشی به شما ارائه می دهد که روی اندازه ی صفحه ی خود کاملا کنترل داشته باشید.
خیلی از ابزار های طراحی ای که وجود دارند فقط این امکان را به شما می دهند که که با استفاده از drag-and-drop طراحی کنید که خب این ابزارچیزی متفاوت است .
"Webflow نتیجه ی جریان کاری خسته کننده ای بود که بین برادرم Sergie ( طراح) و من ( کد زن) بود در حالیکه داشتیم برای مشتری ها سایت می زدیم." گفته شده ی Vlad Magdalin بنیان گذار. "امروزه به طراحان وب کمک خواهد کرد تا وب سایت های دلخواه واکنشگرای خود را به سرعت طراحی کنند ."
این ابزار طراحی بدون کد رو یه قدم جلو تر میبره. البته شما هنوزم باید بفهمید که کد ها چطوری عمل میکنن تا بتونید یه چیزی با کاربرد بالا و خوب رو بسازید. مثلا شما نمیتونین هیچی از طراحی و کد ندونین و انتظار داشته باشید تا بتونید یک وب سایت رو طراحی کنید.
در اصل این چیزی خوبیه که webflow باعث میشه شما به کد ها هم دقت کنید بدون اینکه نیاز باشه تا نگرانشون باشید. و همینطور به شما اجازه می دهدکه بتونید سایت خودتون رو به وسیله ی هاست ای که ماه ها به طور رایگان در اختیارتون میزاره ، عمومی کنید و به اشتراک بزارید. بی شک آن را امتحان کنید.
