การสร้างเว็บไซต์ใหม่ของ “IDEA BRANCH”
หลังจากที่ได้เข้ามาทำงานที่ บริษัท ไอเดีย บรานช์ จำกัดเป็นระยะเวลาหนึง ก็ได้รับมอบหมาย ให้พัฒนาเว็บไซต์ใหม่ของบริษัท เพื่อเป็นแหล่งเผยแพร่ข้อมูล และผลงานของบริษัท
การทำงานเริ่มขึ้นจากการคิด และนำเสนอ แนวคิดการออกแบบ (Concept) กับที่ประชุม เพื่ออธิบายถึงแนวทางการออกแบบ และระยะเวลาการดำเนินการทั้งหมด ซึ่งแนวคิดในการออกแบบในครั้งนี้คือ
“เติบโตอย่างสร้างสรรค์”
ที่มาของแนวคิดเริ่มต้นจากการที่ บริษัท ไอเดีย บรานช์ จำกัด ถูกก็ตั้งขึ้นมาโดยกลุ่มคนรุ่นใหม่ที่อยากให้ภาพลักษณ์ของบริษัท เป็นบริษัท Digital Agency ที่ดูสนุกสนาน สร้างสรรค์ และเป็นกันเอง จึงใช้สีส้ม เป็นสีประจำบริษัท
ต่อมาบริษัท ได้มีการเติบโต และเป็นที่รู้จักมากขึ้น ทีมงานมีการเติบโตมากขึ้น และเป็นช่วงเดียวกันกับที่ บริษัท ไอเดีย บรานช์ จำกัด ได้ย้ายสถานที่ตั้งใหม่ไปยัง อาคาร GMM Grammy place ทำให้เกิดเป็นแรงงบันดาลใจในการออกแบบในครั้งนี้
โทนสีดำ เปรียบเสมือน ความเข้มขรึ้ม ความสุขุม และความรอบครอบ ที่เกิดจากการโตเติบขึ้นของ ไอเดีย บรานช์ แต่ยังคงความสนุกสนาน และสร้างสรรค์ ในโทนสี โทนสีส้ม และเหลือง
หลังจากที่ได้นำเสนอถึงแนวคิด และระยะเวลาการออกแบบ และพัฒนาเว็บไซต์แล้ว ก็เข้าสู่กระบวน ออกแบบเว็บไซต์ โดยก่อนที่จะเริ่มการออกแบบเว็บไซต์นั้น จะมีขั้นตอนที่ใช้เวลานานที่สุด ซึ่งก็คือ การหา reference โดยจะเป็นการดูเทรนด์การออกแบบ แนวทางการดีไซน์ การจัดวางโครงสร้าง และโทนสี เป็นต้น ก่อนจะเริ่มการออกแบบ ทั้ง User Interface (UI) และ User Experience (UX)และโปรแกรมหลักที่ใช้ในการออกแบบเว็บไซต์ที่ใช้งานก็คือ Sketch
สาเหตุที่เลือกใช้โปรแกรม Sketch เนื่องจากเป็นโปรแกรมที่ค่อนข้างสะดวก และทำงานได้รวดเร็วกว่า Adobe Photoshop สำหรับการออกแบบเว็บไซต์ และในปัจจุบันก็มีผู้ใช้งานเพิ่มขึ้นเป็นจำนวนมาก ทั้งในไทย และต่างประเทศ ทำให้เกิดชุมชนเพื่อแบ่งปันเทคนิคการใช้งาน นอกจากนี้ยังมีการพัฒนาส่วนเสริม (Plugin) เพิ่มมากขึ้นเช่นกัน ส่งผลให้การทำงานสะดวกรวดเร็วขึ้น
สำหรับผู้ใช้งานSketch ในไทย สามารถเข้าร่วมกลุ่มบน Facebook ได้ที่ Sketch Users Thailand เพื่อติดตามข่าวสาร และเทคนิคการใช้งานของโปรแกรม Sketch
เมื่อออกแบบเว็บไซต์เรียบร้อยแล้ว ก็นำแบบ (Mockup) เข้าเสนอกับที่ประชุมอีกครั้ง ก่อนเข้าสู่กระบวนการแก้ไขแบบ และพัฒนาเป็นเว็บไซต์
เริ่มพัฒนา
สำหรับการพัฒนาเว็บไซต์นั้น ได้ใช้โปรแกรม Text Editor คือ Sublime Text โดยส่วนตัวได้ใช้โปรแกรมนี้เป็นหลักในการเขียนโปรแกรมอยู่แล้ว เนื่องจากการทำงานมีการตอบสนองได้รวดเร็วกว่าโปรแกรม Open Source อื่นๆ ที่ได้เคยทดลองใช้งาน ที่จะมีอาการหน่วงในบางจังหวะของการทำงาน จึงกลับมาใช้ Sublime Text เป็นหลัก
ส่วนภาษาที่ใช้ในการพัฒนาก็คือ Jade (HTML) และ SCSS (CSS) โดยมี Bootstrap 3 เป็น framework หลัก
เนื่องจากได้ใช้ Jade และ SCSS เป็นหลักในการพัฒนาเว็บไซต์ในครั้งนี้ จึงต้องมีตัว compile เข้ามาเป็นตัวช่วย ซึ่งก็คือโปรแกรม Prepros ที่มีฟังก์ชันเด่นอย่าง Auto Compile, Live Preview และ Sync Browsers เวลา save งาน ทำให้เราสามารถดูเว็บไซต์ที่เราพึ่งแก้ไขได้อย่างอัตโนมัติ โดยไม่ต้องคอย refresh browser ใหม่ทุกครั้ง นอกจากนี้ยังมี Interface ที่สวยงามอีกด้วย จึงเป็นอีกโปรแกรมหลักโปรแกรมหนึ่งที่ใช้งานมาตลอด
หลังจากพัฒนาเว็บไซต์เรียบร้อยแล้วแล้ว ก็เข้าสู่กระบวนการประชุมครั้งสุดท้าย เพื่อนำเสนอเว็บไซต์
โดยการนำเสนอรอบนี้จะเป็นการนำเสนอเว็บไซต์จริงแต่ละหน้าที่ online อยู่บน demo site โดยทุกคนจะช่วยกันรีวิวทุกๆ ส่วนของเว็บไซต์ เพื่อให้งานที่จะเผยแพร่ออกไป เป็นงานที่ดีที่สุด ที่เราตั้งใจจะนำเสนอออกไป
ซึ่งหลังจากได้รับรีวิวแล้ว ก็กลับเข้ามาสู่กระบวนการแก้ไขรอบสุดท้าย พร้อมทั้ง Optimize เว็บไซต์เพื่อให้เว็บไซต์เข้าถึงได้อย่างรวดเร็ว ซึ่งจะอธิบายเทคนิคการ Optimize เว็บไซต์ ในบทความต่อไปครับ
และเมื่อทุกอย่างได้รับการแก้ไขเรียบร้อยแล้ว ก็เข้าสู่กระบวนการสุดท้าย ซึ่งก็คือ
Live!
สำหรับท่านที่ต้องการแนะนำเว็บไซต์ สามารถแจ้งรายละเอียดได้ที่อีเมล nat@ideabranch.co.th ได้เลยนะครับ :)
