ออกแบบ UI ง่ายๆด้วย Adobe illustrator

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

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

numtan5839
PHP Super Member
PHP Super Member
Posts: 311
Joined: 04/11/2019 10:18 am

ออกแบบ UI ง่ายๆด้วย Adobe illustrator

Post by numtan5839 » 06/11/2019 3:57 pm

Adobe illustrator
ดาวน์โหลด.png
ดาวน์โหลด.png (2.05 KiB) Viewed 85 times
Adobe illustrator หรือ AI เป็นโปรแกรมที่ใช้สำหรับการสร้างผลงานกราฟฟิคต่างๆ ไม่ว่าจะเป็นการออกแบบโปสเตอร์ ออกแบบโลโก้ วาดภาพการ์ตูน
หรือแม้แต่จะนำมาใช้สำหรับงานออกแบบ UI และ Website
โดยภาพที่เราได้จากโปรแกรม Adobe illustrator นั้นจะเป็นภาพแบบ Vector ไม่ว่าเราจะย่อหรือขยายภาพ ภาพของเราก็จะยังคมชัดอยู่ซึ่งต่างจากภาพแบบ Bitmap

การออกแบบ UI ด้วย Adobe illustrator
จากที่ได้บอกกันไปแล้วนะคะ ว่าโปรแกรม Adobe illustrator นั้นสามารถนำมาใช้ในการออกแบบ UI ได้
ก่อนที่เราจะเริ่มลงมือทำในส่วนนี้ เราควรศึกษาหลักการออกแบบUI และวางแผนโครงสร้างมาให้เรียบร้อยก่อนนะคะ
โปรแกรม Adobe illustrator นั้นสามารถกำหนดขนาดของชิ้นงานที่เราต้องการได้ ไม่ว่าจะเป็นขนาดA4 ขนาดโปสเตอร์ หรือขนาดหน้าจอมือถือ
a1.png
a1.png (80.71 KiB) Viewed 85 times
ดังนั้นหากเราต้องการสร้างงานชนิดไหน ให้เราเลือกขนาดหน้าจอให้ตรงกับงานของเรา
โดยในที่นี้เราจะทำการเลือกขนาดหน้าจอเป็น Mobile ซึ่ง AI ก็จะให้เราเลือกรุ่นของโทรศัพท์ ตรงนี้เราสามารถเลือกตามที่เราต้องการได้เลยนะคะ

หลังจากที่ได้รูปหน้าจอโทรศัพท์แล้ว ให้เราทำการลงสีของหน้าจอตามที่เราต้องการ
ซึ่งตรงนี้จะไม่แนะนำให้ใช้สีที่ฉูดฉาดจนเเกินไปนะคะ เนื่องจากจะทำให้ผู้ใช้งานรู้สึกไม่สบายตา
โดยเราอาจจะใช้พื้นหลังของแอพเป็นสีขาว สีอ่อน หรืออาจจะทำการ Gradient พื้นหลังให้แอพของเราดูมีลูกเล่นมากขึ้นก็ได้
2562-11-06 15_36_39-Window.png
2562-11-06 15_36_39-Window.png (20.08 KiB) Viewed 85 times
การจัดวางองค์ประกอบต่างๆของหน้าจอนั้น ควรปรึกษาและวางแผนกับทีมพัฒนามาให้เรียบร้อย
ควรจัดวางให้เป็นไปตามขั้นตอน อย่างเช่นจากรูปด้านบนจะเห็นได้ว่าข้อมูลจะถูกเรียงตามลำดับที่ควรจะเป็นคือ ชื่อโปรแกรม , User , Password , และปุ่ม Login
2562-11-06 15_40_35-Window.png
2562-11-06 15_40_35-Window.png (41.41 KiB) Viewed 85 times
เราอาจใช้ไอคอนในการแสดงถึงสัญลักษณ์ของข้อความต่างๆ เพื่อให้ผู้ใช้จดจำได้ง่ายขึ้น ตัวอย่างจากรูปด้านบน
จะเห็นได้ว่าเราใช้ไอคอนรูปบ้านในการสื่อความหมายถึงหน้าหลัก ใช้ไอคอนรูปกล้องเมื่อต้องการกดถ่าย
ซึ่งจะช่วยให้แอพดูน่าใช้งาน ไม่เรียบและมีแต่ตัวหนังสือมากจนเกินไป
เราสามารถดาวน์โหลดไอคอนฟรีได้บนเว็บไซต์มากมายหลายเว็บ ลองหาดูกันนะคะ มีทั้งแบบฟรีและแบบพรีเมียม

จะเห็นได้ว่าการออกแบบหน้าจอของแอพนั้นไม่จำเป็นต้องใช้หลายสี อาจใช้เพียง 2-3 สี ก็เพียงพอแล้ว
หากเราใช้สีมากจนเกินไป จะทำให้ UI ของเราดูเลอะเทอะ ควรศึกษาการเลือกใช้โทนสีก่อนเริ่มทำด้วยนะคะ

Return to “Graphic design”

Users browsing this forum: No registered users and 4 guests