optimize web design
TRANSCRIPT
![Page 1: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/1.jpg)
1
วิทยากร : กิตตินนท์ อุ้ยวงค์ไพศาลต าแหน่ง : ผู้จัดการฝ่ายจัดท าเว็บไซต ์บริษัท ตลาด ดอทคอมอีเมล: [email protected]
8 กระบวนยุทธ์
เพื่อการปรับแต่งร้านค้าให้น่าซื้อ!
![Page 2: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/2.jpg)
2
Agenda
1. เทคนิคการออกแบบหัวของเว็บไซต์ให้น่าสนใจ
2. ตกแต่งรูปภาพสินค้าด้วยโปรแกรมให้น่าซื้อ
3. สร้างป้ายจัดโปรโมชั่นบนหน้าเว็บด้วยตัวเอง
4. แนะน าโปรแกรมจัดท ากราฟฟิกส าหรับใช้ในร้านค้าอย่างง่าย
![Page 3: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/3.jpg)
3
มีโลโก้และหวัของเว็บให้เป็นของร้านตัวเอง
![Page 4: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/4.jpg)
4
1. ใส่ชื่อร้านและชื่อเว็บของตัวเองให้ชัดเจน2. พร้อมใส่ ค าอธิบายสั้นๆว่าร้านนี้เกี่ยวกบัอะไร (Slogan)
1ท่าที่ต้องมีโลโก้ ชื่อเวบ และ ค าอธิบายสั้นๆ
![Page 5: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/5.jpg)
5
2ท่าที่ใส่ค าโปรยถึงจุดเด่นของร้านเพื่อดึงดูดให้ผู้ซื้อสนใจ
![Page 6: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/6.jpg)
6
3ท่าที่เลือกรูปประกอบที่เกี่ยวข้องและสื่อถึงสินค้า
![Page 7: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/7.jpg)
7
ท่าที่ 4สร้างหัวข้องเว็บให้เหมาะสมกับขนาดของหน้าจอ
![Page 8: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/8.jpg)
8
Notebook, Monitor
Wide screen
![Page 9: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/9.jpg)
9
ออกแบบเว็บให้รองรับกับขนาดหน้าจอทกุๆ ขนาด
มีพื้นที่ด้านข้างเกิดขึ้นเมื่อเปิดกับจอกว้าง
ใช้พื้นที่ บนหน้าเวบ็แบบ 100 % ต้องออกแบบเผื่อให้มีส่วนขยายแบบอิสระในมุมกว้าง
การระบุขนาดความกว้างแน่นอนจะท าให้เหลือพื้นที่ด้านข้าง
ขนาดทีเ่หมาะสม อยู่ระหว่าง 780 – 1000 Pixel
![Page 10: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/10.jpg)
10
![Page 11: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/11.jpg)
11
ตกแต่งรูปภาพสินค้าให้น่าซื้อ
![Page 12: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/12.jpg)
12
ถ่ายรูปสินค้าให้ถูกวิธีเทคนิคการถ่ายภาพสินค้าด้วยกล้องดิจิตอล1. กระดาษโปสเตอร์สีขาวเนื้อละเอียด 1 แผ่นๆ ละ 10 บาท2. กระดาษโปสเตอร์สีด าด้านเนื้อละเอียด 1 แผ่นๆ ละ 10 บาท3. สก็อตเทปใส 2 ชิ้นหรือ 1 ม้วนตามที่หาได้4. กรรไกร 1 อัน 5. กรอบใส่แผ่นใส 1 กรอบ อันละ 7 บาท6. ขาตั้งกล้อง 1 อัน 7. ชุดขาหนีบหลอดไฟ 1 อัน 30 บาท8. กระดาษฟลอย์อลูมีเนียม ขนาด A4ข้อมูลจาก Pantip.com
ท่าที่5
![Page 13: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/13.jpg)
13
เทคนิคการถ่ายภาพสินค้าด้วยกล้องดิจิตอล
![Page 14: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/14.jpg)
14
ใช้ขาตั้งกล้องเล็งไปที่สนิค้าเพื่อให้ได้ภาพที่นิ่งและคมชัด
![Page 15: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/15.jpg)
15
![Page 16: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/16.jpg)
16
![Page 17: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/17.jpg)
17
• ตกแต่งรูปภาพสินค้าง่ายๆด้วยโปรแกรม Photoshop
– ถ่ายภาพด้วย Background สีขาว– ตัดเอาส่วนของ Background ออก– ปรับขนาด (resize)
– ปรับแสง (contrast)
– ปรับความคมชัดของภาพ
สามารถใช้ได้กับ Newsletter
Before
After
ตกแตง่รูปสินค้าให้สวยงามท่าที่
5
![Page 18: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/18.jpg)
18
Before After Before After
![Page 19: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/19.jpg)
19
Before Before
After After
![Page 20: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/20.jpg)
20
After After
Before After
![Page 21: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/21.jpg)
21
แสดงข้อมูลสินค้าให้ครบถ้วนท่าที่
6
![Page 22: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/22.jpg)
22
ใส่ค าอธิบายให้สินค้าน่าสนใจจะดีกวา่
คนซื้อจะไม่เข้าใจวา่ FC 5010 คืออะไร
เทคนิคการใส่ชื่อสินค้า
![Page 23: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/23.jpg)
23
รูปภาพสินค้าใส่ให้ครบทุกมุมมอง
![Page 24: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/24.jpg)
24
ให้ข้อมูลรายละเอียดสินค้าให้ครบถ้วน
![Page 25: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/25.jpg)
25
OK
NO
![Page 26: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/26.jpg)
26
ขาย กางเกงในผู้หญิงจีสตริง สีม่วง
![Page 27: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/27.jpg)
27
![Page 28: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/28.jpg)
28
![Page 29: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/29.jpg)
29
![Page 30: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/30.jpg)
30
ข้อมูลสินค้า
![Page 31: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/31.jpg)
31
ข้อมูลสินค้า
![Page 32: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/32.jpg)
32
เทคนิคใส่ราคาส่วนลด ใส่ราคาเต็ม และใส่ราคาขายจริง ระบบจะค านวณส่วนลดให้อัตโนมัติ
![Page 33: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/33.jpg)
33
จัดหน้าร้านให้มีโปรโมชั่น!
ท่าที่7
1. จัดพื้นที่ตรงกลางหน้าแรกไว้แนะน าสนิค้าราคาพเิศษ
2. เปลี่ยนทุกสปัดาห์เพื่อความสดใหม่ของร้านค้าอย่างสม่ าเสมอ
3. ขนาดความกว้างทีเ่หมาะสมประมาณ 500-600 Pixil
![Page 34: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/34.jpg)
34
![Page 35: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/35.jpg)
35
![Page 36: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/36.jpg)
36
แนะน าโปรแกรมจัดท า ป้ายโฆษณาหน้าร้านแบบง่ายๆ
ดาวน์โหลดได้ที่ www.photoscape.org ฟรี!
ท่าที่8
![Page 37: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/37.jpg)
37
ใส่กรอบรูปภาพ ตกแต่งรูปภาพให้น่าสนใจ
![Page 38: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/38.jpg)
38
รวมรูปภาพพร้อมจัดเรียง ตัดรูปภาพเป็นรูปทรงต่างๆ
![Page 39: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/39.jpg)
39
ปรับสี และแสง อัตโนมัติ ใส่ลูกเล่นในการแสดงข้อความ
![Page 40: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/40.jpg)
40
8 กระบวนยุทธ์เพื่อการปรับแต่งร้านค้าให้น่าซื้อ
1. ต้องมีโลโก้ ชื่อเวบ และ ค าอธิบายสั้นๆ2. ใส่ค าโปรยถึงจุดเด่นของร้านเพื่อดึงดูดให้ผู้ซื้อสนใจ3. เลือกรูปประกอบที่เกี่ยวข้องและสื่อถึงสินค้า4. สร้างหัวข้องเว็บให้เหมาะสมกับขนาดของหน้าจอ5. ตกแต่งรูปสินค้าให้สวยงาม6. แสดงข้อมูลสินค้าให้ครบถ้วน7. จัดหน้าร้านให้มีโปรโมชั่น!
8. แนะน าโปรแกรมจัดท า ป้ายโฆษณาหน้าร้านแบบง่ายๆ
![Page 41: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/41.jpg)
41
Question & Answer
![Page 42: Optimize web design](https://reader034.vdocuments.net/reader034/viewer/2022052619/55644a7ad8b42a94308b4a13/html5/thumbnails/42.jpg)
42
Thank you