1. Genel Bakış
Material Design, Google I/O 2019'da ürününüzün mevcut Material temasına uygun bir koyu tema oluşturmayla ilgili yönergeler sunmuştu. Açık temalar uzun metinleri okumak için idealdir ve daha okunaklı bir kontrast sunar. Koyu temanın azaltılmış parlaklığı ise karanlık ortamlarda güvenli bir deneyim sağlar ve göz yorgunluğunu en aza indirebilir.
Material'da koyu temalar, varsayılan açık temaya ek bir mod olarak kullanılmak üzere tasarlanmıştır. Bu temalar, renk, şekil, tür ve yükseklik stilleri de dahil olmak üzere uygulamanızın benzersiz kimliğini, ayrıntılı ve geceye uygun bir sunumla korur.
Bu tasarım laboratuvarında, Material Studies'den birini kullanarak mevcut bir Material temasına dayalı koyu tema oluşturmak için gereken adımları inceleyeceğiz.
Netlik, okunabilirlik, sezgisellik ve kullanım kolaylığı için tasarlanmış bir e-posta uygulaması olan Reply ile birlikte çalışacağız. Reply'ın kimliği hakkında bilgi edinecek ve karanlıkta rahat bir tema oluştururken uygulamada markalı anları korumak için dikkatli kararlar vereceğiz.
Ayrıca, Reply'ın benzersiz kişiliğini yeniden vurgulamak için temayı daha da ileriye taşıyacak ve temel koyu temanın ötesine geçen özel yüzey renkleriyle çalışacağız.
Gerekli materyaller:
2. Gerekli dosyaları toplama
Başlamadan önce Figma başlangıç dosyamızı indirmeniz gerekir. Design Lab için ihtiyacınız olan her şey bu dosyada yer alır.
3. Ortamınızı ayarlama
Ardından, tasarım ortamınızı ayarlamanız gerekir.
Öncelikle Figma'da oturum açın veya hesap oluşturun.
Oturum açtıktan sonra önceki adımda indirdiğiniz dosyayı içe aktarın. Bunu yapmak için Figma dosyaları ekranının sol üst köşesindeki "dosya içe aktar" simgesini bulup "İndirilenler" klasörünüzdeki dosyayı bulun.
Biraz zaman ayırarak dosyaya göz atın. Bu dosya; açık tema, uygulamanın markasına dayalı önceden oluşturulmuş bir ton paleti ve oluşturacağımız nihai koyu temanın bir kopyasını içerir.
- Başka bir sekmede Koyu temalar için Materyal Tasarım Kılavuzu'nu açın. Bu yönergeler, Design Lab'de sık sık ele alınacaktır.
4. Ürünün kimliğini anlama
Reply'da koyu temayı kullanmaya başlamadan önce Reply'ın marka özelliklerinden bazılarını anlamamız gerekir. Bu sayede, Reply'ın kimliği ve markası hem açık hem de koyu temalarda tutarlı bir şekilde ifade edilecek şekilde temamızla ilgili bilinçli seçimler yapabiliriz.
Reply'ın markası, iletişime önem verir. Uygulama, işlevsel niteliklere öncelik verir ve işlevsel amacı olmayan tasarım öğeleri yerine kullanım kolaylığını tercih eder.
Bu tasarım laboratuvarındaki amaçlarımız doğrultusunda, Yanıtla'da marka ifadesinin en önemli unsurları renk, yazı tipi ve şekildir.
Renk
Yanıt'ın renk temasında, turuncu-sarı ikincil renkle eşleştirilmiş koyu mavi-gri birincil renk kullanılır.
İkincil renk nadiren kullanıldığından Reply'ın kullanıcı arayüzü genellikle tek renklidir ve ana rengin varyasyonlarını kullanır. Bu zarif renk teması, içeriğin dikkat dağıtmadan kolayca okunmasını ve fotoğrafik avatarların kolayca görülmesini sağlar.
Bu nedenle, Reply'ın ikincil rengi kullanıldığı her yerde büyük bir etki yaratır. Önemli işlemleri vurgular ve uygulama genelinde markalı anları net bir şekilde belirtir.
Tür
Metin tabanlı içeriğe ve verimliliğe büyük önem veren bir uygulama olan Reply'da, kimliğin ifadesi için yazı tipi ve tipografi büyük önem taşır. Uygulama, tam tür ölçeği için Work Sans'ı kullanır. Work Sans'ın altı ağırlığını (Light, Regular, Medium, SemiBold ve Bold) içeren çeşitli stiller kullanır.
Work Sans'tan tüm tür ölçeğini oluşturmak, Reply'a tutarlı ve öngörülebilir ancak organik ve okunabilir bir tipografi sağlar.
Work Sans'ın tasarımcısı Wei Huang'a göre bu yazı ailesi, ekranda kullanım için optimize edilmiştir. Bu sayede, e-postalardaki veya diğer içeriklerdeki metinleri verimli bir şekilde okuyabilirsiniz. Erken Grotesk biçimlerine dayanan gevşek temeli, yazıya biraz daha samimi ve insani bir estetik katarken daha geniş izleme, daha akıcı bir okuma deneyimi sağlar.
Şekil
Reply, yuvarlak ve keskin bileşenleri bir araya getirerek e-posta listesinin verimliliğini ve işlevsel yapısını güçlendiren, aynı zamanda temel işlemlere ve daha büyük bileşenlere daha yumuşak bir dokunuş katan, incelikli bir şekil hikayesine sahiptir.
- Küçük bileşenler
- Medya bileşenleri
- Büyük bileşenler
Düğmeler ve FAB gibi küçük bileşenler tamamen yuvarlatılmışken e-posta kartları ve alt uygulama çubuğu gibi orta boy bileşenler tamamen kare şeklindedir. Hesap değiştirici ve alt sayfa gibi büyük bileşenlerin köşeleri biraz yuvarlaktır.
Bu şekiller, kullanıcının uygulamada nerede olduğunu, her bir bileşenin nasıl tasarlandığını ve arayüzün geri kalanıyla nasıl ilişkili olduğunu anlamasına yardımcı olmak için bir araya gelir.
5. Renklerle çalışma
Renklerin, varsayılan açık temasında Reply'ın marka ifadesiyle nasıl ilişkili olduğunu bildiğimiz için kullanılabilir ve etkileyici bir koyu tema için paletinde bilinçli ayarlamalar yapabiliriz.
Material'da renk sistemleri, ton paletlerine dayanır. Bu paletler, markanızın renklerini kullanarak uygulamanızda kullanılan kapsamlı bir renk sisteminde bir araya gelen uyumlu varyantlar oluşturur. Böylece stil ve okunabilirlik sağlanır.
Figma dosyasında, Reply'ın birincil ve ikincil renk paletlerini görebilirsiniz. Her paletin üzerindeki açık renkli oklar, Reply'ın açık temasında kullanılan değerleri, koyu renkli oklar ise koyu temamızda kullanacağımız varyantları gösterir.
Materyal ile koyu tema oluştururken renk sisteminizin etkileyici olmaya devam edebilmesi ve göz yorgunluğuna neden olmadan uygun kontrastı koruyabilmesi için daha açık varyantlar seçilir. Daha doygun renkler, koyu arka planlarda görsel olarak "titrer" ve okunması zorlaşır. Açık tonlar, yükseltilmiş yüzeylerin rengini değiştirmede daha fazla esneklik sağlar. Bu konuya kısa süre sonra değineceğiz.
6. Yüzey renklerini ayarlama
Artık Reply'ın ton paletlerini ve koyu temamızda kullanacağımız renkleri bildiğimize göre, maketimizdeki renk değerlerini ayarlamaya başlayabiliriz.
Koyu renkli malzeme temalarında, arayüzün en alttaki katmanı genellikle onaltılık değeri #121212 olan koyu gri bir renktir.
- Figma dosyasında "Reply Starter" (Yanıt Başlatıcı) adlı çalışma yüzeyini bulun ve "Background" (Arka Plan) adlı katmanı seçin.
- Ekranın sağ tarafındaki denetçi panelinde "Doldur" bölümünde renk değerini 121212 olarak ayarlayıp Enter tuşuna basın.
- Çizim alanınız aşağıdaki gibi görünmelidir:
Reply'ın tek renkli gelen kutusu görünümünde, e-posta kartları arka plandan biraz daha açık renktedir. Bu nedenle, gelen kutusunun görsel hiyerarşisini korumak için karanlık temadaki kartlara da aynı işlemi uygulamalıyız.
- Aynı çalışma yüzeyinde, "Email cards" adlı grubu genişletin ve "Email card" adlı tüm katmanları seçin.
- Daha önce olduğu gibi, denetçi panelinde Doldur değerini seçin. Değeri 121212 olarak ayarlayın ve Return tuşuna basın.
- Şimdi yalnızca "Email card overlay" adlı katmanları seçin. Bu katmanlar, e-posta kartlarını arka planlarından ayıran bir yer paylaşımı oluşturmamıza olanak tanır.
- Katmanlara dolgu verin ve opaklığı %2 olacak şekilde FFFFFF yapın.
E-posta kartları karartıldığından metinlerimiz okunamıyor. Bir sonraki adımda metin renklerini ele alacağız.
7. Metin renklerini ayarlama
Koyu temalardaki metin renklerini anlamak için rengin daha geniş kapsamlı Material Design sisteminde metne nasıl uygulandığını anlamak önemlidir.
Material Components, "on" renkleri kavramını tanımlar. Bu renklere, birincil, ikincil, yüzey, arka plan veya hata renklerini kullanan bileşenlerin ve temel yüzeylerin "üzerinde" göründükleri için bu ad verilir. "Açık" renkler, bu yüzeylerde okunabilirliğini korumak için öncelikle metinlerde kullanılır.
Material'daki varsayılan "açık" renkler beyaz (#FFFFFF) ve siyahtır (#000000). Siyah veya koyu bir "açık" rengi karartılmış yüzeylerimizde uygun olmayacağından beyaz renk kullanacağız.
Bu "açık" renkle metin hiyerarşisi oluşturma sistemi basittir. Çok vurgulu metin %87 opaklığa, orta vurgulu metin %60 opaklığa, devre dışı metin ise %38 opaklığa sahiptir.
Yüksek öncelikli metin, saf beyaz değildir. Çünkü 5. adımda bahsedildiği gibi #FFFFFF (parlak bir renk) koyu arka planlarımızda görsel olarak "titreşir". Ayrıca, koyu arka plan üzerinde #FFFFFF metin kullanılması, bu metinden gelen ışık koyu arka plan üzerinde bulanık veya dağılmış gibi göründüğünden okunabilirliği olumsuz etkileyebilir.
Tüm bunları göz önünde bulundurarak koyu temamızdaki metin renklerini düzeltelim.
- Başlangıç düzenimizdeki tüm metinler kolay erişim için gruplandırılmıştır. Gelen kutusu metni adlı grubu bulun ve tüm katmanlarını görmek için genişletin.
- "Hi -" ile başlayan tüm katmanları seçin. Bunlar, düzenimizdeki yüksek vurgulu metinlerdir.
- İnceleme paneli Dolgu'yu FFFFFF olarak ayarlayın ve opaklığı %87 yapın.
- Gelen kutusu metni grubuna geri dönün ve "Med -" ile başlayan tüm katmanları seçin.
- İnceleme paneli Dolgu'yu FFFFFF olarak ayarlayın ve opaklığı %60 yapın.
8. Bileşen renklerini ayarlama
Material ile oluşturulan koyu temalarda, yükseltilmiş yüzeyler ve bileşenler kaplamalar kullanılarak renklendirilir. Yüzey ne kadar yüksek olursa kaplama o kadar güçlü ve parlak olur. Bu, arka planın koyu gölgeleri güvenilir bir şekilde tasvir edemeyecek kadar karanlık olduğu durumlarda yüksekliği ve hiyerarşiyi iletmenin bir yoludur.
Alt uygulama çubuğu
Gelen kutusu kullanıcı arayüzünün geri kalanından daha yüksek olan Reply'ın alt uygulama çubuğu için ince bir yer paylaşımı uygularız.
- Katman listesinde Alt uygulama çubuğu adlı grubu bulun ve bileşen katmanlarını görebilmek için genişletin.
- Bu grubun içinde Surface adlı katmanı bulun ve Fill değerini 121212 olarak ayarlayın.
- Üstteki Yüzey kaplaması adlı katmanı bulun ve Dolgu değerini FFFFFF, opaklık değerini ise %12 olarak ayarlayın.
Kayan işlem düğmesi
Ardından, kayan işlem düğmesine yeni bir renk uygulayacağız. Bunu yapmak için daha önce incelediğimiz ton paletlerine geri dönün ve Yanıtla'nın ikincil renginin 700 değerini alın.
İsteğe bağlı olarak, kendi uygulamanızdaki küçük ancak yüksek etkili bileşenler için, temel renklerle doğru kontrastı koruduğu sürece biraz daha doygun bir renk seçebilirsiniz. Bu seçeneği sonraki bir adımda inceleyeceğiz.
- Katman listesinde FAB adlı grubu bulun ve bileşenlerini görmek için genişletin.
- Yüzey katmanını bulup seçin. Dolgusunu FCC13B olarak ayarlayın.
Seçilen kartlar
Aynı etkileyici turuncu-sarı rengin, Reply'ın gelen kutusundaki seçili e-posta kartlarının köşesinde de göründüğünü fark edebilirsiniz. Bu da güçlü bir marka anı olsa da bileşenlere, yüzeylere veya metne tam olarak uymuyor.
Bu gibi durumlarda, ikincil varyant rengimizden (bu örnekte #FFFBE6) başlayıp geriye doğru çalışarak Yanıtla'nın işlevsel estetiğini bozmadan uygun şekilde ifade edici bir renk bulmak en iyisidir. Yanıt için normal ikincil varyantımızı kullanabiliriz.
- Earmark adlı katmanı seçin ve Fill (Dolgu) değerini FFF5A0 olarak ayarlayın.
9. Daha da ileri gidin: özel yüzeyler
Daha önce öğrendiğimiz gibi, Yanıtla'daki kayan işlem düğmesi (veya KİD), uygulamada güçlü bir marka anını da temsil eden, oldukça vurgulanmış bir bileşendir. Bu nedenle, Yanıtla'nın orijinal ikincil rengini kullanarak Yanıtla'nın koyu temasında renk ifadesini korumaya karar verebiliriz.
- Katman listesinde FAB adlı grubu bulun ve bileşenlerini görmek için genişletin.
- Yüzey katmanını bulup seçin. Dolgu rengini F9AA33 olarak ayarlayın.
Ayrıca, alt uygulama çubuğu ve e-posta kartları için Reply'ın birincil rengini özel yüzey rengi olarak geri getirmek isteyebiliriz. Bunu yapmak için, referans aldığımız ton paletinde belirtilen koyu birincil rengi kullanmak üzere yerleşimi değiştirmemiz yeterli olacaktır.
- Katman listesinde Alt uygulama çubuğu adlı grubu bulun ve bileşen katmanlarını görebilmek için genişletin.
- Surface overlay (Yüzey kaplaması) adlı katmanı bulun ve 344955 değerinde yeni bir Fill (Dolgu) değeri verin. Opaklık değeri %48 olmalıdır. Bu sayede yeterli kontrast korunurken daha güçlü bir marka rengi elde edilir.
- Katman listesinde Email card overlay adlı katmanları bulup tümünü seçin.
- Fill (Dolgu) değerini ADC0CB olarak ve opaklık değerini %4 olarak ayarlayın.
10. Özet
Material'da koyu temalar, ürününüzün açık temada ifade edilen benzersiz kimliğinin düşünülerek ve kasıtlı olarak genişletilmiş halidir. Renk ve yüksekliğin ifade edilme biçiminde basit ayarlamalar yaparak ilk Material koyu temanızı başarıyla oluşturdunuz. Tebrikler!
Bu tasarım laboratuvarındaki adımları, kendi ürününüzün koyu temasını anlamak ve tanımlamak için bir çerçeve olarak değerlendirin. Markanızın ve ürününüzün özelliklerini ve hedeflerini her zaman göz önünde bulundurun.
Koyu tema hakkında daha fazla bilgi için Koyu temalarla ilgili Materyal Tasarım spesifikasyonuna göz atın.
Sorularınız varsa Twitter'da@MaterialDesign hesabını kullanarak dilediğiniz zaman bize sorabilirsiniz.
Google Design YouTube kanalında daha fazla tasarım içeriği ve eğitimi için bizi takip etmeye devam edin.