ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
Adobe XD โปรแกรมออกแบบ UX UI จากค่าย
Adobe เหมาะสำหรับดีไซน์ที่ต้องการออกแบบเว็บไซต์และ
แอปพลิเคชันรองรับการสร้างต้นแบบ
Prototype
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของ
เว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ
- เลือก Template
- web.1.1.png (26.16 KiB) Viewed 1342 times
สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้
2. ตกแต่ง
- ตกแต่ง
- web2.2.jpg (78.81 KiB) Viewed 1342 times
- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี
3. ใส่รูปภาพ
- ใส่รูปภาพ
- web5.1.jpg (153.22 KiB) Viewed 1342 times
- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย
4. เชื่อมหน้าจอ
- เชื่อมหน้าจอ
- web3.3.jpg (99.09 KiB) Viewed 1342 times
- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ
5. แสดงผล
- แสดงผล
- web4.1.jpg (77.65 KiB) Viewed 1342 times
แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>
คลิก<<
Adobe XD ถูกสร้างมาเพื่อการออกแบบเว็บไซต์และ
UX/UI เลยทำให้ฟังก์ชั่นและเครื่องมือต่างๆในโปรแกรมมีน้อย แต่เพียงพอที่จะออกแบบงานได้ครบถ้วน เหมาะมากสำหรับคนที่เริ่มต้นออกแบบ UI เพราะมีการที่อธิบายการทำงานของเครื่องมือที่จำเป็นอย่างครอบคลุม รวมทั้งมี
Interface ที่ดูสบายตาและใช้งานง่าย
