साइट डिजाइनर के लिए मेमो

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

मॉड्यूलर ग्रिड

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

"रबड़"

हम केवल "रबर" साइट बनाते हैं। सभी तत्वों को उपयोगकर्ता के स्क्रीन आकार और फ़ॉन्ट आकार के आधार पर स्केल किया जाता है। सभी मॉड्यूलर ग्रिड, ब्लॉक और अन्य क्षैतिज प्रतिशत में स्केल किए जाते हैं। सभी फोंट, इंडेंट, लगभग सभी वर्टिकल को ईएमआई में स्केल किया जाता है। कई मामलों में, यह सीमाओं पर भी लागू होता है। एक अपवाद केवल चित्र हो सकता है। और फिर, कई छवियों के लिए, पीएक्स में कठोर आकार एक ऊर्ध्वाधर सीमा है।

"संपीड़न-खींच"

हम "सेमी-रबर" का उपयोग करते हैं , अर्थात्। साइट एक निश्चित सीमा तक खिंची और संकुचित होती है।

मिनट

पहली बात जो हम शुरू करते हैं वह साइट का न्यूनतम संपीड़न पा रहा है। साइट की न्यूनतम चौड़ाई, निश्चित रूप से साइट के कार्यों और उसके लक्षित दर्शकों द्वारा निर्धारित की जाती है। वास्तव में, अब केवल दो न्यूनतम पैरामीटर हैं: 760 px और 990 px । पहला सबसे बड़े और प्रेरक दर्शकों (उदाहरण के लिए, जन ​​सेवाओं: मेल, खोज, समाचार, आदि) के लिए डिज़ाइन की गई कॉर्पोरेट साइटों या संसाधनों के लिए इष्टतम है। दूसरा एक छवि-निर्माण और प्रचार वेबसाइटों के लिए उपयुक्त है। हम मॉड्यूलर ग्रिड के प्रत्येक तत्व के लिए डिजाइन में न्यूनतम संपीड़न को ध्यान में रखते हैं, ताकि एक दूसरे पर तत्वों के कोई टकराव / ओवरलैप न हों।

अधिकतम

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

साइट विकास पर स्टॉक

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

फ़ॉन्ट योजना

एक नियम के रूप में, हम एक से तीन फोंट के आधार पर एक वेबसाइट डिजाइन बनाते हैं। मूल फ़ॉन्ट - साइट सामग्री का मूल फ़ॉन्ट। शीर्षकों - शीर्षकों के लिए फ़ॉन्ट। कुछ मामलों में, के लिए अतिरिक्त फ़ॉन्ट पेश किए जाते हैं:

• मेनू और नेविगेशन;
• आवंटन ब्लॉक (महत्वपूर्ण जानकारी, उद्धरण, कॉलआउट);
• छोटे पाठ के लिए, पठनीयता बढ़ाने के लिए।

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

उपयोगकर्ता प्रतिक्रिया

डिजाइनर को यह योजना बनानी चाहिए कि उपयोगकर्ता के कार्यों का जवाब देने वाले तत्वों का क्या होगा।

नेविगेशन

साइट के प्रकार और पैमाने के आधार पर, आपको नेविगेशन आइटम के कई राज्यों को दिखाने की आवश्यकता है। विशिष्ट सेट:

• सामान्य दृश्य।
• हम पर मंडराते हैं।
• हम इस खंड में हैं।
• हम इस खंड में हैं, लेकिन गहराई में चले गए हैं।
• हम मूल अनुभाग में आइटम पर होवर करते हैं।

उसी समय, स्विच और नियंत्रण सहित सभी नेविगेशन तत्वों के लिए न्यूनतम सेट, एक सामान्य और सक्रिय दृश्य है। यानी कम से कम सभी नियंत्रणों और नेविगेशनल तत्वों के लिए यह "चालू / बंद" है।

संदर्भ

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

• वैकल्पिक डेटा अधिग्रहण (RSS, PDA, मुद्रण योग्य संस्करण),
• सर्वर पर स्थित फ़ाइलों को डाउनलोड करना,
• लोकप्रिय संसाधनों (Yandex, Google, Flickr, LJ मैप सेवाओं, विकिपीडिया, आदि) के लिए अपील
• ई-मेल पते
• खोलने के फार्म
• एक नई विंडो में खुला लिंक

तब पाठ में ऐसे लिंक के लिए सबसे अधिक बार आपको एक अतिरिक्त आइकन प्रदान करने की आवश्यकता होती है जो उपयोगकर्ता को लिंक के अतिरिक्त गुणों के बारे में बताता है।

छद्म लिंक

छद्म लिंक, अर्थात ऐसे लिंक जो किसी अन्य पृष्ठ पर नहीं जाते हैं, लेकिन वर्तमान पृष्ठ पर जानकारी को पुनः लोड किए बिना खोलना / छिपाना, बिंदीदार रेखांकन द्वारा इंगित किया जाता है। अन्य सभी मामलों में, वे उन सभी चीजों से आच्छादित हैं जो नियमित लिंक के लिए संकेतित हैं।

Taba

यह नेविगेशन तत्व और नियंत्रण का कुछ मिश्रण है। उनके लिए, हम राज्यों पर विचार करते हैं:

• टैब निष्क्रिय है
• होवर (विकल्प)
• सामग्री लोडर (ऑप्ट)
• टैब सक्रिय है

कर्सर

हम होवर पर एक कर्सर प्रतिक्रिया प्रदान करते हैं। खासकर जब यह गैर-मानक नियंत्रण, जैसे कि नेविगेशन, छद्म-लिंक और टैब ( हाथ ), टूलटिप्स ( सहायता ), तत्व का आकार बदलने और खींचने की बात आती है।

मछली

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

सामग्री डिजाइन

सभी संभावित डिजाइन विकल्पों को दूर करना असंभव है। डिजाइन हमेशा साइट और सूचना के कार्यों द्वारा निर्धारित किया जाता है। मैं एक कॉर्पोरेट साइट के पाठ पृष्ठों के लिए एक विशिष्ट सूची देता हूं:

• पाठ का पैराग्राफ;
• तीन से चार स्तरों की शीर्षकों की पदानुक्रम;
• लिंक, छद्म लिंक;
• महत्वपूर्ण जानकारी को उजागर करने का एक तत्व;
• बोली;
• अव्यवस्थित सूची;
• नेस्टेड सूची;
• क्रमांकित सूची;
• पट्टी के लिए चित्रण, पाठ में;
• तालिका;
• डाउनलोड करने के लिए फ़ाइल;
• कॉल आउट;
• 2-3 कॉलम में जानकारी जमा करना (ग्रिड पर निर्भर करता है);
• सरल रूप।

ज्ञापन में, मैंने जानबूझकर डिजाइन, रंग और उपयोगिता के मुद्दों को संबोधित नहीं किया, हालांकि यह निर्विवाद है कि नियमों की उपरोक्त श्रृंखला इन क्षेत्रों पर अपनी छाप छोड़ती है। भविष्य में मैं इस सामग्री का विस्तार और पूरक करने की योजना बना रहा हूं। यह संभावना है कि हमारी चर्चा के लिए धन्यवाद))) मैं मॉड्यूलर ग्रिड, फ़ॉन्ट और रंग योजनाओं के मुद्दों पर भी विचार करना चाहूंगा। लेकिन यह पहले से ही अलग सामग्री में है। अगर कोई हो)))