2026 में 20 सर्वश्रेष्ठ पोर्टफोलियो वेबसाइटें, लाइव चेक की गई और गति परीक्षित

ये हैं इस समय ऑनलाइन मौजूद 20 सबसे बेहतरीन पोर्टफ़ोलियो वेबसाइटें: डिज़ाइनर, डेवलपर, एक फ़ोटोग्राफ़र और एक आर्किटेक्ट जो अपना काम खुद प्रस्तुत करते हैं, स्टूडियो और एजेंसियाँ जो अपनी सेवाएँ बेचती हैं, और कुछ प्रोजेक्ट साइटें, जैसे एक ब्रांड बुक और एक इंडस्ट्री रिपोर्ट। यह सूची पसंद के आधार पर नहीं बनी। मैंने ये सभी 20 साइटें 23 लाइव, हाथ से परखी गई पोर्टफ़ोलियो साइटों में से बेतरतीब ढंग से चुनीं, जाँचा कि हर एक खुलती है, फ़ोन पर उसकी गति नापी और दर्ज किया कि आप अपनी साइट के लिए उसमें से क्या अपना सकते हैं। हैरानी की बात: असली विज़िटरों का पर्याप्त डेटा रखने वाली 8 साइटों में से एक भी Google के तीनों Core Web Vitals पास नहीं करती, और मोबाइल पर Lighthouse स्कोर की माध्यिका 61.5 है। यह 64 खूबसूरत वेबसाइटें, लाइव जाँची और स्पीड-टेस्ट की गईं का पोर्टफ़ोलियो वाला उप-लेख है।

इन 20 को कैसे चुना और परीक्षण किया गया

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

• पूल: मेरे द्वारा संचालित एक सुव्यवस्थित डिजाइन डेटाबेस से 23 लाइव पोर्टफोलियो वेबसाइटें। हर एक को हाथ से समीक्षा की गई है, डेस्कटॉप और मोबाइल कैप्चर हैं, और पिछले 30 दिनों में एक उपलब्धता जांच पास की है।
• ड्रॉ: एक निश्चित यादृच्छिक क्रम में 20 साइटें, किसी भी एक स्टूडियो से दो से अधिक नहीं। किसी को स्वैप की जरूरत नहीं थी। यहाँ कुछ भी मेरा क्लायंट काम नहीं है, और किसी को शामिल होने के लिए भुगतान नहीं किया गया।
• लाइव जांच: 31 अक्टूबर 2026 को एक ब्राउज़र (Chromium) में हर साइट खोली गई थी और यह उसी साइट को लोड किया था जिसके लिए इसे सूचीबद्ध किया गया था।
• लैब परीक्षण: 12 से 20 अक्टूबर 2026 के बीच प्रति साइट एक मोबाइल Lighthouse चलाया गया, प्रदर्शन स्कोर, Largest Contentful Paint और पेज वजन को रिकॉर्ड करते हुए।
• वास्तविक-आगंतुक डेटा: फोन के लिए Chrome UX Report के आंकड़े, जो Google वास्तविक Chrome उपयोगकर्ताओं से एकत्र करता है। एक पेज केवल तब दिखाई देता है जब उसके पास पर्याप्त आगंतुक होते हैं (Chrome UX Report), जो कई व्यक्तिगत पोर्टफोलियो कभी नहीं पहुँचते हैं, इसलिए 20 में से 11 "no data" दिखाते हैं।
• कोई रैंकिंग नहीं: नीचे का क्रम ड्रा क्रम है।

20 पोर्टफोलियो वेबसाइटों की गति की कीमत क्या है

Google किसी पेज को अच्छा मानता है जब उसका Largest Contentful Paint (LCP) 2.5 सेकंड या उससे कम हो, उसका Interaction to Next Paint (INP) 200 मिलीसेकंड या उससे कम हो और उसका Cumulative Layout Shift (CLS) 0.1 या उससे कम हो, पेज लोड के 75वें प्रतिशत पर मापा जाए। एक पेज Core Web Vitals को पास करता है केवल जब वह तीनों को पूरा करता है (web.dev)।

तुलना के लिए, Google की September 2026 Chrome UX Report रिलीज़ 18,376,044 origins में से अच्छे Core Web Vitals वाले origins की हिस्सेदारी 55.9% बताती है (Chrome UX Report रिलीज़ नोट्स)। यहाँ परखे गए 8 पोर्टफोलियो में से कोई भी पास नहीं होता। उन 8 में से, 7 2.5 सेकंड के LCP लक्ष्य को मिस करते हैं, 5 टैप के लिए बहुत धीमी गति से जवाब देते हैं और 2 अपना लेआउट बहुत ज्यादा हिलाते हैं।

एक हल्का पेज अच्छे स्कोर की गारंटी नहीं देता, और एक भारी पेज बुरे स्कोर की भी नहीं। Karl Barnard का पोर्टफोलियो 0.7 MB वजन का है लेकिन लैब में 37 स्कोर करता है, जहाँ टेस्ट ने स्क्रिप्ट चलाते समय 908 ms ब्लॉकिंग समय रिकॉर्ड किया। Glitch&Grit 47.4 MB वजन का है और 66 स्कोर करता है। ड्रॉ में सबसे छोटा पेज, GØDN.studio जो 0.2 MB पर है, यह भी एकमात्र है जो 90 या उससे अधिक स्कोर करता है।

लैब और असली दर्शक यहाँ भी असहमत हैं। Gionatan Nese लैब में 37 स्कोर करता है, फिर भी असली दर्शक मुख्य सामग्री को 1.2 सेकंड में देखते हैं; साइट सिर्फ responsiveness पर फेल होती है, 232 ms पर Google की 200 ms लाइन के विरुद्ध। Lighthouse एक emulated फोन पर एक रन है, और जब यह Chrome UX Report से टकराता है, web.dev कहता है कि असली दर्शक डेटा शायद अधिक सटीक दृश्य है (web.dev)।

ये 20 किससे बनाई गई हैं

Next.js 20 में से 6 चलाता है। Nuxt और Webflow प्रत्येक 2 चलाते हैं, और Framer, SvelteKit और WordPress प्रत्येक 1 चलाते हैं। बाकी 7 के लिए, HTML से स्टैक को पढ़ा नहीं जा सका। Félix Péault का SvelteKit पर फोटोग्राफी पोर्टफोलियो 1.4 MB पेज पर 76 स्कोर करता है। अगर आप अपनी साइट के लिए एक framework चुन रहे हैं, तो Astro vs Next.js trade-off को कवर करता है।

20 के पास जो common है

डेटाबेस में हर साइट को समीक्षा के दौरान स्टाइल टैग मिलते हैं, और स्टैक को live HTML से पहचाना जाता है, इसलिए ये गिनती हैं, impressions नहीं।

• बड़ा टाइप हस्ताक्षर है। 20 में से 11 एक नाम या एक headline को बहुत बड़े टाइप में सेट करते हैं, समूह में सबसे आम टैग। एक पोर्टफोलियो पर नाम अक्सर पूरी पहली स्क्रीन होती है।
• सजावट पर इंटरेक्शन। 7 को interactive टैग किया गया है, किसी भी अन्य स्टाइल से अधिक: 3D दृश्य, पृष्ठभूमि जो कर्सर पर प्रतिक्रिया करते हैं और प्रोजेक्ट रिंग जिन्हें आप पुनः व्यवस्थित कर सकते हैं। Minimal और typographic अगले आते हैं, प्रत्येक 6 के साथ।
• काम बिक्री करता है। 9 फोटोग्राफी के साथ शुरू करते हैं और 8 illustration के साथ, और उनमें से सबसे अच्छे एक टुकड़े को बड़े में दिखाते हैं बजाय दस छोटे के।
• गति उन्हें धीमा नहीं करती। 6 एक smooth-scroll या animation library जैसे GSAP या Lenis लोड करते हैं। उनका माध्य लैब स्कोर 77 है, बाकी 14 के लिए 57.5 के विरुद्ध, इसलिए इस ड्रॉ में अकेले animation धीमे स्कोर की व्याख्या नहीं करते।

20 पोर्टफोलियो वेबसाइटें

ये सभी 20 पोर्टफोलियो नीचे ड्रॉ क्रम में दिखाई देते हैं, पहले माप के साथ, फिर होमपेज कैप्चर, उधार लेने लायक पैटर्न और समझने योग्य ट्रेड-ऑफ के साथ हर एक को करीब से देखते हैं। असली विज़िटर के आंकड़े फोन से हैं; "कोई डेटा नहीं" का मतलब है कि Google के पास रिपोर्ट करने के लिए बहुत कम विज़िटर थे। अपनी साइट के लिए, पोर्टफोलियो वेब डिज़ाइन देखें।

1. Hobro Digital

नाम एक बहुत ही भारी, चौड़े सैंस सेरिफ में सफेद रंग में बैठा है, लगभग किनारे से किनारे तक धुंधले, करीब से काटे गए गहरे लाल और पीले रंग के चेहरे पर फैला हुआ है। गर्म रंग एक ही परिवार में रहता है, इसलिए सफेद अक्षर एक ही बार में पढ़े जाते हैं। नीचे एक छोटी मोनोस्पेस लाइन एजेंसी का विवरण और स्थान देती है, और भारी डिस्प्ले टाइप और हल्के टाइपराइटर शैली के टेक्स्ट के बीच का विरोध पदानुक्रम को स्पष्ट रखता है।

यह लें: अपने स्टूडियो का नाम एक ही भारी डिस्प्ले फॉन्ट में पूरी चौड़ाई पर एक धुंधली, गर्म-टोन्ड तस्वीर या वीडियो स्टिल के ऊपर रखें, और इसे एक छोटी मोनोस्पेस डिस्क्रिप्टर लाइन के साथ जोड़ी दें।

सावधान रहें: पेज औसत से भारी है और प्रयोगशाला के परिणामों में मध्यम स्कोर करता है। असली दर्शक मुख्य सामग्री के धीमे लोडिंग और टैप और क्लिक करने में सुस्त प्रतिक्रिया भी देखते हैं, जो एक पूर्ण-स्क्रीन चलती पृष्ठभूमि के साथ लिपिबद्ध एनीमेशन के अनुरूप है।

इन-हाउस डिजाइन किया गया। hobro.digital पर जाएँ।

2. Valentin Gassend

नाम काम करता है। एक भारी, लंबा संकीर्ण सैंस काले रंग में एक तंग ब्लॉक में ढेर हो जाता है, और G और अंतिम N हरे ब्रश स्क्रिप्ट में स्विच करते हैं, जो एक सादे वर्डमार्क को कुछ व्यक्तित्व देता है। पतली हरी ग्रिड लाइनें पीले गुलाबी जमीन को कोशिकाओं में विभाजित करती हैं, जबकि कोनों में छोटे अपरकेस कैप्शन बैठते हैं और केंद्र को साफ छोड़ते हैं।

यह लें: अपने नाम को एक ही भारी टाइपफेस में विशाल आकार में सेट करें, कुछ अक्षरों को एक स्क्रिप्ट फेस में स्विच करें जो एक एक्सेंट रंग में हो, और उस रंग को पीछे की पतली ग्रिड लाइनों में दोहराएँ।

सावधान रहें: प्रयोगशाला परीक्षण ने पेज को धीमा मूल्यांकन किया है इसके बावजूद कि यह हल्का वजन है, और Google के पास असली दर्शकों के बारे में बहुत कम डेटा है यह पुष्टि करने के लिए कि यह वास्तविक उपयोगकर्ताओं के लिए कैसे प्रदर्शन करता है।

इन-हाउस डिजाइन किया गया। valentingassend.com पर जाएँ।

3. Vivien's Creative

पीली रेत की एक पूर्ण-ब्लीड तस्वीर स्क्रीन भर देती है, गहरे कोट में दो पैदल यात्री रेत के विरुद्ध छोटे सेट होते हैं, पेज को स्केल और शांति देते हैं। परिचय एक हल्का, पुस्तकीय सेरिफ में ग्रे-हरी आकाश पर बैठता है, जबकि नीचे का नाम एक विशाल, भारी सफेद सैंस का उपयोग करता है जो किनारे से किनारे तक चलता है। छोटी पूंजीकृत मेनू लिंक रास्ते से बाहर रहती हैं, इसलिए छवि और नाम उद्घाटन को ले जाते हैं।

यह लें: एक पूर्ण-ब्लीड तस्वीर को एक ओवरसाइज़्ड वर्डमार्क के साथ जोड़ें जो नीचे के किनारे तक काटा गया हो और ऊपर एक छोटा सेरिफ परिचय हो, इसलिए एक छोटा स्टूडियो एक अच्छी तस्वीर और टाइपफेस की एक जोड़ी से आत्मविश्वास से पहली स्क्रीन प्राप्त करता है।

सावधान रहें: पेज हल्का है, लेकिन प्रयोगशाला परिणाम केवल मध्यम हैं, और Google के पास यह आंकने के लिए पर्याप्त असली दर्शक डेटा नहीं है कि यह वास्तविक लोगों के लिए कैसे प्रदर्शन करता है।

Christopher Doyle & Co. द्वारा बनाया गया। vivienscreative.com.au पर जाएँ।

4. Oimachi

हेडलाइन एक बड़े, सादे ग्रोटेस्क को एक ही इटैलिक सेरिफ शब्द के विरुद्ध सेट करती है, कोई भी बॉडी कॉपी पढ़ने से पहले पेज को एक स्पष्ट आवाज देती है। एक पीला-ग्रे जमीन, तंग मार्जिन और दो क्रीम गोल आकार के साथ एक बड़ा अंधेरा पैनल पैलेट को शांत रखता है, जबकि दाईं ओर पोस्टकार्ड का एक संकीर्ण कॉलम फोटोग्राफी और एक नारंगी एक्सेंट जोड़ता है। मोबाइल पर, एक ही हेडलाइन साहस से काली आइकनों के एक ग्रिड के ऊपर स्टैक करती है जो मंद निर्माण ग्रिड पर खींची गई हैं।

यह लें: एक सादे सैंस हेडलाइन को एक ही इटैलिक सेरिफ शब्द के साथ जोड़ें ताकि एक टेक्स्ट-नेतृत्व नायक को एक पहचानने योग्य आवाज दी जाए, फिर प्रक्रिया कार्य जैसे आइकन को मंद निर्माण ग्रिड पर दिखाएँ।

सावधान रहें: प्रयोगशाला परीक्षण ने पेज को धीमा और बहुत भारी पाया, GSAP गति का पता लगाया गया Webflow के साथ, और Google से असली दर्शकों के बारे में पर्याप्त डेटा नहीं था यह कहने के लिए कि यह वास्तविक उपयोगकर्ताओं के लिए कैसे प्रदर्शन करता है।

इन-हाउस डिज़ाइन किया गया। oimachi.co पर जाएँ।

5. Squarespace Foundations

एक लगभग काली पृष्ठभूमि पर एक साफ, समान-वजन वाली sans serif में एक छोटा केंद्रीय कथन है, और कुछ और इसके साथ प्रतिस्पर्धा करता है। छोटी छवि टाइलें, एक isometric झुकाव में तिरछी की गई हैं, किनारों के चारों ओर एक ढीली कक्षा की तरह बैठी हैं, एक सफेद लोगो मार्क, गर्म छाया में एक मिट्टी के बर्तन और एक हल्का धातु पट्टी को मिलाती हैं। संयम और व्यापक रिक्ति पृष्ठ को शांत और आश्वस्त महसूस कराते हैं, और तिरछी टाइलें आंदोलन का संकेत देती हैं।

इसे अपनाइए: एक sans serif में एक छोटे से वाक्य को एक सपाट गहरी पृष्ठभूमि पर कुछ तिरछी छवि टाइलों के साथ जोड़ें, जिसे केवल कुछ क्रॉप की गई छवियों और एक CSS transform की आवश्यकता है।

इससे सावधान रहें: यह एक बिक्री पृष्ठ के बजाय एक immersive brand book है, और इसकी छवियां एक बड़ी download बनाती हैं: असली आगंतुक मुख्य content और taps को respond करने के लिए Google लक्ष्यों से अधिक समय तक प्रतीक्षा करते हैं।

Resn द्वारा निर्मित। brand.squarespace.com पर जाएं।

6. AI in Design Report 2026

एक फीकी, उलटी हुई फूल की फोटोग्राफ grey और peach में एक ओर है, और दानेदार gradient cards का scatter orange, lilac और green में इसके ऊपर बैठा है। प्रत्येक card एक छोटा monospaced label रखता है जो एक नौकरी की भूमिका का नाम देता है, जो collage को शांत editorial order देता है। black central panel एक भारी white geometric sans wordmark के साथ composition को anchor करता है, और mobile view palette को एक black logo block के साथ एक उज्ज्वल orange menu bar के बगल में रखता है।

इसे अपनाइए: एक बड़ी, tightly spaced sans headline को छोटे monospaced labels के साथ जोड़ें, और hero collage को दानेदार gradient images की मुट्ठी भर को एक single tinted photograph के ऊपर layered करके बनाएं।

इससे सावधान रहें: पृष्ठ औसत से भारी है, और असली आगंतुक मुख्य content की slow loading और कुछ layout shift देखते हैं, इसलिए large collage inspect करने के लिए पहली चीज है।

++hellohello द्वारा निर्मित। stateofaidesign.com पर जाएं।

7. Julia Stafi

पृष्ठ लगभग पूरी तरह white space है, एक केंद्रीय wordmark एक high-contrast serif में और एक shorter introduction एक lighter text serif में सेट है। intro lines पृष्ठ पर एक staggered, diagonal pattern में कदम बढ़ाते हैं, decoration के बिना एक plain paragraph को movement देते हैं। इसके नीचे, एक weathered, mottled wall पर black के विरुद्ध architect का tall portrait एकमात्र strong tone जोड़ता है, तो dark image और pale page एक दूसरे को balance करते हैं।

इसे अपनाइए: अपने introduction की lines को पृष्ठ के across simple left indents के साथ stagger करें, और उन्हें एक plain white ground पर एक tall portrait के साथ जोड़ें।

इससे सावधान रहें: पृष्ठ औसत से भारी है और lab test में केवल middling है, जो एक large photograph के चारों ओर built layout के लिए फिट है, और actual users के लिए performance के बारे में कहने के लिए Google से पर्याप्त real-visitor data नहीं है।

Sasha Khudova द्वारा निर्मित। juliastafi.com पर जाएं।

8. Studio K95

एक flat, saturated blue screen को भरता है, और एक pixelated rose pale, glass-like blocks से बना हुआ बीच में बैठा है कुछ और इसके साथ competing के साथ। small project cards इसके चारों ओर rings में drift करते हैं, और red और cream posters phone view पर blue के against pop करते हैं। navigation white में tiny uppercase sans serif का use करता है, तो artwork leads करता है और interface quiet रहता है।

इसे अपनाइए: मंच के रूप में गहरे रंग का एक सपाट ब्लॉक रखिए और Rings and Spiral शैली का एक छोटा टॉगल जोड़िए, जो आपके प्रोजेक्ट थंबनेल को नए सिरे से सजा दे, ताकि वही काम अलग लेआउट में भी देखा जा सके।

इससे सावधान रहें: पृष्ठ स्वयं light है, लेकिन lab test केवल middling है और असली आगंतुक मुख्य content की slow loading और taps और clicks को slow response देखते हैं, तो 3D scene check करने के लिए पहली चीज है।

घर के अंदर डिज़ाइन किया गया। k95.it पर जाएँ।

9. Direct Design

एक चमकदार रेंडर किया गया ट्रैफिक लाइट नरम पीले ग्रेडिएंट के विरुद्ध बैठा है, जिसमें एक हरी स्माइली लैंप और एक डायमंड साइन है जो एजेंसी के दिशा विचार को एक तस्वीर में बदल देता है। हेडलाइन एक बड़े, सख्त grotesque sans का उपयोग करती है, जो सफेद पर काली है, इसलिए वह तस्वीर के बगल में तुरंत पढ़ी जाती है। एक काली गोलाकार नेविगेशन बार और एक छोटा पीला संपर्क बटन पैलेट को काले, सफेद, पीले और हरे रंग में रखते हैं।

यह उधार लें: एक ही कस्टम रेंडर की गई वस्तु को एक बहुत बड़ी हेडलाइन के साथ जोड़ें, फिर इसके रंगों को मेनू बार और बटन में ले जाएं ताकि पेज बहुत सारी संपत्ति के बिना ब्रांडेड महसूस हो।

सावधान रहें: पेज औसत से भारी है और लैब परीक्षण में केवल मध्यम है, जो रेंडर की गई इमेजरी और पाए गए एनिमेशन लाइब्रेरीज के अनुरूप है, और Google से वास्तविक आगंतुक डेटा पर्याप्त नहीं है कि यह वास्तविक उपयोगकर्ताओं के लिए कैसा प्रदर्शन करता है।

COSMOFLOW Agency द्वारा निर्मित। wearedirect.co पर जाएं।

10. House of Honey

शब्दचिन्ह एक भारी, चौड़े काले-वजन वाले sans में किनारे से किनारे तक चलता है, जिसमें एक पतला italic serif "of" विपरीतता में इसके माध्यम से काट देता है। गहरे चॉकलेट ब्राउन में एक सपाट blush गुलाबी पर सेट किया गया है, यह तुरंत पढ़ा जाता है और गर्म महसूस होता है। टैगलाइन प्रत्येक कोने में छोटे अपरकेस serif में बैठी है, और नीचे की पूर्ण-रक्त इंटीरियर फोटोग्राफ पैलेट के गुलाबी और नारंगी को दोहराती है।

यह उधार लें: एक बहुत ही भारी sans शब्दचिन्ह को एक ही नाज़ुक italic serif शब्द के साथ जोड़ें, फिर पैलेट को एक सपाट पृष्ठभूमि रंग और एक गहरी स्याही तक सीमित रखें ताकि फोटोग्राफी बाकी सब कुछ ले जाए।

सावधान रहें: पेज स्वयं हल्का है, लेकिन वास्तविक आगंतुक मुख्य सामग्री (LCP) के धीमे लोडिंग को देखते हैं, एक सामान्य लागत जब एक बड़ी पूर्ण-रक्त फोटोग्राफ स्क्रीन पर पहली चीज़ होती है, और लैब परिणाम केवल मध्यम है।

Edoardo Lunardi द्वारा बनाया गया है। houseofhoney.com पर जाएँ।

11. Félix Péault

पेज गहरे नीले से एक स्पष्ट हरे रंग में एक गर्म off-white में चलने वाले ग्रेडिएंट से थोड़ा अधिक है, और यह धोया सभी रंग को संभालता है। एक जोड़ी oversized अंधेरे अक्षर, एक F और एक P, कोनों में एक मोनोग्राम की तरह बैठे हैं, जबकि एक लंबा संघनित sans serif टैगलाइन और छोटे मेनू को ले जाता है। मोबाइल पर, लोगों की एक फोटोग्राफी ऊपर से देखी गई, लंबी छायाओं के साथ, एकमात्र छवि जोड़ती है।

यह उधार लें: अपने आद्याक्षरों को विपरीत कोनों में oversized अक्षरों के रूप में सेट करें और पृष्ठभूमि को एक नरम ग्रेडिएंट से भरें, ताकि पेज के पास किसी भारी इमेजरी के बिना एक पहचान हो।

सावधान रहें: लैब परीक्षण मध्यम बाहर आया, हालांकि पेज स्वयं हल्का है, और Google से वास्तविक आगंतुक डेटा पर्याप्त नहीं है कि यह वास्तविक उपयोगकर्ताओं के लिए कैसा प्रदर्शन करता है।

घर में ही डिज़ाइन किया गया है। felixpeault.com पर जाएँ।

12. Karl Barnard

हेडलाइन एक high-contrast serif का उपयोग करती है, जिसमें एक शब्द हरे italic में स्विच किया गया है जो सभी जोर को ले जाता है। बाकी सब कुछ शांत रहता है: गर्म off-white ग्राउंड, मंद ग्रिड लाइनें, और लेबल के लिए एक छोटा monospaced फेस। पोर्ट्रेट टाइप किए गए वर्णों से बनाया गया है, इसलिए छवि प्रकार को प्रतिध्वनित करती है और पेज एक विचार की तरह महसूस होता है न कि भागों का एक ढेर।

यह उधार लें: अपनी हेडलाइन में एक शब्द चुनें, इसे एक italic और एक ही accent रंग में सेट करें, और बाकी पैलेट को neutral टोन में छोड़ दें।

सावधान रहें: लैब परीक्षण ने पेज को धीमा माना भले ही पेज स्वयं हल्का है, और Google से वास्तविक आगंतुक डेटा पर्याप्त नहीं है कि यह वास्तविक उपयोगकर्ताओं के लिए कैसा महसूस होता है।

इन-हाउस डिज़ाइन किया गया। karlbarnard.co.za पर जाएं।

13. Gionatan Nese

एक सफेद पृष्ठ, उत्पाद की तस्वीरों, पोस्टरों और वस्तुओं का एक छोटा समूह ढीले छल्ले में व्यवस्थित है, और लगभग कुछ भी नहीं। शीर्ष पर का छोटा मेनू initials के लिए सादे sans को Creative Space के लिए एक refined serif के साथ जोड़ता है, जो हल्के भूरे रंग की tabs में सेट है, और शांत contrast देता है। अलग-अलग आकार की तस्वीरें एक दूसरे को overlap करती हैं, इसलिए आँख छल्ले के चारों ओर घूमती है, और खाली सफेद margins प्रत्येक thumbnail को एक exhibit जैसा महसूस कराते हैं।

यह बात उधार लीजिए: अपनी सबसे अच्छी project thumbnails का एक छोटा सेट सादे सफेद पृष्ठ पर एक ढीले छल्ले में arrange करें, overlaps और अलग-अलग आकारों के साथ, ताकि काम hero image या headline के बिना बोल सके।

इस बात का ध्यान रखें: lab test में पृष्ठ slow और बहुत भारी पाया गया, और असली visitors को taps पर slow responses दिखते हैं (INP), हालांकि मुख्य content काफी जल्दी आ जाता है।

इन-हाउस design किया गया। gionatannese.com पर जाएँ।

14. SUSO Digital

hero एक शांत सफेद field पर रहता है, जिसके पीछे एक पतली सफेद wireframe shape के पीछे peach, lilac और pale blue का एक नरम gradient glow है। Headline एक स्वच्छ, सम sans serif का use करता है बड़े आकार में, इसके ऊपर एक छोटा monospaced label और नीचे दो स्पष्ट pill buttons हैं। spacing उदार है, इसलिए पृष्ठ जल्दी पढ़ा जाता है और एक graphic ही decoration करता है।

यह बात उधार लीजिए: एक स्वच्छ sans serif headline को छोटे monospaced labels और buttons के साथ जोड़ें, फिर text के पीछे एक नरम gradient graphic लगाएँ ताकि पृष्ठ photography की जरूरत के बिना design किया हुआ महसूस हो।

इस बात का ध्यान रखें: पृष्ठ हल्का है, लेकिन असली visitors को देखना मिलता है कि मुख्य content कितनी जल्दी load होता है (LCP) में समस्याएँ, और hero में बड़ा gradient graphic पहली जाँच के लिए likely चीज है।

Fhoke द्वारा बनाया गया। susodigital.com पर जाएँ।

15. Nordpixel

एक dark, misty mountain photograph पूरी screen को भर देता है, जिसमें एक glass-fronted cabin निचले दाईं ओर से हल्के से रोशन है। Wordmark बीच में widely spaced bold geometric capitals में बैठता है, जो एक blue dot पर समाप्त होता है जो logo और buttons में दोहराया जाता है। एक white rounded menu bar image के ऊपर floating है, इसलिए blue accent और pale lettering सभी contrast provide करते हैं।

यह बात उधार लीजिए: एक full-bleed photograph को एक overlay से dark किया जाए, और इसके साथ एक wide-spaced bold wordmark और एक single accent colour use करें जो केवल dot और buttons के लिए हो।

इस बात का ध्यान रखें: पृष्ठ औसत से भारी है और lab test में मध्यम performance दिखता है, जो एक full-screen photograph आमतौर पर खर्च करता है, और Google से real-visitor data के लिए पर्याप्त नहीं है कि यह actual visitors के लिए कैसे perform करता है।

Michael Schnyder द्वारा बनाया गया है। nordpixel.ch पर जाएँ।

16. Alvara House

एक flat-roofed house की एक full-bleed photograph dusk पर एक विशाल wide white sans-serif wordmark के नीचे बैठती है, और शब्द HOUSE roofline के ऊपर semi-transparent से गुजरता है ताकि type और building एक image के रूप में read हों। Blue sky छोटे corner labels के लिए स्वच्छ, शांत space देता है, और windows में गर्म glow cool background के साथ contrast करता है। एक pill button और एक frosted card ही competing elements हैं।

यह बात उधार लीजिए: एक strong photograph को एक oversized wordmark के साथ जोड़ें जो subject को overlap करता है, और हर दूसरी element को छोटा और corners में tucked रखें।

इस बात का ध्यान रखें: lab test मध्यम आया हालांकि पृष्ठ हल्का है, इसलिए बड़ी hero photograph gains के लिए सबसे likely जगह है, और Google से real-visitor data के लिए यह कहने के लिए पर्याप्त नहीं है कि यह practice में कैसा महसूस होता है।

Visuvate Studio द्वारा बनाया गया। alvara.visuvate.com पर जाएँ।

17. Haoqi Wen

एक चमकदार, फूला हुआ नीली स्क्रिप्ट जिस पर hello लिखा है, यह एक हल्के आसमानी नीले क्षेत्र के ऊपर बैठा है, और यह पृष्ठ पर एकमात्र नरम वस्तु है, जबकि बाकी सब कुछ पतली ग्रिड लाइनों और छोटे क्रॉसहेयर निशानों द्वारा नियंत्रित है। भारी काली चौड़ी sans सुर्खी निचले बाएं को एंकर करती है, जबकि एक monospaced टाइपफेस नेविगेशन और परिचय को संभालता है। खेल-खेल जैसे और तकनीकी के बीच यह विरोधाभास एक डिजाइन इंजीनियर के लिए उपयुक्त है।

यह कहीं से लें: एक सामरिक, रेंडर की गई वस्तु को कड़ी हेयरलाइन ग्रिड और एक monospaced फेस के साथ छोटे पाठ के लिए जोड़ी करें, ताकि एक व्यक्तिगत साइट गर्म और सटीक दोनों लगे।

सावधान रहें: प्रयोगशाला परीक्षण से पृष्ठ धीमा और बहुत भारी निकला, और असल में विज़िटर को लोडिंग, प्रतिक्रिया और लेआउट स्थिरता में समस्याएं दिखती हैं, जो एक बड़े रेंडर किए गए हीरो और live विवरण की सामान्य कीमत है।

इन-हाउस डिजाइन किया गया। haoqi.design देखें।

18. Warm & Fuzzy

एक पूर्ण-रक्तस्राव, नरम धुंधली फिल्म स्टिल पूरी स्क्रीन भरता है, और इसके कैंडी गुलाबी, सरसों के पीले और पत्तेदार हरे रंग शुरुआत को ले जाते हैं। चमकदार बुलबुला लेटरिंग बीच में बैठता है, जबकि छोटी नेविगेशन एक सादे sans serif में रास्ते से बाहर रहती है। नीचे के किनारे पर एक साहसी grotesque टैगलाइन पृष्ठ को एंकर करती है और एक मैत्रीपूर्ण, आत्मविश्वासी टोन सेट करती है।

यह कहीं से लें: एक पूर्ण-स्क्रीन गतिशील छवि को संपूर्ण शुरुआत के रूप में उपयोग करें, फिर लोगो, कुछ छोटी लिंक और एक single साहसी पाठ की पंक्ति को ऊपर के एकमात्र फर्नीचर के रूप में रखें।

सावधान रहें: प्रयोगशाला परीक्षण औसत वापस आया भले ही पृष्ठ खुद हल्का है, इसलिए पूर्ण-स्क्रीन गतिशील background संभावित कीमत है, और Google से असल विज़िटर के लिए पर्याप्त real डेटा नहीं है यह कहने के लिए कि यह वास्तविक उपयोगकर्ताओं के लिए कैसा महसूस होता है।

Neutral Studio द्वारा निर्मित। warmnfuzzy.tv देखें।

19. Glitch&Grit

पृष्ठ स्क्रीन को बीच में विभाजित करता है, बाएं की एक समतल काली आधी जिसमें एक बड़ी ग्रे फूल की silhouette है और दाईं ओर एक थोड़ा हल्का चारकोल आधी है। दोनों के ऊपर एक huge सुर्खी है एक साहसी, open sans serif में soft lime green में, जो ग्रे और काली दोनों के खिलाफ पठनीय रहती है। नेविगेशन और स्टूडियो का नाम छोटे सफेद capitals में कोनों में बैठते हैं, इसलिए केंद्र स्पष्ट रहता है।

यह कहीं से लें: एक huge सुर्खी को एक single accent रंग के साथ एक split समतल background और एक cut-out आकार के साथ जोड़ी करें, ताकि पृष्ठ फोटोग्राफी बजट के बिना distinctive लगे।

सावधान रहें: पृष्ठ बहुत भारी है और प्रयोगशाला परीक्षण में केवल औसत है, और Google के पास यह कहने के लिए बहुत कम real विज़िटर डेटा नहीं है कि यह व्यावहारिक रूप से कैसा महसूस होता है, इसलिए बड़े visuals बचत के लिए पहली जगह है।

glitchandgrit.com देखें।

20. GØDN.studio

एक लगभग-काला क्षेत्र एक huge विवरण को भारी, tightly set grotesque capitals में रखता है, और अंतिम शब्द एक light italic serif में गिरता है जो एक बार में आवाज बदल देता है। एक grainy, speckled निशान प्रकार के पीछे static की तरह बैठता है, फोटोग्राफी के बिना depth जोड़ता है। छोटी, widely spaced monospaced labels इसके चारों ओर शांत रहती हैं, इसलिए सुर्खी पहले पढ़ी जाती है।

यह कहीं से लें: एक भारी sans सुर्खी को एक light italic serif में एक शब्द के साथ जोड़ी करें, और एक काली ground पर छोटे spaced monospaced capitals में सब कुछ else को रखें।

ध्यान रखें: यह पेज लैब में तेजी से लोड हुआ और हल्का है, जो अच्छी बात है क्योंकि यह GSAP और Three.js चलाता है, लेकिन Google के पास असली दर्शकों का पर्याप्त डेटा नहीं था कि यह वास्तविक उपयोगकर्ताओं के लिए कैसे काम करता है।

Bruno Godinho द्वारा बनाया गया। studio.godn.pt पर जाएँ।

एक सुंदर और तेज पोर्टफोलियो कैसे बनाएँ

ऊपर दिए गए 20 उदाहरण दिखाते हैं कि एक पोर्टफोलियो लगभग किसी भी तकनीक पर अलग दिख सकता है। तेज़ वाले धीमे वाले से इस बात में अलग हैं कि वे काम को कैसे लोड करते हैं।

• तीन से पाँच परियोजनाओं को सही तरीके से दिखाएँ। Nielsen Norman Group के 204 UX पेशेवरों के सर्वेक्षण में जो भर्ती करते हैं, 3 से 5 परियोजनाओं को विस्तृत केस स्टडीज के रूप में चुनने की सलाह दी गई है, गुणवत्ता मात्रा पर (NN/g)।
• इसे स्कैन करने में आसान बनाएँ। एक ही शोध में पाया गया कि भर्ती प्रबंधक बहुत ही कम एक पूरे पोर्टफोलियो को शब्द दर शब्द पढ़ते हैं (NN/g), इसलिए समस्या, आपकी भूमिका और परिणाम को वह जगह रखें जहाँ नज़र स्किम करते समय पड़ता है।
• पहली छवि जल्दी लोड करें। पहली स्क्रीन भरने वाली छवि पर कभी loading="lazy" न सेट करें, इसे पेज के HTML में रखें JavaScript से जोड़ने के बजाय, और इसे fetchpriority="high" दें (web.dev)।
• इसके नीचे सब कुछ को आलस से लोड करें, sizes के साथ सेट करें। loading="lazy" का उपयोग केवल पहली स्क्रीन के बाहर की छवियों के लिए करें, और हर छवि को width और height दें ताकि लेआउट न कूदे (web.dev)।
• कुल पर नजर रखें। 90वें प्रतिशतांक पर, साइटें पहले से ही 5 MB से अधिक छवियाँ भेजती हैं (web.dev), और इन 20 पोर्टफोलियो में से 5 का कुल वजन 10 MB से अधिक है।
• असली दर्शकों को स्वयं मापें। एक छोटा पोर्टफोलियो कभी Chrome UX Report में दिखने के लिए पर्याप्त ट्रैफिक नहीं पा सकता है, और web.dev दृढ़ता से अपनी असली-उपयोगकर्ता निगरानी सेट करने की सलाह देता है (web.dev)।

अगर आप एक पोर्टफोलियो चाहते हैं जो काम जीते न कि केवल अच्छा लगे, portfolio web design यह है कि मैं उन्हें कैसे बनाता हूँ: तेज़, खोज में मिलने योग्य और काम के चारों ओर लिखा हुआ। अगर आपकी वर्तमान साइट को केवल एक नई सूरत और तेजी से पहली स्क्रीन की जरूरत है, एक website redesign शुरुआत करने की जगह है।

लोग जो सवाल पूछते हैं

एक अच्छी पोर्टफोलियो वेबसाइट क्या बनाती है?

काम को बड़े और जल्दी दिखाएँ, इसे समझाने के लिए पर्याप्त संदर्भ के साथ। इन 20 में से, सबसे मजबूत पहली स्क्रीनें एक काम करती हैं: बहुत बड़े प्रकार में एक नाम, एक एकल परियोजना या एक एकल तस्वीर। Nielsen Norman Group का शोध वह हिस्सा जोड़ता है जो नौकरियाँ जीतता है: कुछ परियोजनाएँ केस स्टडीज के रूप में लिखी गई हैं, समाप्त छवियों की दीवार नहीं (NN/g)।

एक पोर्टफोलियो कितनी परियोजनाएँ दिखाना चाहिए?

Nielsen Norman Group 3 से 5 परियोजनाओं को विस्तृत केस स्टडीज के रूप में चुनने की सलाह देता है, मात्रा पर गुणवत्ता के साथ (NN/g)। कम, गहरी परियोजनाएँ भी पेज पर कम बड़ी छवियों का मतलब हैं।

एक पोर्टफोलियो वेबसाइट के लिए सर्वश्रेष्ठ प्लेटफॉर्म क्या है?

यह डेटा एक स्टैक को जीत नहीं देता। Next.js 20 में से 6 को चलाता है, Nuxt और Webflow प्रत्येक 2 को, और Framer, SvelteKit और WordPress प्रत्येक को 1 को, जबकि 7 उन तरीकों से बनाए गए हैं जिन्हें पता नहीं लगाया जा सकता। Next.js अकेले में यहाँ एक 79 और एक 37 दोनों हैं, इसलिए एक ऐसा चुनें जो आप अपडेट रख सकें और अपनी छवियों के लोड होने के तरीके पर प्रयास खर्च करें।

मेरी पोर्टफोलियो वेबसाइट धीमी क्यों है?

कारण आमतौर पर काम ही है: पहली स्क्रीन पर पूर्ण आकार की छवियाँ और वीडियो, या एक पहली छवि जो देर से लोड होती है क्योंकि यह आलस से लोड की जाती है या JavaScript द्वारा जोड़ी जाती है (web.dev)। इस ड्रॉ में, Google द्वारा आंके गए 8 में से 7 पोर्टफोलियो 2.5 सेकंड LCP लक्ष्य को मिस करते हैं।

मेरे पोर्टफोलियो के पास Core Web Vitals डेटा क्यों नहीं है?

Chrome UX Report में केवल पर्याप्त दर्शकों वाली पृष्ठों और साइटों को शामिल किया जाता है जो सांख्यिकीय रूप से महत्वपूर्ण नमूना बनाते हैं (Chrome UX Report)। इन 20 पोर्टफोलियो में से 11 के पास कोई वास्तविक-दर्शक डेटा ही नहीं है। इस बीच Lighthouse जैसे लैब परीक्षण का उपयोग करें, और यदि आप फील्ड नंबर चाहते हैं तो अपनी स्वयं की असली-उपयोगकर्ता निगरानी जोड़ें।

मैं अधिक सुंदर वेबसाइटें कहाँ देख सकता हूँ?

64 खूबसूरत वेबसाइटों वाला पिलर आठ श्रेणियों को एक जैसे परीक्षणों के साथ कवर करता है। रेस्तरां और फ़ूड ब्रांड्स के लिए 20 सर्वश्रेष्ठ रेस्तरां और फ़ूड वेबसाइटें देखें, और ब्राउज़ करने लायक गैलरियों के लिए वेब डिज़ाइन प्रेरणा साइटों का रेंडअप देखें।