การออกแบบ Brutalist

Brutalism เป็นรูปแบบสถาปัตยกรรมที่เกิดขึ้นในช่วงกลางปี ​​​​ค.ศ. 1920 แม้ว่าจะมีการเพิ่มขึ้นเล็กน้อยในภายหลังในทศวรรษที่ 1950 และ 1960 มีลักษณะที่เรียบง่ายและจริงใจ ในรูปแบบทารุณกรรม รูปแบบตามฟังก์ชัน .

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

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

ที่มาของเว็บและวิวัฒนาการด้านกราฟิก

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

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

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

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

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

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

ความโหดร้ายบนเว็บ

คำว่า brutalism มาจากภาษาฝรั่งเศสว่า "Beton brut" หรือ "raw concrete" ดังนั้น หากเรากำลังพูดถึงการทารุณกรรมบนเว็บ ก็ชัดเจนว่าเราไม่ได้พูดถึง "คอนกรีต" แต่เป็น "ความดิบ" สถาปัตยกรรม Brutalist ต้องการที่จะเป็นจริงกับวัสดุที่ใช้เป็นองค์ประกอบหลัก และนั่นคือสิ่งที่เราในฐานะนักพัฒนาเว็บควรมุ่งมั่นเช่นกัน อย่างน้อยถ้าเราต้องการสร้างเว็บไซต์ที่โหดร้าย

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

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

หลักการออกแบบ Brutalist บนเว็บ

คุณมีหลักการพื้นฐานบางประการที่คุณควรคำนึงถึงเมื่อออกแบบเว็บไซต์ที่โหดร้าย:

1 – เนื้อหาควรใช้งานได้ทุกที่

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

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

2 – การโต้ตอบกับผู้ใช้กับเว็บถูกจำกัดและกำหนดไว้อย่างดีโดย HTML

ด้วย CSS และ JavaScript เราสามารถสร้างเว็บไซต์ที่ดูเหมือนแอพที่มาพร้อมเครื่อง โดยมีการโต้ตอบที่ก่อนหน้านี้ดูเหมือนเป็นไปไม่ได้ มีภาพเคลื่อนไหวที่โดดเด่นและการเปลี่ยนภาพที่น่าทึ่ง แต่ทั้งหมดนี้ไม่เกี่ยวอะไรกับเนื้อหาเลย… แล้วเราจะออกแบบส่วนต่อประสานที่มีประโยชน์บนเว็บไซต์ที่โหดร้ายได้อย่างไร

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

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

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

3 – มีเว็บไซต์อยู่ในเว็บเบราว์เซอร์ ดังนั้นให้ผู้ใช้ของคุณ “เรียกดู” เว็บไซต์ของคุณ

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

4 – ผู้ใช้สามารถเลื่อนเนื้อหาในแนวตั้ง

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

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

คุณคิดอย่างไร?

ฉันชอบหลักการที่โหดร้าย หากคุณไม่ใช่นักออกแบบ การนำหลักการเหล่านี้ไปใช้นั้นค่อนข้างง่าย: ปล่อยให้สิ่งต่าง ๆ เป็นไปตามค่าเริ่มต้น (หรือปรับแต่งเล็กน้อย) แต่คุณคิดอย่างไร? คุณชอบมันไหม? คุณคิดว่ามันน่าเกลียดและล้าสมัยหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

ภาพเด่นโดย berenice melis บน Unsplash