साइट बनाने के लिए गणितीय दृष्टिकोण

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

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



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

गोल्डन सेक्शन ”और“ गोल्डन आयत

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




हमने पहले से ही एक विस्तृत लेख प्रकाशित किया है, "वेब डिज़ाइन में गोल्डन अनुपात का उपयोग करना", जो बताता है कि वेब डिज़ाइन में सुनहरे अनुपात का उपयोग कैसे किया जाए। आज के लेख में, हम वेब डिज़ाइन में सुनहरे आयतों का उपयोग करने का तरीका देखेंगे। एक सुनहरा आयत ऐसी है, यदि इसके किनारे 1: (वन-टू-फी) के अनुपात के अनुरूप हैं, यानी 1: 1.618।

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



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



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

संभव अनुप्रयोग

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

PSD लेआउट

हमने PSD मॉकअप के साथ एक संग्रह तैयार किया है , जिसमें गोल्डन सेक्शन और गोल्डन रेक्टैंगल के अनुसार डिज़ाइन किया गया टेम्पलेट शामिल है। बेझिझक इसका इस्तेमाल करें।

फाइबोनैचि डिज़ाइन

जैसा कि नाम से पता चलता है, फाइबोनैचि डिज़ाइन, फाइबोनैचि संख्याओं के अनुक्रम पर आधारित है। परिभाषा के अनुसार, पहले दो फाइबोनैचि संख्याएँ 0 और 1 हैं, और प्रत्येक बाद की संख्या पिछले दो के योग के बराबर है। कुछ स्रोत 0 को छोड़ देते हैं, और दो इकाइयों के साथ अनुक्रम शुरू करते हैं। तो, पहले दो फाइबोनैचि संख्याएं 0 और 1 हैं, और प्रत्येक बाद की संख्या पिछले दो के योग के बराबर है। फाइबोनैचि अनुक्रम में संख्या जितनी बड़ी होगी, उतना ही वे "सुनहरे अनुपात" के अनुसार एक-दूसरे से संबंधित होंगे। फाइबोनैचि अनुक्रम इस प्रकार है:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

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

Jürgen Schmidhuber, अपने ब्लॉग पर, फिबोनाची संख्या पद्धति का डिज़ाइन आधार देखता है। हालाँकि, यदि आप उस डिज़ाइन का अध्ययन करते हैं जो उसने बनाया है, तो आपको शायद यह कठिन और समझने और नेविगेट करने में थोड़ा मुश्किल होगा। दरअसल, आपको गणित के लिए एक रचनात्मक दृष्टिकोण लागू करना चाहिए, न कि आँख बंद करके नियमों का पालन करना चाहिए - गणित हमें ऐसे अवसर प्रदान करता है जिन्हें हम लागू कर सकते हैं।



अनुमानित और सच्चे सुनहरे सर्पिल। हरे रंग के सर्पिल का निर्माण एक वृत्त के कोनों से एक वृत्त के कोनों तक किया जाता है और लाल सर्पिल का निर्माण एक विशेष प्रकार के लॉगरिदमिक सर्पिल का उपयोग करके किया जाता है। ओवरलैप पीला है।

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

सामान्य तौर पर, एक लेआउट फिबोनाची अनुक्रम का उपयोग करके निर्माण करना काफी आसान है। आप पहले ब्लॉक के आधार के लिए एक विशिष्ट चौड़ाई चुनते हैं - उदाहरण के लिए, 90 पीएक्स। फिर, कंटेनर का आकार निर्धारित करते समय, आपको फाइबोनैचि श्रृंखला (1,2,3,5,8 ...) से ब्लॉक की संख्या से आधार की चौड़ाई को गुणा करना होगा। गणना के आधार पर, आपको ऐसे मान मिलते हैं जो आपके लेआउट के लिए ब्लॉक की चौड़ाई हैं। आइए एक उदाहरण देखें। नीचे फिबोनाची वेब डिज़ाइन के आधार पर एक न्यूनतर लेआउट है।



आप देखते हैं कि पृष्ठ तीन स्तंभों में विभाजित है। प्रत्येक स्तंभ एक फाइबोनैचि संख्या से मेल खाता है। इस डिजाइन के लिए, हमने 90 पिक्सेल चौड़े बेस का उपयोग किया। इस आधार चौड़ाई को तब कुल स्तंभ चौड़ाई प्राप्त करने के लिए फिबोनाची संख्या से गुणा किया जाता है। उदाहरण के लिए, पहले स्तंभ की चौड़ाई 180 पिक्सेल (90 x 2) है, दूसरे स्तंभ की चौड़ाई 270 पिक्सेल (90 x 3) है, और तीसरे स्तंभ की चौड़ाई 720 पिक्सेल (90 x 8) है। फ़ॉन्ट का आकार भी फिबोनाची संख्या से मेल खाता है। पृष्ठ शीर्षक का आकार 55px है; लेख का शीर्षक 34px; और मुख्य पाठ 21px है।



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

फाइबोनैचि अनुक्रम कैलकुलेटर के अनुसार, अनुक्रम होगा ...,610, 987, 1597... और, 987 एक अच्छी संख्या है जो चयनित संख्या 1000 के सबसे करीब है और आप अनुक्रम में पिछली संख्याओं का उपयोग करके अन्य ब्लॉकों के लिए चौड़ाई निर्धारित कर सकते हैं। लेकिन अगर आपका लेआउट एक निश्चित चौड़ाई है जो चौड़ाई में छोटा या बड़ा है, तो आपको अनुमानित मूल्यों का उपयोग करने की आवश्यकता होगी। रबड़ टेम्पलेट में समस्या उत्पन्न हो सकती है लेकिन निश्चित एक में नहीं, लेकिन% का उपयोग करते समय आपको बहुत अधिक स्वतंत्रता है।

संभव अनुप्रयोग

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

PSD लेआउट

हमने PSD मॉकअप के साथ एक संग्रह तैयार किया है , जिसमें फिबोनाची अनुक्रम के अनुसार डिज़ाइन किया गया टेम्पलेट शामिल है। कृपया इसे किसी भी तरह से उपयोग करने के लिए स्वतंत्र महसूस करें।

पांच तत्व, या कुंडली डिज़ाइन

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




नीचे प्रस्तुत डिज़ाइन कुंडली ज्यामितीय लेआउट पर आधारित है। यह ध्यान देने योग्य है कि चक्रों में भी गणितीय गुण हैं (मुझे सबूत नहीं मिला। लगभग। प्रति।) ।



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



निम्नलिखित आकृति में, आप देख सकते हैं कि हमारा डिज़ाइन काफी सरल है: एक हेडर, तीन कॉलम और एक पाद।

संभव अनुप्रयोग

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

PSD लेआउट

हमने PSD मॉकअप के साथ एक संग्रह तैयार किया है , जिसमें कुंडली के डिजाइन के अनुसार बनाया गया एक टेम्पलेट शामिल है।

साइनसोइडल डिज़ाइन

जब गणित की बात आती है, और आप गोल्डन रेशियो या फाइबोनैचि अनुक्रम से चिपकना नहीं चाहते हैं। आप भौतिकी, रसायन विज्ञान और अन्य विज्ञान के फॉर्मूलों के साथ प्रयोग कर सकते हैं या अपनी परियोजनाओं में सामान्य सूत्रों का उपयोग कर सकते हैं।



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



लेआउट फिर से बहुत सरल है, जिसमें एक हेडिंग, पांच कॉलम और एक पाद शामिल है। डिज़ाइन को अधिक इंटरैक्टिव बनाने के लिए आप jQuery का उपयोग कर सकते हैं।

संभव अनुप्रयोग

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

PSD लेआउट

हमने PSD मॉकअप के साथ एक संग्रह तैयार किया है , जिसमें साइनसोइडल डिज़ाइन के अनुसार डिज़ाइन किया गया टेम्पलेट शामिल है।

अन्य विधियाँ

तिहाई का नियम

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

संगीत तर्क

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

उपयोगी लिंक और संसाधन

विकिपीडिया लेख

• पवित्र ज्यामिति
• अनुपात
• पेज निर्माण के कैनन

सामग्री

• कला और वास्तुकला में गणित
• डिजाइन और दिव्य अनुपात
• बहुत बढ़िया ज्यामितीय डिजाइन , Myoats बनाएँ
• फ़ोटोग्राफ़र मैथ को प्यार करता है, उसकी छवियाँ रेखांकन करता है
• टाइपोग्राफ: स्केल और रिदम
• माइकल पॉन्कर - कला और गणित

पुस्तकें

• डिजाइन की ज्यामिति
• यूक्लिड के तत्व
• प्रकृति में गणित

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

मूल लेख अंग्रेजी में