การออกแบบและพัฒนาเว็บไซต์การตลาดของบริษัทของเรา: การเดินทางจากเนื้อหาถึงการพัฒนา

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

คุณอาจจะคิดว่า พวกคุณกำลังจะโฆษณาตัวเองว่าใช้แรงงานมากเพียงใด ความพยายาม และการออกแบบอย่างพิถีพิถันเพียงเพื่อแสดงให้เห็นถึงความยอดเยี่ยมในการดำเนินการ?

ไม่!

ในทางกลับกัน เราต้องการแสดงให้เห็นว่าเราประยุกต์ใช้เครื่องมือและวิธีการอย่างชาญฉลาดเพียงใดในการปรับปรุงคุณภาพผลิตภัณฑ์ของเราและส่งมอบผลิตภัณฑ์และบริการที่ดีที่สุดให้กับผู้ใช้ของเรา

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

พื้นหลัง#

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

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

นอกจากนี้ มันสามารถตอบสนองวัตถุประสงค์ทางธุรกิจหลายประการ:

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

ในงานก่อนหน้านี้ของฉัน ฉันเคยมีส่วนร่วมในโครงการเว็บไซต์ มาดูกันว่ากระบวนการทำงานทั่วไปนั้นรวมถึงอะไรบ้าง:

1. ก่อนอื่น ผู้จัดการด้านการตลาดผลิตภัณฑ์และผู้จัดการผลิตภัณฑ์จะกำหนดเนื้อหาและข้อกำหนด
2. นักออกแบบผลิตภัณฑ์และนักเขียน UX แก้ไขเนื้อหา
3. เราย้ายงานที่กำลังดำเนินการ มักจะเป็นเวอร์ชันที่ยังไม่ละเอียด ให้กับนักออกแบบภาพและแบรนด์สำหรับการสัมผัสครั้งสุดท้ายก่อนการผลิต
4. จากนั้นวิศวกรและผู้จัดการผลิตภัณฑ์จะเริ่มการพัฒนา โดยเน้นการออกแบบเว็บที่มีแอนิเมชันและ responsive

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

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

กระบวนการทำงานนี้ไม่มีประสิทธิภาพ ฉันคิดอยู่ตลอดเกี่ยวกับวิธีการที่จะปลดปล่อยทรัพยากรวิศวกรรมเพื่อให้พวกเขามุ่งมั่นในงานผลิตภัณฑ์หลักในขณะที่ฉันจัดการกับส่วนที่เหลือ

การใช้เครื่องมือเพื่อเพิ่มประสิทธิภาพเป็นหลักการสำคัญของทีมเรา ดังนั้น ฉันได้เริ่มค้นคว้าเครื่องมือที่สามารถช่วยในการปรับกระบวนการเหล่านี้ให้ราบรื่น

แยกย่อยความต้องการ#

ในการพัฒนาเว็บไซต์การตลาด SaaS ที่ประสบความสำเร็จ ให้เราวิเคราะห์องค์ประกอบสำคัญที่จำเป็น:

1. เนื้อหา: รากฐานของทุกเว็บไซต์การตลาดคือการรู้ว่าแสดงอะไร นี่ต้องการความเข้าใจอย่างลึกซึ้งเกี่ยวกับกลุ่มเป้าหมายของคุณ กรณีการใช้งานทั่วไปของพวกเขา และข้อเสนอคุณค่าของผลิตภัณฑ์ของคุณ ไม่มีเครื่องมือใดสามารถแทนที่ความเข้าใจนี้ได้ โชคดีที่การมีส่วนร่วมในการออกแบบผลิตภัณฑ์และกลยุทธ์ทางการตลาดทำให้ฉันมีความพร้อมที่จะสร้างเนื้อหาที่ตอบสนองความต้องการของผู้ใช้
2. การออกแบบ: เว็บไซต์ควรมีภาพลักษณ์ที่สวยงาม ฉันมีพื้นฐานในด้านการออกแบบ UX/ผลิตภัณฑ์ แม้ว่าจะไม่ครอบคลุมเท่ากับนักออกแบบสร้างสรรค์เต็มเวลา แต่ก็ทำให้ฉันมีทักษะเพียงพอในการจัดการด้านนี้
3. วิศวกรรม: ข้อพิจารณาทางเทคนิคสำคัญได้แก่ การโฮสต์เว็บไซต์ ทำให้การออกแบบ responsive และเปิดใช้งาน micro-interactions ที่ราบรื่น จำเป็นต้องบูรณาการเว็บไซต์เข้ากับส่วนประกอบอื่น ๆ อย่างราบรื่น เช่น การเปลี่ยนเส้นทางลิงก์และหน้าการยืนยันตัวตนของผลิตภัณฑ์

หลังจากทำการวิจัย ฉันวางแผนที่จะใช้ toolkit ต่อไปนี้สำหรับแง่มุมการออกแบบ:

เนื้อหาและการตลาดผลิตภัณฑ์#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper หรือแอปพลิเคชัน AI คล้าย ๆ สำหรับการเป็นผู้ร่วมผลิต.

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

1. ใครจะอ่านข้อความนี้?
2. พวกเขาต้องการบริบทเพิ่มเติมหรือไม่?
3. จุดสำคัญที่คุณต้องการสื่อสารในข้อความคืออะไร?
4. คุณคาดหวังให้ผู้ใช้ดำเนินการอย่างไรเป็นขั้นตอนถัดไป?
5. ข้อความนี้มีวัตถุประสงค์เพื่อให้ความรู้หรือสนับสนุนการกระทำที่เฉพาะเจาะจงหรือไม่?
6. ข้อความนี้มีแนวโน้มที่จะก่อให้เข้าใจผิดหรือเกินจริงหรือไม่?

จากนั้นฉันจะเขียนร่างเบื้องต้นของประเด็นที่ต้องการสื่อสาร

บางครั้ง 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 สำหรับ responsive design#

ด้วยการตั้งค่า breakpoints และการตั้งค่าความกว้างอย่างชาญฉลาด (เช่น fill, fixed, relative และ fit to content) และกำหนด canvas ที่แตกต่างกัน คุณสามารถบรรลุการออกแบบ responsive ได้อย่างหลากหลายและแม่นยำ วิธีการนี้ช่วยให้คุณสามารถปรับการจัดวางให้เหมาะสมกับขนาดหน้าจอและอุปกรณ์ต่าง ๆ ได้อย่างมีประสิทธิภาพ

การแอนิเมชัน#

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

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

เผยแพร่อย่างรวดเร็ว#

หนึ่งในความต้องการหลักของฉันคือความสามารถในการ:

1. ออกแบบ landing pages จำนวนมากอย่างรวดเร็ว สำหรับการเพิ่มประสิทธิภาพ SEO และแคมเปญการตลาด ความเร็วเป็นสิ่งจำเป็น
2. อัปเดตเนื้อหาได้บ่อยครั้งตามต้องการ หน้า landing ของผลิตภัณฑ์ของคุณควรแสดงถึงการพัฒนาล่าสุดและตำแหน่งของผลิตภัณฑ์ของคุณในปัจจุบัน เนื้อหาที่ล้าสมัยหมายถึงการพลาดโอกาสทางการตลาดและไม่ทันต่อความต้องการของลูกค้า

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

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

วิศวกรรม#

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

เว็บไซต์ปัจจุบันของเรามีประมาณ 20-30 หน้า บางส่วนพัฒนาด้วย Framer ขณะที่บางส่วนสร้างขึ้นโดยวิธีการพัฒนาซอฟต์แวร์แบบดั้งเดิม เรากำลังอยู่ในระหว่างการเลือกเครื่องมือที่ดีที่สุดในการดูแลหน้าเว็บไซต์ของเรา ตัวอย่างเช่น สำหรับเอกสารประกอบของนักพัฒนา ซึ่งท้าทายในการจัดการด้วย Framer การใช้กรอบเอกสารที่เป็นมิตรกับนักพัฒนาเพื่อโฮสต์เนื้อหาของคุณคือทางเลือกที่เหมาะสมที่สุด ในอนาคตเราจะประเมินความต้องการของเราและตัดสินใจว่าจะดำเนินการโฮสต์เองหรือย้ายไปใช้ Framer อย่างสมบูรณ์

มันเปลี่ยนกระบวนการทำงานของเราอย่างไร#

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

ฉันเขียนบล็อกนี้เพื่อแบ่งปันแนวปฏิบัติที่ดีที่สุด หากคุณมีประสบการณ์กับ Framer และการออกแบบเว็บไซต์ที่สวยงาม ฉันยินดีที่จะฟังเรื่องราวของคุณ มาพูดคุยและเรียนรู้จากกันและกัน

ตอนนี้ ได้เวลาเข้าไปดูผลิตภัณฑ์ของเราแล้ว! เยี่ยมชมเราที่ logto.io.