4 Yolları Canlı Renkler Booster UI Tasarım
Renk, tasarımcının araç setindeki en güçlü araçlardan biridir. Dikkat çekebilir, bir ruh hali belirleyebilir, kullanıcıların duygularını, algılarını ve eylemlerini etkileyebilir. Düz ve Materyal Tasarımın devam eden varlığı ile, renk bugün UI tasarımında daha da önem kazanmaktadır. Parlak renkler, eğlenceye odaklanmış karikatürize tasarımlar ve iş çözümlerine odaklanmış zarif minimalist tarzlar için eşit derecede uygundur. Bu çok yönlülük, canlı renkleri 2017'nin en büyük UI tasarım trendlerinden biri haline getiriyor.
Canlı renk trendinin cazibesi, tasarımın birçok farklı şekilde ve stilde uygulanabilmesidir. Bu yazıda dört renk şeması trendine daha yakından bakacak ve onları son derece etkili bir şekilde uygulayan bazı ilham verici örnekleri tartışacağız.
1. Monoton
Tasarımınızda canlı renkleri kullanmanın en popüler yollarından biri monoton olarak adlandırılan bir tekniktir. Monoton paletler, gölgeler ve renk tonları karışımı ile tek bir renk içerir. Monoton'un oluşturulması oldukça kolaydır: İletinizle en iyi çalışacak rengi düşünün ve tonlar arasında istediğiniz varyans miktarını düşünün.
Okunabilirliği Artırın
Monotone, okunabilirliği sağlamak için ön plan içeriği için sağlam bir temel oluşturmaya yardımcı olur. Dramatik tipografi ile eşleştirilmiş monoton renk şemaları gerçekten unutulmaz bir deneyim yaratabilir.
Sydneystockhom çok basit bir şekilde unutulmaz bir görünüm oluşturmak için koyu renk kullanır
2. Duotone
Adından da anlaşılacağı gibi, çift ton iki renkten oluşan bir görüntüdür. Bu, aynı rengin iki tonu veya iki zıt renk olabilir. Bir zamanlar baskı zımbası olan teknik, çevrimiçi olarak yeni bir hayat buldu. Spotify sayesinde, çift ton neredeyse her gün popülaritesinde büyüyor.
Bir Atmosfer Yaratın
Duotones, herhangi bir rengin duygusal özelliklerine sahip herhangi bir görüntüyü enjekte etmenizi sağlar. Unutmayın, bu farklı renkler farklı duygular uyandırır. Renklerin yumuşak ve mütevazi bir kombinasyonu ciddi bir atmosfer yaratabilir. Örneğin, Holm Marcher & Co Örnek: Her detay, iş atmosferine katkıda bulunmaya çalışır ve arka plan görüntüleri istisna değildir.
Parlak renkler bir arada bir mutluluk hissi yaratabilmek için. Yeni Fırsat Tasarımı cesur bir renk seçeneği sayesinde çarpıcı. Dostça bir atmosfer yaratır ve olumlu bir ruh hali yaratırlar.
Okunabilirliği Artır
Duotone, metni bol miktarda kontrast verebilir. Bir görüntüdeki renk değişimlerini ayarlar, böylece metin resmin hemen hemen her yerinde tek bir renk kullanılarak yerleştirilebilir.
3. Gradyanlar
Gradyanlar, yüksek kontrastlı tamamlayıcı renkler kullanarak bu kez GUI'lere geri dönüş yaptı. Modern gradyanlar birden fazla renk içerebilir, merkezden yayılır, bir köşeden gelir veya yatay olarak düşerler.
Modern bir görünüm yaratın
Gradyanlar geri dönüş yaptı ve parlak renk trendine yeni bir soluk getirdi. Düz renk paleti ile eşleştirildiklerinde modernizm duygularını uyandırabilirler. Sadece bir renk ile, Zample donuk tonlara düşmeden arka planda bir degrade etkisi kullanır.
Materyal Tasarımı ile ilişkili parlak, doygun renklerden birini kullanarak, modernizm duygularını uyandırabilirsiniz.
Gözlerde Kolay Düzen Yapın
Degradeler görsel iletişimi geliştirebilir. Turuncudan pembeye geçiş Symodd en Aşağıdaki örnek, arayüze derinlik ve kontrast verir ve göz alıcı bazı görsel efektler oluşturur. Işıktan karanlığa geçiş, sayfanın sol üstünden sağa doğru hareket eden doğal insan gözü tarama modellerini takip eder.
Symodd'ın ana sayfası, turuncudan pembeye kadar tam bir degrade arka plana sahiptir. İki ton birbirinden çok farklı olmadığı için göze bu kadar kolay gelmediği için ince bir eğim.
Bir Accent olarak kullanın
Degrade genellikle sayfalar için arka planlar olarak kullanılırken, daha küçük yerlerde de çalışabilirler. Navigasyonda, ikincil görüntüler veya belirli içerik türleri için degradeleri bir vurgu olarak kullanmayı düşünün. Daha küçük gradyan alanları hakkında ne güzel, bu teknikle oynamak için daha fazla özgürlüğünüz var. Ve daha küçük alanlarda kullanıldığında, tıpkı çoklu renk çiftleriyle oynamak için görsel olarak ilginç olabilir. Bloomberg Aşağıdaki örnekte yaptım.
Bloomberg son Haberler Son Haberler için degrade kullanır.
4. Bindirmeler
Kaplama, görüntüyü renkli bir “lens” üzerinden filtreliyor. Renk bindirmeleri olan görüntüler uzun zamandır popüler bir tasarım seçeneğidir, çünkü bu etkiyi yaratmak oldukça kolaydır: sadece bir görüntüyü veya videoyu yarı saydam renkli bir kutuyla örtersiniz.
Kullanıcı Dikkatine Dikkat
Kaplama efektleri, kullanıcıları belirli tasarım öğelerine odaklamaya yardımcı olabilir. Ancak, bindirme olarak tek bir renk kullanırken, rengin doygunluk derecesini ve saydamlığını düşünün. Ağır renk kombinasyonları (daha az şeffaflık ve daha fazla doygunluk), rengin kendisine daha fazla odaklanır:
Tarafından kullanılan renk kaplaması ana hatlar görüntüye daha fazla odak koyar
Sonuç
Renkle oynamak daha eğlenceli bir tasarım tekniği bulmak zor. Renk efektleri etkileyici, etkileyici ve hatta sakin olabilir. Renklerle çalışmaya geldiğinde konfor bölgenizin dışına çıkmaktan korkmayın. İster parlak, kalın tonların hayranı olun isterse daha minimalist bir siyah beyazı tercih edin, hatırlamanız gereken bir şey var: yanlış renkler yok, en önemli olanları bunları nasıl kullanıyorsunuz.