คู่มือของนักออกแบบเกี่ยวกับการทำงานกับไกด์สไตล์ & การปูกระเบื้องสไตล์

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

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

ไกด์สไตล์สำหรับเว็บ

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

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

ไม่มีวิธีที่จะทำคู่มือสไตล์ได้อย่างเดียว วิธีที่ผิดเพียงอย่างเดียวคือการสร้างทรัพยากรที่เรียบง่าย คนอื่นไม่สามารถเข้าใจได้.

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

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

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

แหล่งข้อมูลที่ฉันชอบที่สุดคือ StyleGuides.io มันครอบคลุม พื้นฐานของการแนะนำสไตล์สำหรับเว็บ, รวมไปถึง ตัวอย่างสด และ กรณีศึกษา.

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

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้โปรดดูที่โพสต์อื่น ๆ ของไกด์นำเที่ยว:

• คู่มือสไตล์ Front-end (24ways.org)
• สร้างคู่มือสไตล์เว็บไซต์ (creativebloq.com)
• วิธีการสร้างคู่มือการออกแบบเว็บไซต์ที่สมบูรณ์แบบ (dtelepathy.com)

แยกออกเป็นกระเบื้องสไตล์

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

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

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

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

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

นี่เป็นข้อความที่ยอดเยี่ยมจากเว็บไซต์ Style Tiles:

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

ให้ใช้ไทล์สไตล์เพื่อค้นหา ชุดรูปแบบทั่วไปหรือภาษาภาพ ที่จะใช้ทั่วทั้งไซต์ ซึ่งอาจรวมถึง การสร้างตราสินค้า / ตัวตน แต่อาจรวมถึง คุณสมบัติของ UI, เช่นเมนูแบบเลื่อนลงหรือปุ่ม CTA.

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

ถ้าคุณต้องการ เจาะเพิ่มเติมลงในกระเบื้องสไตล์ ตรวจสอบโพสต์ที่เกี่ยวข้องเหล่านี้.

• กระเบื้องสไตล์และวิธีการทำงาน
• กระเบื้องสไตล์: ทางเลือกในการออกแบบแบบเต็ม Comps
• การสร้างไทล์สไตล์: วิธีการง่ายๆในการออกแบบทิศทาง

ไกด์สไตล์เทียบกับกระเบื้องสไตล์

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

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

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

คุณควรใช้อันไหนดี? มันในที่สุด ขึ้นอยู่กับโครงการ.

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

อย่างไรก็ตาม โครงการขนาดใหญ่ เช่นเดียวกับการออกแบบ NY Times ใหม่จะได้ประโยชน์จากไทล์สไตล์และไกด์สไตล์.

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

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

ทำงานเป็นรายโครงการและตัดสินใจว่าอะไรดีที่สุดสำหรับแต่ละโครงการ.

ตัวอย่างสด

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

ไกด์สไตล์

คู่มือสไตล์ Airbnb อันเหลือเชื่อนี้สร้างโดย Derek Bradley มันง่ายมาก แต่มันแสดงให้เห็นอย่างชัดเจน รูปแบบหลักสีและองค์ประกอบของหน้า ที่จะพบในการออกแบบ.

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

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

ผู้ออกแบบ Cupi Wong ทำคู่มือนี้สำหรับ AfterShip ตัวอักษร, ปุ่ม, ตัวเลือกสีและองค์ประกอบของหน้าทั่วไปนั้นได้รับการออกแบบมาอย่างพิถีพิถันและ จัดเป็นส่วน ๆ.

สิ่งนี้อาจถูกย้ายไปยังเว็บและสร้างเป็นเอกสารอ้างอิงออนไลน์ที่ใหญ่กว่ามาก.

Greg Dlubacz ผู้ออกแบบ UI แบ่งปันแนวทางสไตล์ UI ของเขาสำหรับโครงการเว็บ สิ่งนี้มีขนาดใหญ่มากอย่างจริงจัง ภาพตัวอย่างแบบเต็มหน้าจอมีความสูง 21,000 พิกเซล!

หนึ่งในคำแนะนำสไตล์ดิจิตอลที่ดีที่สุดที่ฉันเคยเห็นมา สิ่งนี้สามารถนำไปยังหน้าเอกสารออนไลน์เพื่อให้สมาชิกในทีมอ้างอิงได้.

กระเบื้องสไตล์

Abdus Salam ผู้ออกแบบ UI / UX ได้สร้างไทล์สไตล์นี้สำหรับเว็บไซต์ร้านขายอาหารออร์แกนิก มันธรรมดามาก ๆ ด้วย องค์ประกอบการออกแบบแบนคุณสมบัติ UI บางอย่างเล็กน้อย, และ จานสี.

ผู้ออกแบบ Adrian Cantelmi มีรายละเอียดเกี่ยวกับกระเบื้องสไตล์การขายเงินลงทุนของเขาจริงๆ มันมีสีและตัวอักษร แต่ยังรวมถึง ภาพเวกเตอร์.

เวกเตอร์เหล่านี้ช่วยได้ กำหนดแบรนด์อารมณ์และโทนสีโดยรวม ของเว็บไซต์.

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

หากคุณรู้สึกว่าไซต์นั้นอาจมีหน้าตาเป็นอย่างไร อย่างรวดเร็ว ถ้าอย่างนั้นคุณก็ทำมันให้ถูกต้อง.

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

คำพูดสุดท้าย

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