ออกแบบเว็บไซต์ เขียนโปรแกรม ทำเว็บไซต์

มาดูเว็บไซน์โทนสีฟ้าสร้างแรงบัลดาลใจกันดีกว่าเด็กๆ??แต่อยากรู้ว่าผู้เขียนบอกตัวเองเปล่านะ555+ไปดูกัลล

by admin on พ.ย..14, 2010, under เกี่ยวกับแรงบัลดาลใจในการออกแบบ

มาดูเว็บไซน์โทนสีฟ้าสร้างแรงบัลดาลใจกันดีกว่าเด็กๆ??แต่อยากรู้ว่าผู้เขียนบอกตัวเองเปล่านะ555+ไปดูกัลล

1. Festival Creative อือหือ…

2. Box.net ขนาดเอกสารเวิดมันยังเอามาเล่นคิดดู…

3. Icelab เว็บนี้เอาหัวดำนํ้าสมัยก่อนมานะครับ แอบแก่นะพ่อคุณ เด๋วนี้เค้ามีสน็อกเกิ้ลแล้วย่ะ

4. Eric Campbell อันนี้ตา Eric แกเ้ป็นดีไซน์เนอร์ครับ เรียบๆแต่แฝงไปด้วยความเกย์ เ้อ้ยเท่ห์ครับ..

10. NineFlavors อันนี้เจอเข้าไปมีกรี๊ดครับชาวเก้งกวาง อย่างนี้มัน That’s my way AHA HA And Lik’it ahaha

11. BountyBev ดูยังไงก็ตีมหนังเก่งจิงๆๆพ่อคุณ

เอาเป็นว่าสัปดาห์หน้า ลุงกระดื้บๆ จะหาอะไรมากระแทกหลานทั้งหลายอีกครั้งนึงนะจ่ะ รักนะจากลุงกระดื้บขยันหา

Leave a Comment more...

การเขียน-css-ในรูปแบบย่อ

by admin on พ.ย..08, 2010, under Tip and Trick

ลองเขียน css ให้สั้นลงแต่ยังสามารถทำงานได้ตามปกติ

/——– Background (พื้นหลัง) ค่าคุณสมบัติ Background ——–/
element {
    background-color: #FF0000;
    background-image: url(image.png);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: scroll;
}
ตัวอย่างการเขียน CSS ของ Background แบบย่อ
element {
    background:#FF0000 url(image.png) repeat top left scroll;
}

/——– font (ตัวอักษร) ค่าคุณสมบัติ font ——–/
element {
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    font-size:1em;
    line-height:1.2em;
    font-family:georgia,”times new roman”,serif
}
ตัวอย่างการเขียน CSS ของ Font แบบย่อ
element {
    font:bold 1em/1.2em georgia,”times new roman”,serif;
}

/——– Border (ขอบ เส้นขอบ) ค่าคุณสมบัติของ Border (1) ——–/
element {
    border-width:1px;
    border-style:solid;
    border-color:#000;
}
ตัวอย่างการเขียน CSS ของ Border แบบย่อ
element {
    border:1px solid #000;
}

/——– Border (ขอบ เส้นขอบ) ค่าคุณสมบัติของ Border (2) ——–/
element {
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:#000;
}
ตัวอย่างการเขียน CSS ของ Border แบบย่อ (2)
element {
    border-top:1px solid #000;
}

/——– List (สิสท์รายการ) ค่าคุณสมบัติของ List ——–/
element {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);
}
ตัวอย่างการเขียน CSS ของ List แบบย่อ
element {
    list-style:square inside url(image.gif);
}

/——– Margin (บริเวณนอกเส้นขอบออกไป) ค่าคุณสมบัติของ Margin ——–/
element {
    margin-top:1em;
    margin-right:0;
    margin-bottom:2em;
    margin-left:0.5em;
}
ตัวอย่างการเขียน CSS ของ Margin แบบย่อ
element {
    margin:1em 0 2em 0.5em;
}

/——– Padding (บริเวณในเส้นขอบเข้ามา) ——–/
ค่าคุณสมบัติของ Padding
element {
    padding-top:1em;
    padding-right:0;
    padding-bottom:2em;
    padding-left:0.5em;
}
ตัวอย่างการเขียน CSS ของ Padding แบบย่อ
element {
    padding:1em 0 2em 0.5em;
}

การเขียนเราต้องเรียงลำดับให้ถูกต้อง ลองเอาไปใช้กันดูนะครับ วันนี้แค่นี้ก่อนนะครับ

G-Kid

Leave a Comment more...

JQuery on Mobile

by admin on พ.ย..07, 2010, under JQuery

ตอนนี้ jQuery มีเวอร์ชั่นสำหรับ อุปกรณ์จำพวก Mobile อย่างเป็นทางการแล้วนะค่ะ (แต่ยังอยู่ในสถานะระหว่างพัฒนาค่ะ) jQuery Mobile นั้นเป็นการนำเอา jQuery UI มาทำให้ support อุปกรณ์พวก มือถือ,IPAD,iPhone ต่างๆมากยิ่งขึ้น ประโยชน์ของมันก็คือ เราไม่ต้องไปเสียเวลาในการศึกษาภาษาของ App ต่างๆที่จะต้องเขียนในแต่ละ Device เราสามารถใช้ jQuery Mobile ได้แบบ Cross-Platform & Cross-Device
ข้อดีของการที่มัน cross-platform และ cross-device คือทำทีเดียวใช้ได้กับทุกๆ mobile เลยค่ะ ตรงนี้เยี่ยมมากๆเลย ตอนนี้ทาง jQuery เองนั้นได้จดโดเมนใหม่ สำหรับ jQuery Mobile นี้ในชื่อ http://www.jquerymobile.com/ สำหรับ jQuery mobile นั้น support อะไรบ้างก็มีคร่าวๆดังนี้ค่ะ

ดูจาก OS ต่างๆที่รองรับนี้ก็เรียกได้ว่าแทบจะทุกๆ OS หลักๆในตลาดเลยก็ว่าได้นะค่ะ น่าสนใจทีเดียว อีกอย่างทาง jQuery ได้ให้ความสำคัญเกี่ยวกับ UI ในส่วนการติดต่อกับ User ด้วยค่ะ จาก UI ที่เห็นแล้วน่าจะเหมาะกับ Mobile ที่เป็นแบบ Touch Screen ที่กำลังฮิตติดลมบนกันในปัจจุบันนี้นะค่ะ
Leave a Comment more...

กฏ 20 ข้อในการทำเว็บให้ประสบความสำเร็จ

by admin on พ.ย..07, 2010, under Web Design

1. ให้ความนับถือผู้ชมเว็บของคุณ อย่าพยายามบังคับให้พวกเขาอ่านเนื้อหาในเว็บของคุณทั้งหมด ปล่อยให้พวกเขาเลือกและตัดสินใจเองว่าจะอ่านอะไร ให้ลองนึกว่าถ้าคุณเป็นผู้ชมเว็บ คุณจะทำอย่างไรกับหน้าต่างที่ป๊อบอัพขึ้นมาและกล่องโฆษณาที่เกลื่อนกลาดอยู่เต็มไปหมด

2. โฆษณาที่แย่ กล่องโฆษณาที่น่ารำคาญอาจช่วยเพิ่มรายได้ให้คุณเพียงชั่วขณะหนึ่ง แต่ในระยะยาวแล้ว มันไม่ทำให้เว็บไซต์ของคุณประสบความสำเร็จได้ อย่างไรก็ตาม การผนวกโฆษณาเข้ากับเนื้อหาของเว็บไซต์ และจัดโครงสร้างของเว็บให้ดีก็จะช่วยให้โฆษณานั้นไม่รบกวนผู้ชม มันจะช่วยให้เว็บของคุณเป็นที่รู้จักมากขึ้นและยังช่วยเพิ่มรายได้ให้แก่คุณได้ด้วย

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

4. สร้างสรรค์สไตล์ของคุณ สร้างสรรค์จากไอเดียของคุณ ทำให้ตัวคุณเกิดแรงบันดาลใจ แต่อย่าลอกเลียนแบบ มันน่าสนใจกว่ามากที่จะได้รู้ว่าคุณมีความสามารถอะไรแทนที่จะไปสนใจว่าคนอื่นมีความสามารถอะไร ค้นหาจินตนาการและความอยากรู้อยากเห็นของคุณเอง ไอเดียใหม่ๆ หรือไอเดียเก่าที่ถูกพัฒนาขึ้น ย่อมดึงดูดผู้ใช้เว็บมากกว่าของลอกเลียนแบบ

5. ใส่ใจกับมาตรฐาน คิดถึงคนให้มาก การใช้มาตรฐานเว็บที่ดีจะช่วยลดงานของคุณในอนาคตลงได้มาก เมื่อคุณจะสร้างเว็บสำหรับคนทั่วไป มันจึงมีเหตุผลที่คุณจะใช้เวลาเพิ่มขึ้นเล็กน้อยที่จะตรวจสอบโค้ดต่างๆ และทำให้มันเป็นมาตรฐาน เมื่อทุกอย่างเป็นไปตามมาตรฐานดีแล้ว คุณก็ไม่ต้องกังวลว่าในอนาคตจะมีเว็บบราวเซอร์เวอร์ชั่นใหม่เกิดขึ้นมาซึ่งจะทำให้เว็บของคุณมีปัญหา นอกจากนี้เว็บของคุณจะต้องสามารถอ่านได้ง่าย (readability) เข้าถึงได้ง่าย (accessibility) และใช้งานง่าย (usability) จำไว้ว่าคุณต้องนับถือผู้ชมเว็บของคุณ

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

7. เกลียด Internet Explorer ได้ถ้าคุณอยาก แต่อย่าปฏิเสธผู้ใช้มัน อย่าออกแบบเว็บที่เหมาะสำหรับบางเว็บบราวเซอร์เป็นพิเศษ คุณควรออกแบบเว็บให้เหมาะสำหรับ Internet Explorer เหมือนกับที่ออกแบบให้กับบราวเซอร์อื่นๆ Internet Explorer อาจจะไม่ใช่บราวเซอร์ที่ดีที่สุด แต่ก็มีผู้ใช้เว็บถึง 85% ที่ใช้มันอยู่ ให้กลับไปดูกฎข้อที่ 1

8. เอาใจใส่เนื้อหาของเว็บ สำหรับเว็บที่กำลังพัฒนา คุณจะต้องทำให้มันมีข้อมูลที่น่าสนใจและมีรูปลักษณ์ที่ดูดี อย่าลืมว่าผู้ชมเว็บของคุณจะจดจำทุกสิ่ง เมื่อคุณแสดงลิงค์ไปยังเว็บไซต์ที่ไม่เหมาะสมแก่พวกเขาโดยที่ไม่มีข้อความอธิบายว่ามีอะไรซ่อนอยู่ภายใต้ลิงค์นั้น คุณก็จะไม่ได้เห็นผู้ชมเว็บเหล่านี้อีกเลย ถ้าโค้ดของเว็บไซต์เป็นร้อยกรอง เนื้อหาของเว็บไซต์ก็เป็นร้อยแก้ว

9. อย่ากังวลมากกับ SEO อย่าไปมองในระดับคีย์เวิร์ด เพราะมีสิ่งที่สำคัญกว่านั้นคือเว็บไซต์ของคุณต้องการนำเสนออะไร การพยายามเพิ่มตำแหน่งใน search engine นั้นเสียเวลามากกว่าการเขียนบทความที่มีประโยชน์ลงในบล็อกของคุณ ยิ่งไปกว่านั้น ถ้าคุณเป็นผู้เชี่ยวชาญ SEO คุณจะทราบว่าคุณต้องปรับแต่งเว็บไซต์ตลอดเวลาเพื่อให้มีอันดับที่ดีขึ้น ในทางตรงกันข้าม ถ้าคุณเขียนบทความที่ดี มันจะอยู่กับเว็บไซต์ของคุณไปตลอด

9a. หลีกเลี่ยงการทำ SEO และ PageRank แบบผิดๆ การทำ Search Engine Optimization ที่ไม่ถูกต้อง (การแลกเปลี่ยนลิงค์กับทุกเว็บไซต์บนเน็ตเท่าที่เป็นไปได้ การโพสต์ลิงค์ของคุณในเว็บรวมลิงค์ ฯลฯ) จะทำให้เว็บของคุณถูกแบนจาก search engine สำคัญๆ ในที่สุด อัลกอริธึมของ search engine ถูกปรับปรุงตลอดเวลา ท้ายที่สุดแล้วความพยายามของคุณก็จะไม่เกิดประโยชน์ และยังเสี่ยงที่ PageRank จะกลายเป็น 0

10. ติดต่อ แต่อย่าสแปม ให้คนที่สนใจเนื้อหาของคุณได้รู้ว่าคุณมีเนื้อหานั้นๆ ต้องรู้ก่อนว่าใครคือกลุ่มเป้าหมายที่มีศักยภาพ จากนั้นให้เอาใจใส่กับคนที่อาจจะสนใจในบริการของเว็บคุณ นึกถึงเว็บไซต์ที่พวกเขาชอบเข้าไปชม แล้วติดต่อเจ้าของเว็บไซต์เหล่านี้เพื่ออธิบายถึงประโยชน์ของบริการของคุณ แต่จำไว้ว่าคุณไม่ได้เขียนถึงโปรแกรม แต่คุณกำลังเขียนถึงมนุษย์ ซึ่งจะเป็นผู้ตัดสินใจว่าจะแบ่งปันบริการของคุณให้กับผู้ชมเว็บของเขาหรือไม่ จำไว้ว่าจะส่งลิงค์ แต่ให้ส่งคำเชิญชวนที่มีข้อความที่สุภาพที่อธิบายว่าเว็บของคุณมีอะไรที่แตกต่างจากเว็บอื่นๆ ที่คล้ายคลึงกัน ต้องมั่นใจว่าคนที่คุณเขียนถึงตระหนักได้ว่ามันสำคัญต่อผู้ชมเว็บของพวกเขาอย่างไร จงจำไว้ว่าคุณไม่ได้ทำเพื่อเงิน แต่ทำเพื่อผู้ใช้ อย่าสแปม อย่าโฆษณา แต่ให้เผยแพร่สิ่งที่มีประโยชน์

11. ไม่ต้องเกรงใจที่จะถาม มีนักพัฒนาเว็บจำนวนมากที่เคย กำลัง หรือจะถามคำถามเดียวกับที่คุณมีอยู่ตอนนี้ อย่าลังเลที่จะถาม อย่าลังเลที่จะหาคำตอบ ยิ่งคำถามของคุณฉลาดมากเท่าไร คำถามนั้นก็มีโอกาสจะได้รับคำตอบมากขึ้นเท่านั้น และยังทำให้คนพบเว็บของคุณจาก search engine อีกด้วย
12. ตอบอีเมลทันที ติดต่อกับลูกค้าที่มีศักยภาพของคุณให้เร็วที่สุดเท่าที่ทำได้ อย่าปล่อยให้อีเมลกองอยู่ใน inbox นานเกิน 12 ชั่วโมง อย่าส่งข้อความตอบกลับอัตโนมัติ คนที่เขียนข้อความถึงคุณรู้ว่าเขากำลังเขียนถึงคุณ อย่าทำให้คนอื่นเสียเวลาเช่นเดียวกับที่คุณไม่ทำให้ตัวเองเสียเวลา พยายามสร้างความประทับใจให้กับคนที่คุณติดต่อด้วย ตอบกลับอย่างมั่นใจ มืออาชีพ เป็นกันเอง และเป็นตัวของตัวเอง

13. ใช้ประโยชน์ของ social bookmark อย่ากลัวที่จะเผยแพร่เว็บไซต์ของคุณผ่าน Digg, Reddit, Furl, del.icio.us, Ma.gnolia, Blinklist และเว็บไซต์ social bookmark อื่นๆ อีกเป็นจำนวนมาก อย่างไรก็ตาม ให้เลือก tag ที่จะใช้ในเว็บเหล่านี้อย่างระมัดระวังซึ่งจะทำให้ผู้ชมเว็บเข้ามาที่เว็บของคุณ และถ้า tag ถูกเลือกใช้อย่างมีเหตุมีผล ไม่เพียงแต่จะมีผู้ชมเว็บเข้ามาเท่านั้น แต่คุณยังสามารถโน้มน้าวให้พวกเขาช่วย tag บทความของคุณใน social bookmark ต่อด้วย

14. สร้างความสัมพันธ์ นักพัฒนาเว็บที่สร้างสรรค์มักจะได้รับการสนับสนุนจากบล็อกของนักพัฒนาเว็บด้วยกัน

15. คิดในระดับโลก ข้อมูลในเว็บของคุณอาจจะไม่ดึงดูดคนในประเทศของคุณ แต่โลกของเว็บนั้นไร้ขอบเขต แล้วทำไมคุณไม่สื่อสารกับคนทั้งโลกล่ะ? ไม่จำเป็นต้องหาตลาดเฉพาะ (niche) ที่ใกล้ตัวคุณ ในเมื่อคุณมีโอกาสที่ไม่จำกัดอยู่ทั่วโลก

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

17. ติดตามข่าวสารสม่ำเสมอ ตื่นตัวตลอดเวลาว่ามีอะไรเกิดขึ้นในโลกอินเทอร์เน็ต เว็บถูกพัฒนาอย่างรวดเร็วและมีไอเดียใหม่ๆ ออกมาเสมอ อย่างไรก็ตาม นิตยสารด้านการออกแบบและพัฒนาเว็บก็คุ้มค่าที่จะอ่าน

18. เรียนรู้ที่จะสร้างสรรค์ ค้นหาไอเดียใหม่ๆ ตลอดเวลา พยายามเข้าไปอ่านตามกระดานข่าวของนักพัฒนาเว็บ มุ่งความสนใจของคุณไปยังสิ่งที่ผู้คนกำลังค้นหาและพูดถึงกันอยู่

19. ทำเว็บให้สวยขึ้น CSS ดีไซน์ที่โปร่งตา อ่านง่าย และดูชาญฉลาด คือความสวยงาม

20. ตระหนักถึงพลังอำนาจของเว็บอยู่เสมอ ให้การสนับสนุนแก่โครงการที่สำคัญต่อคุณในอนาคต

ที่มา : บล็อกของ Vital Friedman เรื่อง “20 Rules of Smart and Successful Web-Development” แปลโดยคุณอภิศิลป์ ตรุงกานนท์

Leave a Comment more...

ลักษณะการออกแบบเว็บไซต์ Web 2.0

by admin on ต.ค..31, 2010, under Web Design

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

Layout อยู่ตรงกลาง
สาเหตุที่เลือกให้ Layout อยู่ตรงกลาง เพราะเป็นรูปแบบการวาง layout ที่เรียบง่ายที่สุด ผู้ใช้มีประสบการณ์ในการใช้งานเว็บไซต์ที่วาง layout อยู่ตรงกลางอยู่แล้ว จึงง่ายที่จะเรียนรู้ และใช้งาน

มี Column ให้น้อยที่สุด
เมื่อก่อนการใช้งาน 3 หรือ 4 Column ถือว่าเป็นเรื่องที่ปกติ แต่ในยุตเว็บ 2.0 นั้น 2 Colums ก็ถือว่ามากไปแล้ว สาเหตุที่ไม่ใช้ column มากเกินไปนั้น เพราะ ถ้าในหน้าเว็บมี column น้อยที่สุดจะมีทำให้หน้าเว็บนั้นดูแล้วไม่สับสน ดูสบายตา แต่ถ้าจะเลือกใช้งานมากกว่า 2 column ก็สามารถทำได้ขึ้นอยู่กับข้อมูลที่จะนำเสนอภายในหน้าเว็บเพจนั้น ถ้าดูแล้วข้อมูลไม่รก หรือสับสนจนเกินไปก็สามารถใช้งานได้

ภาพตัวอย่างของการจับ Column

แยกส่วนหัว (Header) ของเว็บออกมาให้ชัดเจน
ส่วนหัวของหน้าเว็บเพจถือว่าเป็นส่วนที่สำคัญอีกส่วนหนึ่ง เพราะจะเป็นส่วนที่ทำให้ผู้ใช้งานทราบจุดเริ่มต้นของหน้าเพจนั้นๆ และจะช่วยให้ผู้ใช้ทราบด้วยว่ากำลังใช้งานเว็บไซต์ใดอยู่ (ถ้าไม่ได้เข้ามาจากเว็บไซต์นั้นโดยตรง) เพราะฉะนั้นการทำให้ส่วนหัวของเว็บไซต์เด่นชัดจึงเป็นเรื่องที่สำคัญอีก เรื่องหนึ่ง อาจจะทำได้โดยการใช้สีที่มีความแตกต่าง การใช้ภาพประกอบ หรือใส่ Logo ให้มีความแตกต่าง และน่าสนใจ

ภาพตัวอย่างของ Header

แบ่งพื้นที่การแสดงข้อมูลออกเป็นสัดส่วนที่ชัดเจน
หน้าเว็บเพจส่วนใหญ่จะใช้สำหรับแสดงข้อมูลที่เป็นตัวอักษร ถ้าไม่มีการแบ่งข้อมูลที่เป็นตัวอักษรออกเป็นสัดส่วนที่ชัดเจนแล้วนั้น การใช้งาน การดูข้อมูลของผู้ใช้งานอาจจะเกิดความสับสนได้

ภาพตัวอย่างของการแบ่งส่วนแสดงข้อมูล

ใช้ Navigation ที่ง่าย
Navigation เป็นส่วนที่ช่วยให้ผู้ใช้สามารถเข้าถึงข้อมูลที่อยู่ภายในเว็บไซต์ได้สะดวก บอกผู้ใช้ให้ทราบว่าตอนนี้อยู่ที่ส่วนใดของเว็บไซต์ และช่วยให้ผู้ใช้รู้ว่าจะสามารถทำอะไรได้บ้างจากหน้าเพจนั้นๆ เพราะฉะนั้นการออกแบบจึงจำเป็นอย่างยิ่งที่จะต้องออกแบบมาให้สามารถใช้งาน ได้ง่าย และไม่ซับซ้อนเกินกว่าที่ตัวของผู้ใช้งานจะสามารถเรียนรู้การใช้งานได้ด้วย ตัวเอง

ภาพตัวอย่างของ Navigation

โลโก้ต้องชัดเจน
Logo ถือเป็นสัญลักษณ์ที่บ่งบอกถึงตัวตนของเว็บไซต์นั้นๆ Logo ช่วยให้ผู้ใช้ทราบว่าตอนนี้อยู่ที่เว็บซต์อะไร และช่วยให้ผู้ใช้งานจดจำเว็บไซต์นั้นๆได้ การออกแบบLogo ที่ดีนั้นจะต้องเป็นการออกแบบที่สื่อถึงจุดมุ่งหมายของเว็บไซต์นั้น มีลักษณะที่เด่นชัด จดจำได้ และเมื่อพบเห็นแล้วให้ผู้ใช้งานเกิดความประทับใจ


ภาพตัวอย่างของ Logo

อักษรตัวใหญ่
Web 2.0 นั้นนิยมใช้ตัวอักษรที่มีลักษณะใหญ่ เพราะจะช่วยทำให้เว็บเพจน่าสนใจ และช่วยดึงดูดสายตาของผู้ใช้งานไปยังส่วนที่เราต้องการเน้นให้ผู้ใช้งานเข้า ไปใช้งานอีกด้วย

ภาพตัวอย่างของการใช้งานตัวอักษรที่ใหญ่

อักษรสำหรับ Introduction ต้องชัดเจน
อักษรที่ใช้สำหรับการแนะนำ ไม่ว่าจะเป็นการแนะนำเว็บไซต์ แนะนำการใช้งานส่วนต่างๆ จำเป็นที่จะต้องมองเห็น และสามารถอ่านได้อย่างสะดวก โดยการทำให้อักษรชัดเจนนั้นเราสามารถทำได้หลายวิธี เช่น การใช้สีที่มีความแตกต่างจากส่วนอื่น การใช้ขนาดอักษรที่ใหญ่กว่าส่วนอื่น การใส่กรอ หรือการใช้ภาพมาประกอบเป็นต้น

ภาพตัวอย่างของการทำให้ Introduction ชัดเจน

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

ภาพตัวอย่างของการใช้สีที่เด่นชัด

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


ภาพตัวอย่างพื้นผิวของหน้าเว็บเพจ

Gradients
เป็นการไล่สี ซึ่งเป็นเทคนิคหนึ่งในการสร้างพื้นผิวของเว็บเพจให้มีความน่าสนใจ การใช้งานก็ไม่ควรใช้มากเกินไปจนทำให้เว็บเพจรก ซึ่งส่วนใหญ่จะใช้สำหรับการทำพื้นหลังของหน้าเว็บเพจ

ภาพตัวอย่างการใช้งาน Gradients ในหน้าเว็บเพจ

Reflections
เป็นเทคนิคที่ทำให้ภาพเหมือนเกิดเงาสะท้อนขึ้น ซึ่งก็เป็นเทคนิคอีกเทคนิคหึ่งในการสร้างพื้นผิวของหน้าเว็บเพจให้น่าสนใจ

ภาพตัวอย่างการใช้งาน Reflections ในหน้าเว็บเพจ

Icon
ในเว็บ 2.0 นั้นนิยมที่จะนำ Icon เข้ามาประกอบการตกแต่หน้าเว็บเพจ เพื่อให้เกิดความสวยงาม และน่าสนใจขึ้น โดยสามารถแบ่ง Icon ออกได้เป็น 3 แบบคือ
- Icon ที่ลักษณะธรรมดาทั่วๆไป Icon ลักษณะนี้เมื่อผู้ใช้เห็นก็จะทราบทันทีว่ามันคืออะไร และสื่อถึงอะไร


ภาพตัวอย่าง Icon ที่มีลักษณะทั่วๆไป

- Icon น่ารักๆ เป็น Icon ที่ใช้เพื่อสร้างความสวยงามให้กับหน้าเว็บเพจ แต่ไม่สื่อว่า Icon นั้นหมายถึงอะไร เพราะฉะนั้นการใช้งานจึงนิยมนำมาทำเป็น Icon ที่ว่าไว้หน้า link ที่เป็นตัวอักษรมากกว่าการใช้งานโดดๆ


ภาพตัวอย่าง Icon น่ารักๆ

- Icon ที่มีรายละเอียดในตัว โดยมากจะเป็น Icon ที่ใช้ประกอบเช่นเดียวกับ Icon น่ารักๆ การใช้งานจึงมีลักษณะเหมือนกัน แต่ตัวภาพ Icon จะมีรายละเอีดที่สูงกว่า


ภาพตัวอย่าง Icon ที่มีรายละเอียดในตัว

Star flashes
เป็นกราฟฟิกอีกรูปแบบหนึ่งที่นิยมใช้เพื่อดึงดูดสายตา ของผู้ใช้งานให้มาสนใจในส่วนนั้นๆ

ที่มา : http://lms.thaicyberu.go.th/officialtcu/main/advcourse/presentstu/course/bm521/kurokung_2/kurokung-web2/00/00_2.html

Leave a Comment more...

แก้ปัญหา Google Chrome ตัวอักษรภาษาไทยตัวเล็กเกินไป

by admin on ต.ค..27, 2010, under Tip and Trick

ใครติดตั้ง Google Chrome ครั้งแรกก็ต้องเซ็งไปตามๆ กันเมื่อเปิดเว็บที่เป็นภาษาไทยบางเว็บแล้วตัวอักษรภาษาไทยเล็กมากผิดปกติต้องกด Ctrl+ เพิ่มตัวอักษร แต่วิธีนี้ก็ไม่ได้แก้ปัญหายั่งยืนครับมันมีผลกระทบกับเว็บอื่นที่เราเข้าไปจากที่ปกติก็จะกลายเป้นตัวอักษรใหญ่เกิดไปยุ่งกันไปหมด

มีวิธีง่ายๆในการจัดการปัญหานี้ครับ

1.อันดับแรกเลยเปิด Google Chrome แล้วไปที่ไอคอนเครื่องมือตามรูปข้างล่าง



2.ไปที่แทบ “ขั้นสูง” แล้วเลือกตามรูปข้างล่าง

3.ตั้งค่าต่างๆ ตามรูปข้างล่าง

เท่านี้ท่านก็สามารถใช้งาน Google Chrome ได้อย่างเพลิดเพลินแล้วครับ

เรื่องโดย เชพมือหนึ่ง

Leave a Comment more...

Web 2.0 คืออะไร?

by admin on ต.ค..24, 2010, under ไม่มีหมวดหมู่

Web 2.0 คิดว่าหลายๆคนคงเคยได้เห็น Web 2.0 บน Internet กันมาสักพักนึงแล้ว บางคนคงส่งสัยว่ามันคืออะไร หลายๆคนคิดว่าคงเป็นมาตรฐานใหม่  Web 2.0 เป็นคำที่ถูกคิดขึ้นมาอธิบายถึงลักษณะของเทคโนโลยีเวิลด์ไวด์เว็บ และการออกแบบเว็บไซต์ในปัจจุบัน ที่มีลักษณะส่งเสริมให้เกิดการแบ่งปันข้อมูล การพัฒนาในด้านแนวความคิดและการออกแบบ รวมถึงการร่วมสร้างข้อมูลในโลกของอินเทอร์เน็ต แนวคิดเหล่านี้นำไปสู่การพัฒนาและการปฏิวัติรูปแบบเทคโนโลยีที่นำไปสู่เว็บเซอร์วิสหลายอย่าง เช่น บล็อก เครือข่ายสังคมออนไลน์ วิกิ ลักษณะที่เด่นชัดของ Web 2.0 นั้น จะเห็นได้ว่ามีการพัฒนาและการโต้ตอบระหว่างผู้ให้บริการ และผู้ใช้งาน แทนที่จากระบบเว็บแบบเก่า ที่เป็นลักษณะของการให้บริการอ่านอย่างเดียว โดยรวมไปถึงการรวดเร็ว และการง่ายดายของการส่งข้อมูล แทนที่แบบเก่าที่ต้องจัดการผ่านเซิร์ฟเวอร์ ซึ่งบล็อกและเว็บที่ให้บริการอัปโหลดภาพถูกนำมาใช้เป็นตัวอย่างของ Web 2.0 ที่ให้เห็นได้ทั่วไป ที่มีการให้บริการแสดงความคิดเห็น รวมถึงการใช้งานที่ง่าย โดยผู้ใช้ไม่จำเป็นต้องมีความรู้ในด้านเข้าถึงเซิร์ฟเวอร์แต่อย่างใด เห็นได้ว่าลักษณะของ Web 2.0 นั้นก่อให้เกิดการสร้างเนื้อหา ที่รวดเร็ว และมีการแบ่งปันข้อมูลที่ง่ายขึ้น โดยลักษณะของเว็บเปลี่ยนจากทางเน้นหนักทางด้านเทคนิค ไปในด้านข้อมูลข่าวสารแทนที่ และก่อให้เกิดประโยชน์ในด้านธุรกิจต่อมา

คุณลักษณะของเว็บ 2.0

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

 By *SleepMode

Leave a Comment more...

การใช้สีบนหน้าเว็บ

by admin on ต.ค..24, 2010, under Web Design

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

ระบบสีที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผ่านหลอดลำแสงที่เรียกว่า CRT (Cathode ray tube) โดยมีลักษณะระบบสีแบบบวก อาศัยการผสมของของแสงสีแดง สีเขียว และสีน้ำเงิน หรือระบบสี RGB สามารถกำหนดค่าสีจาก 0 ถึง 255 ได้ จากการรวมสีของแม่สีหลักจะทำให้เกิดแสงสีขาว มีลักษณะเป็นจุดเล็ก ๆ บนหน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้ จะมองเห็นเป็นสีที่ถูกผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือพิกเซล (Pixel) เป็นส่วนประกอบของภาพบนหน้าจอคอมพิวเตอร์ โดยจำนวนบิตที่ใช้ในการกำหนดความสามารถของการแสดงสีต่าง ๆ เพื่อสร้างภาพบนจอนั้นเรียกว่า บิตเด็ป (Bit-depth) ในภาษา HTML มีการกำหนดสีด้วยระบบเลขฐานสิบหก ซึ่งมีเครื่องหมาย (#) อยู่ด้านหน้าและตามด้วยเลขฐานสิบหกจำนวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมีตัวอักษรสองตัว แบ่งออกเป็น 3 กลุ่ม เช่น #FF12AC การใช้ตัวอักษรแต่ละไบต์นี้เพื่อกำหนดระดับความเข้มของแม่สีแต่ละสีของชุดสี RGB โดย 2 หลักแรก แสดงถึงความเข้มของสีแดง 2 หลักต่อมา แสดงถึงความเข้มของสีเขียว 2 หลักสุดท้ายแสดงถึงความเข้มของสีน้ำเงิน


สีมีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัด กระตุ้นการรับรู้ทางด้านจิตใจมนุษย์ สีแต่ละสีให้ความรู้สึก อารมณ์ที่ไม่เหมือนกัน สีบางสีให้ความรู้สึกสงบ บางสีให้ความรู้สึกตื่นเต้นรุนแรง สีจึงเป็นปัจจัยสำคัญอย่างยิ่งต่อการออกแบบเว็บไซต์ ดังนั้นการเลือกใช้โทนสีภายในเว็บไซต์เป็นการแสดงถึงความแตกต่างของสีที่แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีที่สายตาของมนุษย์มองเห็น


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




Leave a Comment more...

บทความการออกแบบเว็บมืออาชีพ

by admin on ต.ค..11, 2010, under Web Design

รู้จักกับการออกแบบเว็บไซท์ Introduction to Web Design

เป็น ที่ทราบกันดีอยู่แล้วว่า อินเตอร์เน็ตเป็นระบบการสื่อสารที่ได้รับความนิยมไปทั่วโลก แม้กระทั่งประเทศไทยในปัจจุบันมีการใช้อินเตอร์เน็ตกันอย่างแพร่หลายในหน่วย งานราชการ และหน่วยงานธุรกิจต่าง ๆ โดยได้รับความสนใจเพิ่มมากขึ้นเรื่อย ๆ โดยเฉพาะกลุ่มนักเรียนและนักศึกษา นิยมใช้อินเตอร์เน็ตเพิ่มขึ้นอย่างรวดเร็ว ทำให้หลายหน่วยงานจำเป็นที่จะต้องพัฒนาเว็บไซต์ขึ้นมาอย่างหลีกเลี่ยงไม่ได้ เราจึงเห็นเว็บไซต์ต่างๆ ในทุกวงการเกิดขึ้นมากมาย ทั้งที่มีคุณภาพและไม่มีคุณภาพ ตามความรู้ความสามารถของผู้ออกแบบ การที่จะสร้างเว็บไซต์ขึ้นมาสักแห่งหนึ่งนั้นจะต้องมีเป้าหมายที่แน่นอนไม่ ใช่เพราะคนอื่นเค้ามีกันเลยอยากมีเว็บกับเค้าบ้าง หรือจำเป็นต้องสร้างเว็บไซต์ตามคำสั่งผู้บังคับบัญชาโดยไม่มีเป้าหมายที่ ชัดเจน ซึ่งทำให้เว็บไซต์นั้นไม่มีประโยชน์อะไรสำหรับผู้ใช้และไม่มีใครเข้ามาใช้ บริการ ถ้าคุณสร้างเว็บขึ้นมาแล้วไม่สนใจคอยดูแลปรับปรุงให้ขึ้นอยู่เสมอ เว็บคุณก็จะหมดคุณค่าได้เหมือนกัน แต่ถ้าคุณให้ความสำคัญในการออกแบบไปจนถึงรายละเอียดต่าง ๆ จะเป็นปัจจัยสำคัญที่ช่วยให้เว็บไซต์ของคุณประสบความสำเร็จได้

ความสำคัญของการออกแบบเว็บไซต์ ปัจจุบัน นี้มีเว็บไซต์เกิดขึ้นมากมายผู้ใช้จึงมีทางเลือกมากขึ้นที่จะเข้าไปยังเว็บ ไซต์ต่าง ๆ ที่ให้บริการและจะไม่ทนอยู่กับเว็บที่สับสน จากประสบการณ์ท่องเว็บที่ผ่านมาของคุณความรู้สึกได้รับจากเว็บที่มีความสวย งามและเว็บที่มีข้อมูลอยู่อย่างมากมายดูสับสนวุ่นวายและเสียเวลานานในการ เข้าดูคุณต้องการที่จะมีเว็บของคุณในลักษณะใด การ ออกแบบเว็บไซท์มีส่วนสำคัญในการสร้างความประทับใจให้กับผู้ใช้บริการ และทำให้อยากกลับเข้ามาใช้อีกในอนาคต หรือดึงดูดผู้ใช้ให้อยู่กับเว็บตลอดไปการออกแบบเว็บไซท์นั้นไม่ได้หมายถึง ลักษณะหน้าตาของเว็บไซท์เพียงอย่างเดียว แต่เกี่ยวข้อง

- การกำหนดเป้าหมายของเว็บไซต์ – ระบุกลุ่มผู้ใช้

- การจัดระบบข้อมูล – การสร้างระบบวิเกชั่น

- การออกแบบหน้าเว็บ – การใช้กราฟิก

- การเลือกใช้สี และการจัดรูปแบบตัวอักษร – ชนิดและรุ่นของบราวเซอร์

- การคำนึงถึงความแตกต่างของสื่อกลางในการแสดงผลเว็บไซท์ด้วย

- ขนาดของหน้าจอมอมิเตอร์ และความละเอียดของสีในระบบ Plug – in ชนิดต่างๆ

เว็บไซท์ ที่ดูสวยงามหรือมีลูกเล่นมากมายนั้น อาจจะไม่นับเป็นการออกแบบที่ดีก็ได้ ถ้าความสวยงามหรือลูกเล่นเหล่านั้นไม่เหมาะสมกับลักษณะของเว็บไซท์ การ ออกแบบของแต่ละเว็บไซท์นั้นแตกต่างกันไป ตามเป้าหมายและลักษณะของเว็บไซท์นั้น เว็บไซท์บางแห่งอาจต้องการความสนุกสนาน บันเทิง ขณะที่เว็บอื่นกลับต้องการความถูกต้อง น่าเชื่อถือเป็นหลัก

แนวทางในการการออกแบบเพื่อความสำเร็จของเว็บไซต์

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

- มีเนื้อหาที่เป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ

- มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ

- ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว

- การใช้งานที่สะดวก เข้าใจง่าย

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

สม่ำเสมอ

ค้นหาเป้าหมายในการสร้างเว็บไซต์

• สร้างเว็บทำไม และเพื่ออะไร

• สร้างเว็บไซต์ให้ใคร และใครคือกลุ่มเป้าหมาย

• หาจุดเด่นและจุดด้อยของเว็บไซต์อื่นๆ ที่มีเนื้อหาใกล้เคียง

• กำหนดจุดเด่นและจุดด้อยของเว็บตัวเอง

การออกแบบเว็บไซต์ให้ดูดีได้อย่างไร

1 สีสัน (Color) จะ ทำให้ผู้ชมเว็บรับรู้อารมณ์ของเว็บ และเรื่องราวที่นำเสนอได้ ควรเลือกสีให้เหมาะสมกับเนื้อหา แต่ละสีให้ความรู้สึกที่แตกต่างกัน เช่น

– สีฟ้า สีเหลือง ให้ความรู้สึกสดใส และอบอุ่น

– สีแดงให้ความรู้สึกสนุกสนาน ร้อนแรง

– สีน้ำเงิน มั่งคง เข้มแข็ง

2. มีความเป็นเอกลักษณ์ จะทำให้ผู้ชมเว็บไซต์จดจำเว็บได้ง่ายขึ้น โดยอาจใช้โทนสี รูปประกอบ Theme ที่คล้ายๆ กันทุกหน้า

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

4. แสดงผลได้อย่างรวดเร็วระยะเวลาในการแสดงผลต้องไม่นานจนเกินไป ไม่ทำให้ผู้เข้าชมเว็บรอเลือกใช้ภาพกราฟิกและภาพ Animation ได้อย่างเหมาะสม

โปรแกรมหลักที่ใช้ในการสร้างเว็บ

Program ออกแบบเว็บ และเขียน Code

- Macromedia Dreamweaver 8 – Edit Plus / Notepad

• Graphic Design Adobe Photoshop CS – ภาษา Script PHP

• Web Server Appserp / IIS – FTP (Upload) Cute FTP

ดัง นั้นถ้าท่านต้องการที่จะออกแบบเว็บไซต์ให้ได้รับความนิยมในระบบอินเตอร์เน็ต มีความน่าสนใจและมีผู้คนเข้ามาเยี่ยมชมอยู่เสมอ จะต้องคำนึงถึงกลุ่มเป้าหมายที่จะนำเสนอข้อมูลในเว็บไซต์เป็นอย่างไรด้วย เช่น เป็นเว็บแนะนำการศึกษา สถานที่สำคัญ ประเพณี และ เมื่อจัดทำเว็บไซต์เรียบร้อยจะต้องมีการประชาสัมพันธ์เว็บไซต์ให้คนอื่น รู้จัก การนำเสนอข้อมูลผ่านระบบเครือข่ายจะต้องมีการศึกษาให้ดีเสียก่อน เพราะหากว่าเราสารถที่จัดทำเว็บไซต์ของเราให้เป็นที่รู้จัก ก็จะเป็นเว็บที่มีคุณภาพเว็บหนึ่ง การออกแบบเว็บไซต์ก็ควรที่จะต้องศึกษาถึงขั้นตอนและหลักการออกแบบเว็บไซท์ ที่ดีเสียก่อน เพื่อที่จะป้องกันไม่ให้เกิดข้อผิดพลาดในการออกแบบขึ้น ซึ่งนอกจากจะทำให้ผู้ใช้เกิดความสับสนไม่พอใจแล้ว คุณยังต้องกลับมาแก้ไขเว็บเหล่านั้นใหม่อีก และที่แย่ยิ่งกว่านั้นคือ เมื่อผู้ใช้มีความรู้สึกที่ไม่ดีต่อเว็บไซต์ในครั้งแรกแล้ว ก็เป็นเรื่องยากที่พวกเขาจะย้อนกลับมาอีกครั้งในภายหลังแม้ว่าเว็บไซต์คุณจะ ได้รับการปรับปรุงให้ดีขึ้นแล้วก็ตาม ดังนั้นทางที่ดีคุณควรจะออกแบบเว็บไซต์ให้ดีตั้งแต่ครั้งแรกเพื่อจะได้สร้าง ความประทับใจให้กับผู้ใช้ตั้งแต่ต้น

Leave a Comment more...

20 ขั้นตอนของการออกแบบเวบเพจที่ดี

by admin on ต.ค..04, 2010, under Web Design

ปัจจุบันมีเว็บหลายเว็บทั้งน้อยใหญ่เกิดขึ้นมามาก แต่ในจำนวนเหล่านั้นจะมีกี่เว็บที่น่าสนใจ และได้รับความนิยม อาจจะเป็นเพราะความผิดพลาดเล็ก ๆ น้อย ๆ ที่คุณอาจคาดไม่ถึง ถ้าคุณได้อ่านคอลัมน์ในหน้านี้ อาจจะพอช่วยให้คุณดูแลเว็บได้ดีขึ้น

1. ก่อนที่จะทำเว็บ คุณควรคิด Concept ของเว็บซะก่อน แนะนำว่าให้ทำเว็บที่เกี่ยวกับเนื้อหาที่คุณชอบหรือถนัด และต้องมั่นใจว่าดูแลเว็บได้ตลอด  ที่สำคัญควรวางแผนและทำงานให้เป็นระบบ อย่าทำงานโดยไร้จุดหมาย เทียบได้กับเมื่อเราเดิน เรารู้ว่าจะไปไหน ย่อมจะถึงว่าคนที่เดินโดยไม่รู้จุดหมาย
2. อย่าท้อเมื่อผลลัพธ์ที่ได้ไม่เหมือนกับจุดมุ่งหมายที่ตั้งไว้ ใช้ไหวพริบในการแก้ไขปัญหานั้น ๆ ไม่มีเว็บไหนที่สำเร็จโดยราบรื่น คิดซะว่าเมื่อเราเจอ 1 ปัญหาในครั้งนี้ เหมือนกับเรากำจัด 1 ปัญหาในครั้งต่อไป
3.มีการปรับปรุงและอัพเดตเว็บอยู่เสมอ คงไม่มีใครอยากเข้าบ้านที่ไม่ได้ทำความสะอาดมาเป็นเดือน ๆ ใช่มั้ยครับ คุณควรที่จะปรับปรุงอัพเดตข้อมูลในเว็บอยู่เสมอ ๆ เพื่อให้ผู้ที่เข้ามารู้ว่าคุณยังดูแลเว็บอยู่
4. คุณควรที่จะรู้กลุ่มเป้าหมายของเว็บของคุณว่าเป็นกลุ่มไหน และทำเว็บให้มีเนื้อหาเหมาะสำหรับกลุ่มเป้าหมายนั้น ๆ เพื่อจะเจาะกลุ่มเป้าหมายนั้นอย่างแท้จริง เช่น ถ้าคุณทำเว็บสดใสวัยรุ่นก็ควรจะมีเนื้อหาพวกเกี่ยวกับ ความรัก, ทำนาย, ภาพยนตร์ ฯลฯ
5. พยายามเน้น Feature (หรือจุดขาย) ของเว็บให้ชัดเจน เช่นผมสร้างเว็บมาเว็บนึง เป็นเว็บรวมสติ๊กเกอร์กว่า 100,000 รูป ซึ่งเป็นจุดที่เด่นที่สุด ก็ควรจะเน้นจุดนี้ให้เด่นกว่าส่วนอื่น ๆ
6. ความเหมาะสมของเนื้อหากับประเภทของเว็บและ Concept ต้องผสมกันได้อย่างดี อย่างเว็บสดใสวัยรุ่นควรจะเป็นสีสดใสเว็บสำหรับกวีกลอนควรจะออกไปทางเรียบง่ายและสงบ ๆ เว็บธุรกิจควรเป็นทางการ คงไม่ดีแน่ถ้าคุณนำรูปชินจังโชว์ช้างน้อยไป ใส่ในเว็บธุรกิจของคุณ
7. พยายามเอาใจและตามกระแสกลุ่มเป้าหมายของคุณ โดยเฉพาะเว็บวัยรุ่น พยายามตามกระแสให้ทัน อันไหนฮิตก็พยายามจับมาใส่ในเว็บ และเมื่อสิ่งที่พวกเขาสนใจมีอยู่ในเว็บคุณแล้ว จะพลาดได้ไง
8. ความเร็วในการโหลดเป็นสิ่งที่สำคัญในการสร้างเว็บ ไม่มีใครอยากที่จะนั่งรอโหลดเว็บที่มีขนาดใหญ่ เมื่อพวกเขารอไม่ไหวก็จะไปจากเว็บคุณทันที
9. ควรจัดเว็บให้เป็นระบบ เพื่อให้ผู้ที่เข้ามาได้ค้นหาในเข้าถึงที่ที่เขาอยากไปโดยทันที อย่าทำเว็บให้เหมือนเขาวงกตที่ไม่มีทางออกหรือซับซ้อนเกินไป หรือถ้ามีเนื้อหาเยอะก็ควรทำ Site Map จะช่วยได้ดีมาก หรือถ้าเว็บมีข้อมูลเยอะก็ควรติด Search Engine ภายในเว็บด้วย
10. พยายามผสมผสานระหว่างกราฟฟิคและ Text ให้ลงตัวที่สุด อย่าเน้นกราฟฟิคจนทำให้เว็บโหลดช้าและอย่าเน้น Text จนทำให้ผู้เยี่ยมชมตาลาย
11. ผู้ทำเว็บควรรู้จักและใช้ Graphic .Gif กับ .Jpg ให้เป็น รูปที่มีสีน้อย ๆ ควรใช้ .Gif ส่วนรูปที่ใช้สีเยอะ ๆ เช่นรูปถ่ายควรใช้แบบ .Jpg
12.การใช้ Font ที่ขนาดต่าง ๆ กันไป สามารถสื่อความหมายได้ ควรใช้ Font ขนาดใหญ่กับตัวที่เราอยากให้ผู้ชมสนใจและเรียงลำดับความสำคัญรอง ๆ ลงมา หลีกเลี่ยงการใช้ Font ขนาดเดียวกันทั้งเว็บเพราะจะทำให้เว็บดูน่าเบื่อและไม่รู้จุดสนใจหรืออาจจะใช้ ตัวหนา ตัวเอียง หรือขีดเส้นใต้ก็ได้
13. หลายเว็บอาจจะทำเว็บทำนองเดียวกับคุณ พยายามทำให้แตกต่าง และ Upgrade เว็บคุณให้ดีกว่า
14. การ Design ใช่ว่าจะไม่สำคัญ เมื่อผู้ชมเข้ามา เค้าควรที่จะได้ First Look ที่ดี นั่นไม่ได้หมายความว่าคุณต้องทำกราฟฟิคแบบสุดยอด ถึงกับลงทุนจ้างกราฟฟิคมือโปร เพียงแค่เป็นการ Design ที่ดี ใช้สีที่เข้ากันได้
15.ถ้าเว็บคุณไม่ได้สร้างขึ้นมาเพื่อแสดงเทคนิคการเขียนเว็บที่ล้ำหน้าเกินเว็บคนอื่น ๆ พยายามอย่าใช้เทคนิคที่ล้ำหน้าจนผู้เยี่ยมชมตามไม่ทัน ถ้าคุณต้องใช้เทคนิคที่ล้ำหน้า ควรเขียนเว็บทั้ง 2 Version เพื่อให้ผู้ที่รองรับได้และไม่ได้สามารถเข้าชมได้
16. ทดลองทดสอบการโหลดเว็บ โดย Upload เว็บไปที่ Server เพื่อจะได้รู้ความเร็วจริง ๆ เพราะถ้าคุณโหลดใน HardDisk ไฟล์จะอยู่ Harddisk ลองทดสอบกับ Server จริง ๆ และอย่าลืม ถ้าคุณต้องทดสอบเป็นครั้งที่ 2 และต่อ ๆ ไป ควรจะ Clear Cahe ก่อน
17. พยายามทำให้ผู้เยี่ยมชมสามารถติดต่อและติชมเว็บเราได้ โดยการใส่ E-mail ใส่เบอร์ ICQ หรืออื่น ๆ ถ้าผู้เยี่ยมชมมี
ข้อเสนอแนะอะไรก็จะมาบอกเราได้ เพื่อการพัฒนาเว็บต่อ ๆ ไป
18. แลกลิงค์กับเว็บอื่น ๆ เพื่อเป็นการโปรโมตและประชาสัมพันธ์ เพราะไม่มีทางที่อยู่ดี ๆ จะมีใครมารู้จักเว็บคุณโดยไม่แนะนำและถ้าคุณต้องโปรโมต กรุณาใช้ วิธีที่ขาวสะอาดในการโปรโมต เช่นอาจจะไปประกาศใน Webboard (แต่อย่าประกาศบ่อย) อย่าใช้วิธี Spam เพราะมันจะทำลาย First Look ของเว็บคุณ
19. อย่าได้แม้แต่คิดที่จะหลอกใช้ผู้ชมเป็นเครื่องมือหาเงิน บางเว็บได้ใช้วิธีโกง Banner กับผู้เยี่ยมชม อย่าคิดว่าคุณจะเป็นผู้ฉลาดเพียงฝ่ายเดียว จับกันได้ง่ายมาก ไม่เพียงแต่ Rating ตก และเว็บคุณจะโดนประณาม ถ้าอยากถ้าเงินจาก Banner ควรใช้วิธีขาวสะอาด แค่ติดไว้ ใส่คำเชิญชวนเล็กน้อย ก็พอแล้วครับ
20. อย่า Copy เว็บคนอื่นมา คนที่ได้แต่ Copy ของเว็บชาวบ้านเค้า แล้วมารวมใส่เว็บตัวเอง คนที่ Copy อย่างเดียว ไม่มีทางได้รู้ว่ากว่าจะมาเป็น 1 งาน กว่าจะมาเป็น 1 เว็บเพจ มันไม่ใช่ง่าย ๆ บางคนต้องแลกด้วยสมอง แลกด้วยเวลา อย่าดูถูกฝีมือตัวเองว่าทำแบบเค้าไม่ได้ เลย Copy มาเลย ให้เกียรติ์ตัวเอง คิดเอง ทำเอง แล้วคุณจะภูมิใจ
ทั้ง 20 ข้อนี้ ไม่ใช่ สูตรสำเร็จในการทำเว็บให้ดัง ให้ดี นำไปใช้ นำไปประยุกต์ 20 ข้อนี้ผมเชื่อว่าช่วยคุณได้แน่ ถ้านำใช้
และฝากกำลังใจให้กับคนทำเว็บ ให้สร้างสรรค์เว็บดี ๆ ให้กับประเทศไทย
ขอบคุณข้อมูลดีๆมีประโยชน์จากเว็บ
By *SleepMode

ที่มา : http://www.srakaew.tht.in/aticle225Blank.html

Leave a Comment more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...