เราได้ปรับปรุงเว็บไซต์ของบริษัทเมื่อเร็ว ๆ นี้ บทความนี้จะแสดงรายละเอียดเกี่ยวกับเครื่องมือและวิธีการที่เราใช้ในการปรับปรุงเว็บไซต์ของเรา
หากคุณเป็นผู้ใช้ Logto คุณอาจสังเกตว่าเว็บไซต์ของบริษัทเราได้รับการปรับปรุงใหม่เมื่อเร็ว ๆ นี้ ถ้าคุณยังไม่เป็น ลองเข้าไปดูเว็บไซต์ที่ logto.io และลองทายดูว่าเราทุ่มทรัพยากรมากมายแค่ไหนในการทำให้สิ่งนี้เกิดขึ้น
คุณอาจจะคิดว่า พวกคุณกำลังจะโฆษณาตัวเองว่าใช้แรงงานมากเพียงใด ความพยายาม และการออกแบบอย่างพิถีพิถันเพียงเพื่อแสดงให้เห็นถึงความยอดเยี่ยมในการดำเนินการ?
ไม่!
ในทางกลับกัน เราต้องการแสดงให้เห็นว่าเราประยุกต์ใช้เครื่องมือและวิธีการอย่างชาญฉลาดเพียงใดในการปรับปรุงคุณภาพผลิตภัณฑ์ของเราและส่งมอบผลิตภัณฑ์และบริการที่ดีที่สุดให้กับผู้ใช้ของเรา
เราได้รับข้อเสนอแนะในเชิงบวกจากชุมชนของเราและกำลังสงสัยว่าพวกเราทำได้อย่างไร การอัปเดตรอบนี้แตกต่างเนื่องจากเราได้คิดค้นกระบวนการทำงานใหม่ในสภาพแวดล้อมที่เคลื่อนไหวอย่างรวดเร็วโดยสิ้นเชิง เราขอแนะนำแนวปฏิบัติที่ดีที่สุดของเราและพิจารณาให้ลึกซึ้งยิ่งขึ้นเกี่ยวกับ teamwork และวัฒนธรรมการทำงานร่วมกันของเรา
เราคือทีมเทคโนโลยีที่มุ่งเน้นการให้บริการพัฒนาที่เกี่ยวข้องกับตัวตนของลูกค้าที่หลากหลายและงานโครงสร้างพื้นฐาน แรงกดดันในการส่งมอบมีอย่างมาก ในขณะเดียวกันเราต้องสนับสนุนงานด้านการเล่าเรื่องและการปฏิบัติการต่าง ๆ เช่น การสร้างเว็บไซต์การตลาดที่มีแบรนด์ การเขียนบล็อก การโปรโมตโครงการของเรา และการมีส่วนร่วมกับผู้ใช้ของเรา
เว็บไซต์ landing ที่ดึงดูดใจมีความสำคัญมาก เนื่องจากมักจะสร้างความประทับใจแรกให้กับกลุ่มเป้าหมายของคุณเกี่ยวกับผลิตภัณฑ์ของคุณ ช่วยให้พวกเขาเข้าใจปัญหาที่ผลิตภัณฑ์ของคุณต้องการแก้ไขรวมถึงการกำหนดราคาและลูกค้าที่เด่น ๆ เพื่อเป็นหลักฐานทางสังคม
นอกจากนี้ มันสามารถตอบสนองวัตถุประสงค์ทางธุรกิจหลายประการ:
ในงานก่อนหน้านี้ของฉัน ฉันเคยมีส่วนร่วมในโครงการเว็บไซต์ มาดูกันว่ากระบวนการทำงานทั่วไปนั้นรวมถึงอะไรบ้าง:
กระบวนการนี้น่าเบื่อและเกี่ยวข้องกับผู้คนและผู้มีส่วนได้ส่วนเสียจำนวนมาก ทำให้ไม่เหมาะกับสภาพแวดล้อมที่เคลื่อนไหวอย่างรวดเร็ว
แม้ว่าเราจะมีเพียงสองคนในการดูแลนี้ คือ นักออกแบบผลิตภัณฑ์และวิศวกร แต่ก็ยังมีงานในการบริหารประสิทธิภาพเว็บไซต์ อัปโหลดรูปภาพ ทำให้การออกแบบ responsive จัดการรูปแบบรูปภาพ และอัปเดตเนื้อหาที่ต้องใช้การสื่อสารไป ๆ มา ๆ มาก
กระบวนการทำงานนี้ไม่มีประสิทธิภาพ ฉันคิดอยู่ตลอดเกี่ยวกับวิธีการที่จะปลดปล่อยทรัพยากรวิศวกรรมเพื่อให้พวกเขามุ่งมั่นในงานผลิตภัณฑ์หลักในขณะที่ฉันจัดการกับส่วนที่เหลือ
การใช้เครื่องมือเพื่อเพิ่มประสิทธิภาพเป็นหลักการสำคัญของทีมเรา ดังนั้น ฉันได้เริ่มค้นคว้าเครื่องมือที่สามารถช่วยในการปรับกระบวนการเหล่านี้ให้ราบรื่น
ในการพัฒนาเว็บไซต์การตลาด SaaS ที่ประสบความสำเร็จ ให้เราวิเคราะห์องค์ประกอบสำคัญที่จำเป็น:
หลังจากทำการวิจัย ฉันวางแผนที่จะใช้ toolkit ต่อไปนี้สำหรับแง่มุมการออกแบบ:
ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper หรือแอปพลิเคชัน AI คล้าย ๆ สำหรับการเป็นผู้ร่วมผลิต.
นี่คือการปรับแต่งและเพิ่มประสิทธิภาพเนื้อหาและข้อความการตลาดของฉัน สิ่งสำคัญคือต้องชัดเจนเกี่ยวกับเป้าหมายและความตั้งใจที่อยู่เบื้องหลัง AI เป็นเพียงผู้ร่วมผลิตไม่ใช่ผู้ตัดสินใจ ก่อนที่ฉันจะเขียนข้อความการตลาดใด ๆ ฉันจะถามตัวเองด้วยคำถามไม่กี่ข้อ:
จากนั้นฉันจะเขียนร่างเบื้องต้นของประเด็นที่ต้องการสื่อสาร
บางครั้ง AI อาจแนะนำคำที่ดูเหมือนจะเก่าแก่หรือบิดเบือนเรื่องราวของคุณให้รู้สึกถูกต้องตามหลักการ แต่เราต้องเน้นย้ำเจตนาของคุณและยึดติดกับเป้าหมายของคุณ คุณต้องกำหนดมาตรฐานเพื่อให้มั่นใจว่าคำที่ส่งมอบถึงกลุ่มเป้าหมายมีความชัดเจน ตรงไปตรงมา กระชับ และโปร่งใส สิ่งนี้สำคัญเป็นพิเศษในโดเมนผลิตภัณฑ์ของเรา ซึ่งให้บริการธุรกิจและนักพัฒนาจำนวนมาก
Figma, Framer สำหรับการออกแบบอินเทอร์แอคชั่นและภาพ เคลื่อนไหว และการสร้างต้นแบบ
ฉันมีพื้นฐานทางการออกแบบ โดยเน้นไปที่การออกแบบผลิตภัณฑ์ ซึ่งเกี่ยวข้องกับการสร้าง UI และ UX ขณะที่ออกแบบ UI ที่มีทีมเป็นเลิศไม่เป็นปัญหาสำหรับฉัน งานของฉันอาจไม่ลงตัวอย่างมืออาชีพ แต่ด้วยทักษะการออกแบบพื้นฐานและการเลือกเครื่องมือที่เหมาะสม คุณสามารถเพิ่มคุณภาพงานของคุณ ฉันใช้ Framer และ Figma ในกระบวนการสร้างสรรค์นี้
นี่คือการออกแบบเก่าของเรา สร้างโดย Figma ทั้งหมด
การออกแบบดั้งเดิมของเราถูกสร้างขึ้นใน Figma ฉันใช้ปลั๊กอิน Framer อย่างเป็นทางการ "Framer to HTML" เพื่อคัดลอกและวางการออกแบบพื้นฐานลงใน Framer ซึ่งเป็นจุดเริ่มต้นที่ดี
ขั้นตอนถัดไปคือการออกแบบ เมื่อคุณเคยใช้ Figma มาก่อน การเปลี่ยนไปที่ Framer เป็นกระบวนการที่ราบรื่นเนื่องจากประสบการณ์การใช้งานผู้ใช้โดยรวมค่อนข้างคล้ายกัน ฉันจะบอกเล่าถึงการโต้ตอบที่น่าสนใจที่ช่วยเพิ่มประสิทธิภาพอย่างมาก
ผู้ใช้ Figma ชื่นชม auto-layout เพราะมันประหยัดเวลามากในการจัดวางและวางองค์ประกอบ อย่างไรก็ตาม ฟังก์ชันการจัดวางใน Framer ยังฉลาดขึ้นซึ่งสอดคล้องกับแนวคิดของ front-end มากกว่า ใน Framer คุณสามารถเลือกว่าจะใช้ตารางหรือการวางแบบซ้อนกัน กำหนดคอลัมน์ กำหนดความกว้างสูงสุด และ Framer จะจัดเรียงในแถวใหม่โดยอัตโนมัติหากจำเป็น ฟังก์ชันนี้เสริมกระบวนการออกแบบโดยสะท้อนถึงพฤติกรรมขององค์ประกอบในสภาพแวดล้อมเว็บที่ใช้งานจริง
ด้วยการตั้งค่า breakpoints และการตั้งค่าความกว้างอย่างชาญฉลาด (เช่น fill, fixed, relative และ fit to content) และกำหนด canvas ที่แตกต่างกัน คุณสามารถบรรลุการออกแบบ responsive ได้อย่างหลากหลายและแม่นยำ วิธีการนี้ช่วยให้คุณสามารถปรับการจัดวางให้เหมาะสมกับขนาดหน้าจอและอุปกรณ์ต่าง ๆ ได้อย่างมีประสิทธิภาพ
Framer เสนอการแอนิเมชันสำเร็จรูปหลากหลายรูปแบบ รวมถึงการแอนิเมชัน ticker ที่เราใช้เป็นประจำในเว็บไซต์ของเราเพื่อแสดงผลงานของเรา คุณสามารถตั้งค่าคอมโพเนนต์และฝังลงในวิดเจ็ตนี้ได้ มันช่วยให้คุณกำหนดค่าต่าง ๆ เช่น ความเร็ว ทิศทาง พื้นที่คั่น และอีกมากมาย ให้คุณมีความยืดหยุ่นและการควบคุมเกี่ยวกับพฤติกรรมการแอนิเมชันในเว็บไซต์ของคุณ
อีกคุณลักษณะที่มีประโยชน์ใน Framer คือความสามารถในการปรับแต่งการแอนิเมชันการเลื่อน ตัวอย่างเช่น คุณสามารถระบุว่ารายการจะปรากฏอย่างไรเมื่อลงในมุมมองขณะเลื่อน การตั้งค่าการแอนิเมชันการเลื่อนของคุณช่วยให้คุณควบคุมเวลาและสไตล์ในการแสดงองค์ประกอบได้ เพิ่มความประทับใจในผู้ใช้และการมีส่วนร่วมกับเนื้อหาของคุณ
หนึ่งในความต้องการหลักของฉันคือความสามารถในการ:
ในการทำงานก่อนหน้านี้ของฉัน ทุกครั้งที่ฉันต้องการอัปเดตเนื้อหา ฉันต้องขอให้วิศวกรทำหรือส่งคำร้อง pull request เอง ทีมวิศวกรของเราปฏิบัติตามกระบวนการที่เข้มงวดเพื่อให้มั่นใจในคุณภาพของโค้ด ซึ่งอาจใช้เวลานานและจำกัดความสามารถของฉันในการเปลี่ยนแปลงอย่างรวดเร็ว
Framer ได้แก้ปัญหานี้ให้ฉัน ตอนนี้ ทุกครั้งที่ฉันทำการเปลี่ยนแปลงและคลิกเผยแพร่ สิ่งนั้นจะสะท้อนผลตามจริงในผลิตภัณฑ์ ความสามารถนี้ได้ทำให้กระบวนการง่ายขึ้นอย่างมาก ช่วยให้มีการอัปเดตอย่างรวดเร็วและมีความอิสระมากขึ้นในการจัดการเนื้อหา
เนื่องจากมันถูกโฮสต์โดย Framer ดังนั้นไม่จำเป็นต้องมีการพัฒนาใด ๆ หรือการทำงานในเชิงเทคนิคของเรา วิศวกรของเราเพียงแค่ต้องใช้เวลาเพียง 10 นาทีในการบูรณาการมันกับส่วนที่เหลือของเว็บไซต์ของเรา
เว็บไซต์ปัจจุบันของเรามีประมาณ 20-30 หน้า บางส่วนพัฒนาด้วย Framer ขณะที่บางส่วนสร้างขึ้นโดยวิธีการพัฒนาซอฟต์แวร์แบบดั้งเดิม เรากำลังอยู่ในระหว่างการเลือกเครื่องมือที่ดีที่สุดในการดูแลหน้าเว็บไซต์ของเรา ตัวอย่างเช่น สำหรับเอกสารประกอบของนักพัฒนา ซึ่งท้าทายในการจัดการด้วย Framer การใช้กรอบเอกสารที่เป็นมิตรกับนักพัฒนาเพื่อโฮสต์เนื้อหาของคุณคือทางเลือกที่เหมาะสมที่สุด ในอนาคตเราจะประเมินความต้องการของเราและตัดสินใจว่าจะดำเนินการโฮสต์เองหรือย้ายไปใช้ Framer อย่างสมบูรณ์
เราทำการเปลี่ยนแปลงกระบวนการทำงานของเราโดยสิ้นเชิง ทำให้การผลิตเว็บไซต์การตลาดไร้ต้องการอย่างมา ความน่าเชื่อถือ ง่ายต่อการดูแลและประสิทธิภาพที่สุด
ฉันเขียนบล็อกนี้เพื่อแบ่งปันแนวปฏิบัติที่ดีที่สุด หากคุณมีประสบการณ์กับ Framer และการออกแบบเว็บไซต์ที่สวยงาม ฉันยินดีที่จะฟังเรื่องราวของคุณ มาพูดคุยและเรียนรู้จากกันและกัน
ตอนนี้ ได้เวลาเข้าไปดูผลิตภัณฑ์ของเราแล้ว! เยี่ยมชมเราที่ logto.io.