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

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

Adam Argyle

Una Kravets

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

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

ภาพรวม

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

เริ่มต้นด้วยความแปลก

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

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

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

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

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

ภาพเคลื่อนไหวของหน้าต่างด้วย 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%; }
}

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

การมาสก์ CSS

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

การสร้างหน้ากาก เช่น หน้ากากนี้สำหรับหน้าต่าง 8 จำเป็นต้องมีทักษะการใช้ Photoshop แบบคลาสสิกบางอย่าง รวมถึงความรู้เล็กน้อยเกี่ยวกับการทำงานของหน้ากากบนเว็บ เรามาดูกรอบเวลาของวันที่ 8 กัน

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

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

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

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

อวดงานศิลปะ

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

ภาพประกอบมีความท้าทายเฉพาะตัวสำหรับการบีบอัด โดยเฉพาะอย่างยิ่งการวาดเส้นด้วยแปรงและสไตล์ขอบขรุขระแบบโปร่งใสที่ 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, static first, Components - ขับเคลื่อนด้วยคอมโพเนนต์

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

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

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

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

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

รูปแบบขอบเขตดาราศาสตร์ที่เขียนภายในโมเดลคอมโพเนนต์ ซึ่งทำให้การกระจายงานในหมู่สมาชิกในทีมหลายคนง่ายขึ้น และยังช่วยให้ใช้งาน 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 ใหม่ polyfill ใช้ ResizeObserver, MutationObserver และฟังก์ชัน:is() ของ CSS ดังนั้นเบราว์เซอร์สมัยใหม่ทั้งหมดจึงรองรับ Polyfill โดยเฉพาะ Chrome และ Edgefrom เวอร์ชัน 88, Firefox จากเวอร์ชัน 78 และ Safari จากเวอร์ชัน 14 การใช้ polyfill จะช่วยให้ใช้ไวยากรณ์ต่อไปนี้ได้

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

โหมดเข้ม

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

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

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

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

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

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

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

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