RedFox dizayn maktabi01-dars · Logo

Logoning adaptiv holati

Billboardda çiroyli turgan logo telefon ekranida doğga aylanadi. Şuning uçun kuçli brendlarda logo bitta emas — u bir oila: joy kiçraygan sari ortiqça qismini taşlab boradi, lekin tanilaveradi.

8 daqiqaöqiş
4 darajaXL · L · M · S
7 brendjonli misol

Bitta logo hamma joyga siğmaydi

Logo — rasm emas, işlaydigan belgi. U 3 metrli peşlavhada ham, brauzer yorliğidagi 16 pikselda ham bir xil tanilişi kerak.

Bitta logohamma ölçamda öşa fayl

250 px

110 px

48 px

18 px

18 pikselda «EST. 1873» ham, nom ham yöq — yaşil doğ qoldi.

Adaptiv logohar ölçamga öz holati

250 px

110 px

72 px

18 px

18 pikselda — bitta qizil yulduz. Kiçik, lekin aniq Heineken.

Yuqoridagi ikki qatorga qarang: ikkalasida ham rasmiy Heineken logosi. Birinçisida bitta fayl töğridan kiçraytirilgan — mayda yozuv avval xiralaşadi, keyin butunlay yöqoladi. Ikkinçisida har ölçamga logoning alohida holati tayyorlangan.

Şu ikkinçi yondaşuv adaptiv logo deyiladi (inglizça — responsive logo). Ğoya oddiy: sayt ekran eniga moslaşgani kabi, logo ham joyga moslaşadi. Farqi — logo şunçaki kiçraymaydi, balki soddalaşadi.

Tört daraja: XL · L · M · S

Kiyim ölçami kabi: XL, L, M, S. Eng kiçigi — S — favicon vazifasini ham bajaradi, alohida beşinçi daraja kerak emas.

XLTöliq
600 px dan katta
Belgi + nom + şior yoki bezak. Logoning eng boy holati.
Billboard, peşlavha, körgazma, taqdimotning birinçi slaydi
LAsosiy
200–600 px
Belgi + nom. Şior va mayda bezak tuşib qoladi.
Sayt sarlavhasi, blank, vizitka, qadoq
MIxçam
64–200 px
Qisqa nom yoki belgining özi. Joylaşuv ixçamlaşadi.
Telefon ekrani, ilova içi, ijtimoiy tarmoq
SBelgi
16–64 px
Bitta belgi yoki harf. Favicon ham — şu holatning özi.
Ilova ikoni, avatar, favicon

Favicon — brauzer yorliğidagi kiçkina belgi (16–32 piksel). Ba'zi qöllanmalarda u alohida «XS» daraja qilib körsatiladi. Biz amalda S holatning özini favicon qilamiz: yaxşi çizilgan S 16 pikselda ham öqiladi, şunday ekan beşinçi fayl — ortiqça yuk.

Pikseldagi çegaralar — qonun emas, mölcal. Asosiy savol bitta: «şu joyda logoning qaysi qismi hali öqiladi?» Öqilmaydigan qism qolmasligi kerak.

Disney: töliq nomdan bitta «D» gaça

Sürgiçni torting: joy toraygan sari logo özi soddalaşadi. «Bitta logo» tugmasi — adaptivsiz holatni körsatadi.

Joy eni: —

Hammasi joyida: töliq rasmiy nom — imzo va «The … Company».

XL«The Walt Disney Company»
Hammasi joyida: töliq rasmiy nom — imzo va «The … Company».
Bino peşlavhasi, rasmiy hujjat, körgazma devori
L«Walt Disney» imzosi
«The … Company» tuşib qoldi — imzoning özi qoldi.
Sayt sarlavhasi, blank, qadoq
M«Disney»
«Walt» tuşib qoldi — eng taniqli söz qoldi.
Ilova içi, tugma, ijtimoiy tarmoq muqovasi
SBitta «D» harfi
Faqat «D» — 16 pikselda ham tanilaveradi.
Ilova ikoni, avatar, favicon

E'tibor bering: har qadamda yangi narsa çizilmaydi — bor narsadan bir qism olib taşlanadi. Avval «The … Company», keyin «Walt», oxirida «isney». Qolgan «D» — öşa imzodagi harfning özi, şuning uçun uni körgan odam darhol «Disney» deydi.

Kinoda bundan ham boy holatni körgansiz: imzo ustida qasr va yoy. U ham şu oilaning a'zosi — eng katta ekran uçun. Mantiq bir xil: ekran kiçraygan sari avval qasr ketadi, keyin qolgani.

Bu — adaptiv logoning asosiy şarti: kiçik holat katta holatning bir bölagi bölişi kerak. Aks holda u boşqa logo bölib qoladi va tanilmaydi.

Dunyo brendlari buni qanday qiladi

Olti brend, bitta mantiq. Har ustunda — yuqoridan pastga: joy kiçrayadi, logo soddalaşadi.

Coca-Cola

Uzun yozuv kiçik joyga siğmaydi — brendning xalq orasidagi qisqa nomi «Coke» işga tuşadi.

LSpenser yozuvidagi töliq nom
S«Coke» — qisqa nom

Heineken

Avval sana, keyin joylaşuv, oxirida nomning özi tuşib qoladi. Qizil yulduz — yolğiz ham Heineken.

XLYulduz + nom + «EST. 1873»
LBir qatorga yoyildi, sana yöq
SFaqat yulduz

Nike

Eng sof misol: yozuvni olib taşlaysiz — swoosh qoladi. Bugun Nike köpinça umuman nomsiz yuradi.

LNIKE + swoosh (1978)
SFaqat swoosh

Bang & Olufsen

Töliq nom — 14 ta belgi. Kiçik joyda undan uçta harf qoladi: B&O. Quloqçin korpusiga ayni şu siğadi.

LTöliq nom + monogramma
SB&O monogrammasi

NOAA

Davlat muhri: aylana böylab uzun matn. Kiçrayganda matn öqilmaydi — şuning uçun u birinçi bölib tuşadi.

XLMuhr: halqa böylab töliq nom
MBelgi + «NOAA»
SFaqat belgi

Amazon

Nomdan bitta «a» va tabassum-strelka qoladi. Ilova ikonida siz körayotgan narsa — ayni şu.

LNom + tabassum
S«a» + tabassum

Adaptiv logoning tört qoidasi

Yuqoridagi hamma misol şu tört harakatdan birini — köpinça bir neçtasini birga — qiladi.

Yozuvni olib taşla

Kiçik joyda birinçi bölib matn öqilmay qoladi. Belgi kuçli bölsa — u yolğiz ham işlaydi. Belgi yöq bölsa — nomning birinçi harfi belgiga aylanadi.

Detalni soddalaştir

Mayda bezak, ingiçka çiziq, halqa böylab yozuv — kiçrayganda doğga aylanadi. Ularni kiçraytirmang, olib taşlang: asosiy şakl qolsin.

Joylaşuvni özgartir

Bir xil qismlar — boşqaça terilgan. Tor baland joyga vertikal, keng past joyga (sayt sarlavhasi) gorizontal variant. Qismlar özgarmaydi, faqat tartib.

Kiçikda çiziqni qalinlaştir

Logoni 10 baravar kiçraytirsangiz, çiziği ham 10 baravar ingiçkalaşadi va yöqoladi. Kiçik holatda çiziq ataylab qalinroq, oraliq kengroq çiziladi — köz uni katta holat bilan «bir xil» köradi. Bu optik kompensatsiya deyiladi.

nisbat bilanqalinlaştirib

PDP Ecosystem: bitta belgi, butun oila

2022 yilda PDP ekotizimi uçun aydentika qilganimizda logo boşidanoq adaptiv qilib çizildi: töliq muhr, asosiy logo va yolğiz belgi. Ekotizimdagi har loyiha şu oiladan öz holatini oladi.

Loyihani töliq köriş

Uç holat bitta varaqda: töliq muhr, asosiy logo va belgi.

PDP Ecosystem belgisi soat ekranida va ilova ikonida — S: soat ekrani va ilova ikoni — faqat belgi.

PDP Ecosystem belgisi brauzer yorliğida va telefon ekranida — S: brauzer yorliği (favicon) va çat avatari.

PDP Ecosystem töliq logosi bino peşlavhasida — XL: bino peşlavhasi — töliq logo.

Logo bitta emas — oila

Logoingiz bormi? Şu tört savol bilan özingiz sinab köring — beş daqiqa ketadi.

Adaptiv logo — moda emas, zarurat. Bugun brendni birinçi marta köpinça telefon ekranida, 40 pikselli avatarda köramiz. U yerda töliq logo işlamaydi — demak, kiçik holat oldindan öylangan bölişi kerak.

Yaxşi logo tizimi şunday quriladi: avval eng kiçik holat (S) çiziladi va 16 pikselda sinaladi. U işlasa — ustiga nom, şior, bezak qöşilib L va XL hosil böladi. Teskarisi — katta logoni keyin «qisqartiriş» — deyarli doim azob.

16 piksel. Logoni favicon ölçamiga kiçraytiring. Nima ekani bilinadimi?
Kvadrat. Ijtimoiy tarmoq avatariga siğadimi — yoki ikki çetidan kesiladimi?
Bir rang. Qora-oq muhrda, oynadagi yozuvda ham tanilaveradimi?
Oila. Kiçik holat katta holatning bölagimi — yoki boşqa logomi?

Bittasiga «yöq» deb javob bergan bölsangiz — logoga adaptiv holatlar kerak.

Logoni birga körib çiqamiz

Manbalar

Bu mavzuni birinçi marta 2018 yil 16 fevralda @redfoxuz Telegram kanalida tuşuntirganmiz — bu dars öşa misollarning yangilangan, tiniq varianti. «Responsive logo» ğoyasini 2014 yilda britaniyalik dizayner Joe Harrison ommalaştirgan.

Sahifadagi logolar qayta çizilmagan: hammasi Wikimedia Commons'dagi vektor fayllar, daraja kerak bölgan joyda — öşa fayldan kesib olingan qism. Tovar belgilari öz egalariga tegişli; bu yerda faqat ta'lim maqsadida körsatilgan.

Rasm	Fayl (Wikimedia Commons)	Litsenziya
Disney — «The Walt Disney Company» (XL)	The Walt Disney Company Logo.svg	Public domain (matnli logo)
Disney — «Walt Disney» imzosi (L)	Walt Disney wordmark.svg	Public domain (matnli logo)
Disney — «Disney» (M) va «D» (S, şu fayldan kesilgan)	Disney wordmark.svg	Public domain (matnli logo)
Coca-Cola — töliq yozuv	Coca-Cola logo.svg	Public domain
Coca-Cola — «Coke»	Coke logo 2017.svg	Public domain (matnli logo)
Heineken — vertikal (1991)	Heineken Beer - logo vertical (Netherlands, 1991).svg	Public domain (matnli logo)
Heineken — gorizontal va yulduz (şu fayldan kesilgan)	Heineken logo.svg	Public domain (matnli logo)
Nike — NIKE + swoosh (1978)	Nike logo 1978.svg	Public domain (matnli logo)
Nike — swoosh	Logo NIKE.svg	Public domain (oddiy şakl)
Bang & Olufsen — töliq va B&O (şu fayldan kesilgan)	Bang and Olufsen logo.svg	Public domain (matnli logo)
NOAA — muhr	NOAA logo.svg	Public domain (AQŞ federal hukumati işi)
NOAA — belgi + nom, belgi (şu fayldan kesilgan)	NOAA logo mobile.svg	Public domain (AQŞ federal hukumati işi)
Amazon — nom	Amazon logo.svg	Public domain (matnli logo)
Amazon — ikon	Amazon icon.svg	Public domain (matnli logo)
PDP Ecosystem — aydentika	RedFox portfoliosi	© RedFox

Barça darsliklar