গ্রাফিক ডিজাইনারের সাথে কাজ করার সঠিক উপায় কী? [বন্ধ]


41

সম্প্রতি, আমরা তৈরি একটি জ্যাঙ্গো + বুটস্ট্র্যাপ অ্যাপ্লিকেশনটির জন্য ত্বক সরবরাহ করতে আমরা একটি গ্রাফিক ডিজাইনারের (ক্লায়েন্ট দ্বারা সাজানো) সাথে কাজ করেছি। ডিজাইনার কিছু প্রযুক্তিগত বৈশিষ্ট্য (ফন্টের আকার, রঙ, কয়েকটি মাত্রা ইত্যাদি) বর্ণনা করে একটি ডকুমেন্ট সহ নতুন লেআউটের একটি স্ট্যাটিক চিত্রের একটি সিরিজ সরবরাহ করেছিলেন।

এটি বাস্তবায়নে অবিশ্বাস্যভাবে সময় সাশ্রয়ী হতে দেখা গেছে। যদিও পুরো সাইটটি মূলত একটি প্রথম পৃষ্ঠা, একটি সূচক পৃষ্ঠা এবং অর্ধ ডজন বিশদ পৃষ্ঠা ছিল, তবে আমি কমপক্ষে সিএসএস এবং এইচটিএমএল পরিবর্তনগুলি প্রয়োগ করে কমপক্ষে 5 দিন ব্যয় করেছি। সুতরাং আমি একটি অঙ্গ নেভিগেশন বাইরে যান এবং এই ভুল উপায় কল করব ।

আমার প্রাথমিক পদ্ধতিটি ছিল:

  1. স্থির চিত্র এবং বর্তমান রেন্ডারিংয়ের তুলনা করুন এবং একটি পার্থক্য লক্ষ্য করুন।
  2. সিএসএস / এইচটিএমএলে কী পরিবর্তন দরকার তা অনুমান করুন
  3. যে পরিবর্তন করুন
  4. পদক্ষেপ 1 এ যান।

কিছু বিশেষ সমস্যা আমি বুঝতে পারি নি যে নকশায় 8 টি কলাম থেকে 12 এ পরিবর্তন অন্তর্ভুক্ত রয়েছে, কিছু ভুল চিত্রের ফর্ম্যাট (.png এর বিভিন্ন ব্রাউজার / প্ল্যাটফর্ম সংমিশ্রণে আলাদাভাবে রেন্ডার করতে পারে), বুটস্ট্র্যাপের স্টাইলিংকে পূর্বাবস্থায় ফেলার চেষ্টা করা ঝামেলা পিক্সেল নিখুঁত রেন্ডারিং ইত্যাদি অর্জনের জন্য সাধারণ সিএসএস রেসলিং এবং মাঝে মাঝে একটি নির্দিষ্ট আচরণ পেতে আমাকে এইচটিএমএল টেমপ্লেটগুলি পুনর্গঠন করতে হয়েছিল।

সঠিক উপায় কি?


2
আমার কাছে মনে হয় আপনার আরও ভাল ডিজাইনার দরকার। ওয়েব বোঝে এমন কেউ।
নৌকোডার

উত্তর:


15

আমার সংস্থায়, এই চাকরিতে দক্ষ কিছু লোক রয়েছে।

তারা ডিজাইনার। এবং তারা এইচটিএমএল জানেন। তারা ডিজাইনার এবং সম্মুখ-প্রান্ত ইঞ্জিনিয়ারদের মধ্যে একটি সেতু হতে পারে; যা তারা সাধারণত হয়। এইভাবে, আমাদের কেবল তাদের এইচটিএমএলকে সংহত করতে হবে।

এটি একটি কঠিন কাজ। "পিএসএল থেকে এইচটিএমএল থেকে 24 ঘন্টা" এর মতো কারণগুলির সাইটগুলি ভালভাবে কাজ করে। আমাদের সংস্থার সমাধান হ'ল লোকেরা এটি করার ক্ষেত্রে বিশেষীকরণ করা। আমাদের জন্য, এইচটিএমএল দিয়ে কাজ করা একটি হাওয়া।

সিলভার বুলেট নেই।


আকর্ষণীয় - mypsdtohtml.com । এইচটিএমএল কেমন তা ভাবুন - এবং তারা জ্যাঙ্গো টেম্পলেট ট্যাগগুলির মতো জিনিসগুলি পরিচালনা করতে পারে কিনা।
স্টিভ বেনেট

1
@ স্টিভবেনেট তাদের একটি পোর্টফোলিও রয়েছে :) আপনি কেন তাদের জাঙ্গো টেমপ্লেট ট্যাগগুলি পরিচালনা করতে চান? তাদের একটি পিএসডি রয়েছে, তারা আপনাকে একটি এইচটিএমএল দেয়। তারা কী করবে তা আমি দেখতে পাচ্ছি না। আপনি তাদের কোডটি একীভূত করার আশা করেন না, তাই না? ;)
ফ্লোরিয়ান মার্জাইন

1
হ্যাঁ, আপনি কি আপনার পোর্টফোলিওতে আপনার গড় মানের কাজ রেখেছেন ? :) যাইহোক, যদি তারা একগুচ্ছ স্থির চিত্রগুলির একগুচ্ছ স্থির এইচটিএমএল পৃষ্ঠাগুলিতে রূপান্তরিত করে ... তবে এগুলি গতিশীলভাবে উত্পন্ন পৃষ্ঠাগুলিতে পরিণত করা, এগুলিকে নষ্ট করে দেওয়া টেম্পলেটগুলিতে পরিণত করা ইত্যাদি মোটামুটি কাজ I এই প্রক্রিয়া আসলে জন্য দরকারী হবে।
স্টিভ বেনেট

1
@ স্টিভবেনেট, আমি মনে করি গতিশীল টেম্পলেট এবং পার্টিয়ালগুলিতে সম্পূর্ণরূপে নির্মিত এইচটিএমএল পৃষ্ঠাগুলি ছড়িয়ে দেওয়া তুলনামূলকভাবে সহজ হবে - এটি মূলত একটি সোজা কোড রিফ্যাক্টর। বেশিরভাগ ডিজাইনের জন্য, আমি মনে করি পিএসডিএস থেকে সরাসরি এইচটিএমএল / সিএসএস তৈরির চেয়ে প্রোগ্রামারের দিক থেকে অনেক সহজ কাজ হবে a
বেন লি

6

আমি নিশ্চিত যে সেখানে একটি "সঠিক উপায়" আছে তবে ডিজাইনারের সাথে সহযোগিতার একটি যুক্তিসঙ্গত কার্যকর উপায় হ'ল প্রথমে একটি আনস্টাইল সিস্টেম তৈরি করা যা টেম্পলেটগুলি ব্যবহার করে এবং সমস্ত টেম্পলেটগুলির সহজ বিনিময়ের জন্য অনুমতি দেয়। তারপরে, একবার আপনার কার্যকরী-তবে-স্টাইলেড (বা ন্যূনতম স্টাইলযুক্ত) ইন্টারফেস হয়ে গেলে আপনি স্টাইলিংয়ের জন্য ফলাফলগুলি ডিজাইনারের হাতে তুলে দেন।

এই ধরণের ডিজাইনের প্যাটার্নের একটি সুনির্দিষ্ট উদাহরণ হ'ল jQueryUI ( http://jqueryui.com/ )


1
হ্যাঁ, আমরা যে একটি ভুল করেছিলাম তা ছিল স্কিনের অসহায় স্তরগুলি তৈরি করা। 1 কাঁচা বুটস্ট্র্যাপ, তারপরে 2 টি ছোট ছোট টুইটস, তারপরে 3 একটি ডেমোর জন্য মোটামুটি রুক্ষ ত্বক, তারপরে 4 পেশাদার ত্বক - যা ধাপ 3 এর মতো একেবারেই কিছুই দেখেনি that সেই অতিরিক্ত সিএসএসের কিছু সত্যিই পথে যেতে শুরু করেছিল।
স্টিভ বেনেট

ভুলগুলি হয়ে যায়, কেবল নিশ্চিত হয়ে নিন যে আপনি তাদের কাছ থেকে শিখেছেন, সাধারণভাবে, মডিউলারে থাকার সময় জিনিসগুলি যতটা সম্ভব সহজ করার চেষ্টা করুন :)
ইভা

3

প্রথমত, আমাকে স্বীকার করতে হবে যে আমি এখনও পর্যন্ত ওয়েব ফ্রন্ট শেষের সাথে কাজ করি নি।

তবে আমি মনে করি চূড়ান্ত নকশাটি কেমন হওয়া উচিত তার গদ্য রচনা করা আপনার এবং ডিজাইনারের পক্ষে ভাল অনুশীলন হতে পারে। এইভাবে আপনি এটি আরও ধারাবাহিকভাবে আরও নিশ্চিত হতে পারেন, কারণ আপনি প্রতিটি পৃষ্ঠার জন্য আলাদা সারণী বর্ণনা দিলে এটি গন্ধ পাবে। গদ্য আপনার বাস্তবায়নকে আরও সহজ করে তুলতে পারে, কারণ আপনি প্রকৃতপক্ষে কোড লিখছেন যা চিত্রগুলির চেয়ে আপনার বাস্তবায়নের নিকটে রয়েছে।

পুরো পৃষ্ঠাগুলি নয়, উপাদানগুলিতে ডিজাইনারকে ফোকাস করার চেষ্টা করুন। আপনি যদি কোনও পৃষ্ঠার উপাদানগুলি সরাসরি পান তবে পুরো পৃষ্ঠায় সেগুলি রচনা করা আরও সহজ পদক্ষেপ।


"পুরো পৃষ্ঠাগুলিতে নয়, উপাদানগুলিতে ফোকাস করুন" এর জন্য +1। ভাল ধারণা.
স্টিভ বেনেট

0

আমি বেশ কয়েকজন ডিজাইনারের সাথে এইচটিএমএল / সিএসএস ডিভেলোপিং করে চলেছি এবং ইতিমধ্যে উল্লিখিত আছে, "সিলভার বুলেট" নেই। আমি যে ডিজাইনারগুলির সাথে কাজ করেছি তারা এইচটিএমএল / সিএসএস সম্পর্কে খুব বেশি কিছুই জানত না। তাদের কারও কারও ওয়েব ডিজাইনিংয়ের কিছু অভিজ্ঞতা ছিল এবং আমি অবশ্যই বলব যখন তাদের কাছে সেই জ্ঞান থাকবে তখন কোনও ইউএক্স জড়িত থাকার সময় এটি বিকাশ করা সহজ এবং "আরও ভাল ওয়েবসাইট" বিশেষত শেষ হয়।

আমি অনুমান করি যে কোনও ওয়েবসাইটের সন্ধানকারী কিছু সংস্থাগুলি কী জানেন / উপেক্ষা করবেন না তা হ'ল: যে কেউ বলতে পারেন যে সে গ্রাফিক ডিজাইনার / ওয়েবডালপ্পার / ওয়েব ডিজাইনার / ইউআই ডিজাইনার যার সাথে বেসিক জ্ঞানের (বা কোনও কিছুই নেই, হ্যাঁ আমি এটি দেখেছি)) যেখানে "সত্যিকারেরগুলি" অতিরিক্ত মাইল যেতে পারে এবং রক্ষণাবেক্ষণযোগ্য, কার্যকর ওয়েবসাইট তৈরি করতে পারে। আমি ক্লায়েন্টকে "শিক্ষিত" করার চেষ্টা করি এবং ব্যাখ্যা করি যে ওয়েব ডিজাইনিংয়ে এমন দক্ষতা জড়িত যা "কেবল মুদ্রণ" গ্রাফিক ডিজাইনারদের নেই। যখন এটি কাজ করে আমি সাধারনত ক্লায়েন্টকে ডিজাইনারের দিকে প্রেরণ করি আমি ইতিমধ্যে কাজ করেছি এবং এর সাথে একটি সাধারণ ওয়ার্কফ্লো রয়েছে।

এটি বলেছে, এটি প্রায়শই অনেক কারণে ঘটে থাকে যে আপনি গ্রাফিক দক্ষতা এবং ওয়েব ডিজাইনিং দক্ষতা নেই এমন লোকদের সাথে ওয়েবসাইট তৈরির কাজ শেষ করেন। এই পরিস্থিতিতে কোডিংয়ের সময় বাঁচানোর এবং অবিশ্বাস্য লেআউটগুলি না শেষ করার সবচেয়ে ভাল উপায়টি হ'ল ডিজাইন প্রক্রিয়াতে জড়িত হওয়া এবং ডিজাইনারের সাথে যোগাযোগ করা এবং আপনি কী করতে পারবেন / কী করতে পারবেন না এবং কী সহজ / আরও ভাল হবে তা ব্যাখ্যা করা to আপনার দৃষ্টিকোণ থেকে

যদিও এটি কিছু পরিস্থিতিতে সংগঠিত করা কঠিন হতে পারে তবে ক্লায়েন্ট এবং ডিজাইনারের কাছে এটি ব্যাখ্যা করা মূলধন যে "যদি আপনি মনে করেন যে ওয়েব ডিজাইনিং কোনও ওয়েব প্রকল্পের শীর্ষস্থান রূপ দেয় তবে আপনি সময়, অর্থ এবং শিরোনাম সাশ্রয় করেন" এবং আপনি হবেন সেই সময়ের অর্থ এবং শিরোনাম বাঁচাতে ডিজাইনিং প্রক্রিয়ায় অংশ নিয়ে খুশি।

বেশিরভাগ প্রকল্পগুলিতে আমি অনুসরণ করার চেষ্টা করি এই ওয়ার্লফ্লো:

  1. ডিজাইনার তাদের উপস্থিত না থাকলে গ্রাফিক স্ট্যান্ডার্ড তৈরি করে (আমি সাধারণত এখানে জড়িত না। আমি কেবল ওয়েব কমপ্লায়েন্ট ফন্টগুলির দিকে ডিজাইনারকে ইঙ্গিত করার চেষ্টা করি যেমন: গুগল ফন্ট)
  2. ডিজাইনার তৈরি করেছেন মকআপ। আমি এখানে জড়িত হয়ে ক্লায়েন্টটি দেখার আগে ওয়েব কমপ্লায়েন্ট লেআউট (প্রতিক্রিয়াশীলদের জন্য বিশেষ) তৈরি করতে ডিজাইনারের সাথে কাজ করি
  3. ক্লায়েন্ট মোককে বৈধতা দেয়
  4. আমি মোক আপ কোড

আমি ডিজাইনারের সাথে যোগাযোগ করার এবং কাজ করার সময়টি কোডিং প্রক্রিয়া চলাকালীন সাশ্রয় হয় এবং এটি সহজ, আরও রক্ষণাবেক্ষণযোগ্য এবং সুস্পষ্ট কোডের সাথে শেষ হয়।

এটি আপনাকে শুভ ডিজাইনার থেকে শুক্রবার সন্ধ্যায় খুব সুন্দর একটি এমকআপের সাথে কল করেছিল যা ক্লায়েন্টটি দেখেছিল এবং এখন এই বাক্যটির সাথে চায়: "আরে প্যাল, আপনি কি আমার জন্য এটি কোড করতে পারেন, গতকাল ...! " তারপরে পুরো তত্ত্বটি পৃথক হয়ে যায় এবং আপনি যদি সেই মুহুর্তে কাজের সন্ধান করেন তবে আপনি পুরো সপ্তাহের শেষের দিকে একটি মাথা ব্যথার পক্ষে ভাল।

উপসংহার:

আমি মনে করি না এটি প্রকল্প সম্পর্কিত নয় এমন কোনও কোডের তুলনায় খুব আলাদা, অন্য ব্যক্তির সাথে কাজ করার সর্বোত্তম উপায় হল তাদের সাথে যোগাযোগ করা।


-1

কোনও গ্রাফিক ডিজাইনার পুরো স্ট্যাক ওয়েব বিকাশকারী হিসাবে পরিণত হয়েছে, আমার জন্য এটি এখন পর্যন্ত সহজ অংশ। আমি দেখতে পেয়েছি যে অনেকবার ইউএক্স ডিজাইন দল এবং বিকাশকারীরা পণ্যটি বাস্তবায়নের মধ্যে একটি যোগাযোগের ব্যবধান রয়েছে। অবশ্যই, নথিগুলি সহায়তা করে, তবে কৌশল সম্পর্কে কিছু মুখের মুখোমুখি হওয়ার পরে প্রক্রিয়াটি আরও অনেক প্রাকৃতিক বোধ করতে শুরু করে। এছাড়াও, আমি জানি যে সকলের জন্য সময় খুব কম। তবে ডিজাইন এবং লেআউট পর্যায়ে জড়িত থাকার চেষ্টা করুন। ডিজাইনার এবং বিকাশকারীদের মধ্যে যোগাযোগের প্রয়োজন হলে এটি দুর্দান্তভাবে সহায়তা করতে পারে। প্রকল্পটি একীভূত দলের প্রচুর প্রচেষ্টা এবং একটি "ওয়েল, আমি আমার অংশটি শেষ করেছি, প্রাচীরের উপরে এটি যায়" দৃশ্যের কম অংশ নেয়। নকশা এবং উন্নয়ন কাজ সমান্তরালভাবে ঘটতে পেরে আমি এটি খুব উপকারী বলে মনে করেছি, প্রক্রিয়া শুরুর দিকে ডিজাইন দলকে আপনার ওয়্যারফ্রেম সরবরাহ করতে উত্সাহিত করুন। এইভাবে, আপনি এমন একটি স্টাইল পাস করতে পারেন যা পুরোপুরি বিন্যাস এবং অবস্থানের সাথে সম্পর্কিত। তারপরে, প্রতিবাদগুলি আরও সমৃদ্ধ এবং সম্পূর্ণ হয়ে ওঠে। উপস্থিতি এবং অন্যান্য শৈলীর বৈশিষ্ট্যের জন্য অন্য একটি সিএসএস পাস নিন। কমপক্ষে এটি আপনাকে একবারে সমস্ত বিষয়ে ফোকাস করা থেকে বিরত রাখে।


1
এই পোস্টটি পড়ার চেয়ে শক্ত (পাঠ্যের প্রাচীর)। আপনি এটিকে আরও ভাল আকারে সম্পাদনা করতে আপত্তি করবেন ?
gnat

-2

আমিও একই ধরণের সমস্যার মুখোমুখি হই। আমার ধারণা আছে গ্রিসমোনকি বা ট্যাম্পারমনকি জাতীয় সরঞ্জামগুলি সেই উদ্দেশ্যে ব্যবহার করা যেতে পারে। মাত্র গত সপ্তাহে, আমি এই ধারণা সম্পর্কে মন্তব্য চেয়েছিলাম: ডায়নামিক ওয়েব অ্যাপ্লিকেশনটির ইউআই আউটসোর্স কিভাবে করবেন? , কিন্তু সন্তোষজনক প্রতিক্রিয়া পাইনি।

এই সরঞ্জামগুলির সাহায্যে আপনি কোনও পৃষ্ঠায় সিএসএস, এইচটিএমএল এবং জাভাস্ক্রিপ্ট ইনজেক্ট করতে পারেন। আমার ধারণা অনুসারে, আপনি কার্যনির্বাহী সাইটের ইউআরএল ডিজাইনারকে দিয়েছেন এবং বিনিময়ে গ্রিসমোনকি স্ক্রিপ্টগুলি প্রত্যাশা করেন। তাত্ত্বিকভাবে আপনার খুব দ্রুত বিদ্যমান সাইটে এটি সংহত করতে সক্ষম হওয়া উচিত। এইভাবে, এইচটিএমএল এবং সিএসএস লিখতে এবং সাইটটিকে বাস্তবে কাজ করা ডিজাইনারের কাজ হবে। যদিও এটি ডিজাইনার পক্ষের আরও অনেক প্রোগ্রামিং দক্ষতা প্রয়োজন।

আমি জানি যে এই ধারণাটির জন্য অনেক বিস্তৃতি প্রয়োজন। তবে আমি এখনও চেষ্টা করে দেখিনি এবং অন্য কেউ এটি করছে কিনা তা আমি জানি না। বাস্তবায়নে কিছু সমস্যা হতে পারে।


3
সাধারণকরণের জন্য দুঃখিত, তবে অনেক 'গ্রাফিক ডিজাইনার' এইচটিএমএল এবং সিএসএস জানে না, তারা ফটোশপ, কোরেল / ইলাস্ট্রেটার, ইনডিজাইন, কোয়ার্ক ইত্যাদি জানে This স্থির চিত্র '। যদি তারা এইচটিএমএল এবং সিএসএস জানত তবে তারা 'ফ্রন্ট-এন্ড বিকাশকারী' হবে।
ধাস্ট

এই ক্ষেত্রে, ডিজাইনার কিছুটা সিএসএস এবং এইচটিএমএল জানার দাবি করেছিল এবং নকশার কিছু অংশ সেভাবে প্রকাশ করেছিল (যেমন, # আবসির রং) তবে বড় পার্থক্য করার পক্ষে যথেষ্ট নয়। এবং কিছু পদ (যেমন, "প্যাডিং") অস্পষ্ট হয়ে গেছে - তাদের সিএসএস অর্থ নয়।
স্টিভ বেনেট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.