COOL IT IDEAS AND STUFF
14 Free online web design development tools
12-Jul-17
คัมภีร์เทพ IT
สำหรับคนไอทีที่เป็น Web Designer & Developer ทั้งหลาย ถือเป็นกลุ่มสายงานที่ต้องใช้ Tool หลายอย่าง วันนี้ทีมงาน TechStar มี 14 Free Online Web Design & Development Tools ที่ คนในสายงานนี้ไม่ควรพลาดเป็นอย่างยิ่งมานำเสนอให้ได้นำไปใช้กันครับ
1. ImageOptim
ถ้าคุณใส่ใจในเรื่อง Load time ของรูปภาพ คุณต้องไม่พลาดกับ Tool ที่ชื่อว่า ImageOptim เพราะมันช่วยให้คุณจัดการรูปภาพโดยที่คุณภาพยังคงดีเหมือนเดิม ที่สำคัญมันสามารถลบพวก Metadata ต่างๆ เช่น GPS Position, Camera Serial Number และอื่นๆ
2. Free Stock Photos
หากคุณต้องการใช้รูปภาพสวยๆ ประกอบในเว็บไซต์หรืองานอื่นๆ ก็ตาม เชื่อว่ามีเว็บไซต์ที่ขายภาพมากมายให้เลือก แต่หากคุณมีงบประมาณจำกัด ลองมาดูเว็บไซต์เหล่านี้ที่จะให้คุณสามารถนำภาพไปใช้ได้ฟรีๆ สิครับ
Unsplash, Death of the Stock Photo, Gratisography, Picjumbo, Pixabay, Stock Up
3. Google Web Fonts
ตอนนี้ Google มีแบบอักษร Open source แบบฟรี ให้เลือกมากมายหลายร้อยแบบ อักษรเหล่านี้สามารถดาวน์โหลดไปได้เพื่อการออกแบบ ทาง Google เองก็เพิ่งมีการยกเครื่อง UX ซึ่งถือเป็นการปรับปรุงเป็นอย่างมาก ตอนนี้มีการให้ผู้ใช้สามารถค้นหาแบบขั้นสูงพร้อมทั้งปรับ Feature ต่างๆ ให้ดีขึ้น แต่อยากให้ระมัดระวังในเรื่องการใช้แบบอักษรที่แตกต่างกันมากเกินไปในเว็บไซต์ของคุณ รวมทั้งอักษรแบบเดียวกันแต่มีสไตล์แตกต่างกันมากเกินไป มิเช่นนั้นอาจส่งผลเสียต่อload time ของเว็บไซต์ได้
4. UXPin
เป็น Tool ที่มุ่งเน้นไปที่ User Experience ของผู้ใช้ ใช้สำหรับสร้างภาพโครง Website และ Application (Wireframing) ที่มี Pattern Interface ที่ครบครันให้เลือกใช้ เพียงแค่การลากวาง รองรับการออกแบบ UI ทั้งบนหน้าจอ Desktop และ Mobile สำหรับ Feature ที่น่าสนใจและมีประโยชน์คือ comments mode ซึ่งสามารถให้ลูกค้าหรือเพื่อนร่วมงาน สามารถแสดงความเห็นหรือฝากคำถามใน Page หรือ ส่วนของ Wireframe ใน preview mode โดย Tool นี้สามารถสมัครเพื่อใช้งานฟรี แต่ได้เพียง 30 วันเท่านั้น หากจะใช้แบบจริงจังก็จ่ายเพียง 19$ ต่อเดือน
5. Sublime Text
เป็น Text editor ที่คล้ายๆ Notepad นี่แหละครับ แต่มันถูกออกแบบมาให้ใช้งานกับพวก Code สำหรับการเขียนเว็บไซต์หรือโปรแกรมต่างๆ โดยเฉพาะ มันทั้งเป็นโปรแกรมที่เบา รวดเร็วและปรับแต่งได้ แถมยังมี Library Plugin ขนาดใหญ่ ใครจะใช้ฟรีก็ได้ แต่มันจะมีการแจ้งให้ชำระเงินขึ้นมาเป็นระยะ ส่วน Plugin ที่น่าใช้มีดังนี้ครับ Package Control,
Compass, Emmet, SassBeautify, SublimeLint – Error highlighting, Git Gutter เป็นต้น
6. Livereload
Livereload ถือเป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนาซอฟต์แวร์ทุกคน เพราะมันช่วยตรวจสอบการเปลี่ยนแปลงในระบบไฟล์ ทันทีที่คุณบันทึก จะมีการ Reload Browser ใหม่ หากคุณ update ภาพหรือเปลี่ยนไฟล์ CSS มันจะ updateให้ทันทีโดยไม่ต้องโหลด Browser ใหม่ เครื่องมือนี้ช่วยให้คุณประหยัดมาก สามารถใช้ทำงานได้บน Safari, Chrome, Firefox, Mobile Safari และ Opera บน Desktop (Mac และ Windows) และพวก browser extensions ด้วย
หากคุณเป็นนักพัฒนาเว็บไซต์แล้ว ห้ามพลาดเครื่องมือตัวนี้ เพราะมันจะช่วยให้คุณสามารถตอบสนอง CSS ได้ พร้อมกับการ embed code จากบริการยอดนิยมเช่น YouTube, Vimeo, Google Maps และ Instagram แล้วผู้ใช้มือถือของคุณจะชื่นชอบในสิ่งที่คุณทำ
8. Snazzy Maps
ปัจจุบันคุณสามารถ embed ตัว Google Map ในเว็บไซต์ได้ แต่หากคุณอยากมีแผนที่ที่ดูดีกว่า Google Map อยากให้คุณมาลองใช้ Snazzy ดูสิ คุณสามารถเลือกจากที่เครื่องมือมีไว้ให้หรือจะปรับแต่งตามสไตล์ของคุณเองก็ได้
9. Tape (Google Chrome Plugin)
หากคุณเป็นคนที่เมื่อสร้าง Website แล้ว มีการจัดวางตำแหน่งต่างๆ ในเว็บไซต์โดยใช้ Grid เพื่อให้การจัดวางถูกต้อง คุณไม่ควรพลาดเครื่องมือที่ชื่อ Tape (Chrome Plugin) เพราะมันจะช่วยให้คุณทำได้เหมือนกำลังใช้งานใน Photoshop หรือ Sketch ซึ่งช่วยให้คุณสามารถวัดตำแหน่งและขนาดของ Elements ต่างๆ ในเว็บไซต์ได้ด้วย
10. OneTab (Browser Plugin)
ถ้าคุณเป็นคนที่ต้องทำงานหลาย Project แล้วต้องงานสลับกันไปมาอยู่บ่อยๆ ลองใช้ Plugin ตัวนี้ดูสิครับ เพราะมันจะช่วยรวม List ของ Tab ที่คุณเปิดไว้ทุกอันเพื่อให้คุณสามารถกลับมาเปิดมาดูได้ใหม่ในอนาคต โดยที่ไม่เปลือง Memory อีกด้วย
Favicons เป็นปัจจัยสำคัญในเรื่อง brand experience ของเว็บไซต์ และ Real Favicon Generator ทำให้การติดตั้งทุกไอคอน Favicon หรือแพลตฟอร์มที่คุณต้องการได้ง่ายขึ้น เพียงอัพโหลดไฟล์ PNG, JPG หรือ SVG อย่างน้อย 260 x 260 pixels ซึ่งสามารถสร้าวได้ทั้ง Apple, Android, Windows mobile, Desktop และ Favicons ทั่วไป ในรูปแบบไฟล์ ZIP ที่ดาวน์โหลดได้ง่าย
12. W3C Validators
ในการทำงานคงไม่มีใครทำอะไรสมบูรณ์แบบ ต้องมีผิดพลาดกันบ้าง เครื่องมือ W3C Validators ทั้งสามนี้ จะเป็น Resource ที่ดีในการค้นหาความผิดพลาดเหล่านั้น เพียงพิมพ์ URL ที่ต้องการลงในเครื่องมือเหล่านี้ เพื่อจะได้รู้ว่า HTML, CSS และ Link ของคุณมีข้อผิดพลาดหรือไม่ และสามารถปรับแต่งให้ตรงตามมาตรฐาน W3C ได้เลย
HTML Checker, CSS Validator, Link Checker
13. Toggl
Toggl เป็นเครื่องมือสำหรับ Track เวลา มีให้บริการทุกรูปแบบออนไลน์ทั้ง Website, Desktop และ Mobile นอกจากนี้ยังสร้างแผนภูมิและรายงานที่มีประโยชน์ เพื่อให้คุณสามารถวิเคราะห์ว่าคุณใช้เวลาใน Project ของคุณถึงขั้นไหนแล้ว สำหรับ Free version นี้ใช้ได้ถึง 5 คน
14. GoToMeeting
GoToMeeting เป็นเครื่องมือที่ช่วยให้คุณสามารถจัดการประชุมแบบ Video call ได้ มี Screenshare feature ที่ทำให้คุณแสดงหน้าจอการใช้งานปัจจุบันให้คนอื่นได้ดูทันที สามารถจัดประชุมที่เกิดขึ้นเป็นประจำได้ นอกจากนี้ยังสามารถบันทึกการประชุมเพื่อใช้อ้างอิงในการประชุมในอนาคตได้อีกด้วย สำหรับ Free version นี้คุณสามารถจัดประชุมแบบไม่จำกัดจำนวนครั้งและการแสดงหน้าจอ ซึ่งสามารถมีผู้เข้าร่วมใช้งานได้ 3 คน
งานนี้ทีมงานเชื่อว่า เหล่า Developer ทั้งหลายคงมี Tools สำหรับช่วยในการทำงานเพิ่มขึ้นมาอีกเยอะเลยทีเดียว ใครถนัดตัวไหนหรือ อยากทดลองใช้ Tools ใหม่ๆ ก็ลองใช้กันได้เลยครับ อย่าลืมแชร์ บอกต่อเหล่าเพื่อนๆ Developer ด้วยกันให้ได้รู้กันด้วยนะครับ
ที่มา : brolik.com
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
บทความที่เกี่ยวข้อง