👨 🧙🏿 🎸 साइट के लिए लेआउट कैसे बनाएं और चरम पर न रहें 🤐 🔒 👎🏿

नीचे मैं उन अनिवार्य बिंदुओं का संक्षिप्त विवरण दूंगा जिन्हें आपको अपने आगे के स्थानांतरण के लिए वेब लेआउट बनाते समय ध्यान देने की आवश्यकता है।

वे आपकी मदद करेंगे:

अपने लेआउट को गहराई से सोचें
अनावश्यक प्रश्नों से बचें
एक बेहतर परिणाम प्राप्त करें
फ्रेंड डेवलपर के साथ रहें

संपूर्ण

नामकरण लेआउट (पृष्ठ, फ़्रेम - आवश्यक) को स्पष्ट रूप से सार और उद्देश्य को बताना चाहिए और साइट या अन्य बड़ी संस्थाओं के तार्किक पृष्ठों से बंधा होना चाहिए।
(उदाहरण: "होम - टैबलेट", "मुख्य - मोबाइल", "बटन")
[स्क्रीन उदाहरण]
परतों, समूहों, घटकों और स्क्रीन के साथ काम करते समय दस्तावेज़ की संरचना का निरीक्षण करना आवश्यक है , उन्हें व्यापक नाम दें
(उदाहरण: मुख्य पृष्ठभूमि, सेटिंग्स, बटन, पंजीकरण-पृष्ठ-मोबाइल)
(खराब उदाहरण: फ्रेम 1, समूह 45, आईफोन एक्सआर)
[स्क्रीन उदाहरण]
यदि आपको एक मोबाइल संस्करण की आवश्यकता है, तो प्रत्येक स्क्रीन के लिए एक 320px चौड़ा (iPhone SE) लेआउट विकसित किया जाना चाहिए, इसके अलावा आप उच्च-रिज़ॉल्यूशन लेआउट बना सकते हैं।
[स्क्रीन उदाहरण]
आइकन (svg, ...) ब्राउज़र में डाउनलोड करने योग्य और सही ढंग से खुला होना चाहिए। Svg आर्टबोर्ड का आकार सामग्री और प्रवाह से मेल खाना चाहिए। आप व्यक्तिगत कला बोर्डों पर आइकन सेट एकत्र कर सकते हैं।
[स्क्रीन उदाहरण]
चित्र (ग्राफिक सामग्री) को अपलोड करना होगा। कम से कम 2x का संकल्प लें। पूर्व प्रसंस्करण के बिना लोड किया गया। (जैसे: गोल किनारों, पारदर्शिता, छाया)। सिवाय जहां इस तरह के प्रसंस्करण को स्पष्ट रूप से अनुरोध किया गया है।
[स्क्रीन उदाहरण]
1. सामग्री क्षेत्र के आकार और इस तथ्य को ध्यान में रखना आवश्यक है कि यह आकार संकल्प से भिन्न होता है। इस प्रकार, "लगाव बिंदु" को सोचा जाना चाहिए।
2. सामग्री छवियों को एकल छवि के रूप में अपलोड किया जाना चाहिए।
  (उदाहरण के लिए: हमारे पास [पृष्ठभूमि] के साथ एक आयताकार ब्लॉक है जो बदल जाएगा। तदनुसार, चित्र को पृष्ठभूमि के साथ पूरी तरह से अनलोड किया जाना चाहिए, जैसा कि ऊपर दिए गए उदाहरण में है।)
फ़ॉन्ट रंगों में एक अल्फा चैनल (पारदर्शिता) नहीं होना चाहिए, जब तक कि फ़ॉन्ट को विभिन्न पृष्ठभूमि (ग्रेडिएंट या चित्र) पर उपयोग नहीं किया जाता है और इसलिए उनका तर्क होना चाहिए।
परियोजना में उपयोग किए जाने वाले फोंट की एक पूरी सूची (zip.archive) सबसे पहले (सामने काम शुरू करने से पहले) प्रदान की जानी चाहिए।
कस्टम फ़ॉन्ट के समान एक सुरक्षित फ़ॉन्ट (जो सभी विंडोज, मैक, लिनक्स, आदि पर उपलब्ध है) का चयन करने के लिए भी चोट नहीं करता है, ताकि कस्टम फ़ॉन्ट लोडिंग त्रुटि के मामले में इसे प्रतिस्थापित किया जा सके
(उदाहरण: 'रोबोटो', संस-सेरिफ़)
यदि हम एक कस्टम आइकन फ़ॉन्ट के साथ काम कर रहे हैं, तो आइकन को तदनुसार नियोजित किया जाना चाहिए, अर्थात्: आपको उन्हें आधार रेखा के साथ संरेखित करने की आवश्यकता है ताकि पंक्ति में कई आइकन अलग-अलग आकार के न हों और विभिन्न इंडेंट के साथ हों। इसके अलावा, चेहरे की संख्या, चेहरे की आधार मोटाई, विस्तार का स्तर आइकन से आइकन तक संरक्षित किया जाना चाहिए, अन्यथा वे विषम दिखेंगे, जैसे कि विभिन्न फ़ॉन्ट सेट से।
व्यवहार के तर्क के लिए विशेष आवश्यकताओं की अनुपस्थिति में, उन संकल्पों में अनुकूली होने पर स्ट्रीम में ब्लॉक को अपने स्थान के अनुक्रम को बनाए रखना चाहिए जो आवश्यकताओं में परिलक्षित होते हैं।
तर्क को डिजाइन में प्रतिबिंबित किया जाना चाहिए। उदाहरण के लिए, कई समान कार्ड, जिनमें से प्रत्येक में एक अलग मात्रा में सामग्री, विभिन्न छवियों, विभिन्न राज्यों आदि को प्रदर्शित करना है, ताकि निर्भरता का पता लगाना संभव हो सके।
लेआउट के अलावा, तत्वों के संचालन का एक शाब्दिक विवरण स्वागत योग्य है।
पाठ के साथ बहते समय तत्वों के व्यवहार को निर्दिष्ट करें
(उदाहरण के लिए, एक ब्लॉक में दीर्घवृत्त के साथ लंबे पाठ की फसल, आदि)
एनिमेटेड तत्वों और तत्वों पर टिप्पणियों और विवरण (किसी भी तरह से) को छोड़ दें, जिनके व्यवहार को केवल लेआउट द्वारा निर्धारित नहीं किया जा सकता है।
पृष्ठ 404 , 500 और अन्य मानक स्क्रीन मौजूद होनी चाहिए।

गाइड और ग्रिड पर निम्नलिखित पैराग्राफ के सभी स्टाइल पेज पर तैयार किए जा सकते हैं, जहां यह सब संरचित होगा।

गाइड, जीयूआई, यूआई-किट, स्टाइल गाइड

सामान्य कार्यक्षमता से जुड़े ब्लॉकों के विवरण और लेआउट दस्तावेज़ के एक भाग में दिए गए हैं।
(उदाहरण के लिए, सभी पॉप-अप में एक सफेद पृष्ठभूमि और गोल कोनों 10px, बटन हैं ...)
टाइपोग्राफी का वर्णन किया जाना चाहिए और एक अलग आर्टबोर्ड पर अतिरिक्त रूप से खींचा जाना चाहिए।
(उदाहरण: पहले स्तर के सभी शीर्षक 40x से नीचे के xxx इंडेंट किए गए हैं। दूसरे स्तर के सभी शीर्षक ..., पैराग्राफ ... आदि)
सभी लिंक, बटन, चेकबॉक्स और अन्य इंटरैक्टिव तत्वों को निष्क्रिय, प्रेरित, सक्रिय अवस्था में खींचा जाना चाहिए। इसी तरह, सेल फोन (स्पर्श उपकरणों) के लिए राज्य होना चाहिए - निष्क्रिय, क्षण-दबाव। राज्य: (लिंक, होवर, सक्रिय, फ़ोकस, विज़िट की गई, अक्षम, प्रक्रिया)।
[चेकबॉक्स-उदाहरण]
[बटन-उदाहरण]
ब्रेडक्रंब सभी राज्यों (सक्रिय, पिछले, अवरुद्ध, ...) में खींचा जाना चाहिए और खाता लाइन ब्रेक में लेना चाहिए।
पेजिनेशन को सभी राज्यों (पहले, अंतिम, मध्यवर्ती चरण में) और चरणों की एक अलग संख्या (1, कई) के साथ अंकों की एक बड़ी (3+ वर्ण) संख्या को ध्यान में रखते हुए प्रस्तुत किया जाना चाहिए।
इनपुट्स (इनपुट फ़ील्ड्स), फॉर्म सभी राज्यों में खींचे जाने चाहिए: डिफ़ॉल्ट रूप से, फोकस के साथ, जब दबाया, लॉक किया गया, त्रुटि संदेश, शुद्धता संदेश, आदि।
[इनपुट उदाहरण]
उपयोग किए गए रंगों और रंगों की संख्या को सीमित करें
[रंग-स्तर-उदाहरण] ।
1. उपयोग किए जाने वाले सभी रंगों को एक मार्गदर्शक बनाया जाना चाहिए।
  (लेआउट में किसी भी नए रंग को गलती माना जाएगा और गाइड के निकटतम के बराबर होगा)
2. रंग जो कार्यक्षमता के मामले में अद्वितीय हैं, उन्हें वर्णित किया जाना चाहिए या सार से बंधा होना चाहिए।
  (उदाहरण के लिए, एक एकल नारंगी पृष्ठभूमि के साथ एक हेलोवीन स्टॉक विजेट: नारंगी हेलोवीन शेयरों के लिए रंग है)

जाल

इंडेंट और एलिमेंट साइज का एक ही मान होना चाहिए।
(2px, 4px, 8px, 5px ...)
[स्क्रीन उदाहरण]
[के बाद उदाहरण]
ग्रिड (यदि कोई हो) का वर्णन किया जाना चाहिए और विरोधाभास नहीं
लेआउट। कॉलमों की आकार, उनकी मात्रा इत्यादि।
प्रस्तुत किए गए प्रत्येक पर कंटेनर के आयामों का वर्णन किया जाना चाहिए
अनुमति देता है।
ब्रेकप्वाइंट के मूल्यों का वर्णन किया जाना चाहिए।
धारा में ब्लॉक के ऊर्ध्वाधर पैडिंग को मानकीकृत किया जाना चाहिए। (टाइपोग्राफी के समान)

पत्र, मेल, मेलिंग सूची, मेल

पत्र डिजाइन को यथासंभव सरल बनाना आवश्यक है । यह समझना महत्वपूर्ण है कि लेआउट और <तालिका> टैग कैसे काम करते हैं । पत्रों को टेबल पर रखा गया है। (प्रदर्शन: ब्लॉक, फ्लेक्स, स्थिति निरपेक्ष - पत्र में लागू नहीं किया जा सकता है)। अनुकूली धारा में अपनी स्थिति बदलने के बिना ब्लॉक के रूप में सरल है। वांछनीय साधारण "रबर" और शैलियों का 1 सेट
पत्र में कस्टम फोंट का उपयोग न करें

बेशक, यदि आप "ड्रिबल" के लिए आकर्षित करते हैं, आदि। आप वह कर सकते हैं जो आप चाहते हैं, लेकिन एक गंभीर परियोजना के लिए, ये आइटम 100% आवश्यक हैं।

साइट के लिए लेआउट कैसे बनाएं और चरम पर न रहें

संपूर्ण

गाइड, जीयूआई, यूआई-किट, स्टाइल गाइड

जाल

पत्र, मेल, मेलिंग सूची, मेल

More articles: