Marka Kimliği & UI/UX Tasarım
Bir logo ile marka kimliği sistemi arasındaki farkı biliyoruz. Design token'lar, renk psikolojisi, tipografi eşleştirme ve Figma component library ile büyüdükçe tutarlı kalan markalar inşa ediyoruz.
Logo değil, sistem tasarlıyoruz.
Çoğu firma "logo yaptırdım, markam var" sanıyor. Logo, marka kimliğinin yalnızca bir parçası — ve genellikle en kolay parçası. Asıl zor olan, markanızın her temas noktasında tutarlı, tanınabilir ve duygusal olarak doğru hissettirmesini sağlamaktır. Bir Instagram post'u, bir fatura, bir web sayfası, bir ambalaj, bir sunum — hepsinde aynı "kişilik" konuşmalı. Biz bunu sağlamak için marka sistemi tasarlıyoruz. Bir logo dosyası değil, yaşayan bir tasarım altyapısı teslim ediyoruz.
Renk seçimi rastgele olmamalı. Renk psikolojisi, hedef kitleye ve sektöre göre renk kararlarını şekillendirir. Mavi güven verir — finans ve sağlık sektöründe dominant. Turuncu enerji ve erişilebilirlik hissi yaratır — genç kitleye yönelik markalar için güçlü. Ama sadece ana renk yetmez: primary, secondary, neutral, semantic (success, warning, error) renk paletleri ve her birinin 9 kademe açık-koyu skalası oluşturuyoruz. Tipografi eşleştirmede ise kontrast prensibi uyguluyoruz: başlık fontu ile gövde fontu birbirini tamamlamalı ama birbirine benzememeli. Serif + Sans-serif klasik bir eşleştirme ama her marka için doğru değil. x-height, letter-spacing, weight dağılımı — bu kararlar okunabilirliği ve marka tonunu doğrudan etkiler.
Spacing ve layout sistemi, tutarlılığın görünmez kahramanı. 4px veya 8px bazlı bir spacing scale belirliyoruz: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Her margin, padding, gap değeri bu skaladan gelir. Rastgele "biraz boşluk ekle" yok — her mesafe bilinçli ve tutarlı. Border radius, shadow değerleri, icon boyutları — hepsi token olarak tanımlanır. Figma Variables ile bu token'lar merkezi olarak yönetiliyor: bir yerde değiştirdiğinizde tüm bileşenlere yansıyor. Aynı token'lar Tailwind CSS config'ine veya CSS custom properties'e aktarılıyor. Tasarım ile kod arasında kayıp yok.
Figma'da sadece statik ekranlar değil, component library inşa ediyoruz. Button, input, card, modal, navigation — her biri variant'larıyla (size, state, theme) tanımlanmış. Auto Layout ile responsive davranış Figma'da simüle ediliyor. Dark mode, Figma Variables ile tek tıkla geçiş yapılabilen ayrı bir token seti. Bu component library, geliştirme aşamasında birebir React bileşenlerine dönüşüyor. Tasarımcı ve geliştirici aynı dili konuşuyor, pixel-perfect uygulama çeviri değil, doğrudan aktarım oluyor.
Neler yapıyoruz
- Marka kimliği sistemi — logo ötesinde yaşayan altyapı
- Renk psikolojisi bazlı palet: primary → semantic, 9 kademe skala
- Tipografi eşleştirme — kontrast, x-height, weight analizi
- Spacing scale (4px/8px bazlı) ve layout grid sistemi
- Figma Variables ile merkezi design token yönetimi
- Component library — variant, state, theme, dark mode
- Brand guideline dokümanı — kullanım kuralları ve örnekler
- Tasarım → Tailwind CSS token aktarımı — kod uyumu
Neden bizi seçmelisiniz?
Sistem, Logo Değil
Bir SVG dosyası teslim edip gitmiyoruz. Renk paleti, tipografi, spacing, ikonografi, fotoğraf stili, ses tonu — markanızın her boyutunu kapsayan bir sistem kuruyoruz. 50 sayfalık brand guideline ile teslim ediyoruz.
Figma Variables ile Tek Kaynak
Tüm design token'lar Figma Variables'da tanımlı. Primary rengi değiştirdiğinizde 200 bileşende otomatik güncelleniyor. Dark mode, ayrı bir token seti ile tek tıkla aktif. Tasarım dosyası hiçbir zaman eskimiyor.
Duygusal Tasarım Kararları
Renk, tipografi ve spacing seçimleri estetik beğeni değil, psikolojik etki bazlı. Hedef kitlenizin yaş, kültür ve beklentilerine göre duygusal tepki oluşturan tasarım kararları alıyoruz. Her seçimin bir nedeni var.
Tasarım-Kod Uyumu
Figma token'ları doğrudan Tailwind CSS config'e veya CSS custom properties'e aktarılıyor. Tasarımcı 16px border-radius dedi, geliştirici 12px yazdı — bu kopukluk bizde yok. Aynı token, aynı değer, her yerde.
Sürecimiz
Her projede takip ettiğimiz 4 adım.
Marka Keşif Atölyesi
2–3 saatlik yoğun bir oturum. Markanızın değerleri, kişiliği (arketip analizi), hedef kitle personas'ı, rakip konumlandırması. Vizyon ve misyon değil — somut tasarım yönlendirmeleri çıkarıyoruz: 'profesyonel ama soğuk değil', 'modern ama trendy değil'.
Moodboard & Yön Onayı
3 farklı görsel yön: renk dünyası, tipografi tarzı, fotoğraf/illüstrasyon stili, genel atmosfer. Her moodboard bir hikaye anlatır. Beğendiğiniz yönü seçiyorsunuz, karıştırma (mix) de mümkün. Bu aşama sonrası tasarım yönü netleşiyor.
Logo & Temel Kimlik Elemanları
Logo (ana, alternatif, ikon, monochrome versiyonlar), renk paleti (primary, secondary, neutral, semantic + 9 kademe), tipografi sistemi (heading + body + mono), spacing scale. Her eleman Figma Variables'a token olarak tanımlanıyor.
Component Library & UI Kit
Button, input, card, modal, navigation, badge, avatar, table — her bileşen variant'larıyla (size: sm/md/lg, state: default/hover/active/disabled, theme: light/dark) tasarlanıyor. Auto Layout ile responsive. Geliştirme için birebir referans.
Brand Guideline & Handoff
PDF ve interaktif (Figma) format. Logo kullanım kuralları, renk kullanım do's & don'ts, tipografi hiyerarşisi, spacing örnekleri, fotoğraf ve illüstrasyon rehberi, ses tonu (tone of voice) kılavuzu. Tailwind config veya CSS export dahil.
Sıkça sorulan sorular
Marka & Tasarım hakkında merak edilenler.
Logo tek bir görsel işaret. Marka kimliği sistemi: logo + renk paleti (9 kademe) + tipografi sistemi + spacing scale + ikonografi + fotoğraf stili + ses tonu + kullanım kuralları + Figma component library. Logo bir damga, sistem bir dil. İkisinin maliyeti ve kapsamı çok farklı.
Figma Variables, tasarım token'larını (renk, boyut, spacing, border-radius) merkezi olarak tanımlamanızı sağlar. Bir token değiştiğinde tüm bileşenler otomatik güncellenir. Dark mode, farklı bir token seti ile tek değişkenle aktif olur. Bu olmadan 200 bileşende renk değiştirmek saatler sürer.
Evet, araştırmalarla kanıtlanmış. Renk, satın alma kararının %85'inde etkili (Institute for Color Research). CTA butonunun rengi tek başına dönüşüm oranını %21 değiştirebilir (HubSpot A/B test verisi). Biz renk kararlarını 'güzel' değil, 'etkili' olma odağıyla alıyoruz.
Figma'daki token'ları Figma Tokens eklentisi ile JSON olarak export ediyoruz. Bu JSON, Style Dictionary ile Tailwind CSS config'e, CSS custom properties'e veya React Native StyleSheet'e dönüştürülüyor. Tasarımda --color-primary-500: #3B82F6 ise kodda da aynı değer. Otomatik senkronizasyon.
Kesinlikle. Mevcut logodan yola çıkarak renk paleti, tipografi, spacing, component library ve brand guideline oluşturuyoruz. Logoyu değiştirmeden tüm sistemi inşa edebiliriz. Gerekirse logoda küçük revizyonlar da (renk uyumu, vektör temizliği) dahil.
Projenizi konuşalım.
Ücretsiz ilk görüşmede projenizin kapsamını, süresini ve bütçesini birlikte belirleyelim.
Ücretsiz Görüşme Ayarla