معرفي ابزار هاي طراحي وب سايت

استفاده درست از ابزار هاي طراحي وب سايت سبب مي شود تا شما كارآمد تر و سريع تر كار كنيد. در ادامه به بررسي درخشان ترين ابزار هاي طراحي وب سايت در سال 2018 مي پردازيم.

Sketch به سرعت ابزار فتوشاپ را به عنوان ابزار طراحي UI جايگزين مي كند. اجازه دهيد كمي واضح تر بگويم: بله، ما مي دانيم كه همه ابزار طراحي Vector UI Sketch را شنيده ايد، اما به نظر مي رسد هنوز بسياري از طراحان وب سايت از فتوشاپ براي طراحي UI استفاده مي كنند.

روري بري، مدير خلاق در Superrb اعتقاد دارد استفاده از فتوشاپ براي طراحي سايت اشتباه است. او مدت ده سال از فتوشاپ استفاده مي كرد و اعتقاد داشت ياد گرفتن چيز هاي جديد و انجام تغييرات سايت به سختي انجام مي شد. از جمله دلايل او اين بود كه Sketch در مقايسه با فتوشاپ، تمام اسناد شما را كه مرتب كرده و انجام تغييرات در Sketch بسيار ساده تر است. همچنين سيستم داخلي ساخته شده در Sketch بزرگ است و باعث طراحي رابط كاربري بسيار ساده تر مي شود. امروزه جامعه Sketch صدها پلاگين را ارائه مي دهد تا جريان كار طراحان را ساده تر و روان تر كند.

ادوبي امروزه ابزار هاي اختصاصي طراحي برداري و ابزار wireframing خود را دارد كه جديدا نسخه بتا آن را هم منتشر كرده است. Adobe XD شامل ابزارهايي است كه شما را قادر مي سازد تا تعاملات غير استاتيك، پيش نمايش هاي تلفن همراه و دسكتاپ را تعريف كنيد و از ابزارهاي به اشتراك گذاري براي دريافت بازخورد در طرح ها استفاده نماييد.

اليس راجرز، طراح گرافيك در Receptional مي گويد: “هنگامي كه طراحي اوليه كامل مي شود، ادوبي XD به شما امكان مي دهد تا به سرعت به انتخاب عناصر و ايجاد تغييرات در صفحه بپردازيد كه اين صفحه مي تواند از طريق يك لينك به اشتراك گذاشته شود. از اين لينك براي دريافت بازخورد استفاده مي شود. بنابراين مشتري هميشه مي تواند آخرين نسخه را مشاهده نمايد.”

Figma يك ابزار طراحي رابط كاربري وب سايت است كه به طراحان اين اجازه را مي دهد تا چند نفر به طور همزمان كار كنند. اين ابزار در مرورگر يا در ويندوز، مك يا لينوكس در دسترس است و بسته به نياز خود مي توانيد از نسخه رايگان يا پولي آن استفاده كنيد.

Figma داراي يك USP مشابه با Sketch است و روند استفاده از آن بسيار ساده و روان مي باشد. همچنين با استفاده از اين ابزار مي توانيد گرافيك را با ديگران به اشتراك بگذاريد.

دان ادواردز، مدير No Divide، مي گويد: “اولين برداشت من اين است كه برنامه فوق العاده خوب طراحي شده و احساس مي كنم كه اين برنامه شامل ابزار هاي طراحي وب سايت و گرافيكي اختصاص يافته است.” از جمله ويژگي هاي مهم Affinity Designer اين است كه شما مي توانيد تصاوير و يا بردارها را بدون وارد شدن صدمه اي به آن ها تنظيم كنيد. زوم 1،000،000،000 درصد نيز از جمله مزاياي فوق العاده اين ابزار طراحي سايت مي باشد. به نظر مي رسد Affinity يكي از رقباي جدي فتوشاپ خواهد بود.

با استفاده از موتور انيميشن Anime مي توانيد برنامه هاي خود را ويرايش كنيد. اگر چه استفاده از انيميشن ها در طراحي وب سايت اغلب اوقات مناسب نيست ولي توسعه دهندگان هميشه به دنبال راه هايي براي ساده تر شدن كارها هستند. استفاده از انيميشن هاي css خوب است، اما تعاملات پيچيده تر اغلب نياز به يك كتابخانه دارند. Anime ابزار جديدي است كه مي توانيد از آن براي ايجاد انيميشن هاي جذاب در وب سايت خود استفاده نماييد كه يك نمونه كد آن را در زير قرار داده ايم:

var myAnimation = anime({
targets: [‘.box1’, ‘.box2’],
translateX: ‘5rem’,
rotate: 180,
duration: 3000,
loop: true
});

اين API به شما اجازه مي دهد كه عناصر را با استفاده از انتخابگرهاي CSS، عناصر DOM يا حتي اشياء جاوا اسكريپت استفاده كنيد.

Avocode باعث مي شود توسعه دهندگان رابط كاربري براي كد كردن وب سايت ها يا برنامه ها راحت تر باشند. Avocode به سرعت و به طور خودكار فايل PSD يا Sketch را تجزيه و تحليل مي كند و يك UI زيبا به شما تحويل مي دهد. شما همچنين مي توانيد بر روي عناصر در طراحي كليك كنيد و كد آن را به يك ويرايش گر متني دلخواه ارسال نماييد. وو هوانگ آنه، يكي از بنيانگذاران Avocode، مي گويد:”بهترين چيزي كه اين برنامه ارائه مي دهد اين است كه توسعه دهندگان هرگز به Photoshop يا Sketch نياز نخواهند داشت.”

گاهي اوقات بهترين ابزار مي تواند يك مرورگر جديد باشد. Vivaldi يك مرورگر وب سريع، قدرتمند و قابل تنظيم براي كاربران است كه توسط برخي از افرادي است كه Opera را شروع كرده بودند ساخته شده است. Vivaldi قابل تنظيم ترين مرورگر وب است و همچنين ويژگي هاي ديگري مانند كنترل خط فرمان، پانل براي گرفتن يادداشت ها، جمع آوري و مرتب سازي بروشور و پانل هاي وب را فرآهم مي كند كه شما را قادر مي سازد تمام سايت هاي مورد علاقه خود را براي دسترسي آسان در يك مكان قرار دهيد.

CodePen در سال 2012 توسط Alex Vazquez تاسيس گرديد از بزرگترين و شايسته ترين جوامع وب براي تست و نمايش كد هاي HTML، CSS و jаvascript مي باشد. طي پنج سال گذشته، اين برنامه داراي دو ويرايشگر كد آنلاين و يك محيط آموزشي مجازي با قابليت اجرا بوده است كه توسعه دهندگان مي توانند از طريق آن بازخورد هاي مهمي را دريافت كنند. به تازگي CodePen يك جهش بزرگ ديگر را با راه اندازي IDE خود انجام داده است، كه به شما اجازه مي دهد وب سايت هاي خود را در مرورگر خود، ايجاد كنيد. با استفاده از اين ابزار شما مي توانيد سايت خود را قبل از ساختن آن پيش نمايش دهيد.

بوت استرپ قطعا يك ابزار جديد نيست ولي نسخه جديد محبوب ترين فريم ورك طراحي رابط كاربري سايت در جهان شامل تغييراتي بوده كه در زير ذكر كرده ايم:

• كاهش پشتيباني از IE8 و iOS6
• حركت فايل هاي CSS از Less به Sass
• واحد هاي اندازه گيري اصلي از px به rem تغيير كرده است.
• پشتيباني از Flexbox در گريد ها
• استفاده از يك كامپوننت جديد براي جايگزيني اجزاي قديمي تر

بوت استرپ پيشرفت هاي انقلابي كرده است و بدون شك اين فريم ورك همچنان نيز براي طراحي سايت ها استفاده خواهد شد.

كويل به عنوان يك ويرايشگر WYSIWYG متن باز براي طراحي سايت هاي مدرن به حساب مي آيد. اين ويرايشگر بسياري از زمينه هاي مختلف برنامه هاي كاربردي را شامل مي شود، بنابراين جاي تعجب نيست Quill از زمان عرضه نسخه 1.0 بتا در اواسط سال 2016 محبوبيت زيادي نداشته است.

اما قدرتمند ترين ويژگي هاي كويل انعطاف پذيري و قابليت توسعه آن با استفاده از ماژول ها و يك API قدرتمند است. كويل تم ها و ماژول هايي ارائه مي دهد كه حاوي نوار ابزار، صفحه كليد، كليپ بورد و تاريخ است. شما مي توانيد بسياري از اين ويژگي ها را در كويل تست كنيد.

SVGito يك برنامه وب رايگان است كه فايل هاي SVG شما را پاك مي كند تا شما را از ويرايش دستي آن ها نجات دهد. با استفاده از اين ابزار به طور خودكار SVG هاي خود را با لمس يك دكمه بهينه مي كنيد و معمولا اندازه و پيچيدگي آن ها را بدون تغيير آنچه كه در واقع بر روي صفحه نمايش است، كاهش مي دهد.