Etkin Kart Tabanlı Tasarımın Sırları
Yani kart tarzı bir arayüz ile trend almak ister misiniz? Muhtemelen harika bir fikir; Kartlar, çeşitli cihaz boyutlarındaki tüm dijital tasarım türleri için popüler ve kullanıcı dostu bir seçenektir.
Kart tasarımının anahtarı, kullanıcıların tıklamak istediği bir şey oluşturuyor. (Bu, harika bir kartın anahtarıdır.) Bir kart, belirli bir içerik (içerik bağlantısı, kayıt, video oynatıcı vb.) İçeriğinin kullanıcılar tarafından etkileşime geçmek istediği bir kap olarak sunulmalıdır.
İşte nasıl tasarlıyorsunuz…
Siyah beyaz bir taslakla başla
Oldukça basit geliyor: tasarım için siyah ve beyaz bir tel kafes ile başlayın. Kartın amacını ve bunun hangi bölümünün tıklanacağını veya devredilebileceğini düşünün. (Tüm kart bir bağlantı olarak kullanılabilir.)
Kartın rengini veya süslemesini görmeden görebilmeniz için boşluk, görüntü ve tipografi gibi öğeleri planlayın. Bunu tasarımın “oyun kartı” fazı olarak düşünün. Kartın tüm elemanları orada. Anlaması kolay bir çerçeve gibi görünüyor mu?
Bunu bu aşamada nasıl kullanacağınızı düşünün. Bir eylem için nereye tıklarsınız? Desen ve sonuç net mi? Nasıl geri dönüyorsun ya da ilerliyorsun? Bu soruların cevapları ekranda yanıp sönen kırmızı “buraya tıklayın” düğmesi gibi ipuçları olmadan yapılmalıdır.
Diğer herhangi bir projede olduğu gibi, taslak siyah beyaz renkte çalışmazsa, nihai tasarım muhtemelen de değildir.
Abartılı boşluk kullanın
Kartlar söz konusu olduğunda en büyük zorluk, darmadağın etmeyen kompakt bir tasarım yaratmaktır. Bu, beyazın içeri girdiği yer. Ve daha çok, ilk bakışta rahat hissetmekten daha fazlasını kullanmak isteyeceksiniz.
Beyaz alanın eklenmesi, öğelerin daha fazla soluk almasını sağlayarak genel kartın daha geniş ve okunabilirliğini artırmasını sağlar.
Genel olarak, normalde öğeler arasında göz önünde bulundurmanız gereken boşlukların iki katı ile başlamak isteyebilirsiniz. Oluklar ekstra geniş olmalı ve satır aralığı ekstra odayı da kullanabilir. Ekstra alan, açık bir tasarım oluşturmanıza ve içeriği daha net bir şekilde düzenlemenize yardımcı olur. Kartın oldukça sınırlı bir tuvali var ve bir telefonun tek bir ekranına ve tablet veya masaüstü bilgisayar gibi daha büyük cihazlarda ekranın benzer büyüklüğüne sığmalıdır. Kartlar, büyük ekranlarda dikkat çekmek için diğer kartlarla da rekabet edebilir. Eklenen boşluk, tüm tasarımın daha açık ve kolay bir şekilde dalış yapmasına yardımcı olacaktır.
Doğal renk ve gölgeleme ekle
Şimdi tasarım için renk ve gölgelendirme hakkında düşünmeye hazırsınız. Doğal görünüme kavuşturun ve tasarımın gölgelerindeki ve stillerindeki gerçekliği taklit edin.
Hayır, burada skeuomorfizmden bahsetmiyoruz, doğal ana hatlar ve gölgelerle renk yaratmaktan bahsediyoruz. Bir kartın nasıl görüntüleneceğini düşünün. Kullanıcı, aslında onu tutuyormuş gibi aynı hissi almalıdır.
Her kartın düzenleneceği şekliyle hayal etmek için bazı temel fizik kurallarını kullanın:
- Aydınlatma, arkasına ve altına bazı gölgeler bırakmalıdır.
- Tasarımın en karanlık kısmı, normalde yukarıdan gelen aydınlatma koşulları sayesinde muhtemelen en altta yer alıyor.
- Kartı tutmak için gereken alanlarda içerikten kaçının.
- Temas noktaları (ve ilgili harekete geçirici mesajlar) odak noktaları olmalı ve etkileşime girmesi kolay olmalıdır. (Sadece bir oyun kartının yüzü tasarımın merkezinde olduğu gibi)
- Bir kart bir bit bilgi içerir.
Basit katmanlar oluştur
Artık fiziği düşündüğünüze göre, tüm arayüz için birleşik bir kart stili oluşturmak için basit katmanlama ile bir sonraki seviyeye taşıyın. Nereden başlayacağınızdan emin değil misiniz? Google'ın Materyal Tasarım kuralları harika bir başlangıç noktasıdır.
“Materyal tasarımda, kağıdın fiziksel özellikleri ekrana çevrilir. Bir uygulamanın arka planı, bir kağıdın düz, opak dokusuna benzemektedir.
Bir uygulamanın davranışı, kağıdın yeniden boyutlandırılması, karıştırılması ve birden çok sayfada birbirine bağlanma yeteneğini taklit eder. Durum veya sistem çubukları gibi uygulamaların dışında yaşayan öğeler farklı bir muamele görür. Bunlar, altlarındaki uygulama içeriğinden ayrıdır ve kağıdın fiziksel özelliklerini taşımamaktadır.
Bunu kırın ve dijital bir nesnenin görünmesini ve fiziksel hissetmesini sağlayın. Ve eğer kullanıcılar ona dokunmak isterlerse, tıklamak isteyeceklerdir. Kavram sadece bu kadar basit.
Basit yazı tiplerine bağlı
Tipografi söz konusu olduğunda, basit sans serifleri genellikle cevaptır. Süper ince veya yoğunlaştırılmış seçeneklerden kaçının çünkü gözlerde biraz daha sert olabilirler.
Çoğu kart en iyi iki yazı tipi seçeneği ile (aynı aileden olsalar bile) çalışır - ana gövde için bir şey, diğeri de başlık veya harekete geçirici mesajlar için. Tipografi söz konusu olduğunda en önemli faktör, metin elemanlarının okunması kolay olacak şekilde bol miktarda kontrast eklemeyi hatırlamaktır. Her kart için arka plan ve metin öğeleri arasında yazı tipleri ve kontrast arasında kontrast eklemeyi unutmayın.
Sınır UI öğeleri
Benden sonra tekrarla: bir kart bir harekete eşittir.
Bu, muhtemelen tasarım boyunca düğmeler gibi bir grup kullanıcı arayüzü öğesi eklemenize gerek olmadığı anlamına gelir.
Kart tarzı bir tasarımda bile bir düğmeye bile ihtiyacınız olmayabilir.
Ancak kullanıcıların görsel bir işarete ihtiyaç duyduğunu düşünüyorsanız, bir düğme yeterlidir. Şekli ve tasarımı basit tutun - Materyal Tasarımı yaklaşımı iyi bir seçenektir ve sadece tek bir düğmeye basar.
Bir düğme, muhtemelen ihtiyacınız olan tek UI öğesidir. Bu tasarım hedefin.
Sonuç
Mükemmel kart için sihirli bir formül yoktur, ancak her kullanıcının tıklamaya (veya dokunmaya) teşvik edecek bazı tasarım seçenekleri vardır. Tasarımınızı gerçeğe odaklı tutun, bol miktarda alan ve kontrastla minimalist bir yaklaşım izleyin, basit tipografiye önem verin ve her kart için tek bir eylem oluşturun.
Bu taslağı takip etmek, kullanıcıların etkileşim kurmak istedikleri kart stili projeleri en iyi şekilde hayal edip kavramsallaştırmanıza yardımcı olacaktır. Bu fikirleri tasarım teorisi ve çılgın becerilerinizi, kullanıcılar için eğlenceli olacak ve estetik olarak modaya uygun olacak harika bir proje için birleştirin.