ออกแบบเว็บไซต์ Emergency Innovation


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

 

[skill]

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

 

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

 

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

 

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

[/skill]

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

 

[skill]

  • HTML
  • CSS
  • MySQL
  • PHP
  • JAVASCRIPT
  • XML
  • CMS
  • WORDPRESS
[/skill]

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

Privacy Preferences

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

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

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

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

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

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

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

บันทึก