01 / Tasarım
Tasarım süsleme değil, kararlardır.
Bir görünüm işin kolay kısmı. Gerçekte satın aldığınız şey, onun altındaki akıl yürütme — bir insanın neyi önce, neyi sonra, neyi hiç okumayacağını belirleyen ölçek, boşluk, kontrast ve hizalama. Bu dördünden birini kaldırın, aynı kelimeler işe yaramaz hale gelir. Aşağıdaki çerçeve onları geri koymanıza izin veriyor.
Dördü de yerinde. Buradaki hiçbir şey süs değil; birini kaldırın ve çerçevenin nasıl çalışmayı bıraktığını izleyin.
Dört karar
Yerinde: 4/4
Kelimeler hiç değişmiyor. Yalnızca tasarım değişiyor.
02 / Marka
Bir logo, en kötü göründüğü yer kadar iyidir.
Beyaz bir slaytta, dört yüz piksel boyutunda bir logoyu doğru gösterebilen çok kişi var. Asıl iş, yaşamak zorunda olduğu diğer her yer — bir tarayıcı sekmesi, nakışlı bir polo, tek renkli bir kaşe, kenara çekilmeyi reddeden bir fotoğraf. Önce bunlara göre tasarlıyoruz, sunum dosyasını en sona bırakıyoruz.
Yapı
Koruma alanı her yanda x'tir; x, logonun yüksekliğinin yarısıdır. Piksel sayısı olarak değil oran olarak tanımlanır, çünkü emin olabileceğiniz tek şey birinin onu kimsenin öngörmediği bir boyutta kullanacağıdır.
Ölçek
Tarayıcı sekmesi · uygulama ikonu · avatar
Silüet dışında her şey gitti. Bu yüzden tasarım silüetin kendisidir; 400 pikselde zekice görünen süs değil.
Koşullar
Ters
Koyu üstünde açık, kalınlaşmadan.
Tek renk
Arkasına saklanacak ton yok.
Tek bit
Kaşe, gravür, nakış.
Oyulmuş
Bir çizim değil, bir boşluk.
Fotoğraf üstünde
Karşılaşacağı en kalabalık zemin.
Uzaktan
Kısık göz testi: yalnızca biçim.
04 / Görseller
Altı farklı iş. Tek el.
Ana görsel, ikonlar, doku, diyagramlar, görsel olarak tipografi, hareket. Farklı sorunlar ve genellikle farklı kişilerden satın alınırlar — bu yüzden pek çok marka, aynı logoyu taşıyan beş ayrı marka gibi görünür. Sanat yönetimi, hepsini tek bir kurallar dizisinden üretme kararıdır.
- 01
Ana görsel
Bir kampanyanın kesildiği resim.
Kontur geometrisi · merkez dışında tek odak
- 02
İkonografi
Tek çizgi kalınlığı, tek köşe yarıçapı, tek grid.
24 birimlik grid · 1,5 çizgi · yuvarlak birleşim
- 03
Doku
Düz bir rengin de bir yüzeyi olsun diye.
Yarım ton geçişi · alandan ayrılan tek nokta
- 04
Diyagramlar
Kimsenin okumadığı paragrafın yerini alan çizim.
Düğüm grafiği · kıl çizgi kenarlar · tek parlak rota
- 05
Görsel olarak tipografi
Kelimelerin resmin kendisi olduğu yer.
Çerçeveden taşan display · serif vurgu
- 06
Hareket
Durağan bir kare, daha uzun bir şeyin tek anıdır.
21 sn doğrusal döngü · dört kaydırılmış elips
Altı işaret, tek kutu, tek çizgi kalınlığı ve her birinde yalnızca bir kez kullanılan vurgu rengi. Bu kısıt argümanın ta kendisi — size bir görsel klasörü yerine bir görsel sistem teslim etmeyi tercih etmemizin sebebi de bu.
05 / Elinizde kalan
Ekranlar değil, sistem.
Bir proje, onu var eden şeyle biter: bir tipografi ölçeği, bir palet, bir boşluk ritmi ve bir grid — ekibiniz her salı bizi aramadan devam edebilsin diye yazıya dökülmüş halde. Bu sayfa bizimkiyle dizildi; aşağıdaki her sayı, eskiyebilecek bir tabloya yazılmak yerine siz bakarken sayfadan ölçülüyor.
Tipografi
- display-lgclamp(2.5rem, 7.5vw, 6.5rem)—
Karar verin
- display-mdclamp(2rem, 5vw, 4rem)—
Sonra çizin
- display-smclamp(1.5rem, 3vw, 2.25rem)—
Apaçık olana kadar inceltin
- leadclamp(1.0625rem, 1.6vw, 1.375rem)—
Herkesin tekrar edebileceği tek bir cümleyle anlatın.
- body1rem—
Kuralı yazıya dökün ki sonraki kişi tahmin etmek zorunda kalmasın.
- eyebrow0.6875rem—
Teslim edin
Renk
Yüzey
- --bg—
- --bg-elev—
- --bg-sunken—
Çizgi
- --line—
- --line-strong—
Mürekkep
- --fg—
- --fg-dim—
- --fg-muted—
Sinyal
- --accent—
- --violet—
- --cyan—
Kontrast
- Gövde——
- İkincil——
- Etiketler——
- Vurgu metni——
- Vurgu üstünde——
Temayı menüden değiştirin. Buradaki her değer, oranlar dahil, siz bakarken sayfadan okunuyor — böylece birini bozan bir palet değişikliği bir denetimde değil, teslimde ortaya çıkar.
Boşluk
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
Dördün katları. Aralarına düşen her şey bir kazadır ve bir düzeni el yordamıyla yerleştirilmiş gibi hissettiren de bu kazalardır.
Grid
- Kapsayıcı
- —
- Kolon boşluğu
- —
- Ritim
- —
- Kolon
- 12
On iki kolon ve ekranla birlikte büyüyen tek bir kolon boşluğu. Bu sitedeki her blok, bu da dahil, onun üzerine oturur.
Figma kütüphanesi ve kod olarak teslim edilir.
Bir klasör dolusu dışa aktarım ve "kolay gelsin" değil. Tasarımcılarınızın açtığı kütüphane, mühendislerinizin içe aktardığı token'lar ve ikisinin altı ay sonra da uyumlu kalmasını sağlayan yazılı kurallar.
- FIGMA kütüphanesi
- Tasarım token'ları (JSON)
- Bileşen belgeleri
- Hareket şartnameleri
- Düzenlenebilir kaynak dosyalar
- Varlık kiti