एक वेबसाइट (चित्रों के साथ) कैसे डिजाइन करें

आप एक ऐसी वेबसाइट को डिजाइन करने के लिए जो पेशेवर दिखाते हैं और अच्छी तरह से प्रदर्शन करते हैं. जबकि आपकी वेबसाइट का डिजाइन अंततः आपके ऊपर है, कुछ महत्वपूर्ण चीजें हैं- और वेबसाइट बनाते समय - वेबसाइट बनाते समय.

कदम

2 का भाग 1:

अपनी वेबसाइट कैसे डिजाइन करें

1. यह निर्धारित करें कि क्या आप एक वेबसाइट निर्माता का उपयोग करना चाहते हैं. स्क्रैच से बनाई गई वेबसाइटों को HTML कोडिंग की काफी विस्तृत समझ की आवश्यकता होती है, लेकिन आप आसानी से एक मुफ्त होस्टिंग सेवा जैसे Weebly, Wix, WordPress, या Google साइट्स का उपयोग करके एक वेबसाइट बना सकते हैं. पहली बार डिजाइनरों के लिए वेबसाइट निर्माता एचटीएमएल की तुलना में उपयोग करने के लिए बहुत आसान होते हैं.

यदि आप अपनी वेबसाइट को कोड करने का निर्णय लेते हैं, तो आपको दोनों सीखना होगा एचटीएमएल तथा सीएसएस कोडन.
यदि आपकी वेबसाइट बनाने के लिए समय और ऊर्जा का निवेश करने से अपील नहीं होता है, तो आप अपनी साइट बनाने के लिए एक वेबसाइट डिज़ाइनर भी किराए पर ले सकते हैं. फ्रीलांस डिजाइनर $ 30 प्रति घंटा और $ 100 प्रति घंटे से अधिक के बीच कहीं भी खर्च कर सकते हैं.

2. अपनी साइट मानचित्र करें. इससे पहले कि आप एक वेबसाइट निर्माता भी खोलें, आपको पता होना चाहिए कि आप कितनी पृष्ठों को अपनी वेबसाइट चाहते हैं, उन पृष्ठों में से प्रत्येक की सामग्री क्या होनी चाहिए, और महत्वपूर्ण पृष्ठों के सामान्य लेआउट जैसे होम पेज और "तकरीबन" पृष्ठ.

आपकी वेबसाइट के पृष्ठों को यह देखना आसान हो सकता है कि क्या आप उनमें से प्रत्येक की किसी न किसी चित्र को आकर्षित करते हैं, बल्कि यह निर्धारित करने के बजाय कि सामग्री क्या दिखाई देनी चाहिए.

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

नेविगेशन विकल्प (ई.जी., विभिन्न पृष्ठों के लिए टैब) पृष्ठ के शीर्ष पर जाना चाहिए.

यदि आप मेनू आइकन (☰) का उपयोग करते हैं, तो यह पृष्ठ के ऊपरी-बाएं कोने में होना चाहिए.

यदि आप एक खोज बार का उपयोग करते हैं, तो यह पृष्ठ के ऊपरी-दाएं किनारे के पास होना चाहिए.

सहायक लिंक (ई).जी., के लिंक "तकरीबन" पृष्ठ या "संपर्क करें" पृष्ठ) प्रत्येक पृष्ठ के बहुत नीचे जाना चाहिए.

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

उदाहरण के लिए, यदि आप अपनी साइट के होम पेज के लिए विशेष रूप से कूल-टोन रंगों का उपयोग करते हैं, तो अगले पृष्ठ पर उज्ज्वल, जोरदार रंगों को लागू न करें.

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

5. नेविगेशन विकल्प जोड़ें. होम पेज के शीर्ष पर अपनी वेबसाइट पर महत्वपूर्ण पृष्ठों के प्रत्यक्ष लिंक रखने से पहले पहली बार आगंतुकों को सामग्री के लिए मदद मिलेगी. अधिकांश साइट निर्माता डिफ़ॉल्ट रूप से इन लिंक को जोड़ते हैं.

यह सुनिश्चित करना महत्वपूर्ण है कि आपकी वेबसाइट पर प्रत्येक पृष्ठ पृष्ठ के पते के माध्यम से केवल सुलभ होने के बजाय आपकी वेबसाइट पर विकल्पों के माध्यम से क्लिक करके सुलभ है.

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

काला, सफेद, और भूरा एक अच्छा संयोजन है यदि आप नहीं जानते कि कहां से शुरू करना है.

7. एक न्यूनतम डिजाइन का उपयोग करने पर विचार करें. Minimalism कूल-टोन रंग, सरल ग्राफिक्स, ब्लैक-ऑन-व्हाइट टेक्स्ट पेज, और जितना संभव हो उतना कम सजावट को प्रोत्साहित करता है. क्योंकि minimalism के लिए फैंसी तत्वों के रास्ते में बहुत कम आवश्यकता है, यह आपकी वेबसाइट को पेशेवर और आकर्षक बनाने के बिना पेशेवर और आकर्षक बनाने का एक आसान तरीका है.

कई वेबसाइट रचनाकारों के पास एक होगा "minimalist" थीम आप अपनी वेबसाइट सेट करते समय चुन सकते हैं.

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

8. अद्वितीय विकल्प बनाएं. सीधी रेखाएं और ग्रिड लॉक किए गए वेब तत्व सुरक्षित दांव हैं, लेकिन कुछ अद्वितीय स्टाइलिस्ट निर्णय लेते हैं, दोनों आपकी साइट पर व्यक्तित्व उधार देंगे और आपकी साइट को खड़े होने में मदद करेंगे.

वेबसाइट तत्वों को विषम रूप से रखकर या एक स्तरित उपस्थिति बनाने के लिए ओवरलैपिंग तत्वों का उपयोग करके रुझानों को हिरन न करें.

जबकि सुरुचिपूर्ण, तेज कोनों और वर्ग-बंद तत्व (जिसे भी कहा जाता है "कार्ड आधारित" प्रस्तुति) गोल, मुलायम तत्वों की तुलना में कम अनुकूल हैं.

2 का भाग 2:

वेबसाइट प्रदर्शन को अधिकतम कैसे करें

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

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

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

आम तौर पर, आप चाहते हैं कि आपकी वेबसाइट के पृष्ठों को चार सेकंड के भीतर लोड करें.

3. एक जोड़ें "संपर्क करें" पृष्ठ. आप देखेंगे कि लगभग सभी स्थापित वेबसाइटों में ए "संपर्क करें" पृष्ठ जिसमें संपर्क जानकारी है (ई.जी., एक फोन नंबर और एक ईमेल पता) - कुछ साइटों में इस पृष्ठ पर एक अंतर्निहित प्रश्न फ़ॉर्म भी है. जोड़कर "संपर्क `पृष्ठ वेबसाइट दर्शकों को आपके लिए संचार की सीधी रेखा देगा, इस प्रकार संभावित निराशाओं का समाधान जोड़ देगा.

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

एक हल्का दिल वाला त्रुटि संदेश (ई.जी., "बधाई हो - आपको हमारा त्रुटि पृष्ठ मिला है!")

साइट के होम पेज पर वापस एक लिंक

आमतौर पर देखे गए लिंक की एक सूची

आपकी वेबसाइट के लिए एक छवि या लोगो

एक वेबसाइट चरण 13 शीर्षक वाली छवि शीर्षक

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

खोज बार भी उपयोगी होते हैं जब आपके दर्शक परीक्षण-और-त्रुटि का उपयोग किए बिना सामान्य शब्द की खोज करना चाहते हैं.

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

एक कॉल टू एक्शन (ई.जी., एक बटन पर क्लिक करने के लिए या एक फॉर्म भरने के लिए)

एक नेविगेशन टूलबार या मेनू

एक आमंत्रित ग्राफिक (ई).जी., एक ठोस फोटो, एक वीडियो, या पाठ के साथ फोटो का एक छोटा समूह)

कीवर्ड आपकी वेबसाइट की सेवा, विषय, या फोकस से संबंधित

एक वेबसाइट डिजाइन एक वेबसाइट 15 शीर्षक छवि शीर्षक

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

गूगल क्रोम

फ़ायर्फ़ॉक्स

सफारी (केवल आईफोन और मैक)

माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर (केवल विंडोज़)

कई अलग-अलग एंड्रॉइड फोन (ई) पर अंतर्निहित ब्राउज़र.जी., सैमसंग गैलेक्सी, Google नेक्सस, आदि.)

8. अपनी वेबसाइट को अपडेट करना जारी रखें. समय के रूप में डिजाइन रुझान, लिंक, फोटो, अवधारणाएं, और कीवर्ड सभी बदलते हैं, इसलिए आपको अद्यतित रहने के लिए अपनी वेबसाइट पर परिवर्तन करना जारी रखना होगा. इसके लिए आपको प्रत्येक तीन महीने में कम से कम एक बार अन्य समान वेबसाइटों के साथ अपनी वेबसाइट के प्रदर्शन की जांच करने की आवश्यकता होगी (अधिमानतः अधिक बार).

मूल HTML सहायता

HTML के साथ नमूना वेबपृष्ठ

समर्थन विकीहो और सभी नमूनों को अनलॉक करें.

एचटीएमएल धोखा शीट

समर्थन विकीहो और सभी नमूनों को अनलॉक करें.

नमूना सरल वेबपेज

समर्थन विकीहो और सभी नमूनों को अनलॉक करें.

टिप्स

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

अधिकांश वेबसाइट निर्माता के पास टेम्पलेट्स का एक सेट होता है जिसका उपयोग आप अपने पसंदीदा तत्वों को जोड़ने से पहले अपनी साइट के लेआउट और डिज़ाइन को सीमेंट करने के लिए कर सकते हैं.

चेतावनी

अधिकांश साइट निर्माता स्वतंत्र हैं- हालांकि, यदि आप अपने डोमेन का उपयोग करना चाहते हैं (ई.जी., "तुम्हारा नाम.कॉम" की बजाय "तुम्हारा नाम.WordPress के.कॉम"), आपको मासिक या वार्षिक शुल्क का भुगतान करना होगा.

साहित्यिक चोरी से बचें और सभी कॉपीराइट कानूनों का निरीक्षण करें: अनुमति के बिना वेब से यादृच्छिक छवियां, या यहां तक कि संरचनात्मक तत्वों को भी न जोड़ें.

सामाजिक नेटवर्क पर साझा करें: