การตัดสินใจออกแบบที่ได้รับแรงบันดาลใจจาก Giovanni Pintori: การประชาสัมพันธ์กลายเป็นรูปแบบศิลปะ

ด้วยข้อยกเว้นหนึ่งหรือสองครั้ง ฉันได้ใช้เวลายี่สิบสองปีมานี้ในการออกแบบสำหรับลูกค้านับไม่ถ้วน บางโครงการใช้เวลาหนึ่งปี บางหลายเดือน แต่ส่วนใหญ่ใช้เวลาไม่เกินสองสามสัปดาห์

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

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

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

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

— จิโอวานนี พินโตรี

ดีไซเนอร์ชาวอิตาลี Giovanni Pintori ทำงานให้กับ Olivetti ผู้ผลิตผลิตภัณฑ์เพื่อธุรกิจมานานกว่า 31 ปี ในช่วงเวลานี้ สไตล์ของเขาได้พัฒนาเป็นคำศัพท์เกี่ยวกับการออกแบบที่เป็นเอกลักษณ์ของบริษัท ความน่าดึงดูดใจในการทำงานกับบริษัทเดียวเป็นเวลานานกว่าสองสามเดือนนั้นแข็งแกร่งขึ้นเมื่อฉันอายุมากขึ้น ในช่วง 18 เดือนที่ผ่านมา ฉันใช้เวลาส่วนใหญ่ไปกับการทำงานกับบริษัทรักษาความปลอดภัยในโลกไซเบอร์ของสวิตเซอร์แลนด์ ซึ่งอยู่ไม่ไกลจากมิลานและที่ซึ่ง Giovanni Pintori เรียกว่าบ้าน

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

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

แรงบันดาลใจจาก Giovanni Pintori

เกิดในซาร์ดิเนียในปี 1912 Giovanni Pintori กลายเป็นหนึ่งในนักออกแบบกราฟิกชาวยุโรปที่มีอิทธิพลมากที่สุดในศตวรรษที่ 20 เขากลายเป็นที่รู้จักจากสไตล์ที่โดดเด่นที่เขาประดิษฐ์ขึ้นเป็นภาษาการออกแบบของ Olivetti มานานกว่า 30 ปี

Pintori ศึกษาการออกแบบที่ L'Istituto Superiore per le Industrie Artistiche อันทรงอิทธิพลของอิตาลี (สถาบันอุดมศึกษาสำหรับอุตสาหกรรมศิลปะ) ซึ่งเขารายล้อมไปด้วยศิลปะเชิงสร้างสรรค์ ISIA เป็นโรงเรียนที่มีความก้าวหน้าซึ่งนักเรียนได้ศึกษาเซรามิกส์ ภาพวาด งานโลหะ และงานไม้

ขณะศึกษาอยู่ที่ ISIA พินโตรีได้พบกับเรนาโต ซเวเตเรมิชผู้อำนวยการฝ่ายโฆษณาและนักประชาสัมพันธ์ซึ่งเป็นหัวหน้าแผนกโฆษณาของโอลิเวตติในช่วงทศวรรษที่ 1930 หลังจากสำเร็จการศึกษาจาก HIAI แล้ว Pintori เข้าร่วม Olivetti เพื่อทำงานภายใต้ Zveteremich และกลายเป็นผู้กำกับศิลป์ของบริษัทในปี 1950

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

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

— เรนาโต ซเวเตอเรมิช

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

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

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

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

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

Giovanni Pintori เสียชีวิตในมิลานในปี 2542 และมีหนังสือ Pintori โดย Marta Sironi และจัดพิมพ์โดย Moleskine ซึ่งรวบรวมรายการอาชีพที่น่าอัศจรรย์ของเขา

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

การสร้างจานสี

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

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

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

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

การใช้สีหลัก

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

 <header> <svg>…</svg> <svg>…</svg> </header> <main> <h1>…</h1> <p>…</p> </main> <figure> <svg>…</svg> </figure> <footer> <svg>…</svg> </footer>

แม้ว่าไฟล์ SVG ภายนอกจะถูกแคชและพร้อมที่จะแสดงผล แต่ตอนนี้ฉันฝัง SVG ใน HTML ของฉันทุกครั้งที่ทำได้ ไฟล์ภายนอกที่น้อยลงหมายถึงคำขอ HTTP ที่น้อยลง แต่ประโยชน์ของการฝังนั้นมีมากกว่าประสิทธิภาพ

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

ฉันเริ่มต้นด้วยการใช้รูปแบบพื้นฐานสีและตัวอักษรสำหรับการออกแบบของฉันในเวอร์ชันสีเข้มที่โดดเด่น ซึ่งรวมถึง Moderna Sans ซึ่งเป็นแบบอักษร sans-serif อเนกประสงค์ที่ออกแบบโดย Luciano Vergara และ Alfonso Garcia ซึ่งฉันเลือกที่จะทำให้เกิดสไตล์ของงานของ Pintori สำหรับ Olivetti:

 body { padding: 2rem; background-color: #262626; font-family: "moderna_sans-light"; color: #fff; } h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; font-weight: normal; line-height: 1; }

Flexbox เปลี่ยนส่วนหัวของฉันให้เป็นแผงเลื่อนในแนวนอน ซึ่งเป็นหนึ่งในวิธีที่มีประสิทธิภาพสูงสุดในการรักษาลำดับชั้นของภาพในการออกแบบหน้าจอขนาดเล็ก:

 header { display: flex; flex-wrap: nowrap; overflow-x: scroll; }

คุณสมบัติ flex-grow ที่มีค่าเป็น 1 ช่วยให้มั่นใจได้ว่ารูปภาพทั้งหมดจะขยายเพื่อเติมเต็มพื้นที่ว่าง ในขณะที่ flex-basis ทำให้แน่ใจว่ารายการ flex เหล่านี้เริ่มต้นจากขั้นต่ำ 640px;

 header svg { flex-grow: 1; flex-basis: 640px; } header svg:not(:last-of-type) { margin-right: 2rem; }

สุดท้าย ฉันเพิ่มช่องว่างภายในแนวนอนจำนวนมากและจัดโลโก้ Morris ให้อยู่ตรงกลางส่วนท้ายของฉัน:

 footer { padding-right: 8rem; padding-left: 8rem; text-align: center; }

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

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

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

 header { display: grid; grid-template-columns: 270px 1fr 270px; grid-template-rows: 100px 1fr 100px; }

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

 header svg:first-of-type { grid-column: 2 / 4; grid-row: 1 / 2; transform: scale(.85); }

จากนั้นฉันวางกราฟิกที่สองของฉัน ฉันเพิ่มมันในลำดับการซ้อนโดยเพิ่มค่าดัชนี z ที่สูงขึ้นซึ่งทำให้มองเห็นได้ใกล้ชิดกับผู้ดูมากขึ้น:

 header svg:last-of-type { grid-column: 1 / 3; grid-row: 2 / 4; z-index: 2; }

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

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2vw; row-gap: 2vh; } }

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

 header { grid-column: 1 / -1; } main { grid-column: 2 / 6; } figure { grid-column: 3 / 5; } footer { grid-column: 3 / 5; padding-right: 4rem; padding-left: 4rem; }

การออกแบบนี้มีความโดดเด่นมากขึ้นด้วยพื้นที่ที่มีอยู่บนหน้าจอขนาดใหญ่

สำหรับพวกเขา ฉันใช้ค่ากริดกับองค์ประกอบเนื้อหาเพื่อสร้างแปดคอลัมน์ของตารางผสม 6+4:

 @media (min-width: 64em) { body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

ด้วยการออกแบบขนาดกลางของฉันในหกคอลัมน์ จากนั้นจึงรวมตารางเดียวกันในส่วนประกอบหน้าจอขนาดใหญ่ของฉัน ช่วยรักษาสัดส่วนตลอดทุกขนาดในการออกแบบของฉัน จากนั้น ฉันจัดตำแหน่งองค์ประกอบโครงสร้างทั้งสี่ลงในตารางใหม่ของฉัน:

 header { grid-column: 1 / 8; } main { grid-column: 2 / 5; text-align: right; } figure { grid-column: 5 / 7; } footer { grid-column: 4; padding: 0; }

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

 main { text-align: right; } 

จานสีเดียว

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

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

• เฉดสี : ทำให้สีเข้มขึ้นโดยใช้สีดำ
• โทนสี : ทำให้สีสว่างขึ้นโดยใช้สีขาว
• โทน สี : ปรับสีให้อิ่มตัวโดยใช้สีเทา

เมื่อใช้สำหรับพื้นหลัง เส้นขอบ และรายละเอียด เฉดสีและสีอ่อนจะทำให้การออกแบบดูกลมกลืนกัน

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

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

การจำกัดจานสี

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

 <h1>…</h1> <p>…</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

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

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

 body { display: grid; row-gap: 2vh; }

จากนั้น ฉันจัดลำดับแผงใหม่ที่มีโลโก้และรูปภาพของ Morris Motors รวมทั้งพาดหัว โดยใช้หมายเลขแถว:

 #panel-d { grid-row: 1; } #panel-e { grid-row: 2; } h1 { grid-row: 3; }

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

 [id*="panel"] { min-height: 380px; }

แผงที่ปรากฏเป็นอันดับแรกในการออกแบบหน้าจอขนาดเล็กของฉันแสดงโลโก้ Morris Motors ซึ่งฉันแทรกโดยใช้ CSS ข้อมูลเนื้อหาที่สร้าง URI หากคุณไม่คุ้นเคยกับประเภทเนื้อหาที่มีประโยชน์นี้ URI ข้อมูลคือไฟล์ที่ได้รับการเข้ารหัสเป็นสตริง คุณสามารถใช้ URI ข้อมูลได้ทุกที่ใน CSS หรือ HTML ของคุณ:

 <img src="data:image/png…"> <img src="data:image/svg+xml…">

 div { background-image: url("data:image/svg+xml…"); }

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

ขั้นแรก ฉันเปลี่ยนความสูงขั้นต่ำของแผงนี้เพื่อให้ตรงกับความสูงของโลโก้ของฉัน จากนั้นจึงใส่โลโก้:

 #panel-d { min-height: 90px; text-align: center; } #panel-d:before { content: url("data:image/svg+xml…"); display: block; width: 135px; height: 90px; margin: 0 auto; }

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

 p { background-image: url("data:image/svg+xml…"); } p { background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%; } 

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

แผงแรกมีกราฟิกของฝาครอบดุมล้อของมอร์ริสบนพื้นหลังลายทางสีน้ำเงิน สีขาว และสีดำ ภาพพื้นหลังฝาครอบดุมล้อมาจาก URI ข้อมูล:

 #panel-a { background-image: url("data:image/svg+xml…"); }

จากนั้นฉันก็เพิ่มภาพพื้นหลังลายทางที่สองโดยใช้การไล่ระดับสีเชิงเส้น:

 #panel-a { background-image: url("data:image/svg+xml…"), linear-gradient( to bottom, #34749F, #34749F 65px, #fff 65px, #fff 80px, #262626 80px); }

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

 #panel-a { background-repeat: no-repeat, repeat-x; background-position: 50% 100%, 0 0; background-size: 75% 75%, auto auto; }

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

 #panel-b { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), linear-gradient( to bottom, #B5964D, #B5964D 125px, #262626 125px, #262626 140px, #fff 140px, #fff 155px, #262626 155px); } #panel-b { background-repeat: no-repeat, no-repeat, repeat-x; background-position: 50% 45px, 50% 190px, 0 0; background-size: 90%, 90%, auto; }

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

ฉันเพิ่มคุณสมบัติกริดให้กับองค์ประกอบเนื้อหา จากนั้นระบุความกว้างของคอลัมน์เพื่อเติมพื้นที่ว่างทั้งหมด เพื่อให้แน่ใจว่ามีความสูงเพียงพอเสมอที่จะแสดงเนื้อหาของแต่ละพาเนล ฉันใช้ค่า minmax ของ Grid โดยตั้งค่าความสูงขั้นต่ำที่ 300px และสูงสุดที่ 1fr:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(300px, 1fr)); gap: 1rem; min-height: 100vh; } }

องค์ประกอบในการออกแบบนี้ไม่ทับซ้อนกัน ดังนั้นฉันจึงใช้พื้นที่เทมเพลตกริดเพื่อความเรียบง่าย การออกแบบนี้มีพื้นที่กริดเก้าส่วน และฉันตั้งชื่อตัวอักษรเดียวให้แต่ละอันว่า a–h เนื่องจากตัวอักษร d ใช้สำหรับพื้นที่สองส่วนที่อยู่ติดกัน รายการที่วางโดยใช้ตัวอักษรนั้นจะครอบครองทั้งสองส่วน:

 body { grid-template-areas: "abc" "dde" "fgh"; }

ในการใช้งานหน้าจอขนาดใหญ่นี้ ค่า minmax ของ CSS Grid จะควบคุมความสูงของแถวของฉัน ทำให้ความสูงต่ำสุดที่ฉันใช้ก่อนหน้านี้ซ้ำซ้อน:

 [id*="panel"] { min-height: none; }

ฉันวางพาเนลของฉันโดยใช้ชื่อพื้นที่ ซึ่งช่วยให้ฉันเปลี่ยนตำแหน่งที่จะปรากฏในเลย์เอาต์ของฉันโดยไม่ต้องเปลี่ยนตำแหน่งใน HTML ของฉัน:

 #panel-a { grid-area: a; } #panel-b { grid-area: b; } #panel-c { grid-area: c; } #panel-d { grid-area: d; } #panel-e { grid-area: e; } #panel-f { grid-area: f; } #panel-g { grid-area: g; } p { grid-area: h; }

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

ในการพัฒนาแผงนี้ ก่อนอื่นฉันเพิ่มเส้นขอบทึบลึกที่ด้านบน ตามด้วยรูปภาพพื้นหลัง URI ของข้อมูล:

 #panel-d { border-top: 15px solid #262626; background-image: url("data:image/svg+xml…"); }

จากนั้น ฉันเพิ่มภาพพื้นหลังแบบไล่ระดับสีที่สองซึ่งสร้างแผงสีดำและแถบสีเหลืองแนวตั้งสองแถบ:

 #panel-d { background-image: url("data:image/svg+xml…"), linear-gradient( to right, #fff, #fff 280px, #B5964D 280px, #B5964D 320px, #fff 320px, #fff 335px, #262626 335px, #262626 calc(100% - 40px), #F2C867 calc(100% - 40px), #F2C867 100%); }

ก่อนหน้านี้ในกระบวนการของฉัน ฉันใช้ :before pseudo-element เพื่อเพิ่มโลโก้ Morris ในการออกแบบนี้ สำหรับหน้าจอขนาดใหญ่ ฉันจะเปลี่ยนตำแหน่งโลโก้นั้นไปที่ด้านล่างซ้ายของแผง:

 #panel-d position: relative; } #panel-d:before { position: absolute; bottom: 0; left: 0; margin: 0; }

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

 h1 { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

จากนั้น ฉันคืนสถานะข้อความพาดหัวโดยใช้เนื้อหาที่สร้างขึ้นและ :after pseudo-element ฉันจัดตำแหน่งไว้ที่ด้านล่างขวาของแผง และจำลองรูปแบบตัวหนา ย่อ ตัวเอียง:

 #panel-d:after { content: "Style… in a BIG way"; position: absolute; bottom: 0; right: 0; font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; line-height: 1; text-align: right; } 

จานเสริม

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

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

อีกทางหนึ่ง ใช้สีเสริมแบบแยกส่วน โดยที่แทนที่จะใช้สีตรงข้าม จานสีจะมีสองสีที่ด้านใดด้านหนึ่งของสีเสริม

เสริมสี

พิมพ์เขียว Morris Traveller ที่มีสีสันสดใสหลายภาพซ้อนทับกันในการออกแบบที่ได้แรงบันดาลใจจาก Pintori ครั้งถัดไปของฉัน HTML ที่จำเป็นในการพัฒนาการออกแบบนี้ให้น้อยที่สุดเท่ากับการแสดงภาพของรถคันนี้ หมวดแบนเนอร์ประกอบด้วย SVG ของโลโก้ Morris และองค์ประกอบหลักประกอบด้วยพาดหัวและข้อความที่เรียกใช้

แต่ความยืดหยุ่นของการออกแบบนี้ในหน้าจอหลายขนาดมาจากการใช้องค์ประกอบภาพสองภาพ โดยแต่ละภาพประกอบด้วยภาพสามภาพ ฉันรวมองค์ประกอบรูปภาพหนึ่งองค์ประกอบในส่วนหัว จากนั้นอีกองค์ประกอบหนึ่งในส่วนท้ายของฉัน:

 <div class="banner"> <svg>…</svg> </div> <header> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </header> <main> <h1><b>…</b></h1> <p>…</p> </main> <footer> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </footer>

โครงการพัฒนาของฉันทุกโครงการเริ่มต้นด้วยการเพิ่มรูปแบบพื้นฐานที่คุ้นเคย คราวนี้เพิ่มสีพื้นหลังสีขาวนวลและข้อความซานเซอริฟเกือบดำ:

 body { background-color: #f3f2f2; font-family: "moderna_sans-light"; color: #262626; }

ฉันจัดเนื้อหาในส่วนแบนเนอร์ของฉันให้อยู่ตรงกลาง จากนั้นตั้งค่าความกว้างสูงสุดของโลโก้ให้เล็กลง 150px:

 .banner { text-align: center; } .banner svg { max-width: 150px; }

พาดหัวหลักในการออกแบบนี้มีรูปแบบตัวหนา ย่อ และตัวเอียงของ Moderna Sans:

 h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.027rem; font-weight: normal; line-height: 1.2; }

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

 h1 span { color: #df4561; } #logo .emblem { fill: #df4561; }

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

สำหรับหน้าจอขนาดกลาง ฉันใช้พื้นที่ว่างเพิ่มเติมและแนะนำตารางสมมาตรสี่คอลัมน์:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(4, 1fr); } }

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

 .banner { grid-column: 2 / 4; text-align: center; transform: translateY(2vh); }

ทั้งส่วนหัวและส่วนท้ายของฉันขยายตารางจากขอบหนึ่งไปอีกขอบ ขณะที่การวางเนื้อหาหลักลงในคอลัมน์ตรงกลางสองคอลัมน์จะสร้างการวัดที่สะดวกสบาย:

 header, footer { grid-column: 1 / -1; } main { grid-column: 2 / 4; }

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

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

 @media (min-width: 72em) { body { grid-template-columns: repeat(8, 1fr); grid-template-rows: 160px auto; column-gap: 2vw; } }

ฉันเปลี่ยนตำแหน่งการแบ่งแบนเนอร์ของฉันออกเป็นสามคอลัมน์ และตั้งค่าองค์ประกอบหลักด้านล่างให้ตรงกัน:

 .banner, main { grid-column: 3 / 5; }

จากนั้น ฉันวางส่วนท้ายลงในสามคอลัมน์แรก และส่วนหัวลงในสี่คอลัมน์สุดท้ายเพื่อสร้างเลย์เอาต์ที่ไม่สมมาตรจากกริดแบบสมมาตร:

 header { grid-column: 5 / -1; } footer { grid-column: 1 / 4; }

ทั้งส่วนหัวและส่วนท้ายเติมความสูงของตารางของฉันจากบนลงล่าง:

 header, footer { grid-row: 1 / 3; }

ในขณะที่กองแบนเนอร์อยู่ในแถวแรก:

 .banner { grid-row: 1; }

และองค์ประกอบหลักก็เข้ากันได้ดีภายใต้:

 main { grid-row: 2 / 3; z-index: 2; }

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

• no-preference : มีคนไม่ได้แสดงความชอบออกมา
• แสง : มีคนเลือกธีมไฟไว้
• มืด : มีคนเลือกธีมมืด

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

 @media (prefers-color-scheme: dark) { body { background-color: #262626; color: #fff; } #logo .metal, #logo .emblem { fill: #fff; } }

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

 body { color: #f3f2f2; }

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

 header img, footer img { filter: saturate(1.5) brightness(1.1); } 

สีสดใส

ในการออกแบบชิ้นสุดท้ายที่ได้แรงบันดาลใจจากพินโตริ สี่เหลี่ยมสีสันสดใสจะลอยอยู่เหนือพื้นหลังสีเทาเข้ม การออกแบบนี้ต้องการองค์ประกอบโครงสร้างเพียงสามองค์ประกอบ ส่วนหัวที่มีโลโก้ Morris Motors อีกครั้ง ส่วนประกอบฟิกเกอร์ที่ไม่มีภาพโครงร่างของ Morris Traveller หนึ่งภาพ ไม่ใช่สองภาพ แต่มีสามภาพ และองค์ประกอบหลักที่มีข้อความวิ่งของฉัน:

 <header> <svg>…</svg> </header> <figure> <img> <img> <img> </figure> <main> <h1>…</h1> <p>…</p> <p>…</p> </main>

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

 <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg>

อันดับแรก ฉันระบุรูปแบบพื้นฐานสำหรับสีพื้นหลังและพื้นหน้า จากนั้นใช้รูปภาพ SVG การนำเสนอเดียวกันกับพื้นหลังโดยใช้ URI ข้อมูล:

 body { background-color: #262626; } background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"); color: #f3f2f2; }

จากนั้น ฉันระบุการทำซ้ำพื้นหลังและค่าตำแหน่ง โดยวาง SVG แต่ละรายการไว้ตรงกลาง แล้ววางซ้อนในแนวตั้งบนหน้า ในที่สุดฉันก็กำหนดขนาด:

 body { background-repeat: no-repeat; background-position: 50% 20px, 50% 240px, 50% 460px, 50% 680px; background-size: 200px 200px, 300px 200px, 200px 200px, 100px 100px; }

ดังนั้นโลโก้ในส่วนหัวของฉันจึงตรงกับขนาดของพื้นหลัง SVG ด้านหลัง ฉันจำกัดความกว้างสูงสุด จากนั้นจัดกึ่งกลางโดยใช้ระยะขอบแนวนอน:

 header { max-width: 200px; margin: 0 auto; }

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

 figure { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; max-width: 100vw; overflow-x: scroll; }

จากนั้น ฉันระบุค่าพื้นฐานยืดหยุ่นและความสูงให้ตรงกัน:

 figure img { flex-grow: 1; flex-basis: 320px; height: 320px; }

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

 [aria-hidden="true"] { display: none; }

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

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, auto); background-image: none; }

จากนั้น ฉันวางส่วนหัวและองค์ประกอบหลักระหว่างหมายเลขบรรทัดในตารางของฉัน:

 header { grid-column: 1; grid-row: 1; } main { grid-column: 5 / 8; grid-row: 5 / 7; }

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

 figure { display: contents; }

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

 figure img:nth-of-type(1) { grid-column: 3 / 6; grid-row: 2 / 4; } figure img:nth-of-type(2) { grid-column: 5 / 8; grid-row: 2 / 5; } figure img:nth-of-type(3) { grid-column: 3 / 4; grid-row: 5 / 6; }

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

 figure img:nth-of-type(1) { transform: rotate(-20deg) translateX(-12rem); } figure img:nth-of-type(2) { transform: scale(1.1); } figure img:nth-of-type(3) { transform: scale(1.25); }

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

 [aria-hidden="true"] { display: block; z-index: 0; mix-blend-mode: multiply; }

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

 .bg-1 { grid-column: 2 / 4; grid-row: 2 / 4; transform: rotate(-30deg); transform-origin: 75% 50%; } .bg-2 { grid-column: 4 / 8; grid-row: 2 / 5; } .bg-3 { grid-column: 3 / 5; grid-row: 4 / 6; } .bg-4 { grid-column: 4 / 5; grid-row: 6 / 7; transform: rotate(5deg); transform-origin: 0 0; } 

อ่านเพิ่มเติมจาก The Series

• แรงบันดาลใจในการออกแบบการตัดสินใจ: Avaunt Magazine
• การตัดสินใจออกแบบที่ได้รับแรงบันดาลใจ: เรื่องเร่งด่วน
• แรงบันดาลใจในการออกแบบการตัดสินใจ: Ernest Journal
• แรงบันดาลใจในการออกแบบ: Alexey Brodovitch
• แรงบันดาลใจในการออกแบบ: Bea Feitler
• แรงบันดาลใจในการออกแบบ: Neville Brody
• แรงบันดาลใจในการออกแบบ: Otto Storch
• แรงบันดาลใจในการออกแบบ: Herb Lubalin
• แรงบันดาลใจในการออกแบบ: Max Huber
• แรงบันดาลใจในการออกแบบ: Emmett McBain
• แรงบันดาลใจในการออกแบบ: Bradbury Thompson

หมายเหตุ: สมาชิก Smashing สมาชิก Smashing สามารถเข้าถึง PDF ที่ออกแบบมาอย่างสวยงามของนิตยสาร Inspired Design Decisions ของ Andy และตัวอย่างโค้ดแบบเต็มจากบทความนี้ คุณสามารถซื้อ PDF และตัวอย่างฉบับนี้ รวมถึงฉบับอื่นๆ ได้โดยตรงจากเว็บไซต์ของ Andy