การสร้างต้นแบบเนื้อหาเป็นอันดับแรก

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

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

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

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

อย่างไรก็ตาม ระบบง่ายๆ ที่เราคุ้นเคย นั้นสามารถให้กุญแจสำคัญในการออกแบบสำหรับพื้นที่ที่ซับซ้อนมากขึ้นได้ ตามที่นักทฤษฎีระบบ John Gall กล่าวไว้ “ระบบที่ซับซ้อนที่ใช้งานได้มักจะพบว่ามีวิวัฒนาการมาจากระบบธรรมดาที่ใช้งานได้จริง” ในด้านการออกแบบดิจิทัล หากเรามั่นใจว่าระบบไดนามิกที่ง่ายที่สุดของงานด้านเนื้อหา โครงสร้าง และการสร้างความหมายตามที่ตั้งใจไว้ในระดับพื้นฐาน เราก็สามารถวางรากฐานสำหรับระบบที่ใหญ่และซับซ้อนกว่าซึ่งทำงานตามที่ตั้งใจไว้ได้เช่นกัน

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

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

โมเดลกล่องขาวสำหรับเนื้อหา

เครื่องมือหนึ่งที่นักวิจัยระบบใช้เพื่อทำความเข้าใจพฤติกรรมของระบบไดนามิกเรียกว่าแบบจำลอง "กล่องขาว" นักวิชาการด้านระบบ Gerald Weinberg เขียนว่า ในขณะที่พฤติกรรมของแบบจำลองกล่องดำนั้น “ถูกซ่อนไว้อย่างสมบูรณ์” พฤติกรรมของแบบจำลองกล่องขาวนั้น “ถูกเปิดเผยอย่างสมบูรณ์” สำหรับระบบที่ซับซ้อน ความโปร่งใสนี้มีความสำคัญ: Weinberg ตั้งข้อสังเกตเพิ่มเติมว่า "แม้แต่ระบบที่เรียบง่ายที่สุดบางครั้งก็ยังมีเรื่องน่าประหลาดใจสำหรับผู้สร้าง" (172)

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

ในการสร้างกล่องสีขาวสำหรับเนื้อหาดิจิทัล เราต้องคำนึงถึงสามสิ่ง:

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

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

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

กรอบงานการสร้างต้นแบบที่มีเนื้อหาเป็นอันดับแรก

จากหลักการและเป้าหมายที่อธิบายไว้ข้างต้น ฉันได้รวบรวมกรอบงานเริ่มต้นสำหรับการสร้างต้นแบบประเภทนี้ ด้วยจิตวิญญาณของระบบที่คิดในตัวเอง เครื่องมือนี้อาศัยการเชื่อมต่อแบบหลวม ๆ ของระบบที่ง่ายกว่า ซึ่งแต่ละระบบสามารถทำงานหลักอย่างง่ายได้ดี

สำหรับเฟรมเวิร์กนี้ ฉันได้รวบรวม Excel, Jekyll, ZURB Foundation และ Browsersync และเชื่อมโยงเข้าด้วยกันด้วยสคริปต์อึก ฉันเลือกแอปพลิเคชันและเฟรมเวิร์กเฉพาะเหล่านี้เนื่องจากสามารถใช้ได้อย่างกว้างขวาง เป็นโอเพ่นซอร์ส (ส่วนใหญ่) มีชุมชนสนับสนุนที่กระตือรือร้น และมีเอกสารประกอบที่ยอดเยี่ยม

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

Excel

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

เจคิล

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

รากฐาน

ZURB Foundation ซึ่งเป็นเฟรมเวิร์กส่วนหน้าของ front-end แบบโอเพ่นซอร์สสำหรับมือถือ ใช้เพื่อระบุลำดับชั้นของข้อมูลและเพื่อจัดโครงสร้างพฤติกรรมที่ตอบสนอง กริดของ Foundation คำจำกัดความของสไตล์ และพฤติกรรมตอบสนอง ช่วยให้คุณสร้างรูปแบบเลย์เอาต์เว็บมาตรฐานใดๆ ก็ได้ เพียงแค่ใช้คลาสกับองค์ประกอบ HTML ของคุณ

เบราว์เซอร์ซิงค์

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

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

หากคุณกำลังตื่นตระหนกเพราะสิ่งนี้เกี่ยวข้องกับรหัส…

อย่าตกใจ เครื่องมือเหล่านี้เป็นมิตรกับนักออกแบบและมีชุมชนสนับสนุนที่ยอดเยี่ยม คุณไม่จำเป็นต้องเป็นนักพัฒนาส่วนหน้าเพื่อทำให้ไอเดียของคุณเป็นจริง คุณจำเป็นต้องรู้พื้นฐานของ HTML และ CSS ภาษาเหล่านี้ไม่ยาก — และการเรียนรู้ภาษาเหล่านี้จะไม่ทำลายความสามารถในการทำงานออกแบบที่ดีของคุณ ในคำพูดของตำนานการออกแบบประเภท Erik Spiekermann "คุณต้องเรียนรู้ถ้าไม่เขียนโค้ดอย่างน้อยก็เพื่อชื่นชมโค้ดเพื่อทำความเข้าใจโค้ด เพราะรหัสเป็นสิ่งที่ถั่วและสลักเกลียวเมื่อร้อยปีก่อน” วิธีที่ดีที่สุดในการเริ่มต้นคือการดำดิ่งลงไป

ตัวอย่างการสร้างต้นแบบเนื้อหาแรก: ศูนย์ชุมชนกรีนเลค

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

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

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

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

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

จับภาพเนื้อหา

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

แผ่นงาน "ไดเรกทอรี" และ "ฟีด" จะรวมอยู่ในชุดเริ่มต้นและรวมถึงหมวดหมู่ต่างๆ (คอลัมน์) สำหรับประเภทเนื้อหาที่เกี่ยวข้อง แผ่นงานแต่ละแผ่นจะส่งออกเนื้อหาไปยังโฟลเดอร์ของตนเอง (ในกรณีเหล่านี้ "แคตตาล็อก" "ไดเรกทอรี" และ "ฟีด") และไปยังไฟล์ JSON ของตัวเอง คุณสามารถเพิ่มชีตอื่นๆ ได้มากเท่าที่ต้องการ — เพียงแค่ต้องแน่ใจว่าได้อัปเดตไฟล์การกำหนดค่า Jekyll ของคุณเพื่อให้รู้ว่าต้องดึงชีตเข้ามา (ดูเอกสารปลั๊กอิน "Jekyll Data Pages Generator" สำหรับรายละเอียดทั้งหมด)

เพิ่มแพ็คเกจเนื้อหาเพิ่มเติม

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

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

เพิ่มโครงสร้างและลำดับชั้นด้วย HTML

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

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

เพิ่มตรรกะด้วยแท็กมาร์กอัปของ Jekyll

Jekyll ให้คุณเพิ่มตรรกะพื้นฐานโดยรวมแท็กพื้นฐานที่เจาะจงสำหรับระบบการสร้างเทมเพลต ที่นี่ ฉันใช้แท็ก for เพื่อวนรอบรายการคลาสของ Green Lake Community Center (ซึ่งสร้างขึ้นเมื่อฉันเพิ่มแพ็คเกจเนื้อหาหลายรายการด้านบน) และฉันแสดงแต่ละคลาสของ community center ในรายการเป็นลิงก์:

คุณยังสามารถใช้คำสั่ง if เพื่อสร้างเงื่อนไขได้ ที่นี่ ฉันใช้คำสั่ง if เพื่อซ่อนลิงก์ไปยังหน้าชั้นเรียนที่ฉันกำลังใช้อยู่:

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

เพิ่มสไตล์และพฤติกรรมตอบสนองด้วย CSS . ของมูลนิธิ

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

Foundation ยังช่วยให้การรวมลักษณะการทำงานที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นอันดับแรกเป็นเรื่องง่าย และใช้ส่วนประกอบเลย์เอาต์ คอนเทนเนอร์ และสื่อที่สร้างไว้ล่วงหน้าจำนวนมาก เนื่องจากเป็น CSS ทั้งหมด คุณจึงสามารถปรับเปลี่ยนและปรับแต่งทุกอย่างตามรสนิยมของคุณได้ สำหรับตัวอย่างเหล่านี้ ฉันได้แก้ไขจานสีพื้นฐานของ Foundation เป็นสไตล์ "monochrome wireframe" แต่คุณสามารถปรับ Foundation ให้เข้ากับสไตล์ใดก็ได้ที่คุณต้องการ เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Foundation โดยเรียกดูเอกสารประกอบหรือบทช่วยสอน หรือโดยการเข้าชั้นเรียน (แน่นอนว่าชั้นเรียนนั้นยอดเยี่ยมมาก)

รับคำติชมแต่เนิ่นๆ และแก้ไขตามที่คุณไป

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

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

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

ความยืดหยุ่นนี้ทำให้คุณสามารถทดสอบลำดับชั้นของหน้าจอต่างๆ และการดูแลเนื้อหากับผู้ใช้ได้อย่างง่ายดาย และช่วยให้คุณใช้เนื้อหาจริงในการทดสอบเหล่านั้น เนื้อหาที่ผู้ชมของคุณสามารถสัมผัส (และโต้ตอบ) ได้โดยตรง เนื่องจากรูปแบบสุดท้ายของต้นแบบคือ HTML, CSS และ JavaScript คุณจึงสามารถรวบรวมความคิดเห็นของผู้ใช้ด้วยเครื่องมือทดสอบใดก็ได้ที่คุณสะดวกที่สุด (ฉันชอบ UserTesting และ Lookback)

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

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

จุดแข็งของวิธีนี้คือการช่วยให้คุณปรับเปลี่ยนระบบที่สร้างหมวดหมู่ ป้ายกำกับ และเส้นทางการนำทางได้อย่างรวดเร็ว สิ่งนี้ให้ข้อได้เปรียบที่ชัดเจนเหนือการสร้างแบบจำลองเนื้อหาแบบคงที่ หากคุณพบว่าคุณใช้ CSS พิเศษจำนวนมากเพื่อให้เนื้อหาแบบไดนามิกทำงานตามที่คุณต้องการ ให้กลับไปที่แหล่งที่มา คุณสามารถแบ่งเนื้อหาออกเป็นอย่างอื่นเพื่อให้ทำงานได้ดีขึ้นหรือไม่? เพิ่ม (หรือลบ) ชุดคลาสหรือแท็ก? ลองใช้รูปแบบต่างๆ จนกว่าคุณจะพบวิธีแก้ปัญหาที่เรียบง่ายและสง่างามที่ทำให้ทุกอย่างดูเหมือนเข้าที่

ระบบคิดนอกเว็บ

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

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

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

ผลงานที่อ้างถึง

• ความซับซ้อน ทัวร์แบบมีไกด์ , Melanie Mitchell (นิวยอร์ก: Oxford, 2009)
• ความรู้เบื้องต้นเกี่ยวกับการคิดเชิงระบบทั่วไป , Gerald Weinberg (นิวยอร์ก: Dorset House, 1975)