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

1. วาง concept

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

2.ออกแบบ วาง Layout

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

3.mockup แบบดิบ (wireframe)

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

4.Graphic และ Typography

ไปหาสี รูป font มาให้เข้ากับการออกแบบที่วางไว้ครับ ระวังเรื่องลิขสิทธิ์กันด้วยนะครับ รายละเอียดต่างๆไว้คุยกันคราวหน้า

5.Real mockup

ขั้นตอนนี้ใส่สีตีไข่ให้เต็มที่ครับ เป็นขั้นตอนก่อนการนำไปเขียน Code HTML CSS นำการออกแบบ สี font รูปภาพ มายัดลงไปให้ได้หน้าเว็บไซต์แต่ยังไม่ใช่เว็บจริง นั่นก็คือการทำให้เป็นภาพกราฟิก จะแก้อะไรเอาให้จบที่ตรงนี้เลยไม่เปลี่ยนอีกแล้ว จะได้เอาสมองไปเขียน Coding กันอย่างเดียวไปเลย ผมจะทำใน Photoshop แล้วตัดเอาเฉพาะที่จำเป็นจากนั้นก็เป็นเรื่องของ HTML CSS ต่อไป

6.Coding

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