Tag Archive: UI

แนะนำโปรแกรมออกแบบเว็บไซต์ที่ห้ามพลาด ใช้งานง่ายและได้ผลดี

                ถ้าพูดถึงเรื่องการออกแบบเว็บไซต์ แน่นอนว่าจำเป็นต้องมีโปรแกรมที่จะช่วยในเรื่องของการออกแบบในเรื่องของ UI (User Interface) แบบคร่าว ๆ ก่อนที่จะส่งไปให้ทางทีม Back-EN ได้พัฒนาต่อ ในบทความนี้จะนำเสนอโปรแกรม เว็บไซต์ และตัวช่วยต่าง ๆ ที่ผู้ออกแบบและพัฒนาเว็บไซต์ไม่ควรจะพลาด

  • เริ่มจากโปรแกรมพื้นฐานที่หลายคนอาจจะคุ้นเคยกันอย่าง Adobe Photoshop หลายโรงเรียนมีการเริ่มสอนวิธีการใช้งานของ Adobe Photoshop เพื่อใช้ในการตกแต่งรูปภาพ แต่งสี รวมไปถึงการออกแบบด้วยเช่นกัน สำหรับใครต้องการจะออกแบบหน้า UI ของเว็บไซต์แบบคร่าว ๆ ก่อน และจึงส่งให้ทีมเขียนตัวเว็บไซต์พัฒนาทีหลัง โปรแกรมนี้ก็น่าสนใจไม่ใช่น้อย
  • ยังคงอยู่กับโปรแกรมของตระกูล Adobe อย่าง Adobe Dreamweaver เป็นโปรแกรมที่ใช้ในการออกแบบเว็บไซต์แบบจำลองโดยเฉพาะ ซึ่งตัวผู้ออกแบบไม่จำเป็นจะต้องมานั่งเขียน HTML CSS หรือ PHP เองเลย เป็นหนึ่งโปรแกรมเริ่มต้นสำหรับนักออกแบบเว็บไซต์มือใหม่ที่ยังไม่คุ้นเคยกับการเขียนภาษาหรือฟังก์ชันต่าง ๆ ให้สามารถที่จะออกแบบเว็บไซต์ด้วยตัวเองได้
  • พัฒนาขึ้นมาจาก Dreamweaver หน่อย ขอแนะนำ Google Web Designer โปรแกรมออกแบบเว็บไซต์จากบริษัทยักษ์ใหญ่อย่าง Google ที่ไว้ใช้ในงานออกแบบเว็บไซต์ โดยทั่วไปมีฟังก์ชันการทำงาน และลักษณะการใช้งานที่คล้ายกับ Dreamweaver แต่อาจจะมีความต่างกันหน่อยตรงที่ Google Web Designer นั้นจะมีฟังก์ชันที่เหมาะทั้งคนที่ไม่มีความทางด้านการ Coding หรือจะเป็นคนที่ต้องการจะใช้ Code ในการออกแบบ โปรแกรมนี้มีรองรับให้ทั้งหมด
  • ย้ายฝั่งไปทาง iOS บ้างกับโปรแกรม Sketch โปรแกรมออกแบบเว็บไซต์บนระบบปฏิบัติการ iOS ซึ่งเหมาะสำหรับการออกแบบ UI ของทั้งเว็บไซต์ แอปพลิเคชันบนมือถือ หรือจะเป็นการออกแบบไอคอน ข้อดีของเจ้าตัว Sketch นั้นก็คือเราสามารถโหลดปลั๊กอินต่าง ๆ ที่เราต้องการจะใช้งานเพิ่มเติมลงไปได้ หรือถ้าใครมีความสามารถมากกว่านั้นหน่อยก็สามารถที่จะเขียนปลั๊กอินเองเลยก็ยังได้ รวมไปถึงเรื่องของการทำงานจะเปรียบได้เหมือนกับ การนำเอา Adobe Photoshop กับ Illustrator มารวมกัน ซึ่งแน่นอนว่ามีความหลากหลายในการใช้งาน และใช้งานไม่ยากอีกด้วย แต่ข้อเสียก็คือมีแค่ในระบบปฏิบัติการแบบ iOS เท่านั้น
  • Wix.com เว็บไซต์ที่เป็นเราอาจจะคุ้นหน้าคุ้นตาในโฆษณาตามยูทูปหรือช่องทางต่าง ๆ เป็นโปรแกรมบนเว็บไซต์ที่จะช่วยให้การออกแบบนั้นง่ายมาก ๆ เพียงแค่ทำการ Drag and Drop ทุกอย่างตามที่เราต้องการ ไม่ว่าจะเป็น text รูปทรงต่าง ๆ และเรายังสามารถที่จะเลือกใช้ Template ที่เขามีให้มากมายมาต่อยอดให้เป็นแบบของเราได้อีกด้วย สำหรับใครที่ถนัดในเรื่องของการ Coding และต้องการฟังก์ชันที่ในเว็บไม่มี ก็สามารถที่จะเลือกภาษาที่ถนัด และทำการเขียนฟังก์ชันนั้นได้ด้วยตัวเองอีกด้วย

เหล่านี้ก็เป็นแค่ส่วนเล็ก ๆ ของเครื่องมือในการใช้เพื่อออกแบบเว็บไซต์แบบพื้นฐาน สำหรับมือใหม่ หรือจะเป็นมือเก่าที่ต้องการความเร็ว และสะดวกสบายหน่อย ก็สามารถที่จะเลือกใช้งานโปรแกรมเหล่านี้ได้เช่นกัน