KomuraSoft কেন Digital Agency design system দিয়ে ওয়েবসাইট বানায় — সস্তা ও মান একসঙ্গে চলতে পারে

ওয়েবসাইট নির্মাণের কোটেশনে বড় অংশ জুড়ে থাকে ডিজাইন তৈরির ঘণ্টা। KomuraSoft এই ধাপকে জাপানের Digital Agency-র প্রকাশিত design system-কে ভিত্তি করে অনেক ছোট করে, খরচ চাপা রেখে মান স্থিতিশীল রাখে।

“সস্তা ওয়েবসাইট” শুনলে বেশিরভাগ মানুষ ভাবেন, কোথাও না কোথাও মান ছাড় দেওয়া হচ্ছে। বাস্তবে, দাম কমাতে ক্লায়েন্ট ইন্টারভিউ বাদ দেওয়া, বা শুধু টেমপ্লেটে লেখা ভরে দেওয়া, প্রায়ই কোম্পানি কী করে তা বোঝা যায় না এমন সাইট তৈরি করে।

KomuraSoft-এর ওয়েবসাইট নির্মাণ (website development)-এর দাম কম থাকার কারণ সেই পথ নয়, ডিজাইন ধাপের standardization। এই নিবন্ধ ক্রমে বলে: যে Digital Agency design system-কে আমরা ভিত্তি করি তা কী, আসলে কী এবং কীভাবে ব্যবহার হয়, সস্তা কেন হয়, মান কেন পড়ে না, এবং কোন ধরনের প্রজেক্টে এই পদ্ধতি মানায় না।

এর পর থেকে আমাদের সার্ভিসের নাম “ওয়েবসাইট নির্মাণ”, আর সাধারণ কাজকে website development বলব।

১. Digital Agency design system কী

Digital Agency design system হলো সেই ডিজাইনের standard specification যা Digital Agency সরকারি সেবার ওয়েবসাইট ও অ্যাপের জন্য প্রকাশ করেছে। Primary source অফিসিয়াল সাইটে আছে।

• অফিসিয়াল সাইট: Digital Agency Design System β
• লাইসেন্স ও ব্যবহারের শর্ত: Usage notes

মোটাদাগে, নিচের জিনিসগুলো সাজিয়ে define করা আছে।

গুরুত্বপূর্ণ কথা, এটি প্রকাশিত লাইসেন্স শর্তে সাধারণের জন্য বিতরণ করা হয়, এবং বেসরকারি সাইটেও ব্যবহার করা যায়। সরকারি পদ্ধতির সাইট সবার ব্যবহারযোগ্য হতে হয় — বয়স, পরিবেশ, IT-তে অভ্যস্ততা যা-ই হোক — তাই কনট্রাস্ট, টাইপ সাইজ ও চালানোর সহজতা যাচাই করে ডিজাইন করা। সেই accumulated কাজ বেসরকারি কোম্পানির সাইটেও যেমন আছে তেমন ভিত্তি হতে পারে।

লাইসেন্সের নির্দিষ্ট শর্ত

“Open license” বলে ছেড়ে দিলে ব্যবহারিক সিদ্ধান্ত হয় না। অফিসিয়াল Usage notes-এ, যা বিতরণ করা হচ্ছে তার ধরন অনুযায়ী লাইসেন্স আলাদা করে দেখানো আছে।

ব্যবহারিক দিক থেকে দুটো কথা। এক, Figma data বা code snippets edit/modify করে নিজের সাইটে বসালে attribution চাওয়া হয় না। কোম্পানি সাইট বানাতে এই design system প্রায় এই রূপেই ব্যবহার হয়। দুই, edit/modify করা জিনিসকে “যেন Digital Agency তৈরি করেছে” এমনভাবে publicly ব্যবহার করা যাবে না — এটা স্পষ্ট লেখা আছে।

মনে রাখবেন, ব্যবহার করলে Digital Agency-র সার্টিফিকেশন বা অনুমোদন মেলে না। আমরাও “Digital Agency certified” নই — প্রকাশিত স্ট্যান্ডার্ড বেসরকারি ক্ষেত্রে প্রয়োগ করছি, এই অবস্থান। উপরের লাইসেন্স শর্ত এই নিবন্ধ লেখার সময়কার, তাই ব্যবহার করার সিদ্ধান্তের আগে অফিসিয়াল পৃষ্ঠায় সর্বশেষ শর্ত অবশ্যই দেখুন।

এই নিবন্ধের জ্ঞান মানচিত্র

এই নিবন্ধ KomuraSoft-এর ওয়েবসাইট নির্মাণ কেন জাপানের ডিজিটাল এজেন্সির ডিজাইন সিস্টেমকে ভিত্তি করে, তা ডিজাইন টোকেন · কম্পোনেন্ট · টেমপ্লেট—এই তিন স্তর কীভাবে নেওয়া হয়, সেই দিক থেকে ব্যাখ্যা করে। জাপানের ডিজিটাল এজেন্সির ডিজাইন সিস্টেম Figma ডিজাইন ডেটায় CC BY 4.0 (সঙ্গে দেওয়া আইকনে Apache License 2.0), কোড স্নিপেটে MIT License প্রয়োগ করে; সম্পাদনা · প্রক্রিয়াজাত করে নিজের সাইটে ঢোকানো ব্যবহারের ধরনে উৎস উল্লেখ লাগে না। স্ট্যান্ডার্ড কম্পোনেন্ট ব্যবহার করায় একাধিক ডিজাইন প্রস্তাব দেখানো বা সংশোধনের রাউন্ডের মতো খরচসাপেক্ষ ধাপ সংকুচিত হয়, অন্যদিকে সরকারি সেবায় যাচাই হওয়া অ্যাক্সেসিবিলিটির মাত্রা সরাসরি গুণমানের স্থিতিশীলতায় নিয়ে যায়। তবে যেসব ব্র্যান্ড সাইটে ভিজ্যুয়াল জগত ফুটিয়ে তোলাই মূল্যের কেন্দ্র, সেই ধরনের কাজে এই পদ্ধতি উপযুক্ত নয় বলে ধরা হয়।

flowchart LR
    accTitle: জাপানের ডিজিটাল এজেন্সির ডিজাইন সিস্টেমকে ভিত্তি করে ওয়েবসাইট নির্মাণের জ্ঞান মানচিত্র
    accDescr: KomuraSoft-এর ওয়েবসাইট নির্মাণ জাপানের ডিজিটাল এজেন্সির ডিজাইন সিস্টেমের ডিজাইন টোকেন · কম্পোনেন্ট · টেমপ্লেটকে ভিত্তি করে, Figma ডেটা · আইকন · কোড স্নিপেটের নিজ নিজ লাইসেন্সের সঙ্গে মিলিয়ে ডিজাইন ধাপের খরচ কমিয়ে অ্যাক্সেসিবিলিটি নিশ্চিত করে, অন্যদিকে জটিল ব্র্যান্ড ভিজ্যুয়াল লাগে এমন কাজে উপযুক্ত নয়—তা দেখানো চিত্র
    digital_agency_design_system["Digital Agency ডিজাইন সিস্টেম"]
    website_development["ওয়েবসাইট তৈরি"]
    design_token["ডিজাইন টোকেন"]
    design_system_component["ডিজাইন সিস্টেমের কম্পোনেন্ট"]
    web_accessibility["ওয়েব অ্যাক্সেসিবিলিটি"]
    digital_agency_copyright_policy["Digital Agency ওয়েবসাইটের কপিরাইট নীতি"]
    cc_by_4_license["CC BY 4.0"]
    apache_license_2["Apache License 2.0"]
    mit_license["MIT License"]
    site_template["সাইট টেমপ্লেট"]
    design_process_cost["ডিজাইন তৈরির পর্যায়ের খরচ"]
    brand_visual_design["ব্র্যান্ড এক্সপ্রেশনকেন্দ্রিক ভিজ্যুয়াল ডিজাইন"]
    website_development -.->|"ব্যবহার করে"| digital_agency_design_system
    digital_agency_design_system -->|"ব্যবহার করে"| design_token
    digital_agency_design_system -->|"ব্যবহার করে"| design_system_component
    design_system_component -->|"ব্যবহার করে"| web_accessibility
    digital_agency_design_system -->|"ব্যবহার করে"| digital_agency_copyright_policy
    digital_agency_design_system -->|"ব্যবহার করে"| cc_by_4_license
    digital_agency_design_system -->|"ব্যবহার করে"| apache_license_2
    digital_agency_design_system -->|"ব্যবহার করে"| mit_license
    website_development -.->|"ব্যবহার করে"| design_token
    website_development -.->|"ব্যবহার করে"| design_system_component
    website_development -.->|"ব্যবহার করে"| site_template
    site_template -->|"পূর্বশর্ত"| design_token
    site_template -->|"পূর্বশর্ত"| design_system_component
    digital_agency_design_system -.->|"কমায়"| design_process_cost
    digital_agency_design_system -.->|"ব্যবহার নিরুৎসাহিত"| brand_visual_design

চিত্রে, টানা রেখা সবসময় সত্য এমন সম্পর্ককে এবং ভাঙা রেখা শর্তসাপেক্ষ সম্পর্ককে নির্দেশ করে (শর্তগুলো বিস্তারিত পাতায় প্রতিটি সম্পর্কের ব্যাখ্যায় আছে)। সম্পর্কের সম্পূর্ণ তালিকা (মোট 15, প্রমাণ ও নিশ্চয়তার মাত্রাসহ) এবং প্রধান ধারণাগুলোর সংজ্ঞা জ্ঞান মানচিত্রের বিস্তারিত পাতায় সংগ্রহ করা আছে (জাপানি ভাষায়)। তথ্য: JSON-LD / Turtle

২. “ভিত্তি করা” মানে আসলে কী করা হয়

“Design system-কে ভিত্তি করা” বলা সহজ, কিন্তু implementation কতটা খুঁটিনাটি হবে তার অনেক স্তর আছে। আমাদের ক্ষেত্রে তিনটি layer-এ নিই। এই সাইট (comcomponent.com) নিজেই এই গঠন।

এখানে ইচ্ছা করে যা করা হয় না তাও লিখে রাখি। অফিসিয়ালি বিতরণ করা কম্পোনেন্ট কোড হুবহু এনে external dependency হিসেবে রাখি না। কোম্পানি সাইটের জন্য দরকারি অংশ সীমিত; full set নিলে লোড ভারী হয়, আর upstream আপডেট follow করার maintenance খরচ আসে। দরকারি অংশই স্পেক অনুযায়ী নিজের implementation হিসেবে রাখা — এই সিদ্ধান্ত।

এই গঠনের প্রভাব দেখা যায় পৃষ্ঠা যোগ করার সময়। নতুন সার্ভিস পৃষ্ঠা একটা যোগ করলেও বাটনের আকার, হেডিংয়ের স্তর, spacing আগের পৃষ্ঠার সঙ্গে মেলে, তাই প্রতিবার “ডিজাইন কী হবে” ভাবতে হয় না।

৩. সস্তা কেন হয় — কোটেশন থেকে ডিজাইন ধাপ সরে যায়

সাধারণ website development-এর কোটেশনে ডিজাইন-সম্পর্কিত আইটেমের অংশ বেশ বড়। ছোট ও মাঝারি ব্যবসার জন্য ওয়েবসাইট নির্মাণের খরচ — দামের quick-reference ও কোটেশন পড়ার উপায় নিবন্ধের quick-reference-এ, নিজস্ব ডিজাইনসহ সেটআপ 300,000–1,000,000 ইয়েনের ব্যান্ডে পড়ে; সেই ব্যান্ডের ভিতরে ডিজাইন ধাপ যা জমায়, তা প্রায় এই কাজগুলো।

কোটেশনের “ডিজাইন প্যাকেজ” কী কী ঢাকে, কোম্পানিভেদে আলাদা, তাই তুলনা করতে এই granularity পর্যন্ত খুলিয়ে নেওয়াই নিশ্চিত (এই পড়ার ধরন খরচের নিবন্ধে বিস্তারিত)।

Design system-কে ভিত্তি করলে এই কাঠামো বদলে যায়।

• রং, টাইপ সাইজ, spacing, বাটন ইত্যাদির baseline শুরু থেকেই ঠিক
• “একাধিক ডিজাইন প্রস্তাব দেখিয়ে বেছে নিয়ে সংশোধন” রাউন্ড নীতিগতভাবে থাকে না
• ডিজাইনারের intuition-এর ওপর নির্ভর করা সিদ্ধান্ত কমে, তাই rework কম হয়

অর্থাৎ ছাড়ে সস্তা নয় — কাজ নিজেই কমে বলে সস্তা করা যায়। বেঁচে যাওয়া ঘণ্টা যায় সেই অংশে যা সত্যি ফলের সঙ্গে যুক্ত — কোম্পানি কী করে তা বোঝানো গঠন, কপি, inquiry flow-এর ডিজাইন। যে সাইট বোঝায় না, তার কারণ সাধারণত ডিজাইন নয় গঠন — যেমন inquiry না আসা সাইটে প্রথমে ঠিক করার তিনটি জায়গা নিবন্ধে লেখা।

৪. মান কেন পড়ে না — বরং স্থিতিশীল হয়

“ডিজাইন বাদ দিলে মান পড়ে” — এই অনুভূতি শূন্য থেকে ডিজাইন বানানোকে ধরে নেয়। Standardized design system ব্যবহার করলে কথা উল্টে যায়।

প্রথম, accessibility। Digital Agency design system-এর অংশ রঙের কনট্রাস্ট, টাইপ সাইজ, ফোকাস কতটা দেখা যায়, টাচ কত সহজ — এসব খেয়াল রেখে ডিজাইন করা। প্রতিটি প্রজেক্টের কাস্টম ডিজাইনে এই স্তর প্রতিবার নিশ্চিত করতে গেলে যাচাইয়ের ঘণ্টা নিজেই লাগে। যাচাই-করা অংশ ব্যবহার করলে ফল হিসেবে মান স্থিতিশীল হয়।

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

তৃতীয়, consistency। পৃষ্ঠাভেদে বাটনের আকার বা হেডিংয়ের নিয়ম নড়লে শুধু তাতেই পড়া কঠিন হয়। Design system অনুসরণ করলে পরে পৃষ্ঠা যোগ করলেও গঠন ও tone ভাঙে না।

এই সাইট নিজেই এই design system-কে ভিত্তি করে তৈরি। কেস স্টাডি Dōzu Carry Service-এর site renewalও একই পদ্ধতিতে তৈরি। Renewal কীভাবে চালানো হয়েছিল, তা কেস স্টাডি নিবন্ধে বিস্তারিত।

কোন অংশ কোথায় কাজ করছে, তা আসল পৃষ্ঠা দেখেই তাড়াতাড়ি বোঝা যায়। এই সাইটে ব্যবহার এভাবে।

একই অংশ অন্য সাইটে প্রয়োগের উদাহরণ Dōzu Carry Service। রং, ছবি, লেখা অবশ্যই একেবারে আলাদা, কিন্তু বাটন চাপার সহজতা ও হেডিংয়ের স্তর একই ডিজাইন নিয়মে তৈরি — পাশাপাশি রাখলে বোঝা যায়।

৫. Standardization করলেও “একই রকম দেখা” হয় না

সাধারণ দুশ্চিন্তা: “স্ট্যান্ডার্ড ডিজাইন হলে কি অন্য কোম্পানির মতো দেখাবে?”

যা standardize হয় তা রঙের baseline, টাইপ সাইজের স্কেল, কম্পোনেন্টের ডিজাইন নিয়ম — ভিত্তির অংশ। সাইটের ছাপ আসলে লোগো, ছবি, tagline, পৃষ্ঠার গঠন, লেখার tone থেকে আসে, আর এগুলো প্রতিটি সাইটে শূন্য থেকে তৈরি হয়। ভিত্তি মিল থাকা আর নিজস্বতা না থাকা আলাদা কথা।

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

৬. সারসংক্ষেপ

• Website development-এর খরচে শূন্য থেকে ডিজাইন তৈরির অংশ বড়
• KomuraSoft Digital Agency-র প্রকাশিত design system (অফিসিয়াল সাইট)-কে ভিত্তি করে এই ধাপ অনেক ছোট করে
• লাইসেন্স বিতরণের ধরন অনুযায়ী আলাদা: Figma data CC BY 4.0, code snippets MIT License। Edit/modify করে নিজের সাইটে বসালে attribution লাগে না
• “ভিত্তি করা”-র মানে তিনটি layer: design tokens শেয়ার করা, অংশকে CSS class করা, টেমপ্লেটে বসানো
• সস্তা ছাড়ের জন্য নয়, কাজ কমে বলে। বেঁচে যাওয়া ঘণ্টা যায় গঠন, কপি, inquiry flow-এর ডিজাইনে
• Accessibility খেয়াল রেখে ডিজাইন করা, সরকারি সেবায় লাইভ চলা স্ট্যান্ডার্ড অংশ ব্যবহার হয়, তাই মান বরং স্থিতিশীল হয়
• লোগো, ছবি, লেখা প্রতিটি সাইটে আলাদা হয়, তাই একই রকম দেখায় না। তবে জটিল নিজস্ব ভিজুয়াল দরকার এমন প্রজেক্টে এই পদ্ধতি মানায় না

খরচ চাপা রেখে বোঝানো যায় এমন গঠনের সাইট চাইলে ওয়েবসাইট নির্মাণ পৃষ্ঠায় কাজ চালানোর ধরন ও দাম দেখা যায়। বর্তমান সাইটের URL দিয়ে যোগাযোগ করলে, কোথা থেকে ঠিক করলে ফল তাড়াতাড়ি আসবে তা সাজিয়ে ফেরত দিই।

সম্পর্কিত নিবন্ধ

• ছোট ও মাঝারি ব্যবসার জন্য ওয়েবসাইট নির্মাণের খরচ — দামের quick-reference ও কোটেশন পড়ার উপায়
• সাইট renewal-এর কেস স্টাডি: মিয়াজাকির পরিবহন কোম্পানি Douzu Carry Service
• Inquiry না আসা সাইটে প্রথমে ঠিক করার তিনটি জায়গা
• ওয়েবসাইট নির্মাণ

তথ্যসূত্র

• Digital Agency, Digital Agency Design System β. সরকারি সেবার ওয়েবসাইট ও অ্যাপের জন্য প্রকাশিত design standard।
• Digital Agency, Usage notes. Design system-এর লাইসেন্স ও ব্যবহারের শর্ত; Figma data, bundled icons, এবং code snippets-এর লাইসেন্স আলাদা করে দেখানো।
• Digital Agency, Copyright policy. Design system-এর ওয়েবসাইট (ব্যাখ্যামূলক লেখা, গাইডলাইন) যে copyright policy-র আওতায় পড়ে (Public Data Terms of Use v1.0)।

সম্পর্কিত নিবন্ধ

কাছাকাছি বিষয়ে গভীরে যেতে একই ট্যাগযুক্ত সাম্প্রতিক নিবন্ধ।

সম্পর্কিত বিষয়

এই পৃষ্ঠাগুলো বিষয়টিকে সেবা ও সিদ্ধান্তের বৃহত্তর প্রেক্ষাপটে স্থাপন করে।

এই বিষয়ের সাথে সম্পর্কিত সেবা

নিবন্ধটি নিচের সেবাগুলোর সাথে সরাসরি সম্পর্কিত।

প্রায়শ জিজ্ঞাসিত প্রশ্ন

এই নিবন্ধের বিষয়ে পরামর্শে প্রায়ই আসা প্রশ্ন।

Digital Agency design system কি বেসরকারি কোম্পানির সাইটে ব্যবহার করা যায়?

হ্যাঁ। Digital Agency design system Digital Agency open license-এ সাধারণের জন্য প্রকাশ করেছে, এবং সরকারি সংস্থার বাইরের সাইটেও ব্যবহার করা যায়। তবে ব্যবহার করলে Digital Agency-র সার্টিফিকেশন বা অনুমোদন মেলে না। আমাদের অবস্থানও তাই — প্রকাশিত design system বেসরকারি সাইটে প্রয়োগ করছি।

স্ট্যান্ডার্ড ডিজাইন হলে কি অন্য কোম্পানির সাইটের মতো দেখাবে না?

যা কমন হয় তা রং, spacing ও components-এর design rules। লোগো, ছবি, tagline ও পৃষ্ঠার গঠন প্রতিটি সাইটে আলাদা করে তৈরি হয়। আসল ছাপ মূলত এই অংশ থেকেই আসে, তাই standardization থাকলেও 'কোথাও দেখা একই সাইট' হয়ে যায় না। উল্টে, বাটন চাপার সহজতা ও লেখা পড়ার স্পষ্টতা — যেগুলো মিল থাকা উচিত — সেগুলোই standardization-এ বসে।

লেখকের প্রোফাইল

নিবন্ধের লেখকের পরিচিতি পৃষ্ঠা।

Go Komura

KomuraSoft LLC-এর প্রতিনিধি

Windows সফটওয়্যার ডেভেলপমেন্ট, প্রযুক্তিগত পরামর্শ ও বাগ তদন্তে বিশেষজ্ঞ, বিশেষ করে বিদ্যমান সিস্টেমযুক্ত প্রকল্প ও পুনরুৎপাদন করা কঠিন বাগে।