Marka ve logo paketi

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

4,0 s

YUI işareti — kartlar sırayla yerine oturuyor

yui-mark-animated32 × 32 · kurulum

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

SVG GIF

4,4 s

YUI işareti — kartlar dağınıktan toplanıyor

yui-mark-assemble32 × 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

5,0 s

yui-mark-draw32 × 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

5,0 s · SÜRÜKLE-BIRAK YUI işareti — kartlar yuvadan yuvaya sürükleniyor

yui-mark-flow32 × 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

5,0 s · SOLUK HAYALET YUI işareti — sürükle-bırak, soluk yer tutucu

yui-mark-flow-soft32 × 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

4,0 s

yui-logo-animated81 × 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

5,0 s

yui-logo-typewriter81 × 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çinyü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

2,6 s

yui-mark-animated-wave32 × 32 · dalga

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

SVG GIF

2,0 s · YÜKLEYİCİ

yui-mark-loader32 × 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

2,8 s

yui-mark-shimmer32 × 32 · parıltı

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

SVG GIF

3,0 s

yui-mark-flip32 × 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

3,0 s · EN SAKİN YUI işareti — nefes

yui-mark-pulse32 × 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-mark32 × 32

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

SVG PNG

yui-mark-gradient32 × 32

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

SVG

yui-mark-white32 × 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-ink32 × 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-horizontal81 × 36

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

SVG PNG 1024 PNG 2048

yui-logo-horizontal-white81 × 36 · koyu zemin

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

SVG PNG 1024 PNG 2048

yui-logo-vertical57 × 98

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

SVG PNG 1024

yui-logo-vertical-white57 × 98 · koyu zemin

Dikey kilidin koyu zemin sürümü.

SVG PNG 1024

yui-wordmark34 × 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-icon512 × 512

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

SVG PNG 1024 512 256

yui-icon-light512 × 512 · koyu zemin

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

SVG PNG 512

favicon32 × 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 renkli1024 512 256 128

yui-mark-whiteişaret, koyu zemin1024 512 256

yui-iconuygulama karosu, gradyan1024 512 256 128 64

yui-icon-lightuygulama karosu, beyaz1024 512 256

yui-logo-horizontalyatay kilit2048 1024 512

yui-logo-horizontal-whiteyatay kilit, koyu zemin2048 1024 512

yui-logo-verticaldikey kilit1024 512

yui-logo-vertical-whitedikey kilit, koyu zemin1024 512

yui-wordmarkyalnız metin1024 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

YUI Fluxlogo paketi

Animasyonlu logo

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

Yükleme animasyonu mu arıyorsunuz?

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

İşaret

Kilit

Uygulama karosu ve favicon

PNG boyutları

Renkler

Kelime işareti ve yazı tipi

Kullanım kuralları

Yapın

Yapmayın

Paketin tamamı tek dosyada

YUI Flux
logo paketi