optimize web design

1

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

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

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

2

Agenda

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

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

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

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

3

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

4

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

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

5

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

6

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

7

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

8

Notebook, Monitor

Wide screen

9

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

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

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

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

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

10

11

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

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

13

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

14

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

15

16

17

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

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

– ปรับแสง (contrast)

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

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

Before

After

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

5

18

Before After Before After

19

Before Before

After After

20

After After

Before After

21

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

6

22

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

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

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

23

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

24

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

25

OK

NO

26

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

27

28

29

30

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

31

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

32

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

33

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

ท่าที่7

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

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

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

34

35

36

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

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

ท่าที่8

37

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

38

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

39

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

40

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

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

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

41

Question & Answer

42

Thank you