ผู้ออกแบบอาคาร

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

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

ดูประสบการณ์การใช้งานแบบเต็มได้ที่ designcember.com

เว็บไซต์ Designcember

ภาพรวม

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

เริ่มต้นด้วยความคิดสร้างสรรค์

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

ภาพร่างโครงหน้า Designcember

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

ต่อไปนี้คือตัวอย่างของโปรโตไทป์ที่ปรับเปลี่ยนตามพื้นที่โฆษณาโดยใช้ grid-auto-flow: dense ซึ่งแสดงวิธีที่อัลกอริทึมของตารางกริดวางหน้าต่างโดยอัตโนมัติ เราตระหนักได้อย่างรวดเร็วว่าแม้ตารางกริดสัดส่วนภาพจะแสดงอาร์ตเวิร์กได้อย่างสวยงาม แต่ก็ไม่ได้เปิดโอกาสให้หน้าต่างขยายและยุบลงในพื้นที่ว่างที่ไม่สม่ำเสมอ และไม่ได้แสดงพลังของคำค้นหาคอนเทนเนอร์

ภาพเคลื่อนไหวที่แสดงวิธีที่โครงร่างนี้ตอบสนองต่อขนาดหน้าจอต่างๆ
ดูเดโมนี้ใน CodePen

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

เวิร์กเฟรมแสดงลักษณะที่หน้าต่างแสดงเมื่อถึงจุดพักต่างๆ

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

ภาพเคลื่อนไหวของหน้าต่างด้วย Spritesheet

หน้าต่างบางรายการมีภาพเคลื่อนไหวเพื่อเพิ่มการโต้ตอบในการใช้งาน ภาพเคลื่อนไหวเหล่านี้วาดด้วยมือทีละเฟรมใน Photoshop ระบบจะส่งออกเฟรมแต่ละเฟรม เปลี่ยนเป็น Sprite Sheet ด้วย Sprite Sheet Generator นี้ จากนั้นเพิ่มประสิทธิภาพด้วย Squoosh จากนั้นภาพเคลื่อนไหว CSS จะใช้ background-position-x และ animation-timing-function ดังที่แสดงในตัวอย่างต่อไปนี้

.una
  background: url("/day1/una_sprite.webp") 0% 0%;
  background-size: 400% auto;
}

.day:is(:hover, :focus-within) .una {
  animation: una-wave .5s steps(1) alternate infinite;
}

@keyframes una-wave {
  0%  { background-position-x: 0%; }
  25% { background-position-x: 300%; }
  50% { background-position-x: 200%; }
  75% { background-position-x: 100%; }
}

ภาพเคลื่อนไหวแสดงกรอบเวลาของวันที่ 1

ภาพเคลื่อนไหวบางรายการ เช่น กระปุกออมสินของวันที่ 6 เป็นภาพเคลื่อนไหว CSS ตามขั้นตอน เราสร้างเอฟเฟกต์นี้ด้วยเทคนิคที่คล้ายกันโดยใช้ steps() แต่ความแตกต่างคือคีย์เฟรมคือตำแหน่งการเปลี่ยนรูปแบบ CSS แทนตำแหน่งพื้นหลัง

การมาสก์ CSS

หน้าต่างบางบานมีรูปร่างเฉพาะตัว เราใช้ มาสก์และ aspect-ratio เพื่อช่วยสร้างกรอบที่ปรับขนาดได้ ปรับรูปร่างได้ และมีเอกลักษณ์

หากต้องการสร้างมาสก์ เช่น มาสก์นี้สําหรับหน้าต่าง 8 คุณต้องมีทักษะพื้นฐานในการใช้ Photoshop บวกความรู้เล็กน้อยเกี่ยวกับวิธีการทํางานของมาสก์บนเว็บ เรามาดูกรอบเวลาของวันที่ 8 กัน

กรอบเวลาของวันที่ 8

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

รูปภาพมาสก์ Clover

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

กรอบเวลาของวันที่ 8 ในโหมดมืด

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

รูปภาพต่อไปนี้แสดงลักษณะของรูปภาพที่ไม่มีหน้ากากบนหน้าต่างและตัวละคร

รูปภาพสำหรับหน้าต่างที่ 9 ที่ไม่มีมาสก์

การบีบรูปภาพ

Alice ทำงานด้วยสัดส่วนพิกเซล 3 เท่าเพื่อรักษาความถูกต้องของภาพและช่วยให้ผู้ใช้หน้าจอความละเอียดสูงได้รับประสบการณ์การใช้งานที่คมชัด แผนเดิมคือจะใช้ imgix และแสดงรูปภาพและรูปแบบที่เพิ่มประสิทธิภาพแล้วบนเซิร์ฟเวอร์ของ imgix แต่เราพบว่าการปรับแต่งด้วยตนเองด้วยเครื่องมือ Squoosh ช่วยประหยัดพื้นที่ได้ 50% ขึ้นไป

ใช้ Squoosh เพื่อบีบอัดรูปภาพ

ภาพประกอบมีความท้าทายเฉพาะตัวสำหรับการบีบอัด โดยเฉพาะอย่างยิ่งการวาดเส้นด้วยแปรงและสไตล์ขอบขรุขระแบบโปร่งใสที่ Alice ใช้ เราเลือกที่จะ Squoosh รูปภาพ PNG ที่ Photoshop ส่งออก 3 เท่าแต่ละรูปให้เป็น PNG, WebP และ avif ที่เล็กลง ไฟล์แต่ละประเภทมีความสามารถในการบีบอัดพิเศษของตนเอง และเราต้องใช้การบีบอัดรูปภาพมากกว่า 50 รูปเพื่อค้นหาการตั้งค่าการเพิ่มประสิทธิภาพทั่วไป

Squoosh CLI กลายเป็นสิ่งสําคัญเมื่อต้องเพิ่มประสิทธิภาพรูปภาพกว่า 200 รูป ซึ่งการทําทั้งหมดด้วยตนเองอาจใช้เวลาหลายวัน เมื่อได้การตั้งค่าการเพิ่มประสิทธิภาพทั่วไปแล้ว เราจะระบุการตั้งค่าเหล่านั้นเป็นคำสั่งบรรทัดแล้วประมวลผลรูปภาพ PNG ทั้งโฟลเดอร์เป็นไฟล์ WebP และ AVIF ที่บีบอัดเป็นกลุ่ม

ตัวอย่างคำสั่ง squoosh CLI ของ AVIF ที่ใช้มีดังนี้

npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png

เมื่อตรวจสอบอาร์ตเวิร์กที่เพิ่มประสิทธิภาพแล้วในรีโป เราจะเริ่มโหลดอาร์ตเวิร์กจาก HTML ได้ ดังนี้

<picture>
  <source srcset="/day1/inner-frame.avif" type="image/avif">
  <source srcset="/day1/inner-frame.webp" type="image/webp">
  <img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>

การเขียนซอร์สโค้ดรูปภาพซ้ำๆ นั้นไม่สะดวก เราจึงสร้างคอมโพเนนต์ Astro เพื่อฝังรูปภาพด้วยโค้ดเพียงบรรทัดเดียว

<Pic filename="day1/inner-frame" role="presentation" />

ผู้ใช้โปรแกรมอ่านหน้าจอและแป้นพิมพ์

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

เช่น เมื่อฝังรูปภาพ เราใช้ role="presentation" เพื่อทําเครื่องหมายรูปภาพเป็นภาพสําหรับการนำเสนอสําหรับโปรแกรมอ่านหน้าจอ เราพบว่าประสบการณ์ของผู้ใช้ที่มีคำอธิบาย alt ที่ถูกตัดออกเป็น 5-12 รายการจะเป็นประสบการณ์ที่ไม่ดี เราจึงทำเครื่องหมายรูปภาพว่าเป็นภาพเพื่อนำเสนอและใส่คําบรรยายหน้าต่างโดยรวม การไปยังส่วนต่างๆ ของหน้าต่างด้วยโปรแกรมอ่านหน้าจอจะให้ความรู้สึกเหมือนกำลังฟังการบรรยาย ซึ่งเราหวังว่าจะช่วยสื่อถึงอารมณ์ขันและความสนุกที่เว็บไซต์ต้องการแชร์

วิดีโอต่อไปนี้แสดงการสาธิตประสบการณ์การใช้งานแป้นพิมพ์ ปุ่ม Tab, Enter, Space และ Escape ใช้เพื่อจัดระเบียบโฟกัสไปยังและจากป๊อปอัปของหน้าต่างและหน้าต่าง

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

Astro เป็นเครื่องมือสร้างเว็บไซต์แบบคงที่ก่อนแล้วค่อยเป็นแบบคอมโพเนนต์

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

วันเป็นองค์ประกอบ

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

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

สไตล์ที่มีขอบเขตและพร็อพแบบเปิด

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

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

คอนเทนเนอร์แบบยืดหยุ่น

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

การสาธิตลักษณะที่หน้าต่างเปลี่ยนแปลงเมื่อมีพื้นที่มากขึ้น

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

.day {
  container: inline-size;
}

.day > .pane {
  min-block-size: 250px;

  @container (min-width: 220px) {
    min-block-size: 300px;
  }

  @container (min-width: 260px) {
    min-block-size: 310px;
  }

  @container (min-width: 360px) {
    min-block-size: 450px;
  }
}

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

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

.person {
  place-self: flex-end;
  margin-block: 25% 50%;
  margin-inline-start: -15%;
  z-index: var(--layer-1);

  @container (max-height: 350px) and (max-width: 425px) {
    place-self: center flex-end;
    inline-size: 50%;
    inset-block-end: -15%;
    margin-block-start: -2%;
    margin-block-end: -25%;
    z-index: var(--layer-2);
  }
}

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

การรองรับข้ามเบราว์เซอร์

เราต้องใช้ polyfill ที่ยอดเยี่ยมเพื่อสร้างประสบการณ์การใช้งานที่ทันสมัยในหลายเบราว์เซอร์ โดยเฉพาะสำหรับ API เวอร์ชันทดลอง เช่น การค้นหาคอนเทนเนอร์ เราได้ส่งคำขอแจ้งให้ทีมทราบ และ Surma เป็นหัวหอกในการสร้าง container query polyfill ใหม่ โพลีฟิลล์นี้ใช้ ResizeObserver, MutationObserver และ :is() function ของ CSS ดังนั้นเบราว์เซอร์สมัยใหม่ทั้งหมดจึงรองรับ polyfill โดยเฉพาะ Chrome และ Edge ตั้งแต่เวอร์ชัน 88, Firefox ตั้งแต่เวอร์ชัน 78 และ Safari ตั้งแต่เวอร์ชัน 14 การใช้ polyfill จะช่วยให้ใช้ไวยากรณ์ต่อไปนี้ได้

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

โหมดเข้ม

เว็บไซต์ Designcember ในโหมดสว่างและโหมดมืดแสดงคู่กัน

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

ไข่อีสเตอร์อื่นๆ

บอกข้อมูลความชอบส่วนตัว

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

รูปแบบเคอร์เซอร์ที่กำหนดเองและตัวเลือก Favicon

ฟังก์ชันการทำงาน

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

นอกจากนี้ Designcember.com ยังมีสไตล์ชีตสำหรับสิ่งพิมพ์พิเศษที่แสดงรูปภาพเฉพาะซึ่งเหมาะกับกระดาษขนาด 8.5" x 11" มากที่สุด เพื่อให้คุณพิมพ์ปฏิทินออกมาเองและฉลองเทศกาลตลอดทั้งปีได้

พิมพ์การออกแบบปฏิทินขนาดโปสเตอร์
Una ถือปฏิทินภาพพิมพ์ขนาดใหญ่

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

ส่วนต่างๆ ของปฏิทินที่มีคำอธิบายประกอบและโน้ตรูปภาพ