ดาวน์โหลดไฟล์ Workshop ได้ที่
https://drive.google.com/file/d/1pMXb7sF3c2Qgs1ajl6Ynyqh_7NAQLNAP/view?usp=sharing
บทที่ 1 แนะนำคอร์สรู้จักโปรแกรม Adobe XD?
ก่อนเริ่มเรียนผมอยากจะแนะนำคอร์สและข้อดีของโปรแกรม Adobe XD ให้ทุกคนได้เข้าใจกันก่อน ว่าเหตุผลอะไรที่คุณควรใช้โปรแกรมนี้ในการออกแบบเว็บไซต์
Adobe XD vs Photoshop เรื่องเล่าจาก Case Study จริง2:58
เข้าร่วม Facebook Private Group คอร์ส Master Adobe XD1:00
บทที่ 2 หลักการออกแบบเว็บไซต์ Responsive เบื้องต้น
Responsive Grid System คืออะไร?4:11
หลักการเลือกใช้ฟอนต์บนเว็บไซต์3:21
แหล่งรวมฟอนต์ฟรีสำหรับการทำเว็บไซต์3:22
หลักการเลือกใช้สีบนเว็บไซต์5:44
เว็บไซต์สำหรับการหาแรงบันดาลใจในการทำเว็บไซต์3:54
แหล่งรวม Resources สำหรับการออกแบบเว็บไซต์4:25
บทที่ 3 การเริ่มโปรเจคใหม่ใน Adobe XD
ส่วนประกอบของโปรแกรม12:05
เลือกขนาด Artboards Template ของ Desktop Website2:04
เลือกขนาด Artboards Template ของ Mobile Website1:26
สร้าง Artboards ขนาดอิสระ1:47
การปรับ Layout และ Responsive Grid ของ Mobile Website1:47
บทที่ 4 เรียนรู้เครื่องมือต่างๆในโปรแกรม
การใช้ Select Tool1:12
สร้างรูปทรง สี่เหลี่ยม, วงกลม, สามเหลี่ยม และ เส้น3:22
สร้างรูปทรงอิสระด้วย Pentools1:19
การปรับ Opacity1:39
การทำมุมโค้งให้วัตถุ1:50
การใส่เงาให้วัตถุ1:55
ใส่สี Gradient ในวัตถุ1:17
การสร้างข้อความ3:43
การ Zoom และหลักการดูระยะของงานออกแบบ2:24
Keyboards Shortcuts คีย์ลัดที่จำเป็น0:57
วิธีการใส่ภาพลงในรูปทรงต่างๆ2:06
การจัดการ Layer2:50
การจัดการ Group Layer2:25
การ ล็อค(Lock) Layer1:23
การ ปิดตา(Hide) Layer1:08
การใช้เครื่องมือ Alignment1:59
การแก้ไขภาพใน Photoshop1:35
การบันทึกไฟล์ลงในเครื่อง และ Adobe Cloud1:30
บทที่ 5 การเพิ่ม Assets ไว้ทำงาน
การเพิ่มสีใน Assets2:49
การแก้สีใน Assets1:20
การเพิ่ม Character Styles2:12
การเพิ่ม Icon & Graphic ใน Assets2:55
การดึง Assets จากงานอื่นมาใช้1:30
การแก้ Character Styles2:06
บทที่ 6 การสร้าง Component UI
วิธีการสร้าง Component2:02
วิธีการดู Component ตัวแม่และตัวลูก3:05
การสร้าง Effect เปลี่ยนสีปุ่มด้วย Hower Stage2:38
การสร้าง Effect เปลี่ยนขนาดปุ่มด้วย Auto Animate3:31
บทที่ 7 Plug-in ช่วยทำงานเสร็จไวขึ้น
Lorem Ipsum4:51
Color Scale3:12
UI Faces2:47
Unsplash Random Images1:37
Quick Mockup2:51
การจัดการ Plugins1:21
บทที่ 8 ออกแบบเว็บไซต์ Desktop Size
ตัวอย่างเว็บไซต์ในบทเรียน1:20
การออกแบบ Menu12:03
ทำ Menu ให้มีลูกเล่นด้วย Hower Stage4:08
ออกแบบ Banner และการจัดวางข้อความ11:16
สร้างปุ่มประกอบ Banner และ ส่วนต่างๆ5:40
ออกแบบส่วนบริการของเรา7:34
ออกแบบส่วนผลงานของเรา13:00
ออกแบบส่วนบทความน่าอ่านและการทำ Repart Grids12:36
ออกแบบส่วนรีวิวจากลูกค้าและการทำ Click Animation12:18
ออกแบบ Footer4:01
การทำ Fix Menu2:18
ออกแบบหน้า เกี่ยวกับเรา20:33
ออกแบบหน้า ผลงาน11:54
ออกแบบหน้า บริการ13:05
ออกแบบ Pop-up หน้า บริการ17:08
ออกแบบหน้า Blog5:20
ออกแบบหน้า ติดต่อเรา6:37
บทที่ 9 ออกแบบเว็บไซต์ Mobile Size (Responsive)
เทคนิค Responsive Resize สำหรับ UI3:07
ออกแบบเมนู (Mobile Version)13:45
ออกแบบหน้าแรก (Mobile Version)15:14
ออกแบบหน้า เกี่ยวกับเรา (Mobile Version)6:01
ออกแบบหน้า ผลงานของเรา (Mobile Version)5:50
ออกแบบหน้า บริการของเรา (Mobile Version)6:06
บทที่ 10 การทำ Prototype สำหรับการทดสอบและพรีวิว
เชื่อม Prototype Desktop Website5:07
เชื่อม Prototype Mobile Website2:02
บทที่ 11 การ Export & Share งานให้กับทีมพัฒนา
การ Export UI ชิ้นเดียว (Layer/Group/Component)3:05
การ Export Artboards เดียว และ หลาย Artboards1:09
การแชร์โปรเจคให้ลูกค้ารีวิว3:10
การแชร์โปรเจคให้นักพัฒนา Developer3:50
ตั้งค่าการแชร์เพิ่มเติม1:09
บทเรียนเพิ่มเติม (Bonus)
สร้าง Parallax Website ด้วย Prototype ตอนที่ 22:11
บริษัท วิตวี ดีไซน์ จำกัด
168 ซอยตลาดศรีดินแดง ถนนดินแดง เขตดินแดง กรุงเทพฯ 10400
ติดต่อเรา
อาคารพร้อมพันธุ์ ถนนลาดพร้าว แขวง จอมพล เขตจตุจักร กรุงเทพมหานคร 10900
อีเมล [email protected]
Line @grappik
โทรศัพท์ 065-237-7754