একটি উপাদান বোতাম একটি বোতাম চেয়ে বেশি

ম্যাটেরিয়াল ডিজাইনের থিমটি ব্যবহার করে বোতামগুলি ডিজাইন করুন (এবং আলাদা করুন)

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

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

ম্যাটেরিয়াল ডিআইওয়াই - কীভাবে বোতামের রেডমে ফাইল থেকে এই বোতামগুলি শিফল করা যায় তা শিখুন।

সিনেরজি

ধ্যান নির্দেশ অ্যাপ্লিকেশন

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

রঙ

হালকা এবং গা dark় ব্লুজ ব্যবহার সিনের্গির ব্র্যান্ডকে প্রাধান্য দেয় এবং এর হালকা এবং নম্র বৈশিষ্ট্যের জন্য কথা বলে। আকাশের দিকে তাকানোর অনুভূতিটি পুনরাবৃত্তি করে, রঙগুলি একটি নির্দিষ্ট পরিচিতি প্রকাশ করে যা স্পর্শের জন্য আনন্দদায়ক বন্ধুত্বপূর্ণ।

d এমডিসি-থিম-প্রাথমিক: # ডেড 7 এফ; d এমডিসি-থিম-অন-প্রাথমিক: # 003db8;

শিল্প

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

d এমডিসি-টাইপোগ্রাফি-হরফ-পরিবার: উদ্ধৃতি ("কে 2 ডি, সানস-সেরিফ"); d এমডিসি-টাইপোগ্রাফি-স্টাইলস-বোতাম: (হরফ আকার: 14px, ফন্টের আকার: 500, বর্ণের ব্যবধান: 0.05 মিমি);

আকার

সিনেরজির উজ্জ্বল ব্র্যান্ড অ্যাট্রিবিউট হুকুম দেয় যে থিমটি বন্ধুত্বপূর্ণতা এবং আশাবাদ ব্যক্ত করতে পারে express এটি প্রকাশ করার জন্য, সিনারজির ফর্ম সিস্টেমটি খুব গোলাকার, বোতামগুলির মতো ছোট উপাদানগুলি সম্পূর্ণ গোলাকার round

d এমডিসি-আকৃতি-ছোট-উপাদান-ব্যাসার্ধ: (24px);

লাল গোলাপ

ফুল সরবরাহ পরিষেবা

লাল গোলাপ একটি ফুল বিতরণ পরিষেবা যা নীচের ব্র্যান্ডের বৈশিষ্ট্যগুলি প্রদান করে এবং প্রতিমূর্তি দিয়ে একটি ইতিবাচক প্রভাব ফেলে: প্রাকৃতিক, সুখী এবং মার্জিত।

রঙ

কালার সিস্টেমটি লাল রঙের শেড ব্যবহার করে যা গোলাপের স্বাভাবিকতার জন্য কথা বলে এবং বিভিন্ন উপাদানগুলির মধ্যে একটি বৈসাদৃশ্য তৈরি করা সহজ করে তোলে। ডিফল্টরূপে, বোতামগুলি আপনার উপাদান ডিজাইনের প্রাথমিক রঙ ব্যবহার করে।

d এমডিসি-থিম-প্রাথমিক: # বি 31839; d এমডিসি-থিম-অন-প্রাইমারি: # ফিফফ;

শিল্প

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

d এমডিসি-টাইপোগ্রাফি-ফন্ট-পরিবার: অব্যর্থ ("কেবিন, সানস-সেরিফ"); d এমডিসি-টাইপোগ্রাফি-স্টাইলস-বোতাম: (হরফ আকার: 14px, ফন্টের আকার: 500, বর্ণের ব্যবধান: 0.05 মিমি);

আকার

লাল গোলাপের ফর্ম সিস্টেম পাপড়ি অনুকরণ করে এর প্রফুল্ল এবং প্রাকৃতিক ব্র্যান্ড উভয় বৈশিষ্ট্যের জন্য কথা বলে। এই বোতামের জন্য বিকল্প রেডিয়াই উদ্ভিদ এবং প্রাকৃতিক বিশ্বের (im) পরিপূর্ণতা প্রতিফলিত করে; রঙের সাথে সংমিশ্রণে, এই আকারটি একটি দৃ visual় চাক্ষুষ প্রভাব তৈরি করে।

$ এমডিসি-আকৃতি-ছোট-উপাদান-ব্যাসার্ধ: (4 x 12 x 4 x 12 x);

সম্পন্ন!

কার্য পরিচালনা অ্যাপ্লিকেশন

সম্পন্ন! একটি টাস্ক ম্যানেজমেন্ট অ্যাপ্লিকেশন যা দ্রুত, কমপ্যাক্ট অভিজ্ঞতাগুলি হাইলাইট করে যাতে ব্যবহারকারীরা বিঘ্ন ছাড়াই কাজগুলি সম্পন্ন করতে পারে। শেষ! ব্র্যান্ডের নিম্নলিখিত বৈশিষ্ট্য রয়েছে: পেশাদার, দ্রুত এবং সংক্ষিপ্ত।

রঙ

সম্পন্ন পেশাদার এবং সাধারণ ব্র্যান্ডিং বৈশিষ্ট্যগুলি ব্যবহার করতে! কথা বলতে গেলে থিমটি রক্ষণশীল প্যালেট সাদা এবং মোটামুটি নিরপেক্ষ নীল ব্যবহার করে blue বিচ্যুতি হ্রাস করতে এবং গতি বাড়ানোর জন্য, সম্পন্ন! কোনও ছায়া থাকে না।

d এমডিসি-থিম-প্রাথমিক: # 5973bf; d এমডিসি-থিম-অন-প্রাইমারি: # ফিফফ;

শিল্প

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

d এমডিসি-টাইপোগ্রাফি-হরফ-পরিবার: উদ্ধৃত ("লিবার ফ্র্যাঙ্কলিন, সানস সারিফ"); d এমডিসি-টাইপোগ্রাফি-স্টাইলস-বোতাম: (হরফ আকার: 14px, ফন্টের আকার: 500, বর্ণের ব্যবধান: 0.02 মিমি, পাঠ্য রূপান্তর: মূলধন,);

আকার

ডোনস শেপ সিস্টেমটি বাঁকানো বা কোণযুক্ত কোণগুলির ভিজ্যুয়াল ওজন যুক্ত করে বিতরণ করে ব্র্যান্ডের গতি এবং সংক্ষিপ্ততার পক্ষে কথা বলে।

$ এমডিসি-আকৃতি-ছোট-উপাদান-ব্যাসার্ধ: (0 পিএক্স);

মুডি

মুড রিং অ্যাপ্লিকেশন

মুডি একটি রহস্যময় মুড রিং অ্যাপ যা বায়োমেট্রিক ডেটা সংগ্রহ করে আপনার মেজাজ সেট করে sets ব্র্যান্ডের নিম্নলিখিত ব্র্যান্ডের বৈশিষ্ট্য রয়েছে: রহস্যময়, প্রযুক্তিগত এবং আরাধ্য।

রঙ

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

d এমডিসি-থিম-প্রাথমিক: # 009b3 বি; d এমডিসি-থিম-অন-প্রাথমিক: # 003db8;

শিল্প

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

d এমডিসি-টাইপোগ্রাফি-হরফ-পরিবার: আনকোট ("আইবিএম প্ল্লেক্স মনো, সানস সিরিফ"); d এমডিসি-টাইপোগ্রাফি-স্টাইলস-বোতাম: (হরফ আকার: 14px, ফন্টের আকার: 600, বর্ণের ব্যবধান: 0.05 মিমি);

আকার

মুডির আকারের গল্পটি অস্পষ্টতার থিমগুলির সাথে অব্যাহত রয়েছে এবং পণ্যটির পিছনে "রহস্যময়" প্রযুক্তির আবার একটি বিকৃত তবে কৌতুকপূর্ণ দৃষ্টিভঙ্গি প্রকাশ করার জন্য নরম এবং অনমনীয়, বৃত্তাকার এবং তীক্ষ্ণ মাঝে স্থানের দিকে মনোনিবেশ করে।

d এমডিসি-আকৃতি-ছোট-উপাদান-ব্যাসার্ধ: (8 পিএক্স);

হু হু করে

পডকাস্ট স্ট্রিমিং অ্যাপ

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

রঙ

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

d এমডিসি-থিম-প্রাথমিক: # FE8A00; d এমডিসি-থিম-অন-প্রাইমারি: # 003db8;

এটি লক্ষ করা গুরুত্বপূর্ণ যে একটি গা dark় "থিম" একটি গা dark় "মোড" থেকে আলাদা। একটি গা dark় মোড কোনও নির্দিষ্ট পদক্ষেপ গ্রহণকারী দ্বারা সক্রিয় করা হয়, যখন একটি গা dark় থিমটি ব্র্যান্ড রঙ বা অন্যান্য কারণের ভিত্তিতে থিমের অন্তর্নিহিত থাকে।

শিল্প

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

d এমডিসি-টাইপোগ্রাফি-হরফ-পরিবার: অব্যক্ত ("মন্টসারেট, সানস সারিফ"); d এমডিসি-টাইপোগ্রাফি-স্টাইলস-বোতাম: (হরফ আকার: 14px, ফন্টের আকার: 600, বর্ণের ব্যবধান: 0.05 মিমি); গেস্টাল্টেন

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

d এমডিসি-আকৃতি-ছোট-উপাদান-ব্যাসার্ধ: (4 পিএক্স);

ম্যাটেরিয়াল ডিজাইন + ভুল

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

রিমিক্স এবং আপনি কি ভাগ! glitch.com/@matory