dea. cosmetics
Formülden rafa, tek bir şişeyle.
Kozmetik ve gıda takviyesi markalarına formülasyon, regülasyon ve marka stratejisi sunan bir danışmanlık firması için site. Hikâyeyi sayfa boyunca kaydırmaya eşlik eden 3D bir serum şişesi anlatır; yanında Türkçe bir cilt analizi atölyesi var.
- Rol
- Sanat yönetimi, 3D sahne, arayüz ve geliştirme
- Kimler için
- Kozmetik ve takviye markaları
- Platform
- Web · İngilizce site, Türkçe cilt atölyesi
- Altyapı
- Next.js, React Three Fiber, GSAP
Dört uzmanlık, tek bir plan.
Formülasyon, regülasyon ve marka stratejisini tek bir plan olarak anlatmak; Türkiye ve Avrupa'daki markalara tek muhatap olduğunu göstermek.
- Formül, test, regülasyon ve marka ayrı ayrı anlatılıyor
- Hangi pazarda hangi bildirimin gerektiği belli değil
- Stok kozmetik fotoğrafları; her danışmanlık sitesine benziyor
- Ziyaretçi için kendini deneyebileceği bir şey yok
- Tek ürün, tek yolculuk: şişe sayfa boyunca hikâyeyi taşıyor
- Dört pazar ve her birinin bildirim sistemi tek listede
- Siyah ve altın palet, serif başlıklar, gerçek 3D şişe
- 10 soruluk cilt atölyesi; sonuçta aktif içerik ve rutin
Sayfa nasıl anlatıyor, 8 adım.
Ekranlar uygulamanın kendisinden; örnek verilerle.
- 01
Şişe sahneye girer.
Açılışta 3D serum şişesi büyük 'dea.' yazısının önünde belirir; marka, regülasyon ve formülasyon notları şişenin parçalarına bağlı çizgilerle açılır.
- 02
Yaklaşım tek paragraf.
Kaydırınca şişe yolculuğa çıkar; arkasında firmanın yaklaşımını anlatan cümle kelime kelime belirir.
- 03
Kurucu, kemer çerçevede.
Kurucunun fotoğrafı kemer biçimli bir çerçeveden açılır; uzmanlık alanları etiket olarak sıralanır, yanında dönen bir mühür.
- 04
Dört hizmet, yatay kayar.
Masaüstünde sayfa dikey kayarken hizmet kartları yana akar; üstteki çubuk kaçıncı kartta olduğunu gösterir.
- 05
Fikirden rafa, şişe dolar.
Beş adımlı süreç ekrana sabitlenir; her adımda şişe biraz daha dolar, yanındaki ölçek fikirden rafa ilerler.
- 06
Dört pazar, dört dosya.
AB, Birleşik Krallık, ABD ve Türkiye; her birinin yanında bildirim sistemi. Satırın üzerine gelince satır altınla dolar.
- 07
Testler tek ekranda.
Fiziksel ve kimyasal, mikrobiyoloji, koruyucu etkinliği, güneş koruması, dermatolojik güvenlik, stabilite ve etkinlik testleri kısa açıklamalarla.
- 08
Kategoriler kayan yazıyla.
Güneş bakımı, dermokozmetik, renkli kozmetik ve diğer kategoriler büyük kayan yazıyla gelir; altında fotoğraflı kartlar.
Cilt atölyesi: deneyerek anlat.
Türkçe, 10 soruluk bir cilt analizi. Sağdaki şişe her cevapla biraz daha dolar.
Telefonda şişe üstte kalır.
Cilt atölyesinde şişe ekranın üstüne taşınır, sorular altında akar; ilerleme yine şişenin dolmasıyla görülür.
Neden böyle?
- 01
Fotoğraf değil, ürün
Hikâyeyi stok görsel yerine gerçek zamanlı çizilen bir 3D şişe taşıyor; model web için sıkıştırıldı.
- 02
İlerleme = şişe
Süreçte ve cilt atölyesinde ilerleme çubuğu yok; şişenin dolması ne kadar yol kalındığını gösteriyor.
- 03
Lüks, laboratuvar değil
Siyah, krem ve altın; serif başlıklar. Kozmetik markalarının kendi raf dilinde konuşmak için.
- 04
Günün havasına göre
Cilt atölyesinin sonucu, Open-Meteo'dan alınan günlük UV ve nem verisine göre küçük öneriler ekler.