Estetik Veritabanı

Parfüm veritabanları genellikle şöyle görünür: beyaz arka plan, ürün kartları, yuvarlatılmış köşeler, gölgeler. İşlevsel ama ilham vermeyen bir deneyim. Veri var, ama atmosfer yok.

Biz farklı bir şey istedik. Bilgi yoğun ama görsel olarak çekici. Bir veritabanı — ama gezinmek istediğiniz bir veritabanı, sadece arama yapmak istediğiniz değil.

Buna "Estetik Veritabanı" diyoruz.

Ters Çevrilmiş Tipografi

Geleneksel tipografi kuralı: önemli metin büyük ve kalın olmalı. Başlıklar bold, alt metinler light.

Biz tam tersini yapıyoruz. Büyük metin ince ağırlıkta, küçük metin yarı kalın. 72 piksel bir başlık "thin" ağırlığında, 14 piksel bir etiket "semibold."

Neden? Büyük metin zaten dikkat çekiyor — kalın yaparsanız bağırır. İnce yaparsanız zarif bir varlık gösterir. Küçük metin ise dikkat çekmek için yardıma ihtiyaç duyar — yarı kalın ağırlık onu okunabilir kılar.

Bu ters çevirme, sayfaya bir nefes alanı veriyor. Her şey aynı anda dikkat çekmek için yarışmıyor.

Opaklık Hiyerarşisi

Çoğu tasarım sistemi hiyerarşiyi farklı renklerle kurar — başlık siyah, alt metin gri, ipucu açık gri. Bu yaklaşım kolay ama dağınık bir palet yaratır.

Biz tek bir renk kullanıp opaklığı değiştiriyoruz. Birincil içerik yüzde yetmiş opaklıkta, ikincil yüzde elli, ipuçları yüzde yirmi beş, dekoratif elemanlar yüzde on beş.

Bu, her elemanda tutarlı bir ton yaratıyor. Sayfa bir bütün olarak uyumlu hissettiriyor — renk paleti değil, ışık ve gölge oyunu.

Saç İnceliğinde Çizgiler

Kartlar arasındaki boşlukları dolduran 1 piksellik çizgiler, gazete sütunlarını andıran bir his yaratıyor. Arka plan rengi boşluktan sızıyor, elemanlar arasında neredeyse görünmez ama yapısal olarak belirgin ayırıcılar oluşturuyor.

Bu teknik, "gap-px" olarak adlandırıyoruz — elemanlar arasında tam 1 piksel boşluk, o boşluktan arka plan renginin hafifçe sızması. Sonuç: gölge kullanmadan derinlik, çerçeve kullanmadan yapı.

Karanlık Tema, Tek Tema

Başlangıçta hem açık hem karanlık tema sunduk. Sonra karanlık temayı varsayılan yaptık. Sonra açık temayı tamamen kaldırdık.

Neden? Üç sebep.

Birincisi, parfüm görselleri karanlık arka planda dramatik şekilde daha iyi görünüyor. Cam şişeler ışığı yakalıyor, altın detaylar parlıyor, derinlik hissediliyor.

İkincisi, editöryal his. Lüks dergiler, müze katalogları, sinema posterleri — hepsi karanlık zeminleri tercih eder. Karanlık tema bilgiyi sunmaz, sergiler.

Üçüncüsü, karar yorgunluğunu ortadan kaldırıyor. "Hangi temayı kullanayım?" sorusunu silmek, hem bizim hem kullanıcının hayatını basitleştirdi.

Gri Tonlamadan Renge

Tüm parfüm görselleri varsayılan olarak gri tonlamalı. Fare üzerine geldiğinde renge dönüyor. Bu küçük etkileşim birkaç şey başarıyor:

Görsel gürültüyü azaltıyor. Onlarca renkli görsel yan yana olduğunda göz nereye bakacağını bilemez. Gri tonlama bir denge yaratıyor, hover anında tek bir görsel öne çıkıyor.

Keşif hissi veriyor. Renk bir ödül gibi hissettiriyor — etkileşimin bir karşılığı var.

Performansa katkı sağlıyor. Gri tonlamalı görseller görsel olarak daha hafif algılanır — beyaz alan ve içerik daha rahat okunur.

Sayılar Birinci Sınıf Vatandaş

Bir parfüm veritabanında sayılar her yerde: puanlar, nota sayıları, yıl, yorum adedi. Çoğu tasarım bunları normal metin gibi gösterir — aynı font, aynı boyut.

Biz tüm sayıları monospace fontla gösteriyoruz. Rakamlar hizalanıyor, okunabilirlik artıyor. Büyük veri noktaları için piksel fontumuz var — sayıları veri görselleştirmesinin bir parçası gibi gösteren, endüstriyel bir karakter.

Sayılar bilgidir. Bilgiyi bir metin paragrafı gibi değil, bir gösterge paneli gibi sunmak istiyoruz.