การออกแบบปรมาณู: ระเบิดสิ่งที่คุณคิดว่าคุณรู้เกี่ยวกับการออกแบบเว็บ

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

ระบบการออกแบบ

นักออกแบบไม่เพียงแค่สร้างหน้าเว็บอีกต่อไป พวกเขาสร้างระบบการออกแบบ ระบบการออกแบบประกอบด้วย:

• สี
• กริด
• พื้นผิว
• วิชาการพิมพ์
• เป็นต้น

ฉันชอบที่ Jack Strachan ที่ UX Planet อธิบายระบบการออกแบบ: "โดยย่อ ระบบการออกแบบคือชุดของส่วนประกอบที่นำกลับมาใช้ใหม่ได้ ซึ่งได้รับคำแนะนำจากมาตรฐานที่ชัดเจน ซึ่งสามารถประกอบเข้าด้วยกันเพื่อสร้างแอปพลิเคชันจำนวนเท่าใดก็ได้ ระบบการออกแบบเป็นวิธีการแปลประสบการณ์ที่สอดคล้องกันและภาษาที่มองเห็นได้ทั่วทั้งผลิตภัณฑ์เมื่อทำงานบนจุดสัมผัสต่างๆ”

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

กำเนิดของการออกแบบปรมาณู

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

เขาอธิบายต่อไปว่าอินเทอร์เฟซประกอบด้วยส่วนประกอบที่สามารถจัดประเภทเป็นส่วนประกอบได้ นี่คือลำดับจากน้อยไปมาก:

• อะตอม
• โมเลกุล
• สิ่งมีชีวิต
• แม่แบบ
• หน้า

ที่มา: BradFrost.com

หน่วยการสร้างของการออกแบบปรมาณู

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

1. อะตอม

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

2. โมเลกุล

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

3. สิ่งมีชีวิต

เมื่อคุณจัดกลุ่มโมเลกุลเข้าด้วยกัน คุณจะได้สิ่งมีชีวิตซึ่งซับซ้อนกว่ารุ่นก่อน: โลโก้ + การนำทาง + แบบฟอร์มการค้นหา + ไอคอนโซเชียลมีเดีย (โมเลกุล) = โฆษณาด้านบนที่เสร็จสมบูรณ์ (สิ่งมีชีวิต)

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

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

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

4. เทมเพลต

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

ที่มา: BradFrost.com

5. หน้า

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

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

ความคิดสุดท้าย

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

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

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

ติดตามโมเมนตัมการออกแบบเว็บนั้น ๆ และดูกฎ 10 ข้อของการออกแบบ UI ที่ดีเพื่อปฏิบัติตามในทุกโครงการออกแบบเว็บ

ภาพเด่นผ่าน ShadeDesign / shutterstock.com