หลักการออกแบบเว็บ

หน่วยการเรียนรู้ที่ 2 

หลักการออกแบบ (Web  Designing)

1) ความหมายของเว็บ (Web) 

             เว็บ คือ หน้าเว็บเพจหลายหน้า  ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงค์  ที่รวมสื้อประสม

ต่างๆ เช่น  ภาพ  เสียง ข้อความ  โดยจัดเก็บไว้ใน เวิลด์ไวด์เว็บ หน้าเว็บเพจแรกของเว็บที่ปรกฎหลังสืบค้นได้แล้ว  เรียกว้าโฮมเพจ  ส่วนเว็บเพจใช้เรียกหน้าอื่นๆ

2) ประเภทของเว็บ

    ปิยะบุตร   สุทธิดารา   ได้จำแนกประเภทของเว็บไว้ว่าสามารถแบ่งได้เป็น 5 ประเภทดังต่อไปนี้

                    1. ประเภทส่วนตัว

                    2. ประเภทบันเทิง

                    3. ประเภทให้ความรู้

                    4. ประเภทให้บริการ

                    5. ประเภทค้นหาข้อมูล

3) องค์ประกอบทั่วไปของเว็บ 

                 1. โลโก้

                 2. ส่วนหัวของเว็บเพจ

                 3. ส่วนเมนูหลัก

                 4. ส่วนเนื้อหา

                 5. ส่วนล่างสุด

                 6. แบนเนอร์

4) การแบ่งพื้นที่ให้กับเว็บเพจ

             การแบ่งพื้นที่ของเว็บเพจแต่ละเว็บ สามารถแบ่งได้ดังนี้

                   1. Logo สัญลักษณ์ หรือสื่อแทนองค์กร     

                   2. Header  ส่วนหัวสำหรับออกแบบกราฟิกหรือภาพเคลื่อนไหว

                   3. Body ส่วนเนื้อหา เพื่อนำเข้าสู่รายละเอียดต่างๆ

                   4. Menu  ส่วนสำหรับลิงค์ไปยังเนื้อหาต่างๆ

                   5. Footer  ส่วนท้ายบอกลิขสิทธิ์ หรือที่อยู่สำหรับติดต่อกลับ

5) หลักการออกแบบเว็บ 

              ในการออกแบบเว็บที่ดีหลังจากที่เรามีความรู้  ความสามารถประสบการณ์ที่ดีแล้ว ขั้นตอนต่อไป จะเป็นกระบวนการออกแบบพัฒนาเว็บไซต์ซึ่งมีปัจจัยหลัก 3 ปัจจัย คือ

                   1.มีการออกแบบโครงสร้างที่ดี

                   2. มีการออกแบบหน้าของเว็บที่ดี

                   3. มีการกำหนดเป้าหมายของเว็บที่ชัดเจน

ภาพกระพริบ

                                                        My name's Jidapa  Chauesawatee

วิธีการทำ
1. ตัดรูป โดยใช้เครื่องมือ Polygonal Lasso Tool
2. คัดลอกรูปที่ตัด ไปที่เมนู Edit ---> Coppy
3. วางรูป ไปที่เมนู Edit ---> Past
4. ปรับภาพพื้นหลัง ให้ เบลอๆ เหมือนรถวิ่งผ่าน ไปที่เมนู Filter ---> Blur ---> Redial Blur
5. ปรับภาพที่ตัดมา ให้ดูพุ่ง Filter --->Stylize ---> Wind

รูปตัดต่อจากละครธรณีนี่นี้ใครครอง  ณเดช VS. ซายน์

วิธีการทำ
1. ตัดภาพ โดย ใช้เครื่องมือ Polyonal Lasso Tool
2. ปรับเส้นขอบของภาพให้จาง ไปที่เมนู Select---> Modify ---> Feather
3. คัดลอกภาที่ตัด ไปที่เมนู Edit --> Coppy
4. วาง ไปที่เมนู  Edit ---> Paste
5. ปรับแสง ไปที่เมนู Image ---> Adjustments --->Curves
6. ปรับสี ไปที่เมนู Image ---> Adjustments ---> Colorbalarce
7. ทำภาพให้หมุนกลับด้าน  Edit ---> Transform ---> Flip Horizortal

1. ความสมดุล          รูปภาพกับตัวหนังสือ อยู่ในตำแหน่งที่เหมาะสม ทั้งด้านซ้ายด้านขวาของภาพมีความสมดุล ไม่หนักทางด้านใดด้านหนึ่ง

2.จุดเด่น           รูปคน เพราะสื่อถึงเจ้าของต้นฉบับที่ได้ออกแบบหน้าปกขึ้น


3.สี       ใช้สีวรรณเดียว  คือ วรรณเย็น ซึ่งสีของภาพจัดได้ว่าอยู่ในโทนเดียวกัน ดูแล้วไม่ทำให้ลายตา 

 4. ความมีเอกภาพ             สีจะเป็นสีในโทนเดียวกันทั้งภาพและตัวหนังสือ ดูเรียบง่าย ไม่สับสน เกิดเป็นอันหนึ่งอันเดียวกัน 


5.ความคิดสร้างสรรค์               ได้นำรูปภาพที่เกี่ยวข้องกับเฟสบุ๊ค มาประยุกต์ใช้ในการตกแต่ง หน้าปก ให้เกิดความแตกต่างจากต้นฉบับ

หลักการใช้สี
            ใช้สีโทนเดียว  คือเป็นสีวรรณเย็น  ซึ่งบ่งบอกถึง ความบริสุทธิ์ใจ  สบายใจ   สงบร่มรื่น

จุดเด่น

       จุดเด่นของภาพคือ โบสถ์  เพราะในเนื้อหามุ่งเน้นถึงการสร้างโบสถ์ จึงยึดโบสเป็นจุดเด่น

เอกภาพ 

      สีตัวอักษรอยู่ในโทนเดียวกันกับพื้นหลัง  และใช้ฟอนต์ตัวหนังสือที่อ่านง่าย  ซึ่งทำให้เกิดความเป็นอันหนึ่งอันเดียวกัน

ความสมดุล

      การจัดรูปแบบของรูปภาพ  กับตัวหนังสือ มีความสมดุลกัน ซึ่งภาพจะอยู่ด้านซ้ายมือ  ส่วนตัวหนังสืออยู่ทางด้านขวามือ  ไม่ทำให้หนักเกินไปทางด้านใดด้านหนึ่ง

ความคิดสร้างสรรค์

         เลือกให้สีพื้นหลังได้อย่างเหมาะสม  ไม่ดูหน้าเกียจ