L o g o

การพั�ฒนาเว็บ

L o g o

Company Logowww.themegallery.com

หลั�กการออกแบบเว็บเพัจหลั�กการออกแบบ สามารถทำ�าได้�

หลัายระบบ ขึ้��นอย� ก�บลั�กษณะขึ้องขึ้�อม�ลั คว็ามชอบขึ้องผู้��พั�ฒนา ตลัอด้จนกลั( มเป้*าหมาย ทำ+,ต�องการน�าเสนอ เช น หากกลั( มเป้*าหมายเป้-นเด้กว็�ยร( นแลัะน�าเสนอขึ้�อม�ลัเก+,ยว็ก�บ คว็ามบ�นเทำ.ง อาจจะออกแบบให�ม+ทำ.ศทำางการไหลัขึ้องหน�าเว็บเพัจ ทำ+,หลัากหลัายให�ลั�กเลั นได้�มากกว็ าเว็บทำ+,น�าเสนอให�ก�บผู้��ใหญ่ หร2อเว็บด้�านว็.ชาการ

L o g o

Company Logowww.themegallery.com

หลั�กการออกแบบเว็บเพัจ (ต อ)สามารถแบ งได้� 3 ลั�กษณะ

1. แบบลั�าด้�บขึ้��น (Hierarchy) เป้-นการจ�ด้แสด้งหน�าเว็บ เร+ยงตามลั�าด้�บก.,งก�านแตกแขึ้นงต อเน2,องไป้เหม2อนต�นไม�กลั�บห�ว็

L o g o

Company Logowww.themegallery.com

หลั�กการออกแบบเว็บเพัจ (ต อ)2. แบบเช.งเส�น (Linear) เป้-นการจ�ด้แสด้งหน�าเว็บเร+ยงต อเน2,องไป้ในทำ.ศทำางเด้+ยว็

L o g o

Company Logowww.themegallery.com

หลั�กการออกแบบเว็บเพัจ (ต อ)3. แบบผู้สม (Combination) เป้-นการจ�ด้หน�าเว็บชน.ด้ผู้สมระหว็ างแบบลั�าด้�บขึ้��นแลัะแบบเช.งเส�น

L o g o

Company Logowww.themegallery.com

หลั�กในการออกแบบเว็�บไซต์�สร�างลั�าด้�บช��นคว็ามส�าค�ญ่ขึ้ององค3

ป้ระกอบสร�างร�ป้แบบ บ(คลั.ก แลัะสไตลั3สร�างคว็ามสม�,าเสมอตลัอด้ทำ��งไซต3จ�ด้ว็างองค3ป้ระกอบทำ+,ส�าค�ญ่ไว็�ในส ว็น

บนขึ้องหน�าเสมอสร�างจ(ด้สนใจด้�ว็ยคว็ามแตกต างจ�ด้แต งหน�าเว็บให�เป้-นระเบ+ยบแลัะ

เร+ยบง ายใช�กราฟิ6กอย างเหมาะสม

L o g o

Company Logowww.themegallery.com

ส.,งทำ+,ต�องค�าน�งถ�งในการออกแบบเว็บเพัจทำ+,ด้+ 1. คว็ามแป้ลัก คว็ามแตกต าง (Contrast) ค2อแยกคว็ามแตกต างทำ+,อย� บนจอภาพัให�เหนช�ด้เจน เช นการใช�ต�ว็หน�งส2อ เส�น ส+ ขึ้นาด้ ฯลัฯ เพัราะจะสามารถด้�งด้�ด้คว็ามสนใจได้�ด้+

2.  การย��าซ��า (Repetition) ค2อแบบแผู้นหร2อสไตลั3ขึ้องผู้��ออกแบบ จะต�องม+ลั�กษณะร�ป้แบบ สอด้คลั�องก�นทำ��งหมด้

L o g o

Company Logowww.themegallery.com

ส.,งทำ+,ต�องค�าน�งถ�งในการออกแบบเว็บเพัจทำ+,ด้+(ต อ) 3. การจ�ด้แถว็ การว็างแนว็ (Alignment) ค2อ การจ�ด้ว็างองค3ป้ระกอบต าง ๆ ต�องไม สะเป้ะสะป้ะ ไร�เหต(ผู้ลั ไม ขึ้�ด้ก�บคว็ามร��ส�ก ขึ้องผู้��อ าน จ�ด้ให�ด้�สะอาด้

4. คว็ามใกลั�เค+ยง คว็ามเก+,ยว็เน2,อง (Proximity) ค2อ การจ�ด้ว็างองค3ป้ระกอบทำ+,เก+,ยว็เน2,องก�น ให�เป้-นกลั( มก�อนเด้+ยว็ก�น

L o g o

Company Logowww.themegallery.com

องค3ป้ระกอบขึ้องการออกแบบเว็บไซต3 1. คว็ามเร+ยบง าย

2. คว็ามสม�,าเสมอ 3. คว็ามเป้-นเอกลั�กษณ3 4. เน2�อหาทำ+,ม+ป้ระโยชน3 5. ระบบเนว็.เกช�นทำ+,ใช�งานง าย 6.ลั�กษณะทำ+,น าสนใจ หน�าตาขึ้อง

เว็บไซต3จะต�องม+คว็ามส�มพั�นธ์3ก�บค(ณภาพัขึ้ององค3ป้ระกอบต างๆ

L o g o

Company Logowww.themegallery.com

องค3ป้ระกอบขึ้องการออกแบบเว็บไซต3 (ต อ)7. การใช�งานอย างไม จ�าก�ด้ ผู้��ใช�ส ว็นใหญ่ สามารถเขึ้�าถ�งได้�มากทำ+,ส(ด้

8. ค(ณภาพัในการออกแบบ การออกแบบแลัะเร+ยบเร+ยงเน2�อหาอย างรอบคอบ

L o g o

Company Logo

ก.จกรรมทำ+,3ค�าส�,งน�กเร�ยนศึ�กษาว็�ธี�การ  แนว็ทางเก��ยว็ก�บการว็างแผนแลัะ

ออกแบบเว็�บไซต์� โดยใช้$คำ&าสำ&าคำ�ญ(แนว็ทางการว็างแผนออกแบบสำร$างเว็�บไซต์�) จากน�*น ให$น�กเร�ยน

1) น&าเสำนอการออกแบบการสำร$างเว็�บไซต์� (Wordpress)ในคำาบเร�ยน

2) สำ+ง mind map ภาพรว็มของโคำรงงาน ด$ว็ยการ Attach File

 www.themegallery.com

L o g o

Company Logo

ต�ว็อย างภาพัรว็มขึ้องโครงงาน

www.themegallery.com

L o g o

Company Logo

ต�ว็อย างภาพัรว็มขึ้องโครงงาน

www.themegallery.com

L o g o

Company Logo

ต�ว็อย างภาพัรว็มขึ้องโครงงาน

www.themegallery.com

L o g o

Company Logo

ต�ว็อย างภาพัรว็มขึ้องโครงงาน

www.themegallery.com