การออกแบบอะตอมเบื้องต้นสำหรับนักออกแบบเว็บไซต์

อะตอมไม่ได้เป็นเพียงองค์ประกอบ HTML เท่านั้น ยังเป็นสไตล์ของพวกเขา: แบบอักษรสีขนาดและกฎสไตล์ CSS อื่น ๆ ด้วยคำพูดของแบรดอะตอม “สาธิตสไตล์พื้นฐานทั้งหมดของคุณได้อย่างรวดเร็ว”.

อะตอม - ตัวอย่าง

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

โปรดทราบว่า Hongkiat.com ไม่ได้ออกแบบมาโดยคำนึงถึงการออกแบบปรมาณูในที่นี้จะใช้งานได้เท่านั้น เพื่อการสาธิต.

สาระสำคัญของการออกแบบอะตอมคือ ออกแบบ UI จากล่างขึ้นบนโดยใช้ห้าขั้นตอนเหล่านี้, ไม่ต้องระบุองค์ประกอบการออกแบบอะตอมในภายหลัง.

2. โมเลกุล

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

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

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

โมเลกุล - ตัวอย่าง

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

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

สิ่งมีชีวิตประกอบด้วย กลุ่มโมเลกุลอะตอม (และบางเวลา สิ่งมีชีวิตอื่น ๆ ). ในการออกแบบเว็บสิ่งมีชีวิตคือ ส่วนประกอบ UI ที่ซับซ้อนมากขึ้น ที่เป็นตัวแทนของ ส่วนที่ชัดเจน ของหน้าเช่นส่วนหัวท้ายกระดาษหรือแถบข้าง.

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

สิ่งมีชีวิต - ตัวอย่าง

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

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

4. เทมเพลต

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

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

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

เทมเพลต - ตัวอย่าง

ตัวอย่างเช่นคิดเกี่ยวกับ แม่แบบหน้าแรก ด้วยรูปภาพตัวแทนและบล็อกข้อความ lorem ipsum.

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

5. หน้า

หน้า แสดงขั้นตอนสุดท้ายของลำดับชั้นการออกแบบอะตอม หน้าคือ “อินสแตนซ์เฉพาะของแม่แบบ”. ในระยะหน้าเทมเพลตจะได้รับ ประชากรที่มีเนื้อหาจริง (คัดลอก microcopy ภาพวิดีโอ ฯลฯ ) เช่นเดียวกับที่ปรากฏใน UI จริง.

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

รูปแบบหน้าและเทมเพลต

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

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

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

หน้า - ตัวอย่าง

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