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

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

ให้ทีมของคุณติดตามและโค้ดของคุณ DRY

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

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

สิ่งที่ควรไปในคู่มือสไตล์เว็บ?

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

จานสี

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

วิชาการพิมพ์และลำดับชั้น

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

คู่มือสไตล์ควรมีลำดับชั้นของส่วนหัวที่แนะนำด้วย ซึ่งคือ h1, h2, h3 และอื่นๆ? คำที่สื่อความหมาย เช่น ส่วนหัวหลัก หัวข้อย่อย และส่วนหัวของวิดเจ็ตแถบด้านข้างยังช่วยคาดเดาในอนาคตได้อีกด้วย

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

รูปภาพ

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

ลิงก์ การนำทาง และรูปแบบฟอร์ม

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

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

โดยเฉพาะอย่างยิ่ง นี่คือองค์ประกอบหลักบางประการที่จะรวมไว้สำหรับรูปแบบแบบฟอร์ม:

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

แนวคิดเพิ่มเติมที่จะรวมไว้ในคู่มือสไตล์ของคุณ

เป็นการยากที่จะระบุทุกองค์ประกอบที่คุณอาจพบ แต่ต่อไปนี้คือองค์ประกอบอื่นๆ ที่คุณอาจพบว่ามีประโยชน์:

• กล่องโทรออก
• ลิงค์แนวนอน
• องค์ประกอบความคิดเห็น
• แท็กหมวดหมู่
• รุ่นป๊อปอัพ

วิธีทำคู่มือสไตล์เว็บของคุณเอง

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

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

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

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

เชื่อฉัน. นี่เป็นเวลาที่ใช้ไปอย่างดี ก็ยังดีที่จะถูกเตือนว่าไม่มีอะไรถาวรและทุกอย่างสามารถปรับเปลี่ยนและขยายได้อย่างง่ายดาย

หากคุณต้องการความเร็วและการป้อนสไตล์ทั้งหมดด้วยตนเองไม่เหมาะกับคุณ มีเครื่องมือดีๆ ที่ช่วยให้คุณสร้างและใช้รูปแบบที่นำกลับมาใช้ใหม่ได้ง่าย

ตัวอย่างเช่น Pattern Primer ของ Jeremy Keith จะสร้างรายการรูปแบบทั้งหมดในโฟลเดอร์ นี่เป็นเครื่องมือ PHP อย่างง่ายสำหรับการเปลี่ยนข้อมูลโค้ดเป็นไลบรารีรูปแบบ คุณจะเห็นรูปแบบที่แสดงเป็น HTML

อีกตัวเลือกที่ยอดเยี่ยมคือ KSS ของ Kyle Neath ซึ่งเป็นเครื่องมือที่ยอดเยี่ยมสำหรับเอกสารคู่มือสไตล์ สไตล์อัตโนมัติที่สร้างขึ้นเหล่านี้เป็นชุดของหลักเกณฑ์ที่จะช่วยคุณสร้างคู่มือสไตล์ HTML ที่เชื่อมโยงกับเอกสาร CSS KSS ได้รับการออกแบบมาให้ทำงานได้ดีกับตัวประมวลผลล่วงหน้า CSS และรองรับเฟรมเวิร์ก CSS จำนวนมาก

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

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

ตัวอย่างสไตล์ไกด์

ต้องการตัวอย่างชีวิตจริงของไกด์สไตล์ที่ยอดเยี่ยมหรือไม่? คุณได้รับ:

รหัสสำหรับอเมริกา
Mailchimp
Salesforce

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