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

समस्या का बयान

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

तकनीकी बिंदु

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

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

साइट की सीमाओं को परिभाषित करना

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

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

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

पुनश्च। नीचे दिए गए सभी स्क्रीनशॉट क्लिक करने योग्य हैं।

स्केच

• साइट पर उत्पादों को विज्ञापित करने के लिए, छवि ब्लॉकों के साथ एक छोटे स्लाइडर का उपयोग करना उचित है जो उपयोगकर्ता को मुख्य वर्गों से परिचित कराएगा।
• कंपनी के लक्षित दर्शकों में मुख्य रूप से 25-50 वर्ष की आयु के पुरुष हैं जो अपनी निर्माण कंपनियों के लिए मिट्टी के आपूर्तिकर्ताओं की तलाश कर रहे हैं, इसलिए साइट को सम्मानजनक (दर्शकों का उच्च मिलन), आधुनिक और आसान (दर्शकों के युवा भाग के लिए) देखना चाहिए। हम आधार के लिए हल्के रंगों का उपयोग करेंगे और कंट्रास्ट के लिए नारंगी के साथ थोड़ा गहरा और साइट के महत्वपूर्ण तत्वों पर ध्यान केंद्रित करेंगे।

नीचे पंक्ति: रंग योजना, शैली के मूल तत्वों को परिभाषित किया गया है, जारी है।

स्थान ब्लॉक करें

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

नीचे पंक्ति: हमारी साइट थोड़ी रसदार और अधिक गंभीर हो गई है - खराब नहीं।

समाधान खोजे

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

निचला रेखा: साइट में सम्मान का अभाव है, आपको स्टाइल निर्धारित करने की आवश्यकता है।

समाधान नंबर 2 के लिए खोजें

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

नीचे पंक्ति: हम निश्चित रूप से वांछित परिणाम से संपर्क किया। डिजाइन परिपक्व और बेहतर महसूस किया।

मुख्य मेनू

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

निचला रेखा: साइट हेडर सभी मामलों में बेहतर हो गया है। हमने अंत में मुख्य मेनू के स्थान पर फैसला किया।

दो रंग का लोगो

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

नीचे पंक्ति: अच्छा काम - लोगो उज्जवल हो गया है, और टोपी और भी अधिक संक्षिप्त है।

मुख्य मेनू शोधन

• हम हेडर की बाईं सीमा पर मुख्य मेनू आइटम को संरेखित करते हैं (लोगो के समान), और दाईं ओर हमारे पास खोज बार के लिए खाली स्थान है। वर्तमान मेनू अनुभाग के लिए एक लाल रंग का प्रयोग करें और होवर प्रभाव के लिए हल्के भूरे रंग का।
• तेज कोनों के साथ लाल रंग के साथ रनिंग लाइन लौटें।

नीचे पंक्ति: मुख्य मेनू अधिक कुशलता से अपने ब्लॉक के स्थान का उपयोग करता है, जो हेडर में ऑर्डर जोड़ता है।

शैली को परिभाषित किया

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

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

स्कोरर और डिलीवरी

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

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

समाचार फ़ीड और पाद

• हम नवीनतम कंपनी समाचार के साथ ब्लॉक के अनुमानित स्थान का अनुमान लगाते हैं।
• हम पाद लेख की कथित सीमाओं को आकर्षित करते हैं।

निचला रेखा: साइट ऊंचाई में बढ़ गई है, और अंधेरे पाद लेख नीचे को भारी बना देता है, जिससे डिजाइन पूरी तरह से संतुलित हो जाता है (अंधेरे पाद लेख के साथ गहरे हेडर संतुलन)।

समाचार फ़ीड ट्यूनिंग

• हल्के पृष्ठभूमि के कारण डिलीवरी वाले ग्राफिक्स अधिक विपरीत हो जाते हैं।
• स्लाइडर के साथ समानता से, हम समाचार फ़ीड से अतिरिक्त फ़ील्ड निकालते हैं।

निचला रेखा: अब साइट के ऊपर और नीचे एक ही शैली में बने हैं।

सुझाव स्लाइडर

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

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

परिष्कृत सुझाव

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

निचला रेखा: साइट का निचला आधा हिस्सा समाप्त नज़र आता है।

अन्त

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

वैकल्पिक रंग योजनाएं

पुनश्च।

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