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

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

บทความนี้จะแบ่งเป็นหลายส่วน ภาค 1 นี้จะพูดถึงโปรแกรมที่ใช้เขียนโค้ด HTML & CSS กันก่อนว่าผมใช้โปรแกรมอะไร ต้องขออภัยคนที่ใช้ Mac OS ด้วยนะครับเพราะผมใช้ Windows เลยจะแนะนำแค่โปรแกรม Windows ครับผม

ออกตัวไว้ก่อนว่าเว็บดีไซเนอร์แต่ละคนมีความถนัดและไม่ความชอบไม่เหมือนกัน เพราะฉะนั้นเครื่องมือที่ใช้ทำเว็บจะแตกต่างกันบ้างครับ (เช่น บางคนถนัด Dreamweaver ที่มี Preview เว็บให้ดูด้วย แต่อีกคนชอบเขียนโค้ดใน Notepad มากกว่า เป็นต้นครับ)

โปรแกรมเขียนโค้ดที่ดีควรทำอะไรได้บ้าง

• Syntax-Highlight
  ใส่สีที่แตกต่างกันบนแท็ก HTML / CSS ช่วยให้โค้ดอ่านง่ายขึ้นครับ ตอนอ่านจะได้ไม่สับสน
• File Explorer
  หน้าต่างลิสต์โฟลเดอร์ / ไฟล์เอาไว้เลือกไฟล์ที่จะเปิดมาแก้ได้ง่าย ๆ เหมาะกับงานที่มีหลาย ๆ ไฟล์ เช่น ทำธีม WordPress
• Project Management
  แบ่งงานเป็นโปรเจค เหมาะกับคนที่รับทีละหลาย ๆ งาน ข้อดีคือเราจะแยกแยะได้ง่ายเวลาต้องทำโปรเจคนู้นแล้วกลับมาทำโปรเจคนี้ต่อ โปรแกรมจะเปิดไฟล์ / โฟลเดอร์ของโปรเจคนั้น ๆ ขึ้นมาให้เลย
• Themes
  โปรแกรมเปลี่ยนธีม (สีของ Background / สีของ Syntax-Highlight) ได้ อันนี้จริง ๆ แล้วแต่คนชอบครับ เพราะผมชอบเขียนโค้ดบน Background สีเข้ม ถ้าเป็น Background สีขาวมันดูแสบตา
• Autocomplete
  เป็นการเดาโค้ดได้ว่าเราจะพิมพ์อะไรต่อ แล้วเติมให้เลยครับ เช่นว่าผมจะพิมพ์ <div>บลาๆ</div> แต่แค่พิมพ์ถึง </ โปรแกรมก็รู้แล้วว่าจะพิมพ์ </div> เป็นต้นครับ
  อีกตัวอย่างนึงคือ พอพิมพ์โค้ด CSS ว่า list-style: เสร็จก็จะมี properties ต่าง ๆ ที่ไว้ใส่ใน list-style: โผล่ขึ้นมาให้เห็นเลย
• Multiple Files Opening
  เปิดได้ทีละหลาย ๆ ไฟล์พร้อมกัน โปรแกรมส่วนใหญ่จะทำได้อยู่แล้วครับ มีประโยชน์มากสำหรับงานใหญ่ ๆ เช่นงานแนว Web Application เราก็เลือกเปิดเฉพาะไฟล์ที่เกี่ยวกับฟังก์ชั่นที่กำลังทำอยู่ก็พอครับ
• Free or Affordable Price
  อันนี้สำคัญที่สุดเลยครับ (สำหรับคนที่ทำงานด้านนี้จริงจัง) โปรแกรมควรจะมีราคาในระดับที่รับได้ หรือถ้าฟรีเลยก็ยิ่งดีครับ ช่วยลด Cost ในการทำเว็บดีไซน์ได้มากเลย

ใช้โปรแกรมเขียนโค้ด HTML CSS ตัวไหนมาบ้าง แต่ละตัวเป็นยังไง?

ตอนทำเว็บแรกเริ่มเลยผมใช้ EditPlus ครับ เชื่อว่าน่าจะเคยได้ยินกัน และบางคนคงใช้อยู่ด้วย แต่มันเป็นโปรแกรมเสียตังค์ครับ และฟีเจอร์ต่าง ๆ ของโปรแกรมสามารถหาได้ในโปรแกรมเขียนโค้ดแจกฟรีทั่วไปแล้วครับ (ยกเว้นเอามา Compile Java ซึ่งสะดวกดี… แต่ไม่เกี่ยวกับ HTML CSS นี่เนอะ)

ต่อมาหลังจากผมได้รู้จัก Notepad++ ก็ใช้โปรแกรมนี้ทำงานมายาวเลยครับ ข้อดีคือธีมสวย (ชอบธีม Monokai ของมันมาก) โปรแกรมเบา โหลดเร็ว ฟังก์ชั่นพร้อมมาก ๆ แต่ข้อเสียคือทำเป็นโปรเจคไม่ได้ และความสามารถด้าน Autocomplete ไม่ค่อยเวิร์กครับ (เช่นว่าไฟล์ .php จะไม่มี autocomplete โค้ด HTML ให้เลย)

หลังจากนั้นผมก็หนีไปใช้ Mac OS ชั่วคราวครับ ใช้โปรแกรมชื่อ Coda ที่อินเตอร์เฟซสวยงาม + FTP เข้าไปแก้ไฟล์ได้เลย ชอบมากครับ ก่อนจะมาเจอ Espresso ที่ชอบระบบโปรเจคของโปรแกรมนี้มากกว่า ซึ่งใช้ไปสักพักนึง Macbook พังแถม Apple ไม่แคร์ครับ เลยกลับมาใช้ Windows

แน่นอนว่าใช้ Notepad++ เหมือนเดิมครับ โปรแกรมนี้โหลดเร็วดีชอบมากครับ เปลี่ยนธีมได้ด้วย แต่ด้วยเรื่อง Autocomplete นี่แหละที่เป็นปัญหาใหญ่ (จริง ๆ ก็ไม่ใหญ่ครับ แต่ถ้า Autocomplete ได้รับรองงานเร็วกว่าเดิมมากครับ)

เพื่อนแนะนำ Dreamweaver ให้ลองใช้ครับ ส่วนตัวไม่ชอบ Dreamweaver ตรงที่ดูมันใหญ่ โหลดช้า และฝังใจมาตั้งแต่ตอนเรียนว่าโปรแกรมนี้ไว้ใช้ด้าน WYSIWYG (What you see is what you get คือตกแต่งเหมือนใน Word เลย ไม่ต้องรู้โค้ด จิ้ม ๆ เครื่องมืออย่างเดียว)

อย่างสุดท้ายที่ไม่ชอบคือ มันเปลี่ยนธีมไม่ได้ครับ ไม่ชอบเขียนโค้ดใน Background ขาวครับ (แอบ Art 55)

แต่มารู้ทีหลังว่า Dreamweaver ทำธีมเองได้นะครับ เพื่อนคนที่แนะนำทำธีมสีดำมาให้ใช้เลย ก็เลยเอาไปใช้กับโปรเจค Web Application เว็บนึงครับ ชอบมาก ๆ โปรแกรมมี File Explorer ให้พร้อม และ Autocomplete ได้เทพมาก เสียอย่างเดียวตรงที่ราคาออกจะสูงไปนิดครับ

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

Autocomplete ทำได้เนี้ยบมาก แบ่งไฟล์เป็นโปรเจคจัดการได้ง่ายดี มีธีมให้เลือกใช้หลากหลายตามความชอบ โปรแกรมไม่หนักเกินไป ที่สำคัญมันฟรีด้วย ตอนนี้เอาไปใช้กับโปรเจคนึงเสร็จไปแล้ว คิดว่างานต่อ ๆ ไปก็จะใช้บริการโปรแกรมนี้ต่อครับ

สนใจ Komodo Edit 6 ไปหาได้ที่ไหน?

สำหรับท่านที่สนใจดาวน์โหลดโปรแกรมนี้ไปลองใช้กัน ไปที่
Komodo Edit: Free Open Source Editor

กดที่ปุ่ม Download Komodo Edit นะครับ ส่วนโปรแกรม Komodo IDE จะเป็นโปรแกรมเสียตังค์ของตระกูล Komodo ครับ เราเขียนโค้ด HTML & CSS ใช้แต่ตัว Edit ก็พอครับ

สำหรับท่านที่ต้องการดาวน์โหลดธีมสำหรับใช้ใน Komodo Edit เข้าไปโหลดที่: Kolormodo.com ได้เลยครับ มีธีมสวย ๆ ให้เลือกโหลดไปใช้กันฟรี ๆ

แล้วถ้าเขียน PHP ใช้โปรแกรมอะไรดี?

โปรแกรม Komodo Edit ไว้เขียน PHP ได้ด้วยครับ และมี Autocomplete เรียบร้อยเลย เรียกได้ว่าโปรแกรมเดียวทำได้ทั้ง Backend / Frontend เลยครับ

สุดท้ายนี้ถ้าท่านใดมีโปรแกรมที่ใช้อยู่แล้วถนัดมือ สามารถแนะนำมาได้เลยครับ ผมจะได้ไปลองแล้วเอามาเขียนบอกครับ ^^

ขอบคุณที่ติดตามอ่านมาจนจบคร้าบ ตอนต่อไปจะพูดถึงเครื่องมือไว้เทสดีไซน์ใน Browser ต่าง ๆ

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

Web Browser ไม่ยอมรีเฟรชไฟล์ CSS?

โดยปกติแล้วเนี่ย ถ้าเราไม่สั่งให้บราวเซอร์เปิดระบบ No Cache บราวเซอร์จะทำการแคช (เก็บ) ไฟล์ CSS ไว้ (สำหรับ Firefox ผมใช้วิธีลงปลั๊กอินชื่อ Web Developer แล้วไปตั้งค่า ส่วนบราวเซอร์อื่นผมไม่ทราบครับ) ซึ่งพอเว็บบราวเซอร์แคชไฟล์ไว้จะทำให้เกิดปัญหาว่า พอเข้าเว็บไซต์เดิมอีกรอบ ก็จะทำการรีโหลดใหม่เฉพาะโค้ด HTML เท่านั้น ส่วนไฟล์ CSS จะนำมาจากที่เก็บแคชเอาไว้แล้ว

ถ้าใครเคยนั่งแก้ธีมในบลอคสำเร็จรูปอย่าง Exteen.com ก็น่าจะทราบกันดีว่า แก้ไข CSS ทีนึงก็ต้องบอกผู้อ่านที่เคยเข้าเว็บเรามาก่อนให้ทำการ Refresh แบบเคลียร์ Cache ทั้งหมด โดยการกด Ctrl+F5 ครับ เพื่อที่เค้าจะได้เห็นหน้าตา CSS ใหม่ของเรา

ทีนี้เมื่อก่อนผมก็ไม่ทราบวิธีแก้ครับ ได้แต่อัพบลอคใหม่เพื่อบอกว่าเปลี่ยนธีมใหม่แล้ว ใครยังไม่เห็นให้กดรีเฟรชแบบเคลียร์แคชเอา แต่วันนี้ไปเจอกับวิธีที่ง่ายและเจ๋งมากครับ (แต่ใช้กับที่ Exteen ไม่ได้นะครับ ต้องใช้กับเว็บที่เราแก้ HTML ได้เอง) นั่นก็คือวิธีที่เรียกว่า CSS Versioning ครับ

CSS Versioning คืออะไร และทำอย่างไร

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

สมมติว่าโค้ด HTML ที่เอาไว้เรียกไฟล์ CSS ในส่วน <head> ของเราเป็นแบบนี้นะครับ:

<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

สังเกตตรง href=”css/style.css” นะครับ เราก็แก้ส่วนนี้เป็นแบบด้านล่างเลยครับ (ตรง … ไม่ต้องสนใจครับ)

<link ... href="css/style.css?v=1001" />

ใช่แล้วครับ แค่เติม ?v=เลขเวอร์ชั่น เข้าไปด้านหลังชื่อไฟล์ CSS ก็เป็นการตั้งเวอร์ชั่นได้แล้ว

อย่างไรก็ตาม ไม่จำเป็นต้องใช้ v=เลขเวอร์ชั่น เสมอไปนะครับ อาจใช้เป็น d=เลขเวอร์ชั่น หรือ ver=เลขเวอร์ชั่น พูดง่าย ๆ ว่าเขียนตัวอักษรอังกฤษตัวไหนก็ได้หมดครับ ขอแค่ตามหลัง ? ก็พอ

ซึ่งตรง เลขเวอร์ชั่น ก็ไม่ได้กำหนดว่าต้องเป็น 1, 2, 3, 4, … นะครับ เราจะเริ่มจาก 1001 แบบที่ผมเขียนในตัวอย่างก็ได้ ขอแค่ว่าพอเราแก้ไข CSS เสร็จแล้วอยากให้ Web Browser ของคนเข้าอัพเดท CSS อัตโนมัติ ก็แก้เป็นเลขที่ไม่ซ้ำจากเดิมครับ เช่น 1002

*อ่านด้านล่างต่อนะครับ มีอัพเดทวิธีการทำให้เลขเวอร์ชั่นเปลี่ยนเองได้*

แค่นี้ทุกครั้งที่เราอัพเดท CSS คนเข้าก็จะเห็น CSS ใหม่แล้วครับ โดยสิ่งที่เราต้องทำก็แค่แก้เลขเวอร์ชั่นจุดเดียวเท่านั้นเอง

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

UPDATE วิธีที่ไม่ต้องมานั่งแก้ตัวเลขเวอร์ชั่นเอง

เนื่องจากว่า @dtinth แนะนำเทคนิคดี ๆ มาทางทวิตเตอร์ครับ โดยเป็นการใช้โค้ด PHP ในการตั้งเลขเวอร์ชั่น = วันเวลาที่อัพเดทไฟล์ CSS โดยอัตโนมัติครับ ซึ่งเทคนิคนี้จะใช้ได้เฉพาะกับไฟล์ PHP เท่านั้นนะครับผม โค้ดด้านล่างสามารถก็อปไปแปะใช้ได้เลยครับ

<link ... href="style.css?v=<?php echo filemtime('style.css'); ?>" />

ขอบคุณ @dtinth สำหรับเทคนิคดี ๆ ครับ

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

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

1. ดูว่าตามองที่ไหนเป็นที่แรก?

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

2. อ่านเว็บไซด์จากซ้ายบน -> ขวาล่าง

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

3. ทริค “5 อย่าง”

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

เพิ่มเติม: เว็บไซด์ FiveSecondTest ให้บริการคล้าย ๆ อันนี้ ฟรี! (แบบเสียเงินก็มี) โดยเราสามารถโพสรูปหน้าเว็บไซด์ของเรา รอให้คนมาทำการทดสอบด้วยวิธีดูหน้าเว็บเรา 5 วินาที แล้วคลิกบนจุดที่เด่นที่สุดบนเว็บไซด์เรา (เราสามารถเป็นฝ่ายทำการทดสอบเว็บไซด์คนอื่นได้ เพื่อเก็บเครดิตมาซื้อบริการแบบเสียเงินบนเว็บไซด์นี้)

เทคนิคที่ผมคิดว่าน่าสนใจก็มีเท่านี้ครับ ใครที่มีเทคนิคในการเช็คของตัวเองแบบไหนก็เอามาแบ่งปันกันหน่อยนะครับ~!!

สำหรับใครที่ยังไม่รู้ว่า CSS3 คืออะไร และทำอะไรได้บ้าง แนะนำให้ไปลองอ่านบทความสอนพื้นฐาน CSS3 กันก่อนครับ

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

สนใจคำสั่งไหนก็คลิกบนหัวข้อคำสั่งนั้นเลยครับ จะมีโค้ดตัวอย่างอย่าง และข้อมูลเกี่ยวกับคำสั่งนั้นโผล่ขึ้นมาให้ดู

ในการเข้าชมเว็บไซด์นี้ แนะนำให้ใช้บราวเซอร์ใหม่ ๆ หน่อยนะครับ เว็บบราวเซอร์ที่เค้าแนะนำก็คือ Chrome 4+, Safari 4+, หรือ Firefox 3.6+ ครับผม (สำหรับคนที่อยากเป็นเว็บดีไซน์เนอร์ แต่ใช้ Internet Explorer มาตลอด… แนะนำให้เปลี่ยนด่วนเลยครับ!)

>> CSS3 Click Chart by Impressive Webs <<

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

มาเริ่มกันเลยดีกว่า กับ 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์ ว่ามีอะไรกันบ้าง?

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

ตัวอย่างที่ไม่ดี

<font color="red"><font
size="2"><b>โปรดเลือกอายุ</font></b></font>
<select name="age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...
...
...
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>

ตัวอย่างที่ดี

<font color="red"
size="2"><strong>โปรดเลือกอายุ</strong></font>
<select name="age">
<?php
for ($i=0;$i<=100;$i++) {
  echo "\t<option value=\"{$i}\">{$i}</option>\r\n";
}
?>
</select>

ซึ่งผลออกมาก็มีความเหมือนกันทุกประการ เพียงแต่เรียงลำดับ ใช้โค๊ดให้ถูกต้อง

2.เลือกโปรแกรมให้ถูก เว็บดีไซน์เนอร์มักมีปัญหาเรื่องการเลือกใช้โปรแกรมและการเรียนรู้โปรแกรมที่ถูกต้อง ประเด็นไม่ได้อยู่ที่ตัวโปรแกรม แต่อยู่ที่ความถนัดของเว็บดีไซน์เนอร์ว่าคุณถนัดโปรแกรมอะไร เลือกใช้โปรแกรมอะไร ซึ่งบางโปรแกรมถ้าเว็บดีไซน์เนอร์เลือกไม่ดี อาจเกิดบัคขึ้นได้ หรืออาจเกิดปัญหาด้านการใช้งานไม่สะดวก เช่น การเซฟไฟล์ซึ่งมีการเซฟแบบ ASCII กับ UTF-8 ซึ่งคุณก็ต้องพิจารณาความแตกต่างระหว่างการเซฟ 2 แบบนี้ด้วย(ลองเปิด Notepad แล้วเซฟไฟล์ดู จะมีให้เลือกด้านล่างว่าจะเซฟเป็นแบบไหน) หรืออาจเป็นการเลือกชนิดไฟล์ของภาพ ซึ่งส่วนใหญ่มักจะใช้ JPG GIF และ PNG เป็นหลัก

อย่าใช้ความถนัดโปรแกรมแค่ 1 อย่าง พยายามเรียนรู้โปรแกรมอื่นๆไว้เพื่อคุณจะได้มีความหลากหลายในการดีไซน์ หรือเพิ่มความยืดหยุ่นให้กับทักษะของตน เช่น ถ้าคุณถนัด Photoshop แล้ว ลองหัดโปรแกรมอื่นๆไว้ด้วย เช่น Firework, Namo Web Canvas, Inkscape เป็นต้นฯ

3.มีความรู้ด้านดีไซน์เนอร์ เรียกว่าสำคัญที่สุดเลย คุณจะต้องรู้เรื่องเกี่ยวกับทุกด้านในการทำเว็บไซน์หรือกราฟฟิกดีไซน์เนอร์ด้วย เช่น คุณจะต้องตอบได้ว่า JPG คืออะไร, เป็นไฟล์แบบไหน, มีคุณสมบัติอย่างไร, ต่างกับ GIF และ PNG อย่างไร หรือคุณจะต้องรู้ว่า HTML ย่อมาจากอะไร, tag ใน HTML คืออะไร, <pre> ใว้ใช้ทำอะไร เป็นต้นฯ

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

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

ถ้าคุณไม่รู้ว่าจะเริ่มวางแผนยังไง ลองคิดดูว่าส่วนไหนของเว็บไซท์หรือ PHP ที่คุณต้องเขียนและสำคัญที่สุด เช่น อาจเป็นไฟล์หน้าแรก (index.htm / index.php) หรืออาจเป็นการดีไซน์หน้าเว็บก็จัดลำดับ 4 ขั้นตอน (head / menu / content / footer) เป็นต้นฯ แล้วค่อยๆเริ่มขยายความไปเรื่อยๆ จนคุณคิดว่าคุณได้วางแผนงานของคุณเสร็จเรียบร้อยแล้ว!

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

ยกตัวอย่าง Code PHP ที่ไว้วางยา โดยภายในไฟล์ config.php นั้นต้อมีค่า $buy ไว้ อาจเป็นค่า null ก็ได้ (หมายถึงถูกเซตไว้อยู่ดี)

<?php
include('config.php'); /* เรียกไฟล์ที่มีค่า $buy เก็บไว้เวลามันไม่จ่ายเงิน */
if (isset($buy)) { /* ถ้า $buy ถูกเซ็ตไว้ */
  for ($i=0;$i<=1000000000;$i++) { /* สั่ง Loop สัก 1 พันล้านครั้งให้มันทวงเงิน */
    if ($i == 0) {
      echo "จ่ายเงินสิโว้ย!!<br>";
    }
    else {
      echo "ไม่จ่าย โค๊ดนี้ก็ยังอยู่นะโว้ย!!<br>"; /* ให้มันสลับคำพูดไปมาเรื่อยๆจนมันครบ 1 พันล้านครั้ง */
    }
  }
}
?>

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

LuviKunG

PS : http://w3schools.com/ เว็บสอนเกี่ยวกับการทำเว็บไซท์ครับ มีครบทุกภาษา เช่น HTML, HTML5, XHTML, CSS, PHP, ASP, JavaScript, MySQL และอีกหลายอย่าง ถ้าสนใจศึกษาลองทนอ่านภาษาอังกฤษดูนะครับ เว็บนี้สอนเข้าใจง่ายสุดแล้วครับ

จริงหรือที่กราฟฟิกดีไซน์สำคัญกับทุกอย่างในโลก?

ลองมองรอบๆตัวคุณสิครับว่า มีอะไรบ้างที่เป็นกราฟฟิกดีไซน์บ้าง? เช่น ขวดน้ำที่มีฉลากโลโก้สินค้า, กรอบรูปที่คุณโปรด, หน้าปกหนังสือที่มีสีสัน ฯลฯ ทุกอย่างถูกสร้างขึ้นมาโดยการออกแบบทางศิลปะที่เรียกว่า “กราฟฟิกดีไซน์”

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

แล้วกราฟฟิกดีไซน์สำคัญกับโลกเราอย่างไร?

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

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

ดูๆไปเหมือนคำว่า ครีเอเตอร์ จะไม่คุ้นหูคุ้นตาเราในชีวิตประจำวันสักเท่าไหร่ ไม่เหมือนกับ ดีไซน์เนอร์ ที่เมื่อพูดถึงชื่อก็ต้องร้องอ๋อกันทุกคน ปกติ ครีเอเตอร์ ไว้เรียกคนที่มีความสามารถสร้างสรรค์สิ่งต่างๆได้โดยใช้ความคิดด้านตรรกศาสตร์เพียงอย่างเดียว (เช่น วิศวกร, นักสถาปัตย์ เป็นต้นฯ)

องค์ประกอบของกราฟฟิกสำหรับดีไซน์เนอร์มีอะไรบ้าง?

องค์ประกอบจะถูกจัดให้เป็นหมวดใหญ่ๆอยู่ 5 หมวดด้วยกันคือ

1. รูปร่าง
2. สีสัน
3. ขนาด
4. องค์ประกอบ
5. ความหลากหลาย

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

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

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

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

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

การเป็นนักกราฟฟิกดีไซน์เนอร์ที่ดีควรทำอย่างไร?

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

1. อย่ากังวลว่าผลงานตัวเองห่วย เพราะการที่คุณคิดว่าผลงานของคุณห่วย นั่นคือคุณได้ดึงเส้นด้ายจินตนาการของคุณขาดไปแล้ว
2. สร้างความมั่นใจในผลงานของตน คล้ายๆกับข้อที่หนึ่ง ดูเหมือนง่าย แต่ความจริงยากมาก เวลาคุณทำงาน อย่าสร้างความเครียดให้กับตนเอง แต่ให้คิดว่าคุณกำลังสนุกกับการทำงาน ผมเรียกวิธีนี้ว่า “Enjoy your Imaginations”
3. ไม่ควรคิดหักโหมกับจินตนาการ เพราะงานดีไซน์ของคุณจะออกมาไม่ดี ควรไปพักผ่อนให้สมองผ่อนคลายลง เพราะงานดีไซน์ที่ดีไม่ได้มาจากกำลังสมอง แต่มาจากอารมณ์ของคนคิด ดังนั้นพักถ้าคุณคิดว่าไม่ไหว ลองดื่มน้ำเย็นๆสักแก้วแล้วนั่งฟังเพลงหรือดูทีวีก็ได้!
4. จินตนาการอยู่ทุกที่ บางเวลาถ้าคุณได้มีโอกาสไปเที่ยวพักผ่อน ลองหลับตาแล้วฟังเสียงของสายลมดู ลองจินตนาการตามที่คุณได้เห็นภาพเมื่อคุณหลับตา แล้วลองคิดออกแบบตามหลักของนักดีไซน์เนอร์ดู บางทีผลงานขอบคุณออกมาอาจจะดีเกินที่คาดคิดไว้
5. ไม่ควรขี้เกียจ อันนี้สำคัญ เพราะนักดีไซน์เนอร์ส่วนใหญ่มักจะส่งงานให้เจ้านายหรือผู้รับจ้างล่าช้าเสมอ (เรื่องจริงนะ! ผมเคยไปทำแบบสอบถามแล้ว) บ้างก็อ้างว่า คิดงานไม่ออก หรือไม่ก็ งานเยอะ พอไปดูเบื้องหลังกลับเห็นนั่งเล่นเกมส์ หรือไม่ก็ดูภาพยนต์ ลองปรับพฤติกรรมเล็กน้อยในชีวิตประจำวันดูครับ
6. สมุดพก จะสมุดอะไรก็ได้ มีเส้นหรือไม่มีก็ได้ แต่ขอให้พกติดตัว เวลาคุณคิดอะไรได้ขึ้นมา หรือนั่งเหม่อลอยอยู่จู่ๆก็มีความคิดพุ่งขึ้นมาแล้วคุณคิดว่าควรเก็บไว้ จดมันลงในสมุดนั้นเลยครับ บางทีคุณอาจจะได้ใช้มันในอนาคต

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

LuviKunG

ใครยังไม่ได้อ่านตอนแรก สามารถกลับไปอ่านบทความสอนใช้ CSS3 เบื้องต้น พร้อมโค้ดตัวอย่าง (ตอน 1) ได้เลยครับ แต่ไม่จำเป็นต้องอ่านตอน 1 ก่อนนะครับ อ่านตอนไหนก่อนก็ได้ ต้นฉบับภาษาอังกฤษของบทความนี้อยู่ที่ WebdesignerWall ครับ

ใส่กรอบโค้งในเว็บดีไซน์ด้วย CSS3

หลาย ๆ คนคงเบื่อกล่องเหลี่ยม ๆ จืด ๆ แล้วใช่มั้ยครับ CSS3 มีการเพิ่มการทำขอบกล่องให้โค้งมน ซึ่งนอกจากเอาไปใช้กับกล่องทั่ว ๆ ไป ยังนิยมเอาไปใช้ในการทำลิงค์ให้น่าสนใจด้วยครับ

ชื่อของ Property ก็คือ border-radius ครับ ซึ่งค่าที่ใส่ก็คือรัศมีของความโค้งครับ ยิ่งค่านี้เยอะยิ่งโค้งมาก อย่างไรก็ตาม ในบราวเซอร์ Mozilla Firefox กับ Safari 3 (บราวเซอร์ที่ติดตั้งมากับ Mac OS ครับ เวอร์ชั่นในวินโดว์ไม่ได้รับความนิยมมากนัก) มีการใส่ฟังก์ชั่นที่ทำงานเหมือนอันนี้เข้าไปแล้ว แต่ใช้ชื่อ Property ที่ต่างกันครับ

การที่จะทำให้กรอบโค้งของเราเรนเดอร์ได้ทุกบราวเซอร์ (ยกเว้นบราวเซอร์เก่ามาก ๆ อย่าง IE6) ก็เลยต้องเรียกใช้ Property ของทุกบราวเซอร์มันซะเลย

โค้ดจะออกมาประมาณนี้ครับ:

• border-radius: 5px;
• -webkit-border-radius: 5px;
• -moz-border-radius: 5px;

โดย -webkit- เป็นของ Safari และ -moz- เป็นของ Mozilla Firefox หมาไฟของเรานั่นเอง

ตัวอย่างการทำกรอบโค้ง << ถ้าใช้บราวเซอร์ที่รองรับจะเห็นครับ

ซึ่งเทคนิคในการใช้กรอบโค้งอันนี้ นอกจากจะกำหนดแบบค่าเดียวใช้ทุกมุม ยังกำหนดให้โค้งเฉพาะมุมใดมุมหนึ่งได้ด้วย โดยใช้โค้ดดังนี้ครับ

สำหรับ -webkit-:

• -webkit-border-top-left-radius: 5px;
• -webkit-border-top-right-radius: 10px;
• -webkit-border-bottom-left-radius: 15px;
• -webkit-border-bottom-right-radius: 20px;

โดยจะใช้คำบอกตำแหน่งมุมที่จะเซ็ตค่า เช่น -top-left- สำหรับมุมบนซ้ายครับ

สำหรับ -moz-:

• -moz-border-radius-topleft: 5px;
• -moz-border-radius-topright: 10px;
• -moz-border-radius-bottomleft: 15px;
• -moz-border-radius-bottomright: 20px;

สังเกตได้ว่า -moz- กับ -webkit- จะแตกต่างกันนิดเดียวครับ ซึ่งโค้ดทั้งสองอันนี้จะแสดงผลดังตัวอย่างด้านล่างเลยครับ:

ตัวอย่างการเซ็ตกรอบให้โค้งไม่เท่ากัน

<< ถ้าใช้บราวเซอร์ที่รองรับจะเห็นครับ

ใส่กรอบให้กล่องในเว็บดีไซน์ด้วย Box Shadow

อันนี้แทบจะไม่ต่างจาก text-shadow ที่เขียนถึงในตอนที่แล้วเลยครับ แต่ความแตกต่างคือถ้าจะใช้ความสามารถนี้ เราต้องเขียน -webkit- กับ -moz- ทั้งสองอันครับ โดยโค้ดหน้าตาจะเป็นแบบนี้:

• -webkit-box-shadow: (ระยะ X) (ระยะ Y) (ความยาวเงา) (สีเงา);
• -moz-box-shadow: (ระยะ X) (ระยะ Y) (ความยาวเงา) (สีเงา);

และสามารถใส่ได้หลายเงาโดยใช้วิธีเหมือนกับ text-shadow เลยครับ ถ้าจำวิธีไม่ได้ลองกลับไปอ่าน ตอนที่แล้ว ใหม่นะครับ

ลองมาดูตัวอย่างการใช้กันนะครับ โดยใช้โค้ดนี้:

• -webkit-box-shadow: 2px 2px 3px #000;
• -moz-box-shadow: 2px 2px 3px #000;

จะออกมาเป็นแบบกล่องด้านล่างครับ:

กล่องทดสอบเงา CSS3

สำหรับบทความสอน CSS3 เบื้องต้น ก็จบลงเพียงเท่านี้ครับ ชอบไม่ชอบยังไงบอกกันได้เลยครับ หรืออยากให้นำบทความเกี่ยวกับอะไรมาเสนอ ก็โพสคอมเม้นท์ไว้เลยครับ ตอบทุกคอมเม้นท์ครับ!

จริง ๆ แล้ว CSS3 ก็ออกมาได้สักพักนึงแล้วครับ แต่ด้วยความที่ต้องอัพเดทเว็บบราวเซอร์ของคุณให้เป็นเวอร์ชั่นใหม่ล่าสุดก่อน ถึงจะเรนเดอร์ CSS3 ได้ (เช่น Mozilla Firefox เวอร์ชั่น 3.6+) เลยยังไม่ค่อยได้รับความนิยมเท่าที่ควรในเว็บไซด์ส่วนใหญ่ครับ และเหตุผลอีกอย่างนึงก็คือคนส่วนใหญ่อาจคิดว่า CSS3 น่าจะใช้ยาก แต่ความจริงแล้วมันก็เป็น CSS เดิมที่เพิ่มฟังก์ชั่นใหม่ ๆ เข้ามาเท่านั้นเองครับ

พอดีผมไปเจอบทความหนึ่งจาก WebdesignerWall ซึ่งสรุปเกี่ยวกับพื้นฐานของ CSS3 ไว้ได้เข้าใจง่ายดีมากครับ เลยแปลบางส่วนมาให้ได้อ่านกัน สำหรับใครที่ยังไม่เชี่ยวชาญพื้นฐาน CSS มากเท่าไร แนะนำให้ไปอ่าน [CSS Tutorial สำหรับมือใหม่] เทคนิค CSS ที่ฉันน่าจะรู้ให้เร็วกว่านี้! [English] กันก่อนครับผม (ยังเป็นภาษาอังกฤษอยู่นะครับ เร็ว ๆ นี้จะแปลเป็นภาษาไทยมาให้ได้อ่านกันครับ)

มาดูกันเลยครับว่า CSS3 มีอะไรใหม่ ๆ บ้าง

RGBA

ปกติน่าจะรู้จัก RGB กันใช่มั้ยครับ เป็นโหมดสีที่ใช้ในงานกราฟฟิกส่วนใหญ่บนคอมพิวเตอร์ ซึ่งสร้างสีโดยประกอบสีจากความแตกต่างในค่า R (Red สีแดง) G (Green สีเขียว) และ B (Blue สีน้ำเงิน) ครับ ทีนี้ใน CSS3 จะมีค่า A เพิ่มขึ้นมาให้ใช้กัน นั่นคือค่า Alpha ครับ

ค่า Alpha นี่พูดให้เข้าใจง่าย ๆ จะใช้อีกคำ คือ Transparency หรือ ค่าความโปร่งใส นั่นเอง โดยแบ่งเป็นค่า

• 0 = โปร่งใสจนมองไม่เห็นอะไรเลย
• 1 = ทึบแสง เห็นทุกอย่าง

ซึ่งค่านี้เราสามารถใส่เป็นทศนิยมได้ ตัวอย่างเช่น:

• background: rgba(255, 255, 255, .5);

จะเห็นว่าผมใส่ .5 ในส่วนของ Alpha ซึ่งจะทำให้สีพื้นหลังใส 50% ครับ

ถ้าเห็นตัวหนังสือตัวนี้ใส ๆ แปลว่าบราวเซอร์คุณรองรับ CSS3 (ไม่งั้นจะเห็นสีดำสนิท)

ฟังก์ชั่น RGBA นี่สามารถใช้ได้ในทุกที่ที่ใช้ RGB ได้ครับ เช่น border, background, outline, etc.

Text Shadow

ต่อไปเป็นความสามารถในการใส่เงาให้ตัวอักษรครับ ใช้ง่าย ๆ แบบนี้เลยครับ:

• text-shadow: (ระยะแกนตั้ง X) (ระยะแกนนอน Y) (ความเบลอ) (สีเงา);
• Example: text-shadow: 2px 2px 3px #000000;

อักษรเงาเป็นแบบนี้ครับ (ถ้าบราวเซอร์เรนเดอร์ CSS3 ได้จะเห็นครับ)

ซึ่ง ระยะแกนตั้ง X กับ ระยะแกนนอน Y นี่ถ้าเป็นบวก เงาจะไปทางด้านขวา-ล่าง แต่ถ้าเป็นค่าติดลบ เงาจะไปทางด้านซ้าย-บน ครับผม และเราสามารถใช้ RGBA ในส่วน สีเงา ได้ด้วยครับ

นอกจากนั้นยังกำหนดเงาได้มากกว่า 1 เงาได้ครับ เช่นตัวอย่างจากเว็บไซด์ WebdesignerWall อันนี้:

ทดสอบตัวอักษรแบบยุบลงไป

ใช้โค้ดนี้ครับ

• text-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 #000000;

จะเห็นว่าใช้เครื่องหมายคอมมา (,) เพื่อแยกการเซ็ตค่าของเงาแต่ละอันครับผม

>> คลิกที่นี่เพื่ออ่านบทความ สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!! <<

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

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

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

* ตอนนี้บอร์ดได้ทำการลงใหม่แล้ว URL บอร์ดย่อยจะเปลี่ยนหมดครับ เข้าหน้าหลักบอร์ดได้ที่นี่ *

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

สำหรับบทความต้นฉบับภาษาอังกฤษ อ่านได้ที่เว็บต้นฉบับเลยครับ ผมไม่ได้นำภาพในบทความนั้นมานะครับ เพราะงั้นแนะนำให้คลิกดูภาพประกอบในบทความต้นฉบับครับ >> 10 Basic Visual Webdesign Mistakes – 1st Webdesigner

10 ข้อผิดพลาดที่เห็นบ่อย ๆ ในเว็บดีไซน์

1. เลือกใช้ฟ้อนต์แปลก ๆ

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

2. ทั้งเว็บมีแต่ตัวหนังสือ

เว็บไซด์ไม่ใช่สมุดโน้ตส่วนตัวของเราครับ ไม่ควรใส่แต่ตัวอักษรติด ๆ กัน ไม่มีรูปประกอบอะไรเลย อันนี้เป็นเหตุผลที่บางคนไม่ค่อยชอบอ่าน Wikipedia กันครับ (ชอบ Copy-paste กันมากกว่า จริงมะ) หรือต่อให้คุณไม่รู้จะใส่รูปอะไรไปในบทความนั้น ๆ ก็ควรจะหารูปที่ใกล้เคียงกับหัวข้อเอามาใส่บ้างครับ ไม่งั้นคนอ่านเว็บไซด์คุณหนีกันแน่นอน

3. ไม่คิดจะแบ่งย่อหน้า

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

4. ตัวอักษรเล็กจนต้องใช้แว่นขยาย

คุณเคยเจอเว็บที่ตัวอักษรเล็กมาก ๆ จนต้องใช้แว่นขยายส่องมั้ย? สำหรับขนาดตัวอักษรในเว็บไม่ควรเล็กกว่า 12pt ครับ (แล้วแต่ฟ้อนต์ด้วยนะ) ถ้าคุณคิดว่าทำเว็บมาให้วัยรุ่นสายตาดีอ่านอย่างเดียวก็ว่าไปอย่าง แต่อย่าลืมว่าวัยรุ่นสมัยนี้ดูจอคอมมาก สายตาก็เริ่มสั้นกันแล้วนะครับ ถ้าใช้ฟ้อนต์เล็กมากเพราะที่ไม่พอจริง ๆ ก็ควรจะมีฟังก์ชั่นในการเพิ่มขนาดตัวอักษรเป็นปุ่ม Javascript ให้คนอ่านกดใช้ด้วยครับ แต่ถ้าหลีกเลี่ยงได้ก็หันไปใช้ขนาดฟ้อนต์ที่พอเหมาะจะดีที่สุดครับ

5. ใช้แฟลชเยอะเกินไป

Flash มันสวย มีลูกเล่น และดูดีครับ แต่มันทำให้เว็บไซด์ของคุณเปิดช้าลง และกินแรมเครื่องคนเปิดอย่างมหาศาลครับ อาจทำให้คนที่เครื่องไม่แรงจริง ๆ หรือมีการเปิดโปรแกรมอื่นพร้อมกันไปด้วย เปิดเว็บไซด์คุณแล้วค้างได้ครับ นอกจากนั้นพวกบอทของ Search Engine ต่าง ๆ (เช่น Google) ตามลิงค์ในแฟลชได้ไม่ดีมากครับ ทำให้เข้าไปเก็บข้อมูลในเว็บเราได้ไม่ทั่วถึง

และอีกอย่างคือมีกระแสของ Apple ที่ผลิตภัณฑ์ต่าง ๆ เช่น iPhone กับ iPad ที่บราวเซอร์ไม่สนับสนุน Flash ครับ (Steve Jobs ประกาศจุดยืนว่าจะไม่ซัพพอร์ท Flash) ทำให้ไม่ควรใช้แฟลชในเว็บไซด์มากเกินไป โดยเฉพาะส่วนสำคัญของเว็บ เช่น Navigator ครับ

6. เนื้อหาบนรูปพื้นหลังสีสด ๆ

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

7. โฆษณาเยอะเกินไป

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

8. ป็อปอัพในเว็บไซด์

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

9. เนื้อหายาวเกินไป

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

10. สีของลิงค์เหมือนสีเนื้อหา

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

บทความแปล เรียบเรียง และเพิ่มเติมโดย @designil

หลังจากที่คัดหาข้อมูลดี ๆ อยู่นาน ว่าจะแปลบทความอะไรมาลงดี สุดท้ายก็เลือกบทความนี้มาครับ “10 Things Clients Look For In a Design Portfolio” (Noupe.com) สำหรับผู้อ่านที่เก่งภาษาอังกฤษอยู่แล้ว จะตามไปอ่านในบทความต้นฉบับเลยก็ไม่ว่ากันครับ แต่สำหรับท่านที่อยากอ่านแบบง่าย ๆ สบาย ๆ ก็เชิญอ่านภาษาไทยด้านล่างได้เลยครับ

ออกตัวไว้ก่อนว่าผมสรุปเฉพาะใจความสำคัญมาให้อ่านนะครับ ชอบไม่ชอบอย่างไรติชมได้ครับผม!

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

1. วันที่

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

2. เว็บไซด์จริง

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

3. เครื่องมือ

• ลูกค้าอาจใช้บริการของเว็บไซด์ต่าง ๆ เช่น Aweber สำหรับทำ mailing list หรือ WordPress สำหรับทำ Blog ซึ่งถ้าผลงานเก่าของเรามีการใช้ หรือ เชื่อมต่อ กับบริการนั้น ๆ จะทำให้ลูกค้าตัดสินใจเลือกเราได้ง่ายขึ้น เพราะเห็นว่าเราสามารถนำบริการ/softwareเหล่านั้นมาใช้ในเว็บไซด์ได้
• ดังนั้นใน Portfolio เราจึงควรระบุบริการต่าง ๆ ที่เรานำมาใช้ในผลงานเก่าแต่ละงาน อาจมีรายละเอียดเกี่ยวกับบริการนั้น ๆ เล็กน้อยด้วย

4. ความถนัดในประเภทเว็บไซด์

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

5. สไตล์การออกแบบ

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

6. ความสามารถพิเศษ

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

7. ความเป็นมาของผลงาน

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

8. คำตอบรับจากลูกค้า

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

9. การออกแบบของเว็บ Portfolio

• การออกแบบของเว็บ Portfolio ของเราสำคัญพอ ๆ กับผลงานเก่าต่าง ๆ ที่เราเลือกมาแสดง จำไว้ว่าลูกค้าไม่ได้ต้องการ Flash เลิศหรู แต่ต้องการเห็นการออกแบบ Layout เว็บไซด์ของเราว่าทำออกมาได้แสดงความเป็นตัวเราขนาดไหน
• อย่าลืมรายละเอียดทั้งเล็กทั้งใหญ่ เช่น เช็คว่าลิงค์ทุกลิงค์บนเว็บไซด์ใช้การได้ หรือการมีโดเมนเว็บไซด์เป็นของตัวเอง (แทนที่จะเป็นโดเมนของโฮสต์ฟรี) บางทีเราอาจคิดว่าเรื่องพวกนี้มันเล็กน้อยมาก แต่สำหรับลูกค้าแล้วก็เป็นเรื่องใหญ่ทีเดียวครับ

10. ผลงานที่ดีที่สุด

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

แปลบทความเป็นภาษาไทยโดย @designil (http://www.designil.com – ศูนย์รวมความรู้เว็บดีไซน์)

บทความโดย Thursday Bram – Noupe.com อ่านบทความต้นฉบับได้ที่ 10 ข้อที่ขาดไม่ได้ใน Portfolio ของเว็บดีไซน์เนอร์