42
1 วิทยากร : กิตตินนท์ อุ้ยวงค์ไพศาล ตาแหน่ง : ผู้จัดการฝ่ายจัดทาเว็บไซต์ บริษัท ตลาด ดอทคอม อีเมล: [email protected] 8 กระบวน ยุทธ์ เพื่อการปรับแต่งร้านค้าให้น่าซื้อ!

Optimize web design

Embed Size (px)

Citation preview

Page 1: Optimize web design

1

วิทยากร : กิตตินนท์ อุ้ยวงค์ไพศาลต าแหน่ง : ผู้จัดการฝ่ายจัดท าเว็บไซต ์บริษัท ตลาด ดอทคอมอีเมล: [email protected]

8 กระบวนยุทธ์

เพื่อการปรับแต่งร้านค้าให้น่าซื้อ!

Page 2: Optimize web design

2

Agenda

1. เทคนิคการออกแบบหัวของเว็บไซต์ให้น่าสนใจ

2. ตกแต่งรูปภาพสินค้าด้วยโปรแกรมให้น่าซื้อ

3. สร้างป้ายจัดโปรโมชั่นบนหน้าเว็บด้วยตัวเอง

4. แนะน าโปรแกรมจัดท ากราฟฟิกส าหรับใช้ในร้านค้าอย่างง่าย

Page 3: Optimize web design

3

มีโลโก้และหวัของเว็บให้เป็นของร้านตัวเอง

Page 4: Optimize web design

4

1. ใส่ชื่อร้านและชื่อเว็บของตัวเองให้ชัดเจน2. พร้อมใส่ ค าอธิบายสั้นๆว่าร้านนี้เกี่ยวกบัอะไร (Slogan)

1ท่าที่ต้องมีโลโก้ ชื่อเวบ และ ค าอธิบายสั้นๆ

Page 5: Optimize web design

5

2ท่าที่ใส่ค าโปรยถึงจุดเด่นของร้านเพื่อดึงดูดให้ผู้ซื้อสนใจ

Page 6: Optimize web design

6

3ท่าที่เลือกรูปประกอบที่เกี่ยวข้องและสื่อถึงสินค้า

Page 7: Optimize web design

7

ท่าที่ 4สร้างหัวข้องเว็บให้เหมาะสมกับขนาดของหน้าจอ

Page 8: Optimize web design

8

Notebook, Monitor

Wide screen

Page 9: Optimize web design

9

ออกแบบเว็บให้รองรับกับขนาดหน้าจอทกุๆ ขนาด

มีพื้นที่ด้านข้างเกิดขึ้นเมื่อเปิดกับจอกว้าง

ใช้พื้นที่ บนหน้าเวบ็แบบ 100 % ต้องออกแบบเผื่อให้มีส่วนขยายแบบอิสระในมุมกว้าง

การระบุขนาดความกว้างแน่นอนจะท าให้เหลือพื้นที่ด้านข้าง

ขนาดทีเ่หมาะสม อยู่ระหว่าง 780 – 1000 Pixel

Page 10: Optimize web design

10

Page 11: Optimize web design

11

ตกแต่งรูปภาพสินค้าให้น่าซื้อ

Page 12: Optimize web design

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

13

เทคนิคการถ่ายภาพสินค้าด้วยกล้องดิจิตอล

Page 14: Optimize web design

14

ใช้ขาตั้งกล้องเล็งไปที่สนิค้าเพื่อให้ได้ภาพที่นิ่งและคมชัด

Page 15: Optimize web design

15

Page 16: Optimize web design

16

Page 17: Optimize web design

17

• ตกแต่งรูปภาพสินค้าง่ายๆด้วยโปรแกรม Photoshop

– ถ่ายภาพด้วย Background สีขาว– ตัดเอาส่วนของ Background ออก– ปรับขนาด (resize)

– ปรับแสง (contrast)

– ปรับความคมชัดของภาพ

สามารถใช้ได้กับ Newsletter

Before

After

ตกแตง่รูปสินค้าให้สวยงามท่าที่

5

Page 18: Optimize web design

18

Before After Before After

Page 19: Optimize web design

19

Before Before

After After

Page 20: Optimize web design

20

After After

Before After

Page 21: Optimize web design

21

แสดงข้อมูลสินค้าให้ครบถ้วนท่าที่

6

Page 22: Optimize web design

22

ใส่ค าอธิบายให้สินค้าน่าสนใจจะดีกวา่

คนซื้อจะไม่เข้าใจวา่ FC 5010 คืออะไร

เทคนิคการใส่ชื่อสินค้า

Page 23: Optimize web design

23

รูปภาพสินค้าใส่ให้ครบทุกมุมมอง

Page 24: Optimize web design

24

ให้ข้อมูลรายละเอียดสินค้าให้ครบถ้วน

Page 25: Optimize web design

25

OK

NO

Page 26: Optimize web design

26

ขาย กางเกงในผู้หญิงจีสตริง สีม่วง

Page 27: Optimize web design

27

Page 28: Optimize web design

28

Page 29: Optimize web design

29

Page 30: Optimize web design

30

ข้อมูลสินค้า

Page 31: Optimize web design

31

ข้อมูลสินค้า

Page 32: Optimize web design

32

เทคนิคใส่ราคาส่วนลด ใส่ราคาเต็ม และใส่ราคาขายจริง ระบบจะค านวณส่วนลดให้อัตโนมัติ

Page 33: Optimize web design

33

จัดหน้าร้านให้มีโปรโมชั่น!

ท่าที่7

1. จัดพื้นที่ตรงกลางหน้าแรกไว้แนะน าสนิค้าราคาพเิศษ

2. เปลี่ยนทุกสปัดาห์เพื่อความสดใหม่ของร้านค้าอย่างสม่ าเสมอ

3. ขนาดความกว้างทีเ่หมาะสมประมาณ 500-600 Pixil

Page 34: Optimize web design

34

Page 35: Optimize web design

35

Page 36: Optimize web design

36

แนะน าโปรแกรมจัดท า ป้ายโฆษณาหน้าร้านแบบง่ายๆ

ดาวน์โหลดได้ที่ www.photoscape.org ฟรี!

ท่าที่8

Page 37: Optimize web design

37

ใส่กรอบรูปภาพ ตกแต่งรูปภาพให้น่าสนใจ

Page 38: Optimize web design

38

รวมรูปภาพพร้อมจัดเรียง ตัดรูปภาพเป็นรูปทรงต่างๆ

Page 39: Optimize web design

39

ปรับสี และแสง อัตโนมัติ ใส่ลูกเล่นในการแสดงข้อความ

Page 40: Optimize web design

40

8 กระบวนยุทธ์เพื่อการปรับแต่งร้านค้าให้น่าซื้อ

1. ต้องมีโลโก้ ชื่อเวบ และ ค าอธิบายสั้นๆ2. ใส่ค าโปรยถึงจุดเด่นของร้านเพื่อดึงดูดให้ผู้ซื้อสนใจ3. เลือกรูปประกอบที่เกี่ยวข้องและสื่อถึงสินค้า4. สร้างหัวข้องเว็บให้เหมาะสมกับขนาดของหน้าจอ5. ตกแต่งรูปสินค้าให้สวยงาม6. แสดงข้อมูลสินค้าให้ครบถ้วน7. จัดหน้าร้านให้มีโปรโมชั่น!

8. แนะน าโปรแกรมจัดท า ป้ายโฆษณาหน้าร้านแบบง่ายๆ

Page 41: Optimize web design

41

Question & Answer

Page 42: Optimize web design

42

Thank you