ग्राफिक डिजाइनर के साथ काम करने का सही तरीका क्या है? [बन्द है]


41

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

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

मेरा मूल दृष्टिकोण था:

  1. स्थिर छवि और वर्तमान रेंडरिंग की तुलना करें, और अंतर देखें।
  2. लगता है कि CSS / HTML में किस परिवर्तन की आवश्यकता होगी
  3. वह परिवर्तन करें
  4. चरण 1 पर जाएं।

कुछ विशेष मुद्दे मुझे समझ में नहीं आ रहे थे कि डिजाइन में 8 कॉलम से 12 तक बदलाव शामिल था, कुछ चित्र गलत प्रारूप में प्रदान किए गए (.png के विभिन्न ब्राउज़र / प्लेटफॉर्म संयोजन पर अलग-अलग तरीके से प्रस्तुत कर सकते हैं), बूटस्ट्रैप की स्टाइल को पूर्ववत करने के लिए परेशानियां। सामान्य सीएसएस कुश्ती पिक्सेल सही प्रतिपादन आदि को प्राप्त करने के लिए और कभी-कभी मुझे एक निश्चित व्यवहार प्राप्त करने के लिए HTML टेम्पलेट्स को पुनर्गठित करना पड़ा।

सही तरीका क्या है?


2
मुझे लगता है कि आप एक बेहतर डिजाइनर की जरूरत है। कोई है जो वेब को समझता है।
बोटकोडर

जवाबों:


15

मेरी कंपनी में, इस नौकरी में कुछ लोग विशेष हैं।

वे डिजाइनर हैं। और वे HTML जानते हैं। वे डिजाइनरों और फ्रंट-एंड इंजीनियरों के बीच एक पुल हो सकते हैं; जो वे आम तौर पर कर रहे हैं। इस तरह, हमें बस उनके HTML को एकीकृत करना है।

यह एक कठिन काम है। "PSD से HTML में 24h" जैसी एक कारण साइटें अच्छी तरह से काम करती हैं। हमारी कंपनी में इसका समाधान लोगों को ऐसा करने में विशेषज्ञता हासिल करना है। हमारे लिए, HTML के साथ काम करना एक हवा है।

कोई चांदी की गोली नहीं है।


दिलचस्प - mypsdtohtml.com । आश्चर्य है कि HTML क्या है - और क्या वे Django templatetags जैसी चीजों को संभाल सकते हैं।
स्टीव बेनेट

1
@SteveBennett उनके पास एक पोर्टफोलियो है :) आप उन्हें django टेम्प्लेट टैग क्यों संभालना चाहते हैं? उनके पास एक PSD है, वे आपको एक HTML देते हैं। मैं नहीं देखता कि वे और क्या करेंगे। आप उन्हें अपने कोड को एकीकृत करने की उम्मीद नहीं करते हैं, क्या आप? ;)
फ्लोरियन मार्गाइन

1
हा, क्या आप अपना औसत गुणवत्ता कार्य अपने पोर्टफोलियो में रखते हैं? :) वैसे भी, अगर वे स्थिर छवियों के एक समूह को स्थिर HTML पृष्ठों के एक समूह में परिवर्तित कर देते हैं ... यह अभी भी गतिशील रूप से उत्पन्न पृष्ठों में बदलने के लिए काम का एक उचित सा है, उन्हें नेस्टेड टेम्पलेटों में विघटित करना आदि मुझे आश्चर्य है कि किस प्रकार की साइटें हैं यह प्रक्रिया वास्तव में उपयोगी होगी।
स्टीव बेनेट

1
@SteveBennett, मुझे लगता है कि डायनामिक टेम्प्लेट और पार्टियल में पूरी तरह से HTML पेजों को डिकम्पोज करना अपेक्षाकृत आसान होगा - यह अनिवार्य रूप से एक सीधा कोड रिफ्लेक्टर है। अधिकांश डिज़ाइनों के लिए, मुझे लगता है कि प्रोग्रामर के दृष्टिकोण से एक बहुत आसान काम होगा जो psds से सीधे html / css का निर्माण करेगा।
बेन ली

6

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

इस तरह के डिजाइन पैटर्न का एक सभ्य उदाहरण jQueryUI होगा ( http://jqueryui.com/ )


1
हाँ, एक गलती जो हमने की थी, वह खाल की बेकार परतों का निर्माण कर रही थी। 1 रॉ बूटस्ट्रैप, फिर 2 मामूली ट्वीक, फिर 3 एक डेमो के लिए एक काफी खुरदरी त्वचा, फिर 4 पेशेवर त्वचा - जो बिल्कुल कुछ नहीं की तरह दिखती थी 3. कुछ अतिरिक्त सीएसएस वास्तव में रास्ते में मिलना शुरू हुआ।
स्टीव बेनेट

गलतियाँ हो जाती हैं, बस सुनिश्चित करें कि आप उनसे सीखते हैं, सामान्य तौर पर, मॉड्यूलर रहते हुए चीजों को यथासंभव सरल रखने की कोशिश करें :)
ईवा

3

पहले, मुझे यह स्वीकार करना होगा कि मैंने अब तक वेब फ्रंट के सिरों पर कभी काम नहीं किया है।

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

डिजाइनर को घटकों पर ध्यान केंद्रित करने की कोशिश करें, न कि पूरे पृष्ठ। यदि आपको किसी पृष्ठ के घटक सही मिलते हैं, तो उन्हें पूरे पृष्ठ पर रचना करना बहुत आसान कदम है।


+1 "घटकों पर ध्यान केंद्रित करने के लिए, पूरे पृष्ठ पर नहीं"। अच्छा विचार।
स्टीव बेनेट

0

मैं कई डिजाइनरों के साथ HTML / CSS को हटा रहा हूं और जैसा कि पहले ही कहा जा चुका है, "सिल्वर बुलेट" नहीं है। मैंने जिन डिजाइनरों के साथ काम किया है, वे html / css के बारे में ज्यादा (कुछ नहीं) नहीं जानते हैं। उनमें से कुछ को वेबसाइडिंग में कुछ अनुभव था और मुझे कहना होगा कि जब उनके पास वह ज्ञान होता है, तो यह हमेशा विकसित करना आसान होता है और "बेहतर वेबसाइट" विशिष्ट रूप से जब जवाबदेही एक यूएक्स शामिल होती है।

मुझे लगता है कि एक वेबसाइट की तलाश करने वाली कुछ कंपनियों को पता नहीं है / अनदेखा है: कोई भी कह सकता है कि वह एक ग्राफिक डिजाइनर / वेबडेवलपर / वेब डिज़ाइनर / यूआई डिजाइनर है जिसमें बुनियादी ज्ञान है (या यहां तक ​​कि कोई भी नहीं, हां मैंने देखा है)। जबकि "असली वाले" अतिरिक्त मील जा सकते हैं और बनाए रखने योग्य, प्रभावी वेबसाइटों का उत्पादन कर सकते हैं। मैं क्लाइंट को "शिक्षित" करने की कोशिश करता हूं और समझाता हूं कि वेबडिजाइनिंग में ऐसे कौशल शामिल हैं जो "केवल प्रिंट" ग्राफिक डिजाइनरों के पास नहीं हैं। जब यह काम करता है तो मैं सामान्य रूप से क्लाइंट को उन डिजाइनरों की ओर भेजता हूं जिनके साथ मैंने पहले ही काम किया है और जिनके साथ एक सामान्य वर्कफ़्लो है।

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

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

यह सबसे अधिक परियोजनाओं में पालन करने की कोशिश की जाने वाली चिंता है:

  1. डिजाइनर ग्राफिक मानकों का निर्माण करता है यदि वे मौजूद नहीं होते हैं (मैं सामान्य रूप से यहां शामिल नहीं होता हूं। मैं सिर्फ डिजाइनर को वेब आज्ञाकारी फोंट पूर्व की ओर इशारा करने की कोशिश करता हूं: Google फोंट)
  2. डिजाइनर द्वारा बनाया गया मोकअप। मैं यहां शामिल हो जाता हूं और क्लाइंट के देखने से पहले वेब कंप्लेंट लेआउट (रिस्पांसिबल लोगों के लिए विशिष्ट) बनाने के लिए डिजाइनर के साथ काम करता हूं ।
  3. क्लाइंट mokup को मान्य करता है
  4. मैं मोकअप कोड करता हूं

जिस समय मैंने डिजाइनर के साथ संवाद करने और काम करने में खर्च किया है, उसे कोडिंग प्रक्रिया के दौरान बचाया जाता है और यह सरल, अधिक रखरखाव योग्य और साफ-सुथरे कोड के साथ समाप्त होता है।

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

निष्कर्ष:

मुझे नहीं लगता कि यह परियोजना से संबंधित किसी भी कोड से बहुत अलग है, अन्य लोगों के साथ काम करने का सबसे अच्छा तरीका उनके साथ संवाद करना है।


-1

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


1
यह पोस्ट पढ़ना मुश्किल है (पाठ की दीवार)। क्या आप इसे बेहतर आकार में संपादित करना चाहेंगे ?
gnat

-2

मैं इसी तरह की समस्या का सामना कर रहा हूं। मेरे पास यह विचार है कि उस उद्देश्य के लिए Greasemonkey या Tampermonkey जैसे उपकरणों का उपयोग किया जा सकता है। अभी पिछले हफ्ते, मैंने इस विचार के बारे में टिप्पणी के लिए कहा: एक गतिशील वेब एप्लिकेशन के यूआई को कैसे आउटसोर्स किया जाए? , लेकिन संतोषजनक प्रतिक्रिया नहीं मिली।

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

मुझे पता है कि इस विचार के लिए बहुत विस्तार की आवश्यकता है। लेकिन मैंने अभी तक कोशिश नहीं की है और नहीं जानता कि क्या कोई और ऐसा कर रहा है। कार्यान्वयन के साथ कुछ समस्याएं हो सकती हैं।


3
सामान्यीकृत करने के लिए क्षमा करें, लेकिन बहुत सारे 'ग्राफिक डिज़ाइनर' HTML और CSS को नहीं जानते हैं, वे फ़ोटोशॉप, कोरल / इलस्ट्रेटर, इनडिजाइन, क्वार्क आदि जानते हैं। यह ओपी द्वारा समर्थित है, जिसमें कहा गया है कि डिज़ाइन को 'श्रृंखला' के रूप में दिया गया था। स्थिर चित्रों का '। यदि वे HTML और CSS को जानते हैं, तो वे 'फ्रंट-एंड डेवलपर्स' होंगे।
Dhaust

इस मामले में, डिजाइनर ने सीएसएस और एचटीएमएल का थोड़ा सा जानने का दावा किया, और इस तरह से डिजाइन के कुछ हिस्सों को व्यक्त किया (जैसे, # रंग) लेकिन एक बड़ा अंतर बनाने के लिए पर्याप्त नहीं है। और कुछ शर्तें (उदाहरण के लिए, "पैडिंग") अस्पष्ट हो रही हैं - उनके सीएसएस अर्थ नहीं।
स्टीव बेनेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.