۵ ابزار طراحی وب

۱)Pattern Lab
 
Pattern Lab یک ابزار بر اساس الگو ها می باشد که توسط Dave Oslen و Brad Frost درست شده است. این ابزار بر اساس طراحی اتمیک است به این معنی که طراحی شما را به کوچیکترین اجزای تشکیل دهنده ی آن ها میشکاند و از کوچکترین جز سازنده به اسم اتم و ترکیب کردن اونا با هم کم کم کامپوننت ها رو میسازیم و طراحی رو پیش می بریم. این اجزایی که از ترکیب کردن این اتم ها به دست میاد قابلیت استفاده ی دوباره دارند .
اگر چه هسته ی سایت طراحی استاتیک یک وب سایت می باشد اما Patter Lab خیلی بیشتر از ایناست. هم زبان و هم ابزاری مناسب و عالی است. به شما اجازه می دهد تا الگو های UI را درون الگوهای دیگر قرار دهید و همینطور با داده های پویا طراحی کنید. و ویژگی هایی داره که به شما اطمینان میده که بتونین با viewport های مختلف و صفحه ها مختلف کار کنین تا کاملا مطمئن شید که طراحی شما واکنشگرا می باشد. به شما همچنان این اطمینان را می دهد که طراحی شما کاملا قابل گسترش و توسعه می باشد.
 
۲) Affinity Designer
 
طراح Serif’s Affinity به عنوان کشنده ی فتوشاپ شناخته شده است و این بی دلیل نیست و به راحتی علت آن قابل مشاهده می باشد.اولین تاثیر آن این است که این ابزار واقعا انگار که فقط برای طراحی وب ساخته شده است و همینطور ابزار های گرافیکی آن کاملا مختص به این کار است.
یه سری خصوصیت های خیلی جالب داره که من خیلی دوستشون داشتم ، شامل لایه های سازگار و غیر مخرب. این دقیقا به این معنی می باشد که مستونسن عکس ها و بردار ها رو بدون آسیب رسوندن به اونا تطبیق بدین.
میتونین بزرگ نمایی در حد و اندازه ی ۱۰۰۰۰۰۰ داشته باشید که برای فتوشاپ به میزان ۳۲۰۰۰ بود که این میزان بزرگ نمایی برای کار های طریف با وکتور ها بسیار مناسب هستند و میتونین کاملن به چیزی که میخواین تغییرش بدین کاملن نزدیک بشین. برگشت و همینطور تاریخچه خصوصیت ها بسیار کارآمد می باشند و به شما اجازه می دهد ۸۰۰۰ قدم بر میگردد!
 
۳) Avocode
 
Avocode ابزاری است که به توسعه دهندگان ظاهر کمک می کند تا به راحتی از Photoshop و Sketch طرح طراحی شده ی خود را کد نویسی کنند. این ابزار به وسیله همان گروهی ساخته شده که PNG hat و CSS hat را به بازار آورده اند و خب از آن ها بعید نبود تا پروسه ی خروجی را یک قدم جلوتر حرکت بدهند.اگر چه قدم های قبلی هم به شما اجازه می داد که از دارایی خود خروجی بگیرید ، چیزی که Avocode را خیلی ویژه می کند این است که می توانید فقط با یک کلیک و با استفاده از پلاگین Photoshop ، PSD خود را با Avocode همگام یا Sync کنید.
Avocode سریعا و به صورت اتوماتیک PSD و یا فایل Sketch شما را آنالیز می کند و همه چی رو به صورت یک UI طراحی شده ی زیبا در می آورد. شما بعد از کنترل همه جانبه ای بر روی صادر کردن دارایی های خود دارید به طور نمونه می توانید به صورت استاندارد به صورت SVG خروجی بگیرید.
 
۴) Sketch
 
از زمانی که این ابزار به بازار اومد یعنی از سال ۲۰۰۹ خیلی دنبال کنندگان عظیمی رو به خودش جذب کرد . سرعت ای که Bohemian Coding ، سازنده ی Sketch داره واقعا فوق العاده بود و تیم همچنان در حال عرضه چیز های عالی مثل صادرات و الگو ها و … می باشند.
” وقتی ما تصمیم به ساخت Sketch گرفتیم ، ما ابزاری رو پیش بینی کرده بودیم که به برنامه نویسان مدرن کمک میکنه” ، گفته ی Pieter Omvlee از بنیان گذاران Sketch ، “ما سعی کردیم این کار رو به کمک نکات کلیدی ای در رابطه با کاربرد های آن و همینطور ویژگی های به ثمر برسونیم و نتیجه ی اون هم کار های فوق العاره ای است که امروزه می بینید با Sketch انجام شده است، می باشد .”
 
من واقعن این مسئله که Sketch خودش رو با منطق های CSS ای ترکیب کرده خیلی دوست دارم. این باعث میشه که طراحی های خودتون رو بتونید خلی راحت به CSS تبدیل کنید ، و این دقیقا کاریه که شما میخواین بکنید چون شما میخواید نهایتا طراحی های خودتون رو با منطق های CSS ای پیاده سازی کنید.
خصوصیت دیگری که برای سرعت بخشیدن کارآمد به نظر میاد ، برش اتوماتیک است. بدون نیاز به اضافه کردن دستی برش ها Sketch میتواند دارایی های شما رو تنها با یک کلیک با فرمت دلخواه خودتون برش بده.
من واقعا منتظر قدم های بعدی Sketch هستم!
 
۵) Form
 
RelativeWave’s Form یک ابزار برای طراحی های اولیه است که خب شبیه هیچ ابزار دیگه ای نیست. استفاده کردن ازین ابزار به نطر میاد که یک ترکیبی از کد و طراحی باشه.
درحالیکه شما نمیتونین در حقیقت در اپلیکیشن خود گرفیک هایی بسازید ، باید اون رو با اسم های patches به حرکات خودتون اضافه کنید. ابزار مک دی حقیقت با استفاده از یک دستگاه iOS ای به شما اجازه میده که بتونید نمونه اولیه خودتون رو در جهان واقعی ببینید با اون تعامل بر قرار کنید.
“Form در اصل با این منظور امده است تا شما بتونید با طراحی ای که قراره در نهایت تولید کنید نزدیک تر ارتباط برقرار کنید.” گفته ی Max Weisel کدنویس خلاق Relative Wave . ” هدف ما این است که طراحان دقیقا با قسمت تولیدی طراحی خود در ارتباط باشن و به حل مشکلات پیچیده تری بپردازند. ”
 
در اصل برای یادگیری این ابزار آموزش های زیادی وجود داره که ممکنه بعضی ها اون رو پیچیده ارزیابی کنند اونم به این علت است که برای کسانی مثل من که عادت دارن با ابزار های دیداری ای مثل photoshop کار کنند سخت می باشد . مثل برای وسط چین کردن المان ای شما باید طول و عرض صفحه را داشته باشید و اعمال ریاضیاتی ای مثل جمع و تفریق روی اون انجام بدین و اون را با صفحه تطبیق بدین و همینطور هم از متغیر هایی کمک بگیرید که ممکنه سخت به نظر بیاد.
ولی وقتی شما دید کلی از نحوه ی کار کردن با این ابزار رو بگیرید می توانید طراحی های بسیار عالی ای با این انجام بدین و همینطور استفاده از سنسور هایی مثل دوربین و … میتونید از خروجی خود مطمئن باشید.

خانه --> اخبار و مقالات --> ۵ ابزار طراحی وب

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

لطفا آدرس ایمیل را بدون WWW وارد نمائید.

نظرات کاربران