উপাদান এবং ফিগমা দিয়ে একটি অন্ধকার থিম ডিজাইন করুন

উপাদান এবং ফিগমা দিয়ে একটি অন্ধকার থিম ডিজাইন করুন

এই কোডল্যাব সম্পর্কে

subjectমার্চ ৩০, ২০২১-এ শেষবার আপডেট করা হয়েছে
account_circleLiam Spradlin-এর লেখা

1. ওভারভিউ

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

1c87bbed2ddae46d.png

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

এই ডিজাইনল্যাবে, আমরা একটি বিদ্যমান মেটেরিয়াল থিমের উপর ভিত্তি করে একটি ডার্ক থিম তৈরি করার জন্য প্রয়োজনীয় ধাপগুলি দিয়ে হেঁটে যাবো—আমাদের একটি মেটেরিয়াল স্টাডিজ ব্যবহার করে।

dba5acf2b6e59912.png

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

আমরা থিমটিকে আরও এগিয়ে নেব এবং কাস্টম পৃষ্ঠের রঙগুলির সাথে কাজ করব যা উত্তরের অনন্য ব্যক্তিত্বকে পুনরায় জোর দেওয়ার জন্য মৌলিক অন্ধকার থিমের বাইরে চলে যায়।

প্রয়োজনীয় উপকরণ:

2. প্রয়োজনীয় ফাইল সংগ্রহ করুন

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

3. আপনার পরিবেশ সেট আপ করুন

পরবর্তী, আপনাকে আপনার নকশা পরিবেশ সেট আপ করতে হবে।

প্রথমে, Figma সাইন ইন করুন বা একটি অ্যাকাউন্ট তৈরি করুন

একবার আপনি সাইন ইন করলে, আগের ধাপে ডাউনলোড করা ফাইলটি আমদানি করুন। এটি করার জন্য, ফিগমা ফাইল স্ক্রিনের উপরের বাম কোণে "ইমপোর্ট ফাইল" আইকনটি খুঁজুন এবং আপনার "ডাউনলোড" ফোল্ডারে ফাইলটি সনাক্ত করুন৷

80ef89e20b8f0e91.png

ফাইলের চারপাশে তাকান একটি মুহূর্ত নিন. এটিতে একটি হালকা থিম, অ্যাপের ব্র্যান্ডের উপর ভিত্তি করে একটি প্রাক-নির্মিত টোনাল প্যালেট এবং চূড়ান্ত অন্ধকার থিমের একটি অনুলিপি রয়েছে যা আমরা তৈরি করব।

9293beeda31cb693.png

4. পণ্যের পরিচয় বুঝুন

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

উত্তরের ব্র্যান্ড যোগাযোগের উপর জোর দেয়। অ্যাপ্লিকেশানটি কার্যকরী গুণাবলীকে অগ্রাধিকার দেয়, এমন ডিজাইনের উপাদানগুলির তুলনায় সহজে ব্যবহারের পক্ষপাতী যেগুলির কার্যকরী উদ্দেশ্য নেই৷

এই ডিজাইনল্যাবে আমাদের উদ্দেশ্যে, উত্তরে ব্র্যান্ড এক্সপ্রেশনের সবচেয়ে গুরুত্বপূর্ণ উপাদান হল রঙ, প্রকার এবং আকৃতি।

891b4b320ba684f7.png

রঙ

উত্তরের রঙের থিম একটি কমলা-হলুদ গৌণ রঙের সাথে যুক্ত একটি গাঢ় নীল-ধূসর প্রাথমিক রঙ ব্যবহার করে।

c73b87a98b662735.png

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

9eea3ffdcc568500.png

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

টাইপ

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

f7096dea5a1264df.png

Work Sans থেকে সম্পূর্ণ টাইপ স্কেল তৈরি করা উত্তর দেয় সামঞ্জস্যপূর্ণ এবং অনুমানযোগ্য, কিন্তু জৈব এবং সুস্পষ্ট, টাইপোগ্রাফি।

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

আকৃতি

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

1406754928b6c411.png

  1. ছোট উপাদান
  2. মাঝারি উপাদান
  3. বড় উপাদান

বোতাম এবং FAB এর মতো ছোট উপাদানগুলি সম্পূর্ণ বৃত্তাকার, যখন ইমেল কার্ড এবং নীচের অ্যাপ বারের মতো মাঝারি উপাদানগুলি সম্পূর্ণ বর্গাকার৷ অ্যাকাউন্ট সুইচার এবং নীচের শীটের মতো বড় উপাদানগুলির সামান্য গোলাকার কোণ রয়েছে৷

12114c6b0cf7b695.png

এই আকারগুলি অ্যাপটিতে তারা কোথায় রয়েছে এবং প্রতিটি উপাদান কীভাবে কল্পনা করা হয়েছে, সেইসাথে এটি বাকি ইন্টারফেসের সাথে কীভাবে সম্পর্কিত তা সম্পর্কে ব্যবহারকারীর বোঝার জোরদার করতে একত্রিত হয়।

5. রঙ নিয়ে কাজ করা

রঙ কীভাবে তার ডিফল্ট হালকা থিমে ব্র্যান্ডের উত্তরের অভিব্যক্তির সাথে সম্পর্কিত তা জেনে, আমরা একটি ব্যবহারযোগ্য এবং অভিব্যক্তিপূর্ণ অন্ধকার থিমের জন্য এর প্যালেটে তথ্য সমন্বয় করতে পারি।

উপাদানে, রঙের সিস্টেমগুলি টোনাল প্যালেটগুলির উপর ভিত্তি করে - এই প্যালেটগুলি আপনার ব্র্যান্ডের রঙগুলি ব্যবহার করে সুরেলা ভেরিয়েন্টগুলির একটি সেট তৈরি করে যা আপনার অ্যাপ জুড়ে প্রয়োগ করা একটি ব্যাপক রঙের সিস্টেমে একত্রিত হয়, শৈলী এবং সুস্পষ্টতা নিশ্চিত করে৷

ফিগমা ফাইলে, আপনি উত্তরের প্রাথমিক এবং মাধ্যমিক টোনাল প্যালেটগুলি দেখতে পারেন। প্রতিটি প্যালেটের উপরের হালকা তীরগুলি উত্তরের হালকা থিমে ব্যবহৃত মানগুলি নির্দেশ করে, যখন গাঢ় তীরগুলি আমরা আমাদের অন্ধকার থিমে ব্যবহার করব এমন রূপগুলি নির্দেশ করে৷

f75bcc030014db3a.png

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

6. পৃষ্ঠের রং সামঞ্জস্য করুন

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

মেটেরিয়াল ডার্ক থিমগুলিতে, ইন্টারফেসের সবচেয়ে নীচের স্তরটি সাধারণত হেক্স মান #121212 সহ একটি গাঢ় ধূসর হয়।

  • ফিগমা ফাইলে, " রিপ্লাই স্টার্টার " নামে আর্টবোর্ডটি খুঁজুন এবং " পটভূমি " নামক স্তরটি নির্বাচন করুন।

99c09e3e08e22d20.png

  • স্ক্রিনের ডানদিকে ইন্সপেক্টর প্যানেলে " ফিল " এর অধীনে, রঙের মান 121212 এ সেট করুন এবং রিটার্ন টিপুন।

f6e6fc21a9fdb60d.png

  • আপনার আর্টবোর্ড এই মত হওয়া উচিত:

cb28b2987d2e9666.png

উত্তরের একরঙা ইনবক্স ভিউতে, ইমেল কার্ডগুলির রঙ পটভূমির তুলনায় কিছুটা হালকা থাকে, তাই ইনবক্সের ভিজ্যুয়াল শ্রেণিবিন্যাস বজায় রাখতে আমাদের গাঢ় থিমের কার্ডগুলিতে একই আচরণ করা উচিত।

  • একই আর্টবোর্ডে, "ইমেল কার্ড" নামক গ্রুপটি প্রসারিত করুন এবং " ইমেল কার্ড" নামক সমস্ত স্তর নির্বাচন করুন৷
  • ঠিক আগের মত, পরিদর্শক প্যানেলে ফিল মান নির্বাচন করুন। মানটি 121212 এ সেট করুন এবং রিটার্ন টিপুন।
  • এখন, শুধুমাত্র " ইমেল কার্ড ওভারলে" নামক স্তরগুলি নির্বাচন করুন৷ এই স্তরগুলি আমাদেরকে একটি ওভারলে তৈরি করতে দেয় যা ইমেল কার্ডগুলিকে তাদের পটভূমি থেকে আলাদা করে৷
  • স্তরগুলিকে একটি পূরণ করুন এবং এটিকে 2% অস্বচ্ছতায় FFFFFF করুন৷

30369e87449f9155.png

এখন যেহেতু ইমেল কার্ডগুলি অন্ধকার করা হয়েছে, আমাদের পাঠ্যটি অপাঠ্য৷ আমরা পরবর্তী টেক্সট রং মোকাবেলা করব.

7. পাঠ্যের রঙ সামঞ্জস্য করুন

অন্ধকার থিমগুলিতে পাঠ্যের রঙগুলি বোঝার জন্য, বিস্তৃত মেটেরিয়াল ডিজাইন সিস্টেমে পাঠ্যে কীভাবে রঙ প্রয়োগ করা হয় তা বোঝা গুরুত্বপূর্ণ।

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

উপাদানের ডিফল্ট "চালু" রঙগুলি হল সাদা (#FFFFFF) এবং কালো (#000000)। যেহেতু একটি কালো বা গাঢ় "চালু" রঙ আমাদের অন্ধকার পৃষ্ঠের জন্য উপযুক্ত হবে না, আমরা সাদা ব্যবহার করব।

173397b73efc7b5.png

এই "চালু" রঙের সাথে পাঠ্য শ্রেণিবিন্যাস স্থাপনের সিস্টেমটি সহজ। উচ্চ জোর দেওয়া পাঠ্যের অস্বচ্ছতা 87%, যখন মাঝারি জোর দেওয়া পাঠ্য 60% এ প্রয়োগ করা হয়, এবং অক্ষম পাঠ্য 38% এর অস্বচ্ছতা ব্যবহার করে।

উচ্চ অগ্রাধিকার টেক্সট বিশুদ্ধ সাদা নয় কারণ, ধাপ 5 এ আলোচনা করা হয়েছে, #FFFFFF—একটি উজ্জ্বল রঙ—আমাদের অন্ধকার পটভূমিতে দৃশ্যত "কম্পন" করবে। উপরন্তু, অন্ধকার পটভূমিতে বিশুদ্ধ #FFFFFF পাঠ্য পাঠ্যতাকে ক্ষতি করতে পারে কারণ সেই পাঠ্যের আলো অন্ধকার পটভূমিতে রক্তপাত বা ঝাপসা দেখায়।

এই সব জেনে, আমাদের অন্ধকার থিমে পাঠ্য রং ঠিক করা যাক.

  • আমাদের স্টার্টার লেআউটের সমস্ত পাঠ্য সহজে অ্যাক্সেসের জন্য গ্রুপ করা হয়েছে। ইনবক্স টেক্সট নামক গ্রুপটি খুঁজুন এবং এর সমস্ত উপাদান স্তর দেখতে এটি প্রসারিত করুন।
  • " Hi -" দিয়ে আগে থেকে লেখা সমস্ত স্তর নির্বাচন করুন। এগুলি আমাদের লেআউটের সমস্ত উচ্চ-গুরুত্বপূর্ণ পাঠ্য।
  • পরিদর্শক প্যানেলে, 87% এর অস্বচ্ছতার সাথে FFFFFF-ফিল সেট করুন।
  • ইনবক্স টেক্সট গ্রুপে ফিরে, "Med -" দিয়ে আগে থেকে লেখা সমস্ত স্তর নির্বাচন করুন
  • পরিদর্শক প্যানেলে, 60% এর অস্বচ্ছতার সাথে FFFFFFফিল সেট করুন।

fc76fa49b5c0941b.png

8. উপাদান রং সমন্বয়

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

নিচের অ্যাপ বার

উত্তরের নীচের অ্যাপ বারের জন্য, যা ইনবক্সের বাকি UI-এর উপরে উন্নীত, আমরা একটি সূক্ষ্ম ওভারলে প্রয়োগ করব।

  • লেয়ার লিস্টে বটম অ্যাপ বার নামক গ্রুপটি খুঁজুন এবং এটি প্রসারিত করুন যাতে আপনি এর উপাদান স্তরগুলি দেখতে পারেন।
  • সেই গোষ্ঠীর ভিতরে সারফেস নামক স্তরটি খুঁজুন এবং এর পূরণ মান 121212 এ সেট করুন।
  • সারফেস ওভারলে নামে এটির উপরের স্তরটি খুঁজুন এবং এটিকে 12% অস্বচ্ছতার সাথে FFFFFF এর একটি পূরণ মান দিন।

ফ্লোটিং অ্যাকশন বোতাম

এরপর আমরা FAB-তে একটি নতুন রঙ প্রয়োগ করব। এটি করার জন্য, টোনাল প্যালেটগুলিতে ফিরে যান যা আমরা আগে দেখেছিলাম এবং উত্তরের সেকেন্ডারি রঙের 700 মান ধরুন।

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

  • স্তরগুলির তালিকায় FAB নামক গ্রুপটি খুঁজুন এবং এর উপাদান অংশগুলি দেখতে এটিকে প্রসারিত করুন।
  • সারফেস স্তর খুঁজুন এবং এটি নির্বাচন করুন। FCC13B এর ফিল সেট করুন।

নির্বাচিত কার্ড

আপনি লক্ষ্য করতে পারেন যে একই প্রভাবশালী কমলা-হলুদ রঙটি উত্তরের ইনবক্সে নির্বাচিত ইমেল কার্ডগুলির কোণেও উপস্থিত হয়৷ এটি আরেকটি দৃঢ়ভাবে ব্র্যান্ডেড মুহূর্ত কিন্তু এটি উপাদান, পৃষ্ঠ বা পাঠ্যের সাথে পরিষ্কারভাবে ফিট করে না।

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

  • Earmark নামক স্তরটি নির্বাচন করুন এবং এটির FFF5A0Fill সেট করুন।

88582cbf7d99949c.png

9. আরও এগিয়ে যান: কাস্টম সারফেস

যেমনটি আমরা আগে শিখেছি, উত্তরে ফ্লোটিং অ্যাকশন বোতাম (বা FAB) একটি অত্যন্ত জোর দেওয়া উপাদান যা অ্যাপে একটি দৃঢ়ভাবে ব্র্যান্ডেড মুহূর্তও উপস্থাপন করে। এই কারণে, আমরা উত্তরের মূল গৌণ রঙ ব্যবহার করে উত্তরের গাঢ় থিমে এর রঙের অভিব্যক্তি বজায় রাখার সিদ্ধান্ত নিতে পারি।

  • স্তরগুলির তালিকায় FAB নামক গ্রুপটি খুঁজুন এবং এর উপাদান অংশগুলি দেখতে এটিকে প্রসারিত করুন।
  • সারফেস স্তর খুঁজুন এবং এটি নির্বাচন করুন। F9AA33 তে ফিল ফিল সেট করুন।

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

  • লেয়ার লিস্টে বটম অ্যাপ বার নামক গ্রুপটি খুঁজুন এবং এটি প্রসারিত করুন যাতে আপনি এর উপাদান স্তরগুলি দেখতে পারেন।
  • সারফেস ওভারলে নামক স্তরটি খুঁজুন এবং এটিকে 48% এর অপাসিটি সহ 344955 এর একটি নতুন ফিল মান দিন। এটি পর্যাপ্ত বৈসাদৃশ্য বজায় রেখে এটিকে একটি শক্তিশালী ব্র্যান্ডের রঙ দেবে।
  • স্তরগুলির তালিকায় ইমেল কার্ড ওভারলে নামক স্তরগুলি খুঁজুন এবং তাদের সমস্ত নির্বাচন করুন।
  • 4% এর অস্বচ্ছতার সাথে ADC0CB তে তাদের ফিল সেট করুন।

a1ea3f40f1ef3114.png

10. র‍্যাপআপ

dba5acf2b6e59912.png

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

এই ডিজাইন ল্যাবের ধাপগুলিকে আপনার নিজের পণ্যের অন্ধকার থিম বোঝা এবং সংজ্ঞায়িত করার জন্য একটি কাঠামো বিবেচনা করুন এবং সর্বদা আপনার ব্র্যান্ড এবং পণ্যের বৈশিষ্ট্য এবং লক্ষ্যগুলিকে হৃদয়ে রাখুন৷

আরও গাঢ় থিম নির্দেশিকা জন্য, গাঢ় থিমগুলির জন্য মেটেরিয়াল ডিজাইনের বৈশিষ্ট্য দেখুন।

আপনার যদি প্রশ্ন থাকে, টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় নির্দ্বিধায় আমাদের জিজ্ঞাসা করুন।

আরও ডিজাইনের বিষয়বস্তু এবং টিউটোরিয়ালের জন্য গুগল ডিজাইন ইউটিউব চ্যানেলে সাথে থাকুন।