ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderators: mindphp, ผู้ดูแลกระดาน

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Aoranuch Phupaloy »

ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ
web.1.1.png
web.1.1.png (26.16 KiB) Viewed 256 times
สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง
web2.2.jpg
web2.2.jpg (78.81 KiB) Viewed 256 times
- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ
web5.1.jpg
web5.1.jpg (153.22 KiB) Viewed 256 times
- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ
web3.3.jpg
web3.3.jpg (99.09 KiB) Viewed 256 times
- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล
web4.1.jpg
web4.1.jpg (77.65 KiB) Viewed 256 times
แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
Posts: 849
Joined: 30/11/2020 10:24 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Duanghathai Termtem »

ขาดส่วนเกริ่น
เพิ่มส่วนสรุป และการแนบลิงค์ในส่วนสรุปให้เชื่อมไปยังบทความอื่นได้หรือเชื่อมกับบทความในเรื่องเดียวกันสามารถเชื่อมต่อไปมากันได้
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Aoranuch Phupaloy »

ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
Adobe XD โปรแกรมออกแบบ UX UI จากค่าย Adobe เหมาะสำหรับดีไซน์ที่ต้องการออกแบบเว็บไซต์และแอปพลิเคชันรองรับการสร้างต้นแบบ Prototype
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ
เลือก Template
เลือก Template
web.1.1.png (26.16 KiB) Viewed 215 times
สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง
ตกแต่ง
ตกแต่ง
web2.2.jpg (78.81 KiB) Viewed 215 times
- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ
ใส่รูปภาพ
ใส่รูปภาพ
web5.1.jpg (153.22 KiB) Viewed 215 times
- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ
เชื่อมหน้าจอ
เชื่อมหน้าจอ
web3.3.jpg (99.09 KiB) Viewed 215 times
- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล
แสดงผล
แสดงผล
web4.1.jpg (77.65 KiB) Viewed 215 times
แสดงผลโดยการคลิกปุ่มสามเหลี่ยมขวามือด้านบน
การออกแบบหน้าจอเว็บแอปพลิเคชั่นก็จะมีประมาณนี้นะคะ ส่วนการออกแแบบโมบายแอปพลิเคชั่นสามารถไปดูได้ที่ >>คลิก<<

Adobe XD ถูกสร้างมาเพื่อการออกแบบเว็บไซต์และ UX/UI เลยทำให้ฟังก์ชั่นและเครื่องมือต่างๆในโปรแกรมมีน้อย แต่เพียงพอที่จะออกแบบงานได้ครบถ้วน เหมาะมากสำหรับคนที่เริ่มต้นออกแบบ UI เพราะมีการที่อธิบายการทำงานของเครื่องมือที่จำเป็นอย่างครอบคลุม รวมทั้งมี Interface ที่ดูสบายตาและใช้งานง่าย
Last edited by Aoranuch Phupaloy on 24/12/2020 2:50 pm, edited 4 times in total.
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 14/12/2020 5:54 pm ขาดส่วนเกริ่น
เพิ่มส่วนสรุป และการแนบลิงค์ในส่วนสรุปให้เชื่อมไปยังบทความอื่นได้หรือเชื่อมกับบทความในเรื่องเดียวกันสามารถเชื่อมต่อไปมากันได้
แก้ไขแล้ว
- เพิ่มส่วนเกริ่น
- เพิ่มส่วนสรุป
- ใส่ลิงค์เชื่อมโยงในส่วนเกริ่นและส่วนสรุป
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
Posts: 849
Joined: 30/11/2020 10:24 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Duanghathai Termtem »

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 22/12/2020 2:53 pm แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
แก้ไขแล้วค่ะ
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
Posts: 849
Joined: 30/11/2020 10:24 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Duanghathai Termtem »

Aoranuch Phupaloy wrote: 22/12/2020 6:12 pm
Duanghathai Termtem wrote: 22/12/2020 2:53 pm แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
แก้ไขแล้วค่ะ
มีการเชื่อมลิงค์ที่ซ้ำกันในบทความ
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 23/12/2020 1:16 pm
Aoranuch Phupaloy wrote: 22/12/2020 6:12 pm
Duanghathai Termtem wrote: 22/12/2020 2:53 pm แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)
แก้ไขแล้วค่ะ
มีการเชื่อมลิงค์ที่ซ้ำกันในบทความ
แก้ไขแล้วค่ะ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 5 guests