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

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

Adam Argyle

Una Kravets

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

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

ภาพรวม

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

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

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

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

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

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

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

ภาพเคลื่อนไหวของหน้าต่างที่มีสไปรต์ชีต

หน้าต่างบางบานมีภาพเคลื่อนไหวเพื่อเพิ่มการโต้ตอบในประสบการณ์การใช้งาน ภาพเคลื่อนไหววาดด้วยมือทีละเฟรมใน Photoshop ระบบจะส่งออกเฟรมแต่ละเฟรม แล้วเปลี่ยนเป็นสไปรต์ชีตด้วยเครื่องมือสร้างสไปรต์ชีตนี้ จากนั้นจะเพิ่มประสิทธิภาพด้วย 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 และแสดงรูปภาพและรูปแบบที่เพิ่มประสิทธิภาพในเซิร์ฟเวอร์ แต่เราพบว่าการปรับแต่งด้วยตนเองโดยใช้เครื่องมือ Squoosh ช่วยประหยัดได้ 50% ขึ้นไป

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

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

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

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, Spacebar และ Escape ใช้เพื่อจัดระเบียบโฟกัสไปยังและจากป๊อปอัปหน้าต่างและหน้าต่าง

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

Astro, static first, component-driven site generator

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

วันเป็นคอมโพเนนต์

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

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

สไตล์ที่กำหนดขอบเขตและ Open Props

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

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

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

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

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

.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;
  }
}

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

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

.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 เป็นหัวหน้าในการสร้าง polyfill สำหรับการค้นหาคอนเทนเนอร์ใหม่ Polyfill ใช้ ResizeObserver, MutationObserver และฟังก์ชัน:is() ของ 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 คือธีมมืดที่สวยงาม เราต้องการแสดงให้เห็นว่าคุณจะใช้ภาพศิลปะเพื่อเป็นผู้เข้าร่วมอย่างแข็งขันในการสร้างประสบการณ์โหมดมืดที่ยอดเยี่ยมได้อย่างไร เราจึงปรับรูปแบบพื้นหลังของแต่ละหน้าต่างด้วยโปรแกรม และใช้ CSS มากที่สุดเท่าที่จะทำได้เมื่อสร้างอาร์ตเวิร์กของหน้าต่าง พื้นหลังส่วนใหญ่เป็นไล่ระดับสี CSS เพื่อให้ปรับค่าสีได้ง่ายขึ้น จากนั้นเราก็วางภาพทับลงบนภาพเหล่านี้

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

การปรับแต่งส่วนตัว

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

การตกแต่งที่ใช้งานได้จริง

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

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

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