เว็บไซต์แสดงข้อมูลสำหรับแอปพลิเคชัน Collab24 ที่มุ่งเน้นการนำเสนอฟีเจอร์เด่นและแนวทางการใช้งานที่ครบถ้วน ช่วยให้ผู้ใช้งานเข้าใจและเข้าถึงศักยภาพของแอปพลิเคชันได้อย่างเต็มที่
–
April 2023
จุดประสงค์หลักของการออกแบบเว็บไซต์นี้คือ การนำเสนอข้อมูลที่เป็นประโยชน์แก่ผู้ที่เข้าชมเว็บไซต์ เพื่อสร้างความเข้าใจ ให้ความรู้ นำเสนอข้อมูลเกี่ยวกับแอปพลิเคชัน รวมถึงต้องการเพิ่มความน่าเชื่อถือ สร้างความเชื่อมั่นให้กับระบบมากขึ้น
ในการเริ่มต้นทำเว็บไซต์ เราเริ่มต้นด้วยหารือและกำหนดรายละเอียดต่าง ๆ ดังนี้คือ
- กำหนดเป้าหมายหลักของเว็บไซต์ = เพื่อนำเสนอข้อมูลเกี่ยวกับแอปพลิเคชัน
- เชื่อมโยงกลุ่มเป้าหมายที่เป็นผู้ใช้หลักของแอปพลิเคชัน = อายุ, ความสนใจ
- สร้างโครงสร้างเว็บไซต์ (Sitemap) ร่วมกับทีมและกำหนดถึงเนื้อหาที่จะนำเสนอ
ภาพตัวอย่าง Sitemap
หลังจากได้ scope จาก sitemap ที่สรุปกับทีมแล้วคร่าว ๆ ก็ได้ทำการร่าง wireframe และวาง layout ต่าง ๆ เพื่อคิดข้อความหรือเนื้อหาที่จะนำมาแสดงในหน้าเว็บ รวมถึงภาพประกอบต่าง ๆ ในเว็บไซต์
ภาพตัวอย่าง wireframe ที่ได้จัดทำ
ก่อนเริ่มทำ UI ได้ทำการ setup design system ก่อนเช่น ฟอนต์ สี component ต่าง ๆ เพื่อให้ง่ายหากมีการปรับเปลี่ยนภายหลัง โดยได้อ้างอิง CI ของแอปพลิเคชันเป็นหลักค่ะ
หลังจาก Setup Project เสร็จก็ได้เริ่มขั้นตอนในการทำภาพประกอบและใส่เนื้อหาที่คล้องจองกัน เนื่องจากโจทย์หลักที่ได้มาคือ อยากให้เห็นหน้าแอปพลิเคชันชัดๆ และต้องให้ความรู้สึกสบายตาไม่ใส่ข้อมูลจดแน่นเกินไปจึงได้รูปแบบนี้ออกมาค่ะ
โดยการออกแบบจะใช้ auto layout รวมถึง Grid ในการออกแบบเพื่อง่ายต่อการปรับ responsive ในขึ้นตอนถัดไป รวมถึงการแสดงผลที่ balance ขึ้นค่ะ
ตัวอย่างการใช้ Grid ในโปรเจ็กต์
หลังจากที่ได้เวอร์ชันหน้าจอ Desktop เรียบร้อยแล้ว ก็ได้นำหน้าจอทั้งหมดมาปรับเป็นทั้ง size ของ Teblet และ Mobile
ตัวอย่างงานในการออกแบบ Responsive
ในขั้นตอนนี้ได้ทำ prototype เพื่อให้ dev ได้เห็นถึง interaction ของเว็บไซต์ ซึ่งในช่วงแรกจะถามถึงเครื่องมือที่ dev จะใช้ทำเว็บค่ะ เพราะต้องคำนึงถึงข้อจำกัดทาง technical ก่อน
โดยในระหว่างที่ทำจะมีปรึกษากับ dev ว่าสิ่งที่เราออกแบบสามารถเป็นไปได้ไหม เพื่อที่จะกลับมาแก้ไขให้น้อยที่สุด ทั้งนี้สามารถดู prototype ที่ section preview ด้านล่างนะคะ
การออกแบบเว็บไซต์ครั้งนี้ไม่เพียงแต่ช่วยพัฒนาทักษะด้านการทำกราฟิกดีไซน์ แต่ยังเปิดโอกาสให้เราได้ใช้ความคิดสร้างสรรค์อย่างเต็มที่ เพื่อสร้างสรรค์ผลงานที่ไม่เพียงแค่น่าสนใจ แต่ยังต้องตั้งใจและใส่ใจในทุกรายละเอียด
อีกทั้งยังได้เสริมทักษะการเขียนให้ดียิ่งขึ้น เพื่อถ่ายทอดความคิดผ่านถ้อยคำเพื่อให้ผู้ใช้อ่านแล้วเข้าใจสิ่งที่เราต้องการจะสื่อสาร
