Skip to main content

Adobe XD โปรแกรมออกแบบ UX/UI ฟรีๆ จาก Adobe

 

  • Adobe-XD-โปรแกรมออกแบบ-UX-UI-ฟรีๆ-จาก-Adobe

    Adobe XD โปรแกรมออกแบบ UX/UI ฟรีๆ จาก Adobe

    ถ้าพูดถึงโปรแกรมที่ Web Designer, UX Designer, App Designer และคนที่ทำงานสาย UX (User Experience) ใช้คงหนีไม่พ้น Sketch หรือ Figma ที่ต่างมีค่าใช้จ่ายรายเดือนทั้งนั้น ซึ่งยังมีอีกหนึ่งโปรแกรมที่งัดออกมาสู้กับทั้ง 2 เจ้า ด้วยฟีเจอร์จัดเต็ม แถมฟรีอีกด้วย นั้นก็คือ Adobe XD ซึ่งต้องบอกว่าตัวโปรแกรมมีความเร็วลื่นไหล ไม่ค่อยกินทรัพยากรเครื่องเท่าไหร่นัก ทำงานได้ไว โหลดงานต่างๆ ไวจนรู้สึกได้ โดยเวอร์ชั่นฟรีนั้น จะมีลิมิทจำนวนของ Prototype ที่จะแชร์งานออนไลน์ได้แค่ 1 งานเท่านั้น

    Adobe XD คือ ออกแบบ UI และ UX แบบเวกเตอร์ สามารถประยุกต์ใช้ออกแบบอะไรก็ได้ตั้งแต่แอพลิเคชั่นไปจนถึงเว็บไซต์มาพร้อมกับฟังก์ชั่นการทำงานที่ครบครัน วันนี้ SGEPRINT จะพาไปดูกันดีกว่าว่าทำไมถึงเป็นตัวเลือกที่น่าสนใจของนักออกแบบ UX UI และนักออกแบบและนักพัฒนาเว็บ

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

    1. เครื่องมือออกแบบที่มี UX/UI ที่ใช้งานง่าย มี Concept ใช้งานที่ง่าย ใช้เวลาออกแบบไม่นาน

    ในยุคก่อนๆ เราจะใช้ Photoshop ในการออกแบบกราฟิกเว็บไซต์ (Demo) ซึ่งจะต้องใช้อุปกรณ์และมีหลายขั้นตอนกว่าจะออกแบบหน้าเว็บเสร็จแต่ละหน้า เมื่อออกแบบเสร็จก็ต้องเอาหน้าเว็บไปแปลงเป็น XHTML/CSS อีก ผิดกับ Adobe XD ที่ใช้เวลาออกแบบไม่นาน แถมมี Prototype มาให้ด้วย ทำให้ง่ายต่อการส่งงานพรีเซนต์งานให้ลูกค้าอย่างรวดเร็ว

    ออกแบบ-mockup-ได้รวดเร็ว
    # ออกแบบ Mockup ได้รวดเร็ว

    2.ทำ Prototyping

    หากเป็นสมัยก่อนการออกแบบเว็บไซต์ต้องทำ Mockup ออกมาก่อนซึ่งจะดูได้แค่ดีไซน์ หากจะดูรายละเอียดมากกว่านั้นต้องเขียน Code หรือเอา Mockup ที่ออกแบบไว้ไปแปลงเป็นโค๊ด ก่อนถึงจะเห็นรูปแบบดีไซน์เสมือนจริงทั้งหมดได้ เราสามารถจำลองหน้าเว็บ หรือ แอพลิเคชั่นได้แบบเสมือนจริง คลิกจริง โดยที่ไม่ต้อง Coding ซักบรรทัดเลย ทำให้ทีมงานประหยัดเวลา รู้ว่าต้องแก้ไขงานตรงไหนจาก User ก่อนที่เริ่มลงมือเขียน Codeing จริงๆ

    3.Repeat Grid

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

    มีเว็บแจก-UI-KIT# มีชุด KIT ให้ดาวน์โหลดใช้งานมากมาย

    4.มีชุด Template UX UI Kit

    เมื่อก่อนเวลาจะออกแบบงานเว็บไซต์หรือ UX/UI เราจะต้องคอยหา Size ของหน้าจอขนาดต่างๆตามเว็บไซต์ แต่ตอนนี้โปรแกรมมี Template ให้เลือกครบทั้งหน้าเว็บ จอ iPhone ไปจนถึงจอ Andriod ทุกขนาด เรียกได้ว่าไม่ต้องเสียเวลาไปหาขนาดหน้าจอต่างๆให้วุ่นวายอีกแล้ว

    แต่ละแบบดีไซน์สวยๆ มากมาย มาพร้อมใช้งาน หรือแม้กระทั่งมี Prototype ลิ้งค์ เรียบร้อย ยังมีชุด UI Kit สำหรับดีไซน์สไตล์แบบต่าง ๆ เช่น Apple iOS, Google Materials, และ Microsoft Windows พร้อมใช้ เตรียมมาให้เวลาเราโหลดโปรแกรม พร้อมทั้งมีเว็บที่แจกชุด KIT โดยเฉพาะให้เราเลือกโหลดมาใช้งานมากมาย ดูได้ที่ 👉 bit.ly/2U8Lqfe

    5.Plugins
    มีปลั๊กอินตัวช่วยมากมายกว่า 100 ชนิด ที่จะทำให้งานออกแบบของเราเสร็จอย่างรวดเร็ว เช่นปลั๊กอินที่หารูปมาใช้กับงานของเราอย่างรวดเร็ว หรือปลั๊กอินที่หาสี หาเฉดสีของ UI และมีปลั๊กอินที่สามารถเชื่อมกับแอพลิเคชั่นอื่นๆ เช่น Dropbox พร้อมที่ช่วยในการจัดการงานต่างๆ ภายในทีมได้

    ออกแบบแชร์-ได้เรียลไทม์# แชร์การทำงานให้ทีม หรือ ลูกค้าดูได้

    6.สามารถแชร์ให้ลูกค้าดูงานได้แบบ Realtime

    นี่คือฟีเจอร์ช่วยลดการทำงานของเรา ช่วยให้ลูกค้าไม่สับสนด้วย Prototype ที่ดูง่ายสบายตา โดยที่เราไม่ต้องมานั่งเสียเวลาปริ๊นในแต่ละหน้า หรือนั่งทำ Powerpoint รายงาน เพื่อให้ลูกค้าดู ยิ่งมีหน้าเยอะยิ่งเสียเวลาเป็นอย่างมาก และต้องมีการมานั่ง Note สิ่งที่ลูกค้าคอมเม้นอีก ซึ่งหากเป็น Adobe XD คุณสามารถใช้ฟังก์ชั่น Share for Review ให้ลูกค้าเห็นงานแบบ Real Time ได้เลยลูกค้าสามารถคลิกดูหน้าต่างๆ ได้เสมือนเว็บนั้นสร้างเสร็จแล้ว และสามารถคอมเม้นลงไปในงานได้อีกด้วย



    ที่มา https://sgeprint.com/article/adobe-xd-โปรแกรมออกแบบ-ux-ui-ฟรีๆ/

    Comments

    Popular posts from this blog

    สีพาสเทล คืออะไร โค้ดสีพาสเทลยอดนิยม!

    ขนาดกระดาษ A4 และขนาดอื่นๆที่ควรรู้!

    แปลง YouTube เป็น MP3 ง่ายนิดเดียว!