Mga Tuntunin sa Paggamit ng World Brand

Mga Prinsipyo ng Disenyo

Tao
Isang paniniwala na ang pagiging natural at hindi makokontrol na katangian ng pagiging tao ay mahalaga para sa inobasyon.
Para sa lahat
Isang paraan ng pagpapahayag gamit ang disenyong para sa lahat, madaling gamitin at naglalapit sa buong mundo.
Positibo
Isang paniniwala na ang sangkatauhan at ang papel ng teknolohiya ang mag-aangat sa lahat.

Tungkol sa Brand

Ang lahat ng tool ay nasa ilalim ng iisang brand, ang World.

Hitsura ng Brand

World Logo

Ang World logo ay nagsisilbing biswal na representasyon ng brand namin: simple, malinaw at para sa lahat. Sumisimbolo ito sa paninindigan namin sa aksesibilidad at inobasyon sa isang konektadong mundo.

Lockup

Wordmark

Logomark

Ang logomark ay ang pangunahing representasyon ng pagkakakilanlan ng brand namin. Laging gamitin ang logo sa orihinal nitong anyo at laging maglagay ng malinaw na espasyo sa paligid nito para matiyak na madali itong makikita at magiging kapansin-pansin. Ang anumang pagbabago, pagbabaluktot o paggamit ng hindi awtorisadong kulay ay maaaring makasira sa integridad nito.

Biswal na representasyon ng mga prinsipyo ng tatak at gabay para sa World

Grapiko na naglalarawan ng gabay sa tatak ng World, na binibigyang-diin ang mga prinsipyo ng disenyo at mga asset.

Ang wordmark ay isang mahalagang bahagi ng biswal na pagkakakilanlan ng brand namin, kasama ang logo symbol para malinaw at maganda naming maipahayag ang pangalan namin. Hindi pinapayagan ang pagbabago, pag-uunat o paglalagay ng hindi aprubadong effects sa wordmark.

Grapikong representasyon ng mga elemento ng tatak ng World sa bahagi ng gabay sa tatak

Grapikong representasyon ng gabay sa tatak para sa World, na naglalarawan ng mga prinsipyo ng disenyo at mga asset.

Ang logo lockup ay ang pinagsamang logo symbol at wordmark na kumakatawan sa kabuuan ng brand namin. Dapat palaging gamitin ang lockup ayon sa tamang proporsyon, espasyo at pagkakahanay ng mga bahagi nito. Huwag paghiwalayin, baguhin ang ayos, o palakihin o paliitin ang mga bahagi nito. Laging sumangguni sa mga tuntunin para sa sukat, espasyo at paglalagay nito para mapanatili ang integridad nito.

Grapikong representasyon na may kaugnayan sa gabay sa disenyo ng tatak ng World, na binibigyang-diin ang mga prinsipyo ng disenyo at mga asset.

Ang clearspace ay ang pinakamaliit na puwang sa pagitan ng logo at iba pang bahagi sa isang layout. Nakadepende sa lapad ng “o” sa world ang clearspace sa paligid ng logo.

Mga Dapat Gawin para sa Logo at Kulay

Mga Hindi Dapat Gawin para sa Logo at Kulay

Kapag ipinapakita ang partnership o pakikipagtulungan, maaaring pagsamahin ang World logo at ang logo ng ibang brand sa sumusunod na mga format.

Mga Kulay

alternatibong palette — Mga alternatibong kulay

Ilustrasyon ng hirarkiya ng kulay para sa gabay ng tatak ng World

Mga halimbawa ng pag-coding ng kulay na may kaugnayan sa gabay sa disenyo ng tatak ng World sa loob ng protokol ng disenyo

Biswal na representasyon ng mga prinsipyo ng color coding sa gabay ng tatak ng World

Biswal na representasyon ng mga prinsipyo ng color coding para sa gabay sa disenyo ng tatak ng World

Ilustrasyon na may kaugnayan sa color coding sa gabay sa disenyo ng tatak ng World

Ginagamit ang mga alternatibong kulay para sa World brand para sa pagpapahayag, maging sa praktikal na paggamit. Kabilang sa mga halimbawa nito ang color coding ng iba't ibang clearance level para sa mga event badge, iniangkop na gradient sa kulay ng mga watawat ng iba't ibang bansa para sa mga materyal para sa paglulunsad, kahulugan ng mga kulay para sa user interface at mga biswal na materyal na nagpapahayag ng suporta.

Typography

Ginawa ang World Pro para magsilbing gabay sa disenyo ng lahat ng gumagamit at bumubuo ng World, para sa isang mas malawak pero iisang istilo ng disenyo. Ito ang kaisa-isang font na ginagamit sa World brand.

World Pro Font

Mga Kakapalan

Mayroong dalawang kapal ang World Pro: Regular at Medium. Mas madalas na ginagamit ang Regular, habang ginagamit naman ang Medium para magbigay-diin kung kinakailangan.

Agwat ng mga Linya at Letra

Pagkakahanay

Puwede mong gamitin ang World Pro Regular para sa mga headline, maging sa nilalaman. Lakihan lang o liitan ang font para bigyang-diin kung alin ang pinakamahalagang detalye.

Puwede mong gamitin ang World Pro Medium para sa mas maliliit na subhead kapag kailangan ng dagdag na kapal.

Ginagamit namin ang Noto font kasama ang pangunahin naming Latin typeface para matiyak na magagamit ito sa mga sulat na hindi Latin. Pinili namin ang Noto dahil maaari itong gamitin sa napakaraming wika sa buong mundo, at nagbibigay ng pare-pareho at maayos na typography sa iba't ibang sulat, kabilang na ang Chinese, Arabic, Cyrillic at Japanese.

Sa pamamagitan ng pamamaraang ito, mapapanatili namin ang pagkakapare-pareho at inklusibidad ng brand, nang sa gayon ay maipaaabot namin ang mensahe namin sa mga user sa buong mundo sa sarili nilang wika, nang hindi nakokompromiso ang readability o ang estetika ng disenyo nito.

Bahagi ng gabay ng tatak ng World na tampok ang mga asset ng disenyo at mga halimbawa ng tipograpiya. — Mandarin: Noto Sans HKn

Biswal na representasyon ng accordion item sa gabay ng tatak ng World, na may tekstong gamit ang font na Noto Sans JP. — Japanese: Noto Sans JP

Arabic: Noto Sans Arabic

Biswal na representasyon ng tekstong Bengali gamit ang font na Noto Sans Bengali, na nagpapakita ng tipograpiya ng tatak. — Bengali: Noto Sans Bengali

Halimbawa ng font na Noto Sans Hebrew para sa gabay ng tatak — Hebrew: Noto Sans Hebrew

Larawan ng accordion item na tampok ang disenyo na may kaugnayan sa tatak ng World, binibigyang-diin ang Cyrillic sa font na Noto Sans. — Cyrillic: Noto Sans

Sa mga piling sitwasyon kung saan hindi puwedeng gamitin ang World Pro (halimbawa, sa Google Slides), puwede kang gumamit ng alternatibong typeface mula sa Google Fonts library: Para sa nilalaman, gamitin ang font na Inter; para sa mga headline, gamitin ang font na Inter Tight. Ang mga font lang na ito mula sa Google Fonts library ang puwede mong gamitin, at gagamitin lang ang mga ito kapag hindi talaga puwedeng gamitin ang World Pro.

Grapiko na kumakatawan sa mga elemento ng disenyo para sa gabay ng tatak ng World.

Komposisyon

Ang grid ay isa sa pinakamahahalagang mga tool sa design system. Mahalaga ito sa lahat ng layout at komposisyon at dapat gamitin sa lahat ng pagkakataon. Maaari itong maging 2, 4, 6, o 8 column grid depende sa laki ng artboard at dami ng mga elemento. Gayunpaman, dapat laging nakahanay ang lahat ng elemento nito sa grid at proporsyonal ang pagitan sa mga margin.

Biswal na representasyon ng mga prinsipyo at gabay ng disenyo ng tatak ng World

Panloob na materyales

Para sa lahat ng internal materials at branded collateral kung saan kasama ang logo sa iba pang asset at nilalaman, dapat ilagay ang logo sa kaliwang-itaas na bahagi ng layout para matiyak ang pagkakapare-pareho ng mga ito.

Solo logo

Sa mga layout kung saan ang logo lang ang elemento, gaya ng mga video card o ilang kampanya o anunsyo, ang logo ay inilalagay sa gitna ng layout.

Mga social media profile

Ang World ay isang network ng tunay na mga tao

Illustration

Ang bawat pangunahing produkto ng World ay may kaugnay na illustration, hango sa kalikasan ng produkto o sa ibinibigay nito.

Biswal na representasyon na may kaugnayan sa World App sa gabay ng tatak — World App

World Chain

Worldcoin

Ilustrasyon o grapiko na may kaugnayan sa Orb bilang bahagi ng gabay ng tatak ng World — Orb

Maraming paraan para magrepresenta ng datos, pero dapat itong magkaroon ng pare-pareho istilo. Ang paggamit ng mga outline, geometric na hugis para sa mga chart at graph, maingat at intensyonal na paggamit ng mga fill at kulay, ay isang paraan para maging pare-pareho ang mga elemento sa data visualization graphics.

Isang ilustratibong bar chart na kumakatawan sa datos sa gabay sa tatak ng World — Hal. 1 - Bar chart

Hal. 2 - Scale model

Isang grapikong representasyon na naglalarawan ng mga trend sa presyo para sa mga produkto ng World. — Hal. 3 - Price graph

Grapikong representasyon ng gabay sa tatak ng World na nakatuon sa mga prinsipyo ng disenyo at mga asset.

Biswal na representasyon ng gabay sa tatak ng World sa isang palamuti na accordiong uri ng format.

Estilong grapiko na kumakatawan sa mga prinsipyo ng disenyo ng tatak ng World

Ilustrasyon na may kaugnayan sa gabay ng tatak ng World, binibigyang-diin ang mga prinsipyo ng disenyo at mga asset.

Grapikong representasyon na may kaugnayan sa bahagi ng gabay sa tatak ng World, na binibigyang-diin ang mga prinsipyo ng disenyo at mga asset.

Grapikong kumakatawan sa gabay sa tatak ng World, na nagpapakita ng mga prinsipyo ng disenyo at mga asset.

Biswal na representasyon ng gabay sa tatak ng World, na tampok ang mga asset at prinsipyo ng disenyo.

Grapikong representasyon na may kaugnayan sa mga prinsipyo ng disenyo ng tatak ng World, tampok sa bahagi ng gabay ng tatak

Grapikong representasyon ng mga asset ng tatak ng World sa isang branded na layout.

Biswal na representasyon na may kaugnayan sa gabay ng tatak ng World sa loob ng seksyon ng disenyo ng protokol.

Grapikong representasyon na may kaugnayan sa gabay ng tatak ng World, na tampok ang mga elemento ng disenyo.

Ilustrasyon na kumakatawan sa mga prinsipyo at gabay ng tatak ng World.

Grapikong representasyon na may kaugnayan sa gabay sa disenyo ng tatak ng World at mga prinsipyo ng disenyo

Ang mga gradient grid ay nagsisilbing makukulay na graphics at ginagamit sa dalawang paraan:

Bilang mga lokal na representasyon gamit ang mga kulay ng mapa ng isang bansa bilang input para sa gradient transition
Ambient graphics na walang partikular na kaugnayan sa anumang kulay pero nagpapahayag lamang ng pakiramdam.

Iconography

Nasa ibaba ang kumpletong set ng mga icon na ginagamit namin ngayon. Puwede pang magdagdag ng bago, basta't siguruhin lang na susunod ito sa mga tuntunin para mapanatili ang pagkakapare-pareho ng mga ito.

Ang disenyo ng mga World icon ay hango sa disenyo ng typeface namin, kung saan sinusunod nito ng kapal ng linya at mga kurba nito.

Mahalagang laging magkakapareho ang proporsyon at pagkakahanay ng lahat ng icon na may teksto para bumagay sa typeface. Naka-format ang mga pahigang icon para laging nakahanay ang mga ito sa itaas at ibaba ng cap height, at laging nasa gitna nang patayo.

Sukat ng mga icon

Ang lahat ng svg icon ay nakapaloob sa isang standard frame. Para mapanatiling pare-pareho ang sukat nito sa typography, puwede mong gamitin ang formula na ito para sa frame ng icon: i-multiply ang laki ng font sa 1.07 para makuha ang sukat ng frame ng icon. Halimbawa, kung ang font size ay 180px, dapat (180x1.07)=192.6px ang lapad ng icon frame.