डिज़ाइनर पथ पर डेवलपर: कैसे करें

Question

एक डिजाइनर होने के नाते एक डेवलपर होने के नाते, मैं वास्तव में वेबसाइटों, मोबाइल ऐप आदि के लिए शीर्ष पायदान यूआई बनाने के तरीके सीखने में दिलचस्पी रखता हूं। हालांकि, मैं फ़ोटोशॉप या डिज़ाइन से संबंधित कुछ भी नहीं जानता, मेरा मुख्य कौशल HTML और सीएसएस है। ।

मुझे कहां से शुरू करना चाहिए? मैं कैसे सुंदर वेबसाइट और इंटरफेस बनाना सीखूं?

Comments

क्या आप UI डिज़ाइनर या चित्रमय डिज़ाइनर बनना चाहते हैं? आपके प्रश्न को देखते हुए, आप ग्राफिक डिज़ाइन के बारे में बात कर रहे हैं। अगर ऐसा है, तो आप इसे ग्राफिकडिजाइन.एसई में बेहतर तरीके से अपना सकते हैं ।

इन्हें भी देखें: stackoverflow.com/a/58947/568458

— user56reinstatemonica8

यह वह उत्तर है जो अन्य देखने के लिए भी इंगित करने की कोशिश कर रहा था: ग्राफिकडेसाइन.स्टैकएक्सचेंज.com

— रसेल लेगेट

Answer 1

एक पूर्व डेवलपर के रूप में, जो एक डिजाइनर बन गया है, कुछ चीजें हैं जो मैं सुझाऊंगा। और सबसे पहले, डिजाइन पर काम करना शुरू करें! यदि आपके पास क्षमता है, तो एक संरक्षक खोजें जो पहले से ही यूआई / यूएक्स डिजाइनर है और परियोजनाओं पर उनके साथ काम करना शुरू कर देता है। मैंने पाया कि मैं वास्तव में परियोजनाओं पर काम कर रहा था और उन लोगों से ज्ञान को अवशोषित कर रहा था जो वर्षों से ऐसा कर रहे हैं, जो मैंने कभी किताब पढ़ने से नहीं किया था।

कहा जा रहा है, अगर आप UI / UX / etc पर पढ़ना चाहते हैं, तो मैं इस उत्कृष्ट सूत्र पर एक नज़र डालूँगा: उपयोगकर्ता इंटरफ़ेस पुस्तक अवश्य पढ़ें? मुझे लगता है कि मेरा व्यक्तिगत पसंदीदा स्टीव क्रूग का "डोन्ट मेक मी थिंक" है - लेकिन मुझे यकीन है कि आप अंततः अपना पसंदीदा पाएंगे।

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

Comments

आपकी कही हर एक बात से मैं सहमत हूं। "डोन्ट मेक मी थिंक" एक उत्कृष्ट पुस्तक है। और यह याद रखना एक महत्वपूर्ण बिंदु है कि काफी हद तक यह वेब डिजाइनर का काम है कि वह एक उपयोगी वेबसाइट बना सके ।

— स्टीव वॉर्थम

Answer 2

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

मेरी प्रेरणाओं में से एक एक लड़का है जिसका नाम रॉबी इंगेब्रेटन है, क्योंकि वह विकास और डिजाइन दोनों को बहुत अच्छी तरह से करता है। उनकी वेबसाइट nerdplusart.com पर है ।

वहाँ कुछ चीजें हैं जो मैं उससे एक नज़र रखना चाहता हूँ ...

• मेरे (बहुत) डिजाइनरों के लिए किताबें पढ़ने की छोटी सूची
• डेवलपर्स के लिए डिजाइन बुनियादी बातों
• एक डिजाइन समस्या पर हमला करने और जीतने के लिए बाहर आने के 10 तरीके

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

Comments

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

— बेरिन लोरिट्श

Answer 3

जैसे विजुअल स्टूडियो सीखना किसी को एक अच्छा सॉफ्टवेयर डेवलपर नहीं बनाता है, न ही सिर्फ फोटोशॉप सीखना एक अच्छा यूआई डिजाइनर बनाना होगा।

यदि आप औपचारिक मार्ग पर जाना चाहते हैं, तो कला / ग्राफिक डिजाइन, मानव कारक, मनोविज्ञान, सूचना Artchitecture / पुस्तकालय विज्ञान में एक शिक्षा सभी को देखने के लिए जगह होगी।

अनौपचारिक रूप से, काम पर लग जाओ! ;) सीखने का सबसे अच्छा तरीका सिर्फ यह है।

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

व्यक्तिगत रूप से, मुझे लगता है कि सर्वश्रेष्ठ यूएक्स टीम के सदस्य वे हैं जिनमें दोनों कौशल का मिश्रण है। इसलिए, मुझे लगता है कि आप सही रास्ते पर हैं।

Answer 4

मैं Watrall & Siarto (O'Reilly द्वारा प्रकाशित) पुस्तक "हेड फर्स्ट वेब डिज़ाइन" पढ़ना शुरू करूंगा । यह बहुत ही बकवास है, पचाने में आसान है, और एक डिजाइनर के विचार पर आपको हर चीज से गुजरना पड़ता है। यह एक गहन अध्ययन नहीं है, लेकिन क्या आपको पता है कि आपको आगे कौन से सवालों का जवाब देना है। यह नेविगेशन, संगठन, लेआउट, लेखन, रंग और पहुंच क्षमता को कवर करता है।

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

Answer 5

मैं वास्तव में यूएक्स डिज़ाइनर से यूआई डेवलपर के लिए विपरीत दृष्टिकोण ले गया, हालांकि, डिज़ाइन पर उठाते समय, कुछ क्षेत्रों को शुरू करने की सिफारिश करेगा:

मैं पुस्तक "डोन्ट मेक मी थिंक!" पर एक नज़र डालूँगा। स्टीव क्रुग द्वारा , जो मुझे लगता है कि वेब पर डिजाइनिंग के लिए डिजाइन पर एक महान पुस्तक है।

SmashingMagazine.com और PSDTuts.com सहित महान वेब संसाधनों के टन हैं, जो डिजाइन और वेब तकनीक की दुनिया में महान वर्तमान लेख देते हैं।

यदि आप विशेष रूप से UX डिज़ाइनर बनने की ओर देख रहे हैं, तो मैं HCI के प्रिंसिपलों को समझने पर एक नज़र डालूंगा ।

गुड लक और खुश डिजाइनिंग!

Answer 6

मैं वास्तव में वेबसाइट, मोबाइल ऐप आदि के लिए शीर्ष पायदान यूआई बनाने के तरीके सीखने में दिलचस्पी रखता हूं।

ठीक है, यह एक व्यापक विषय है। आप "सुंदर", "शीर्ष पायदान", पेशेवर दिखने वाली "वेबसाइट" बनाना चाहते हैं। इसलिए, आपको यह जानने की जरूरत है कि लोगों को "सुंदर" के रूप में क्या कुछ दिखाई देता है, सही है? सौभाग्य से आपके लिए, सौंदर्य वास्तव में व्यक्तिपरक नहीं है।

एक सुंदर दृश्य डिजाइन की कुंजी में से एक सद्भाव है ।

सद्भाव की कमी है जो आपके डिजाइनों को शौकिया बनाती है।

और, सबसे अच्छी बात यह है कि गणित के लिए दृश्य सामंजस्य नीचे आता है। यह आंत की भावना होने के बारे में नहीं है।

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

एक वेबसाइट डिजाइन में सद्भाव कैसे एम्बेड करें

निम्नलिखित एक व्यावहारिक उदाहरण और एक अजीब सा व्यायाम है जिसे आप अभी कर सकते हैं।

एक तरीका जो मैं व्यक्तिगत रूप से पसंद करता हूं वह है कि वेबसाइट के तत्वों को सामंजस्यपूर्ण अनुपात में आकार देने के लिए एक मॉड्यूलर पैमाने का उपयोग करें। एक वेबसाइट जो आपको मॉड्यूलर स्केल जेनरेट करने में मदद कर सकती है, वह है: modularscale.com

एक मॉड्यूलर पैमाने का उपयोग करने का लाभ यह है कि यह पैमाने को एक संख्या चुनने के रूप में सरल निर्णय ले सकता है।

उदाहरण के लिए, आइए एक वेबसाइट के शीर्षकों को आकार दें (दृश्य पदानुक्रम को संप्रेषित करने के लिए)।

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

इसे देखते हुए, मैं H1 को 2.815em, H2 को 1.994em और H3 को 1.4.1emem के रूप में चुनूंगा। पहले 3 नंबर बॉडी फॉन्ट साइज से बड़ा है। आसान-पेसी, है ना? बॉडी टेक्स्ट 1em होगा (मेरे मामले में 19px)। फिर, मैं H4 को H4-H6 आकार दूंगा और उन्हें बॉडी टेक्स्ट से अलग करने के लिए कंट्रास्ट (अलग-अलग फॉन्ट वेट या स्टाइल) का उपयोग करूंगा।

तो, अब यह प्रयास करें:

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

यह बेहतर डिजाइन की दिशा में एक छोटा कदम है, लेकिन मुझे उम्मीद है कि यह आपकी मदद करेगा।

यदि आपको यह मददगार लगा, तो आप शुरुआत करने वाले वेब डिज़ाइनर जो HTML और CSS जानते हैं, के लिए मेरी 7 टिप्स की अन्य सूची पढ़ सकते हैं

पुनश्च: आपको वास्तव में बहुत कुछ करना है

जैसा दूसरों ने कहा है, पढ़ें:

• अलेक्जेंडर व्हाइट द्वारा ग्राफिक डिज़ाइन के तत्व
• रॉबर्ट ब्रायहर्स्ट द्वारा द एलीमेंट ऑफ़ टाइपोग्राफिक स्टाइल
• स्टीव क्रग द्वारा मुझे मत सोचो

इसके अलावा, यहाँ ब्लॉग और समुदायों की तरह ऑनलाइन संसाधनों की एक विशाल सूची पर नजर रखने के लिए: enboard.co/webdesign/