মকআপস: কোডিং বনাম অঙ্কন?

Question

এটি ওয়েব ডিজাইন সম্পর্কে নয় তবে সাধারণভাবে ইন্টারফেস ডিজাইনের বিষয়ে। ইন্টারফেস মকআপগুলি কোড করা বা জিআইএমপি, ফটোশপ ইত্যাদির মতো গ্রাফিক্স প্রোগ্রামে সেগুলিকে "অঙ্কন" করা আরও ভাল?

Comments

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

— হান্না

এটি সম্পূর্ণরূপে প্রকল্পের উপর নির্ভরশীল। সর্বজনীন 'সেরা' উত্তর নেই।

— DA01

Answer 1

নিজেকে এই প্রশ্নগুলি জিজ্ঞাসা করুন:

• কোডিং করে 30 মিনিটের মধ্যে আপনি কতগুলি ইউআই লেআউট / বিকল্পগুলি আবিষ্কার করতে পারবেন? স্কেচিং করে আপনি কয়টি অন্বেষণ করতে পারবেন?

• আপনি প্রথমবারেই ঠিক কতবার ইউআই ডিজাইন পান? খুব ঘন ঘন না হলে, কোডেড মকআপের তুলনায় স্কেচ পরিবর্তন করা কত দ্রুত / সহজ?

• আপনি কেবল রঙের হেক্স / আরজিবি কোডটি দেখে কেবল তাত্ক্ষণিকভাবে চিহ্নিত করতে পারবেন (কেবল একটি বলপার্ক অনুমান নয়, তবে সঠিক ছায়া / রঙ)? আপনি যখন নিজের মনে কোনও রঙের চিত্র চিত্রণ করেন, আপনি কি তাৎক্ষণিকভাবে হেক্সে অনুবাদ করতে পারবেন? প্রকৃত রঙ চয়নকারী ব্যবহার করে আপনি কীভাবে হেক্স কোড টাইপ করে কোনও রঙিন স্কিম চয়ন করতে পারেন?

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

একইভাবে, আপনি যদি প্রথমে আপনার ইউআই ডিজাইন না করে সরাসরি কোডে ঝাঁপিয়ে পড়ে থাকেন তবে ফলাফলগুলি খুব সুন্দর হবে না, যদি কেবল অন্ধভাবে কোডিং করে কোনও ভাল নকশা নিখুঁত করা অবাস্তব।

Comments

ওপিকে ডাব্লুওয়াইএসআইওয়াইওয়াইজি কোড সম্পাদক ব্যবহার করার বিষয়ে কথা বলা যেতে পারে, এটির সাহায্যে আপনি রং বাছাই করতে পারেন বা অবজেক্টগুলিকে "আঁকতে "ও পারেন ...

— জ্যাকজয়ে

আসলে, ইউআই ডিজাইন না করে কোডিং আগে বৈধ কৌশল valid এটি অবশ্যই, যদি "কোডিং" এর অর্থ ইউআই বা ইউএক্স অংশগুলি না হয় :)। বেশিরভাগ এপিআই এবং লাইব্রেরিগুলি ইউআইকে বিবেচনায় না নিয়ে বাস্তবে নকশাকৃত করা হয় - এটি কেবল অবৈধ হবে।

— thebodzio

@ তবুও, আপনি একটি জলপ্রপাতের পদ্ধতিটি পিক করছেন। যা ঠিক আছে, তবে আজকাল প্রবণতাটি চটজলদি হয়ে যাওয়া, যাতে সম্ভবত আপনি প্রথম দিন থেকেই কোডটিতে কাজ করছেন।

— DA01

@ ডিএ0১: আপনি প্রথম দিন থেকেই কোডে কাজ করছেন তবে আপনি এখনও একটি শীর্ষ-ডাউন পদ্ধতি প্রয়োগ করছেন। চটপটে এমন কিছু নেই যা বলে যে আপনি কোডিংয়ের আগে আপনার ডেটা আর্কিটেকচারের পরিকল্পনা করতে বা ইউআই-ফার্স্ট সংজ্ঞায়িত করতে পারবেন না (যা আমার মনে হয় বেশিরভাগ চতুর সংস্থাগুলি ইউএমএল, বর্গ চিত্রগুলি ইত্যাদির চেয়ে বেশি পছন্দ করে)।

— লস ম্যাজেস্টে

@ থেবাডজিও: হ্যাঁ, অবশ্যই উদ্বেগের বিষয়টি আলাদা করা। তবে আমি ব্যাকএন্ড কোডিংয়ের কথা উল্লেখ করছি না। যখন আমি প্রশ্নের ডিজাইনিং অংশের শর্তে কোডিং বলি (প্রোগ্রামিং উপমাটি আমি বিন্দুটি ব্যাখ্যা করার জন্য ব্যবহার করি না - আমি জানি, কিছুটা বিভ্রান্তি) তখন আমি মকআপকে কোডিং (সিএসএস + এইচটিএমএল বা আপনার ইউআই ভাষা যাই হোক না কেন) বলতে চাইছি )।

— লস ম্যাজেস্টে

Answer 2

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

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

Comments

"এবং আপনি পরিচিত এবং" কোড "স্তরে" কাজ করতে অভ্যস্ত -> ইউআই / ইউএক্স টিম কোড স্তরে কাজ করতে পারে এটি গুরুত্বপূর্ণ । প্রতিটি ডিজাইনারকে কোডার হতে হবে না, তবে দলে তাদের নকশা করা সমস্ত কিছু তৈরি করতে এবং ইঞ্জিনিয়ারিংকে ভিজ্যুয়াল ডিজাইনের মতোই বুঝতে সক্ষম হতে হবে।

— DA01

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

— thebodzio

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

— DA01

WYSIWYG 'ভিজ্যুয়াল চিন্তাভাবনা' সুবিধার্থে নয়। এটি এমন লোকদের দেওয়ার জন্য যা কিছু পাশাপাশি কিছু খোঁড়াছুড়ি শিখতে চায় না। ;) বাধা হিসাবে, তারা মাধ্যমটি সংজ্ঞায়িত করে। এমন একটি আর্কিটেক্ট যা দুর্দান্ত ছবি আঁকতে পারে তবে বোঝা এবং স্প্যানগুলির বুনিয়াদি বুঝতে পারে না অনেকাংশে আবার ধরে রাখা হয় ... কারণ তাদের আঁকানো কিছুই আসলে তৈরি করা যায় না।

— DA01

(এবং আমার মতামত অনেকটা ইউএক্স দলের সাথে বা তাদের সাথে কাজ করে গঠন করা হয়েছে যা তারা কীভাবে সামনে আসবে তা কীভাবে তৈরি করতে হবে সে সম্পর্কে কোনও ধারণা নেই। তারা বেশিরভাগ সময় উদ্ভাবন করে না ... বরং কেবল অর্ধ-চিন্তার নকশা তৈরি করে) সমাধানগুলি যা বাস্তবায়নের ক্ষেত্রে কার্যকর নয়, টাইমলাইন, ব্যবহারকারী বা বাজেট [যা সমস্ত অতিরিক্ত বাধা যা 'দেয়াল' হওয়ার পরিবর্তে ডিজাইনের সমাধানকে সংজ্ঞায়িত করতে সহায়তা করে]] পিএস: ভাল আলোচনা!

— DA01

Answer 3

ইউআই ডিজাইনের জন্য আমার বিভিন্ন উদ্দেশ্য সহ তিনটি ধাপ রয়েছে:

1. Sketching। প্রথমত, কী কী উপাদান থাকবে এবং কীভাবে তারা একসাথে ফিট হবে সে সম্পর্কে আপনি প্রাথমিক ধারণাটি পেতে চান। এই পর্যায়ে যে কোনও সূক্ষ্ম বিবরণ বা নান্দনিক পারফেকশনিজম হ'ল একটি বিভ্রান্তি। আমি একটি হোয়াইটবোর্ড এবং ফ্যাট ইরেজেবল পেন ব্যবহার করি যাতে খুব বেশি বিশদ দ্বারা বিভ্রান্ত হওয়া এবং বিভিন্ন ধারণার বোঝা স্ক্রিবল করা সহজ এবং যে কোনও সময়ে আবার শুরু করা অসম্ভব। আমি এমন লোকদের কথা শুনেছি যারা কেবল ছোট পোস্ট-এর নোটগুলিতে স্কেচ করে বা কেবল তাদের অফ-হ্যান্ড ব্যবহার করে (যেমন আপনি ডান হাতে থাকলে বাম হাত) নান্দনিকতার দিকে কোনও মনোযোগ না দেওয়ার জন্য এবং বাধ্যতামূলকভাবে 100% মনোযোগ দিতে তাদের বাধ্য করতে ধারণা এবং ফাংশন উপর। (চিত্রটি আমার নয়, ফ্রাঙ্ক প্রেন্ডেগাস্টের থেকে )

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

3. (3!) বাস্তবায়ন হচ্ছে। অবশেষে, আপনি জিনিসটি বাস্তবায়ন করেছেন এবং এমনটি করার লক্ষ্যে লক্ষ্য রেখেছেন যা আপনাকে তাড়াতাড়ি এবং প্রায়শই বেশি প্রতিক্রিয়া পেতে দেয়।

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

Answer 4

এই প্রশ্নটি কিছুটা অস্পষ্ট এবং যেমন উত্তর রয়েছে।

তার উপরে, প্রকল্পগুলি বন্যভাবে পরিবর্তিত হবে, দলগুলিও।

বলেছিল, 'সেরা' নেই। এটি একটি ওয়ার্কফ্লোতে সমস্ত সরঞ্জাম ব্যবহার করার বিষয়ে যা আপনার এবং আপনার দলের পক্ষে সর্বাধিক অর্থবোধ তৈরি করে।

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

1. স্কেচ। পেন্সিল + কাগজ Whiteboards। পুনরুক্তি। যতটা পারছেন দলের সদস্যদের সাথে কাজ করুন।
2. লো-ফাই মক-আপস। পিএসডি হতে পারে, ভিজিও হতে পারে। কাগজ হতে পারে। এগুলি ব্যবহারকারী পরীক্ষা করুন।
3. প্রোটোটাইপগুলি তৈরি করতে পান। আপনি এখানে কোডিংয়ের মাধ্যমে যতটা করতে পারেন তেমন কাজ শুরু করতে চান। আপনার প্রয়োজন মতো ফটোশপটিতে ঝাঁপুন এবং এটিকে আপনার যত তাড়াতাড়ি সম্ভব কোডের বাইরে নিয়ে আসুন। ব্যবহারকারীর পরীক্ষা / পুনরাবৃত্তি চালিয়ে যান।

Answer 5

আমার জন্য যা কাজ করে তা হ'ল পিক্সেল-নিখুঁত বিন্যাস তৈরি না করার উপর জোর দেওয়া একটি প্রোগ্রাম ব্যবহার করে মকআপগুলি তৈরি করা। আমার জন্য এটি বালাসামিক মকআপস, যা আপনি http://www.balsamiq.com/products/mockups এ দেখতে পারেন