James Portfolio Web Design Concept

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

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

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

wf

พอเห็นภาพรวมๆแล้ว จากนั้นก็เริ่มเข้าสู่การคัดเลือกชุดสี (color scheme) แล้วก็รูปภาพ Fonts มาลงในเลเอาท์ของเรา ขั้นตอนนี้ผมใช้โปรแกรม Photoshop ในการจัดวางครับ โดยใช้ 960grid template เป็นแม่แบบสำหรับทำเป็นคอลัมน์ขนาดกว้าง 960px  รูปภาพสำหรับทำ Demo ส่วนใหญ่จะนำมาจากเว็บ imcreator.com/free ที่ผมเคยเขียนแนะนำไปแล้ว  และนี่ก็คือรูปร่างหน้าตา Mock Up เว็บไซต์ครับผม

jamesjames2jame5jame6jame-ipad1 jame-ipad2 jame-ipad3

และหลังจากที่ออกแบบเสร็จแล้ว ขั้นตอนต่อไปก็จะเป็นการเริ่มเขียนโค้ดเป็น HTML/CSS ซึ่งเว็บนี้ผมทำเป็นแบบ Responsive Design ด้วย จึงนำ Framework ที่ชื่อว่า Gumbyframework มาเป็นเครื่องมือช่วยในการทำงานให้ง่ายขึ้นครับ  เมื่อเขียนเสร็จแล้วก็จะเป็นการทำ WordPress Theme และทดสอบใช้งานจริงนั่นเองครับ

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

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้เพื่อการวิเคราะห์

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

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

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

บันทึก