बिल्डिंग डिज़ाइनसींबर

Designcember के छुट्टियों के कैलेंडर वाले अनुभव को बनाने के लिए इस्तेमाल की गई प्रोसेस और टूल के बारे में जानकारी.

दिसंबर के सीज़न और नए साल की काउंटडाउन के लिए इस्तेमाल किए जाने वाले कई कैलेंडर को ध्यान में रखते हुए, हमने कम्यूनिटी और Chrome टीम के वेब कॉन्टेंट को हाइलाइट किया है. हमने हर दिन यूज़र इंटरफ़ेस (यूआई) डेवलपमेंट और डिज़ाइन से जुड़े कॉन्टेंट को हाइलाइट किया. इस तरह, कुल 31 हाइलाइट की गईं. इनमें 26 नई डेमो साइटें, टूल, एलान, पॉडकास्ट, वीडियो, लेख, और केस स्टडी शामिल हैं.

designcember.com पर जाकर, इस बारे में ज़्यादा जानें.

Designcember साइट.

खास जानकारी

हमारा मकसद, कम से कम बाइट में, लोगों को वेब पर बेहतरीन अनुभव देना था. हम कंटेनर क्वेरी जैसे नए रिस्पॉन्सिव एपीआई को हाइलाइट करना चाहते थे. साथ ही, डिज़ाइन पर फ़ोकस करने वाली और एसेट की संख्या ज़्यादा वाली वेबसाइट में, डार्क मोड का एक खूबसूरत उदाहरण शामिल करना चाहते थे. ऐसा करने के लिए, हमने फ़ाइलों को कंप्रेस किया, कई फ़ॉर्मैट उपलब्ध कराए, स्टैटिक साइट जनरेशन के लिए ऑप्टिमाइज़ किए गए बिल्ड टूल का इस्तेमाल किया, एक नया पॉलीफ़िल शिप किया वगैरह.

व्हिम्सी से शुरू करना

Designcember कैलेंडर साइट का मकसद, दिसंबर महीने में हाइलाइट किए जाने वाले सभी कामों को दिखाना था. साथ ही, यह एक डेमो साइट के तौर पर भी काम करती थी. हमने एक ऐसी अपार्टमेंट बिल्डिंग बनाने का फ़ैसला लिया जो ज़्यादा ऊंची और संकरी या छोटी और चौड़ी हो सकती है. साथ ही, इसमें ऐसी विंडो होनी चाहिए जो फ़्रेम में अपने-आप व्यवस्थित हो जाएं. हर विंडो में एक दिन का डेटा होता है. इसका मतलब है कि हर विंडो में एक कॉन्टेंट होता है. हमने अपने विज़न को पूरा करने के लिए, इलस्ट्रेटर ऐलिस ली के साथ काम किया.

Designcember पेज के स्केलेटन के स्केच.

ऐलिस ने प्रोसेस और स्केच शेयर किए, जो शुरुआती कॉन्सेप्ट में भी दिलचस्प थे. जब वह आर्ट पर काम कर रही थीं, तब हमने आर्किटेक्चर पर काम किया. शुरुआती चर्चाएं, मैक्रो लेआउट, इमारत, और उसकी खिड़कियों के बारे में थीं. ज़्यादा व्यूपोर्ट स्पेस उपलब्ध होने पर, विंडो एक, दो या तीन कॉलम में कैसे बदलेंगी? इन्हें कितना छोटा या बड़ा किया जा सकता है? इमारत का ज़्यादा से ज़्यादा साइज़ क्या होगा? विंडो कितनी शिफ़्ट होंगी?

यहां grid-auto-flow: dense का इस्तेमाल करके बनाए गए रिस्पॉन्सिव प्रोटोटाइप की झलक दी गई है. इससे पता चलता है कि ग्रिड एल्गोरिदम की मदद से, विंडो अपने-आप कैसे दिख सकती हैं. हमें जल्द ही पता चला कि आसपेक्ट रेशियो वाले ग्रिड, आर्ट दिखाने के लिए बेहतरीन तरीके से काम करते हैं. हालांकि, इनसे विंडो को अलग-अलग साइज़ में बड़ा और छोटा करने का विकल्प नहीं मिलता. साथ ही, इनसे कंटेनर क्वेरी की सुविधा का इस्तेमाल भी नहीं किया जा सकता.

ऐनिमेशन, जिसमें दिखाया गया है कि यह वायरफ़्रेम अलग-अलग स्क्रीन साइज़ के हिसाब से कैसे काम करता है.
CodePen पर यह डेमो देखें.

जब सामान्य ग्रिड अपेक्षाकृत स्थिर हो गया और इमारत और उसकी खिड़कियों के जवाब देने के लिए दिशा की जानकारी दी गई, तब हम एक खिड़की पर फ़ोकस कर सके. ग्रिड में मौजूद कुछ विंडो, दूसरों की तुलना में ज़्यादा स्ट्रेच, शंकु, स्क्वेयर, और बड़े हुईं. साथ ही, उन्होंने खुद को फिर से कॉम्पोज़ किया.

अलग-अलग ब्रेकपॉइंट पर विंडो के दिखने का तरीका दिखाने वाले वायरफ़्रेम.

हर विंडो को, साइज़ में बदलाव करने से जुड़ी कुछ समस्याओं को मैनेज करना होगा. यहां एक विंडो का प्रोटोटाइप दिया गया है, जिसमें बताया गया है कि उतार-चढ़ाव के दौरान यह विंडो कैसे काम करती है. साथ ही, यह भी बताया गया है कि हर इंटरैक्टिव विंडो में कितनी बदलाव की उम्मीद की जा सकती है.

स्प्राइटशीट की मदद से विंडो का ऐनिमेशन

कुछ विंडो में ऐनिमेशन होते हैं, ताकि उपयोगकर्ताओं को ज़्यादा इंटरैक्टिव अनुभव दिया जा सके. ये ऐनिमेशन, Photoshop में फ़्रेम के हिसाब से हाथ से बनाए जाते हैं. हर फ़्रेम को एक्सपोर्ट करके, इस स्प्राइटशीट जनरेटर की मदद से स्प्राइटशीट में बदला जाता है. इसके बाद, Squoosh की मदद से उसे ऑप्टिमाइज़ किया जाता है. इसके बाद, सीएसएस ऐनिमेशन 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%; }
}

पहले दिन की विंडो दिखाने वाला ऐनिमेशन.

छठे दिन का पिग्गी बैंक जैसे कुछ ऐनिमेशन, सीएसएस के चरणों पर आधारित ऐनिमेशन थे. हमने steps() का इस्तेमाल करके, इसी तरह की तकनीक से यह इफ़ेक्ट हासिल किया. हालांकि, इसमें अंतर यह था कि कीवर्ड बैकग्राउंड पोज़िशन के बजाय, सीएसएस ट्रांसफ़ॉर्म पोज़िशन थे.

सीएसएस मास्किंग

कुछ खिड़कियों का आकार अलग था. हमने मास्क और aspect-ratio का इस्तेमाल करके, स्केल करने लायक, अलग आकार वाली, और अडैप्टिव विंडो बनाई है.

विंडो आठ के लिए इस तरह का मास्क बनाने के लिए, Photoshop की कुछ बुनियादी स्किल के साथ-साथ, वेब पर मास्क के काम करने के तरीके के बारे में थोड़ी जानकारी भी ज़रूरी थी. आइए, आठवें दिन की विंडो पर नज़र डालते हैं.

आठवें दिन के लिए विंडो.

मास्क बनाने के लिए, चार पत्तियों वाले क्लोवर के आकार को अलग करके, उसे सफ़ेद रंग से भरना होगा. सफ़ेद रंग से सीएसएस को पता चलता है कि कौनसा कॉन्टेंट सेव रहेगा और सफ़ेद रंग के बाहर का कॉन्टेंट सेव नहीं होगा. Photoshop में, विंडो के अंदरूनी हिस्से को चुना गया और ऐलियसिंग की समस्याओं को हटाने के लिए, 1 पिक्सल फ़ेडर किया गया. इसके बाद, उसे सफ़ेद रंग से भरा गया और विंडो फ़्रेम की ऊंचाई और चौड़ाई के हिसाब से एक्सपोर्ट किया गया. इस तरह, फ़्रेम और मास्क को एक-दूसरे के ऊपर लेयर किया जा सकता है. इससे, फ़्रेम में मौजूद कॉन्टेंट को उम्मीद के मुताबिक दिखाया जा सकता है.

क्लोवर मास्क की इमेज

विंडो बनाने के बाद, उसके कॉन्टेंट में बदलाव किया जा सकता है. साथ ही, यह हमेशा कस्टम फ़्रेम में दिखेगी. नीचे दी गई इमेज में, विंडो का डार्क मोड वर्शन दिखाया गया है. इसमें बैकग्राउंड ग्रेडिएंट अलग है और लाइट पर चमकदार सीएसएस फ़िल्टर लागू किया गया है.

डार्क मोड में आठवें दिन की विंडो.

मास्किंग की सुविधा, रिस्पॉन्सिव कंटेनर-क्वेरी पर आधारित विंडो के साथ भी काम करती है. नौवीं विंडो में, एक ऐसा किरदार है जो मास्क के पीछे तब तक छिपा रहता है, जब तक विंडो का साइज़ छोटा नहीं हो जाता. यह पक्का करने के लिए कि उपयोगकर्ता इमेज को फ़्रेम से बाहर न ले जा सके, ऐलिस ने हमारे लिए पूरे किरदार को पूरा किया. विंडो में मौजूद किरदार को मास्क किया गया है, लेकिन पौधों को नहीं. इसलिए, हमें मास्क किए गए एलिमेंट को बिना मास्क वाली लेयर के साथ लेयर करने की चुनौती का सामना करना पड़ा. साथ ही, यह पक्का करना पड़ा कि वे सभी एक साथ अच्छी तरह से स्केल हों.

नीचे दी गई इमेज में दिखाया गया है कि विंडो और किरदार पर मास्क के बिना यह कैसा दिखता है.

मास्क के बिना, नौवीं विंडो की इमेज.

आर्ट को स्क्वॉश करना

इलस्ट्रेशन की फ़िडेलिटी बनाए रखने और यह पक्का करने के लिए कि हाई डेफ़िनिशन स्क्रीन पर उपयोगकर्ता को धुंधला अनुभव न मिले, ऐलिस ने 3x पिक्सल रेशियो का इस्तेमाल किया. हमारा प्लान था कि हम imgix का इस्तेमाल करके, अपने सर्वर पर ऑप्टिमाइज़ की गई इमेज और फ़ॉर्मैट दिखाएं. हालांकि, हमें पता चला कि Squoosh टूल की मदद से मैन्युअल तरीके से बदलाव करने पर, हमें 50% या उससे ज़्यादा डेटा बचाने में मदद मिल सकती है.

इमेज को कंप्रेस करने के लिए, Squoosh का इस्तेमाल करना.

इलस्ट्रेशन को कम साइज़ में बदलने में खास तरह की चुनौतियां आती हैं. खास तौर पर, ब्रश स्ट्रोक और पारदर्शी रफ़ ऐज स्टाइल, जिसका इस्तेमाल ऐलिस ने किया है. हमने Photoshop से एक्सपोर्ट की गई हर 3x PNG इमेज को छोटा करके, PNG, webp, और avif फ़ॉर्मैट में बदलने का विकल्प चुना. हर फ़ाइल टाइप को कंप्रेस करने की अपनी खास सुविधाएं होती हैं. ऑप्टिमाइज़ेशन की कुछ सामान्य सेटिंग ढूंढने के लिए, 50 से ज़्यादा इमेज को कंप्रेस करना पड़ा.

200 से ज़्यादा इमेज को ऑप्टिमाइज़ करने के लिए, Squoosh CLI का इस्तेमाल करना ज़रूरी हो गया था. इन्हें मैन्युअल तरीके से ऑप्टिमाइज़ करने में कई दिन लग सकते थे. ऑप्टिमाइज़ेशन की सामान्य सेटिंग मिलने के बाद, हमने उन्हें कमांड-लाइन निर्देशों के तौर पर उपलब्ध कराया. साथ ही, PNG इमेज के पूरे फ़ोल्डर को एक साथ प्रोसेस करके, उन्हें WebP और AVIF फ़ॉर्मैट में कंप्रेस किया.

यहां AVIF CLI squoosh कमांड का इस्तेमाल करने का उदाहरण दिया गया है:

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

रिपॉज़िटरी में ऑप्टिमाइज़ किए गए आर्टवर्क की जांच करने के बाद, हम उन्हें एचटीएमएल से लोड करना शुरू कर सकते हैं:

<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 के पांच से 12 हिस्सों में बंटे ब्यौरे से, लोगों को खराब अनुभव मिल सकता है. इसलिए, हमने इमेज को प्रज़ेंटेशन के तौर पर मार्क किया है और पूरी विंडो के लिए नैरेटिव दिया है. स्क्रीन रीडर की मदद से, विंडो पर नेविगेट करने पर, आपको एक अच्छी कहानी सुनने जैसा अनुभव मिलता है. हमें उम्मीद है कि इससे, साइट पर मौजूद मज़ेदार और दिलचस्प कॉन्टेंट को बेहतर तरीके से शेयर करने में मदद मिलेगी.

इस वीडियो में, कीबोर्ड के इस्तेमाल का डेमो दिखाया गया है. Tab, Enter, Spacebar, और Escape बटन का इस्तेमाल करके, विंडो पॉप-अप और विंडो पर फ़ोकस किया जा सकता है.

स्क्रीन रीडर की सुविधा में खास ARIA एट्रिब्यूट होते हैं, जो कॉन्टेंट को साफ़ तौर पर पढ़कर सुनाते हैं. उदाहरण के लिए, दिनों के लिंक में सिर्फ़ "एक" या "दो" लिखा होता है. हालांकि, कुछ ARIA जोड़ने पर, उन्हें "पहला दिन" और "दूसरा दिन" के तौर पर पढ़ा जाता है. इसके अलावा, सभी इमेज की खास जानकारी एक ही लेबल में दी जाती है, ताकि हर विंडो में जानकारी हो.

Astro, स्टैटिक फ़र्स्ट, कॉम्पोनेंट-ड्रिवन साइट जनरेटर

Astro की मदद से, टीम ने साइट पर साथ मिलकर आसानी से काम किया. कॉम्पोनेंट मॉडल, Angular और React, दोनों डेवलपर के लिए जाना-पहचाना था. वहीं, स्कोप किए गए क्लास नेम स्टाइल सिस्टम की मदद से, हर डेवलपर को यह पता चलता था कि किसी विंडो पर किया गया उनका काम, किसी दूसरे डेवलपर के काम से नहीं टकराएगा.

दिनों को कॉम्पोनेंट के तौर पर इस्तेमाल करना

हर दिन एक कॉम्पोनेंट था, जो बिल्ड टाइम डेटा स्टोर से स्टेटस फ़ेच करता था. इससे, हमें ब्राउज़र में HTML पहुंचने से पहले टेंप्लेट लॉजिक चलाने की सुविधा मिलती है. लॉजिक से यह तय होगा कि दिन का टूलटिप दिखना चाहिए या नहीं, क्योंकि इनऐक्टिव दिनों में पॉप-अप नहीं दिखते.

बिल्ड हर घंटे चलाए जाते हैं. साथ ही, बिल्ड सर्वर के आधी रात के बाद बंद होने पर, बिल्ड के समय का डेटा स्टोर एक नया दिन अनलॉक करेगा. ये छोटे सिस्टम, अपने-आप अपडेट होते हैं और साइट को अप-टू-डेट रखते हैं.

स्कोप वाली स्टाइल और ओपन प्रॉप

Astro कॉम्पोनेंट मॉडल में लिखे गए स्टाइल को स्कोप करता है. इससे टीम के कई सदस्यों के बीच वर्कलोड को बांटना आसान हो गया. साथ ही, ओपन प्रॉप का इस्तेमाल भी मज़ेदार हो गया. 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);
  }
}

हमने जानकारी दिखाने और छिपाने के लिए, कंटेनर क्वेरी का भी इस्तेमाल किया. ऐसा इसलिए किया गया, क्योंकि छोटे साइज़ में आर्टवर्क बहुत भरा-भरा दिखता था और बड़े साइज़ में खाली दिखता था. नौवीं विंडो इस बात का बेहतरीन उदाहरण है कि यह सुविधा कहां काम करती है:

अलग-अलग ब्राउज़र पर काम करना

अलग-अलग ब्राउज़र पर बेहतरीन अनुभव देने के लिए, हमें एक बेहतर पॉलीफ़िल की ज़रूरत है. खास तौर पर, कंटेनर क्वेरी जैसे एक्सपेरिमेंटल एपीआई के लिए. हमने अपनी टीम को एक कॉल आउट भेजा. इसके बाद, सुरमा ने नए कंटेनर क्वेरी पॉलीफ़िल के लिए एक बिल्ड बनाया. यह पॉलीफ़िल, ResizeObserver, MutationObserver, और सीएसएस :is() फ़ंक्शन पर निर्भर करता है. इसलिए, सभी आधुनिक ब्राउज़र, पॉलीफ़िल के साथ काम करते हैं. खास तौर पर, Chrome और Edge के 88 वर्शन, Firefox के 78 वर्शन, और Safari के 14 वर्शन के साथ. पॉलीफ़िल का इस्तेमाल करके, इनमें से किसी भी सिंटैक्स का इस्तेमाल किया जा सकता है:

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

गहरे रंग वाला मोड

Designcember साइट के हल्के और गहरे रंग वाले मोड के वर्शन, एक साथ.

Designcember की वेबसाइट को शानदार बनाने के लिए, एक और चीज़ ज़रूरी थी. वह थी गहरे रंग वाली थीम. हम आपको यह दिखाना चाहते थे कि गहरे रंग वाले मोड का बेहतरीन अनुभव देने में, कला का इस्तेमाल कैसे किया जा सकता है. इसके लिए, हमने प्रोग्राम के हिसाब से हर विंडो की बैकग्राउंड स्टाइल में बदलाव किया. साथ ही, विंडो आर्ट बनाते समय ज़रूरत के हिसाब से सीएसएस का इस्तेमाल किया. ज़्यादातर बैकग्राउंड, सीएसएस ग्रेडिएंट थे, ताकि उनकी कलर वैल्यू में आसानी से बदलाव किया जा सके. इसके बाद, हमने इन पर आर्ट लेयर किया.

अन्य ईस्टर एग

निजी तौर पर जुड़ाव

हमने साइट को ज़्यादा दिलचस्प बनाने के लिए, पेज में कुछ निजी टच जोड़े हैं. पहला, किरदारों की कास्ट, जो हमारी टीम से प्रेरित थी. हमने इनऐक्टिव दिनों के लिए, पुराने स्टाइल का कर्सर भी शामिल किया है. साथ ही, फ़ैविकन के स्टाइल में भी बदलाव किए हैं.

कस्टम कर्सर स्टाइल और फ़ैविकन के विकल्प

काम के फ़ीचर

इसमें "Today पर जाएं" सुविधा भी शामिल है. इस सुविधा के लिए, इमारत की छत पर एक पक्षी दिखाया गया है. इस पक्षी पर क्लिक करने या Enter दबाने पर, आपको पेज पर महीने के मौजूदा दिन पर ले जाया जाता है, ताकि आप नए लॉन्च तुरंत देख सकें.

Designcember.com पर एक खास प्रिंट स्टाइलशीट भी है. इसमें हम खास तौर पर एक ऐसी इमेज दिखा रहे हैं जो 8.5" x 11" पेपर पर सबसे अच्छी तरह से काम करती है. इससे, आपके पास कैलेंडर को खुद प्रिंट करने का विकल्प होता है, ताकि आप पूरे साल त्योहारों का आनंद ले सकें.

कैलेंडर के डिज़ाइन का पोस्टर साइज़ वाला प्रिंट.
उना, कैलेंडर का बड़ा प्रिंट पकड़े हुए.

कुल मिलाकर, दिसंबर के पूरे महीने यूज़र इंटरफ़ेस (यूआई) के डेवलपमेंट का जश्न मनाने के लिए, मज़ेदार और मॉडर्न वेब अनुभव बनाने में काफ़ी मेहनत की गई. हमें उम्मीद है कि आपको यह पसंद आया होगा!

एनोटेशन और विज़ुअल नोट के साथ कैलेंडर के हिस्से