आप अच्छी दिखने वाली वेबसाइटों को डिजाइन करना कैसे सीख सकते हैं? [बन्द है]


32

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

किसी को भी किसी भी वेबसाइटों / किताबें पता है कि मैं देख सकते हैं या किसी को भी गैर-बच्चा वेब डिजाइन की मूल बातें पर कोई सुझाव मिला है?


1
उन साइटों पर निर्मित कोड को देखें जिनके पास अच्छा डिज़ाइन है। आपको उनकी स्टाइल शीट देखने में सक्षम होना चाहिए और यह जानना चाहिए कि उन्हें HTML से कैसे जोड़ा जाता है।
— ChrisF

1
यह मेरे लिए थोड़ा विषय लगता है। शायद वेबमास्टर्स के लिए अधिक उपयुक्त है?
— फिल मंडर

9
क्रिस, वह डिजाइन के बारे में पूछता है और आप कोड को देखने का सुझाव देते हैं? मुझे अनुमान है, अपने एक प्रोग्रामर।
— क्रेग

1
@Phil - वेबमास्टर्स वेबसाइट डिज़ाइन नहीं करते हैं। निश्चित रूप से उस साइट के लिए उपयुक्त नहीं है।
— चार्ल्स बॉयंग

जवाबों:


10

आपके पास करने के लिए कुछ चीजें हैं।

सुझाव:

फ़ोटोशॉप का उपयोग करना सीखें। (विशेष रूप से, लेयर स्टाइल्स बेहतरीन हैं। बस ध्यान दें कि CSS2 में उन्हें फिर से लागू करना मुश्किल हो सकता है) यह अच्छा मॉकअप बनाने की दिशा में एक लंबा रास्ता तय करता है।

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

उन साइटों को खोजें जो आपको परेशान करती हैं और विचार करें कि यह क्या बेहतर बना सकती है। उत्पाद विज्ञापनों को भी देखें। खाद्य डिब्बाबंदी। अखबार के विज्ञापन। जो तुम कहो।

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

उपकरण:

(फोटोशॉप एक व्यक्तिगत पसंदीदा है। पेंट.नेट एक अच्छा विंडोज विकल्प है, लेकिन यह उतना शक्तिशाली नहीं है।)

नाथन स्मिथ का 960 ग्रिड सिस्टम । इसमें कई मुख्यधारा के ग्राफिक्स कार्यक्रमों के लिए टेम्पलेट हैं। इसकी जांच - पड़ताल करें।

संदर्भ:

इन साइटों में से कुछ को देखें: (मैंने और देखा है, मैं जोड़ने की कोशिश करूंगा क्योंकि मैं उनके पार आता हूं)


@Moshe - चूंकि आपने अपनी साइट पर टिप्पणियों के लिए कहा था - वास्तव में बहुत अच्छा लग रहा है, केवल एक समस्या जो मुझे त्वरित नज़र से है वह है लाल रंग; यह मेरे लिए थोड़ा बहुत परेशान करने वाला है।
— एडन मौर

@ ईडन मौर - देखने के लिए धन्यवाद। मैं तुम्हारे बारे में सुनता हूँ लाल। मैंने इसे इतना उज्ज्वल बना दिया क्योंकि यह लाल रंग की राजनीतिक रंग योजना को फिट करता है। मैं गहरे रंग का था, यह मैरून की तरह अधिक बेड होगा, जो वहां नहीं है। इनपुट के लिए धन्यवाद! मैं इसकी सराहना करता हूं।
— मोशे

फ़ोटोशॉप के एक नि: शुल्क विकल्प के रूप में आप जीआईएमपी की कोशिश कर सकते हैं, ट्यूटोरियल देखें: tuxradar.com/gimp
— kasterma

@Kasterma - हाँ, GIMP भी काम करता है, लेकिन फ़ोटोशॉप एक उद्योग मानक है। जीआईएमपी अत्यधिक जटिल है। मैंने वह भी इस्तेमाल किया है।
— मोशे

960 ग्रिड चट्टानों!
— जेपी अलीोटो

10

व्यावहारिक पक्ष

निश्चित रूप से डिजाइन के कुछ व्यावहारिक चरण-दर-चरण पहलू हैं जिन्हें सीखना महत्वपूर्ण है। सब कुछ व्यक्तिपरक नहीं है।

   • वेब डिज़ाइन ट्यूटोरियल: http://webdesign.tutsplus.com/

   • फ़ोटोशॉप ट्यूटोरियल: http://psd.tutsplus.com/

   ट्यूटोरियल के टन: Lynda

प्रेरणा स्त्रोत

   • वेबसाइट: बेजोड़ शैली

   • वेबसाइट: अब्दुजीदो

   • पुस्तक: ऑनलाइन सफलता के लिए दिशानिर्देश

   • वेबसाइट: पत्रिका मुंहतोड़

डिजाइन कौशल

सामान्य डिजाइन

   • बुक: ग्राफिक डिज़ाइन: द न्यू बेसिक्स

   • पुस्तक: ग्राफिक डिज़ाइन, संदर्भित

   • पीडीएफ: द बिग फोर: कंट्रास्ट, रिपीटिशन, एलाइनमेंट, प्रॉक्सिमिटी

टाइपोग्राफी

   • पुस्तक: प्रकार के साथ सोच

   • बुक: द एलिमेंट्स ऑफ़ टाइपोग्राफिक स्टाइल

   • लेख: http://en.wikipedia.org/wiki/Typography

   • लेख: http://www.informationities.jp/en/the-web-is-all-about-typography.per Bio /

ख़ाका

   • पुस्तक: लेआउट कार्यपुस्तिका

रंग

   • पुस्तक: रंग डिजाइन कार्यपुस्तिका

   • बुक: कलर हार्मोनी वर्कबुक

डिजाइन का दर्शन

"सबसे गंभीर गलती डिजाइन को देख रही है जैसा कि आप इस प्रक्रिया के अंत में कुछ गड़बड़ करते हैं, जैसा कि यह 'दिन एक' मुद्दा और सब कुछ का हिस्सा समझने के लिए विरोध है।" -टॉम पीटर्स

 

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

 

"सच में सुरुचिपूर्ण डिजाइन एक साधारण, अछूता रूप में शीर्ष-कार्यक्षमता को शामिल करता है।" -दविद लुईस

"अच्छा डिजाइन अच्छा व्यवसाय है।" -तोमास जे। वाटसन जूनियर।

अधिक उद्धरण


इस टिप्पणी को
— बचाएं

6

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


बहुत बढ़िया बिंदु। UX बहुत महत्वपूर्ण है।
— मोशे

7
DMMT है, जैसा कि मैं इसे समझता हूं, वेब डिज़ाइन बुक की तुलना में अधिक प्रयोज्य पुस्तक।
— फिशटोस्टर

3
@Fishtoaster हाँ, लेकिन प्रयोज्यता और डिज़ाइन आपस में जुड़े हुए हैं, क्योंकि अच्छा प्रयोज्य वेबसाइट के डिज़ाइन को परिभाषित करता है।
— अंधेरी

1

विज्ञापन पर ओगिल्वी: यह पुस्तक ग्राफिक डिजाइन के कुछ मूल सिद्धांतों के साथ-साथ किसी भी तरह के उड़ता, विज्ञापन आदि को बनाने में बहुत सामान्य ज्ञान को शामिल करती है, भले ही यह www युग से पहले लिखा गया हो।

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


1

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

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


यह पुस्तक यूनि में मेरे मानव-कम्प्यूटर इंटरेक्शन पाठ्यक्रम में महत्वपूर्ण पठन सामग्री थी।
— रिचर्ड

1

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.