Siteye dön Tümünü indir
MARKA VARLIKLARI

YUI Flux
logo paketi

İşaret, yatay ve dikey kilit, uygulama karosu ve 12 animasyonlu varyant — vektör (SVG), şeffaf zeminli PNG ve GIF olarak. Hepsi tek bir geometriden türetildi, aralarında kayma yok.

Paketi indir (.zip) Yükleyici stüdyosu → Kullanım kuralları

75 dosya · 25 SVG · 27 PNG · 12 GIF · 9 Lottie JSON · README · 2,5 MB

Animasyonlu logo

On iki varyant. Hepsi SMIL ile kurulu — <img> etiketi, CSS arka planı ve README içinde JS'siz çalışır. Giriş animasyonları bir kez kurulup gerçek logoda dinlenir; sürekli olanlar hiç boş kare vermez.

GİRİŞ — kurulur, gerçek logoda dinlenir

yui-mark-animated 32 × 32 · kurulum

Kartlar sırayla yukarıdan iner, bekler, topluca silinir. En sade giriş — açılış ekranı için.

SVG GIF
yui-mark-assemble 32 × 32 · toplanma

Kartlar dönük, küçük ve dağınık gelip yaylanarak yerine oturur, sonra tekrar dağılır. En hareketli giriş.

SVG GIF
yui-mark-draw 32 × 32 · çizim

Her kart önce konturla çizilir, sonra içi dolar ve kontur silinir. El yazısı hissi — teknik anlatımlar için.

SVG GIF
yui-mark-flow 32 × 32 · sürükle-bırak zinciri

Sağdaki kart tahtayı terk eder; yerine orta kolonun alttaki kartı İşaretin altı hücresi üzerinden komşudan komşuya geçen tam bir devir: sol üst → sol alt → orta alt → orta orta → orta üst → sağ → çıkış. Hiçbir kart durmuyor. Kart havalanınca yuvasında hayalet yer tutucu kalır — altı yuvanın hiçbiri tek karede bile boşalmaz, hiçbir kart kanvas kenarında kırpılmaz.

SVG GIF
yui-mark-flow-soft 32 × 32 · sürükle-bırak zinciri

Üsttekinin aynısı, yalnız hayalet yer tutucu yarı yarıya daha soluk. Siluet yine tam, ama boşalan yuva göze batmıyor — sakin yerleşimlerde bunu tercih edin.

SVG GIF
yui-logo-animated 81 × 36 · tam kilit

İşaret kurulur, ardından kelime işareti sağdan açılır. Video jeneriği ve sunum kapağı için.

SVG GIF
yui-logo-typewriter 81 × 36 · tam kilit

İşaret kurulur, YUI harf harf düşer, FLUX harf aralığı sıfırdan açılarak belirir. En "sinematik" olan.

SVG GIF

Yükleme animasyonu mu arıyorsunuz?

Aşağıdaki sürekli animasyonlar hazır dosyalardır. Hareketi, hızı ve rengi kendiniz ayarlayıp Lottie JSON olarak indirmek için yükleyici stüdyosuna geçin — 7 hareket, ayarlanabilir zamanlama, canlı önizleme. Hazır çıktılar logos/loaders/ altında da duruyor.

SÜREKLİ — logo hiç kaybolmaz, boş kare yok

yui-mark-animated-wave 32 × 32 · dalga

Kartlar sırayla hafifçe kalkıp yerine oturur. Kalıcı yerleşimlerde varsayılan sürekli animasyon.

SVG GIF
yui-mark-loader 32 × 32 · yükleyici

Parlaklık pano çevresinde dolaşır. Spinner yerine kullanılabilir; okunurluk için kartların opaklık kademesi burada eşitlendi.

SVG GIF
yui-mark-shimmer 32 × 32 · parıltı

Çapraz ışık bandı işaretin üzerinden geçer. İskelet-yükleme hissi; renkler ve şekil hiç değişmez.

SVG GIF
yui-mark-flip 32 × 32 · çevirme

Kartlar sırayla kendi düşey ekseninde çevrilir. Renk değişmez — işaret hiçbir karede yanlış renkte görünmez.

SVG GIF
yui-mark-pulse 32 × 32 · nefes

İşaret bütün olarak merkezinden %7,5 büyüyüp geri döner, kartların parlaklığı hafifçe dalgalanır. Boşta bekleyen ekranlar için.

SVG GIF

İşaret

Kanban kolonları. Gövde 30 × 28 birimlik kutuya oturur; 32 × 32 tuvale ortalanmış. Tamamen geometri — yazı tipinden etkilenmez.

yui-mark 32 × 32

Varsayılan. İki renkli — indigo + mor. Başka bir sürüm gerekmediği her yerde bunu kullanın.

SVG PNG
yui-mark-gradient 32 × 32

Tek geçişli gradyan dolgu. 96 px üstü ölçeklerde daha zengin durur; küçük boyda ayrım kaybolur.

SVG
yui-mark-white 32 × 32 · koyu zemin

Tek renk beyaz. Renk ayrımı kalktığı için opaklık kademeleri sertleştirildi — kareler delik gibi okunmuyor.

SVG PNG
yui-mark-ink 32 × 32 · açık zemin

Tek renk koyu. Tek renkli baskı, faks kalitesi çıktı ve damgalarda.

SVG

Kilit

İşaret + kelime işareti. Yatay sürüm varsayılandır; dar ve kare alanlarda dikey sürüme geçin.

yui-logo-horizontal 81 × 36

Varsayılan kilit. Site başlığı, e-posta imzası, fatura üst bilgisi.

SVG PNG 1024 PNG 2048
yui-logo-horizontal-white 81 × 36 · koyu zemin

Koyu arka plan, gradyan bant, fotoğraf üzerindeki düz yüzeyler.

SVG PNG 1024 PNG 2048
yui-logo-vertical 57 × 98

Kare ve dikey alanlar: sosyal profil, sponsorluk panosu, kartvizit arkası.

SVG PNG 1024
yui-logo-vertical-white 57 × 98 · koyu zemin

Dikey kilidin koyu zemin sürümü.

SVG PNG 1024
yui-wordmark 34 × 29

İşaret olmadan yalnız metin. İşaret zaten yakınlarda görünüyorsa tekrarlamak yerine bunu kullanın.

SVG PNG 1024

Uygulama karosu ve favicon

Köşe yarıçapı tuvalin %22'si — iOS ve macOS ikon oranı. İşaret genişliği tuvalin %56'sı; kenar boşluğu mağaza kırpmalarına dayanacak kadar geniş.

yui-icon 512 × 512

Gradyan karo + beyaz işaret. iOS, Android, macOS ve mağaza görseli.

SVG PNG 1024 512 256
yui-icon-light 512 × 512 · koyu zemin

Beyaz karo + renkli işaret. Koyu arayüzlerde ikon rozeti olarak.

SVG PNG 512
favicon 32 × 32

16 px'te okunurluk için opaklık kademeleri sertleştirildi, köşe yarıçapı küçültüldü. Sekme ve yer imi.

SVG PNG 64

PNG boyutları

Şeffaf zeminli. Headless Chromium ile 1× render edilip Lanczos ile küçültüldü — kenarlar her boyda temiz.

VARLIKGENİŞLİK (PX)
yui-markişaret, iki renkli 1024 512 256 128
yui-mark-whiteişaret, koyu zemin 1024 512 256
yui-iconuygulama karosu, gradyan 1024 512 256 128 64
yui-icon-lightuygulama karosu, beyaz 1024 512 256
yui-logo-horizontalyatay kilit 2048 1024 512
yui-logo-horizontal-whiteyatay kilit, koyu zemin 2048 1024 512
yui-logo-verticaldikey kilit 1024 512
yui-logo-vertical-whitedikey kilit, koyu zemin 1024 512
yui-wordmarkyalnız metin 1024 512

Renkler

Kutuya dokunun, HEX değeri panoya kopyalanır.

Kelime işareti ve yazı tipi

Kelime işareti Figtree (800 / 700) ile kurulur; yığın siteyle aynıdır: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif.

Metin içeren SVG'ler canlı <text> kullanır — Figtree kurulu olmayan makinede yığındaki bir sonraki yazı tipine düşer. Harf formunun sabit kalması gerektiği yerlerde (basılı iş, üçüncü taraf teslimi, video) png/ altındaki hazır çıktıları kullanın. Sadece işaret içeren dosyalar (yui-mark*, yui-icon*, favicon) tamamen geometridir ve yazı tipinden etkilenmez.

Kullanım kuralları

Kısa liste. Şüphedeyseniz varsayılan sürümü olduğu gibi kullanın.

Yapın

  • İşaretin çevresinde en az bir hücre yüksekliği — gövdenin yaklaşık %29'u — boşluk bırakın.
  • Yatay kilidi 88 px genişliğin altına düşürmeyin; daha darda yalnız işareti kullanın.
  • Koyu zeminde -white sürümlerine geçin.
  • Web ve uygulama içinde SVG'yi tercih edin; PNG'yi yalnız vektör kabul etmeyen yerlerde kullanın.

Yapmayın

  • Oranı bozmak, döndürmek, eğmek veya gölge/kontur eklemek.
  • Hücrelerin rengini, opaklığını veya aralığını değiştirmek.
  • Kelime işaretini kendiniz yeniden dizmek — yui-wordmark.svg hazır.
  • Kalabalık fotoğrafın üstüne doğrudan koymak; önce düz bir yüzey yerleştirin.

Paketin tamamı tek dosyada

24 SVG (12’si animasyonlu), 27 şeffaf PNG, 12 GIF ve kullanım notlarını içeren README.

yui-brand-kit.zip