ingatlan.com stíluskalauz Frissítve: 2014. 09. 22.

Mi a célja a stíluskalauznak? Miért van rá szükség?

• Egy felnőtt márkának van ilyenje,
• segítség a kollégáknak,
• egységesség, konzisztens hangvétel a honlapon,
• konszenzus a cégen belül.

Kinek szól a stíluskalauz?

Milyen szövegekre terjed ki a stíluskalauz?

Minden olyan esetre, amikor az ingatlan.com márkaként szólal meg, tehát tipikusan:

• Honlap
• Mobilalkalmazás
• Automatikus emailek
• Ad-hoc emailek
• Facebook-bejegyzések
• Sajtóközlemények
• Google Ads

Mi van a stíluskalauzban?

Ki a felelőse a stíluskalauznak?

Hol érhető el a stíluskalauz?

A stíluskalauz nyilvánosan elérhető az info.ingatlan.com/stilus címen.

Általánosságban az ingatlan.com arculatáról

Milyen az ingatlan.com arculata?

• Letisztult, minimalista;
• könnyen érhető és használható;
• kontrasztos: alapvetően a fehér, szürke, narancs színre épít.

Az ingatlan.com felületei elsősorban a fenti szempontokat tartják szem előtt. Az oldalon ritkán használunk színátmeneteket, textúrákat és egyéb kirívóan szines elemeket, hiszen ezek általában elvonják a figyelmet a fő tartalomról.

Általában egyetlen fő irányba próbáljuk terelni a felhasználókat: kevés az olyan oldalunk, ahol több akció-gomb is megtalálható lenne.

Logó

Logó csomag letöltése PNG, PDF, AI formátumok

Tudnivalók a logóról

• Az ingatlan.com felirat betűtípusa BernhardMod BT Bold.
• Az i feletti pont nagyobb, mint a betűtípusban.
• A logóban az i feletti pont és a .com felirat színe narancs, #F1592A
• A többi szöveg szürke #404041
• A szlogen betűtípusa Helvetica Neue Light.
• A szlogen kis méreteknél elhagyható.

Ezt a logót használjuk minden médiamegjelenésben.

A logó további lehetséges megjelenési formái

Gyakori hibák

Színek

Az ingatlan.com-on az alábbi színeket használjuk.

Elsődleges színek

• #F1592A

  Általában fejlécekhez, szövegek kiemeléséhez, ikonokhoz. A logóban is ezt a narancs színt használjuk.

• #404041

  A body szöveg elsődleges színe. A logóban is ezt a szürke színt használjuk.

• #0069FF

  Linkek színe az oldalon.

Másodlagos színek

• #EFEFEF vagy #F5F5F5

  Szövegdobozok elsődleges és másodlagos háttérszíne.

• #DDDDDD

  Keretek színe dobozokoknál, elválasztóknál.

• #888888

  Kevésbé hangsúlyos szövegek színe.

• #F98E4F → #F86631

  CTA gombok színátmenetéhez használt kezdő- és végszínek.

• #713F16

  CTA gomb keret színe.

• #5CA63C

  Visszaigazolásokhoz használt szövegszín.

• #4A9C26

  Visszaigazolásokhoz használt keret/háttérszín.

Tipográfia

Betűtípusok és betűméret

Az oldal elsődleges betűtípusa Helvetica Neue.

A webes felületeken használhatóak a Helvetica és Arial betűtípusok is. Utóbbinál figyelembe kell venni, hogy néhány pixellel szélesebben rendereli a legtöbb böngésző, ezért érdemes az alap betűméretet megválasztásánál erre figyelni.

Alapvetően mindenhol a Regular/Bold súlyokat használjuk, de előfordulhat például nagy betűméretű fejléceknél a Light súly használata.

A linkek előfordulhatnak aláhúzott verzióban is, fontosságuktól függően.

Az oldal elsődleges betűmérete 14pt.

• Elsődleges fejléc: akár 30pt is lehet
• Másodlagos fejléc: 24pt
• Harmadlagos fejléc: 18pt

További tipográfiai elvek

Sehol nem használunk 12 pontnál kisebb betűméretet. Inkább a szövegszínt változtassuk (pl. #888888), ha kevésbé fontos dolgot akarunk megjeleníteni.

Ha az elsődleges narancs színt (#F1592A) választjuk háttérnek, lehetőleg fehér színnel írjunk rá.

Fontos szempont a tartalom rendezésekor, hogy a sorok hossza lehetőleg ne haladja meg a 65-80 karaktert, mert ez rontja az olvashatóságot. Inkább törjük hamarabb a mondatot, vagy használjunk nagyobb betűméretet.

Grid rendszer

Az ingatlan.com oldalai alapvetően az alábbi gridet használják:

• Az oldal tartalmi része mindig maximum 1 000 px széles.
• A logó a bal felső sarokban található, mellette a fejléc linkjeivel.
• Az oldal szerkezetileg 3 egyenlő szélességű hasábra van bontva.
• A 3 hasáb felhasználása változhat:
  • A fő tartalom a jobb oldalon, balra menüvel.
  • A fő tartalom a bal oldalon, jobbra bannerekkel.
  • Mindhárom hasábban egyenlő fontosságú tartalom.

Elválasztók, dobozok, táblázatok

Az elválasztók és a dobozok keretei #DDDDDD színű, 1px magas elemek.

Az elválasztók felett-alatt legalább 15px margin van, de lehet nagyobb is, a tartalomtól függően.

A dobozok és táblázat cellák paddig mérete általában 20px körül mozog, de az elem szélességétől is függ. Itt is érvényes a fenti 65-80 karakteres ajánlás.

Input elemek

A legfontosabb irányelv, hogy szeretjük az operációs rendszer/böngésző alap stílusú elemeit, mert a felhasználók könnyebben ismerik fel, mint a teljesen újraformázott elemeket:

• Checkboxoknál és radio gomboknál mindig a beépített stílust használjuk.
• Text, password, textarea, stb. típusú inputoknál 1px #DDDDDD kerettel, 10-20px paddinggal prezentáljuk az elemeket.
  Sitebuild apróság: a böngészők nem vonatkoztatják a * { ... } részben definiált font paramétert az inputokra, ezeknél külön meg kell adni azt.
• CTA és form submit gombokat a színeknél említett függőleges gradiens átmenettel használjuk, 1px kerettel.

Linkek

A linkenél a legfontosabb szempont a jól láthatóság. A fent említett színekkel használjuk a szöveges linkeket, melyek lehetnek alap stílusúak, aláhúzottak illetve vastagok is, függően a kontextustól. Utóbbi két stílust akkor használjuk, ha a link olyan információkat tartalmaz, amely a folyamat szempontjából kiemelt fontosságú lehet a felhasználó számára.

Az ingatlan.com-on a hover állapotot általában az alap stílusnál aláhúzással jelöljük: link.

Az oldalon nem különböztetjük meg a már megnézett (:visited) állapotot a linkeknél.

Ikonok

Az ikonhasznál legfontosabb irányelve, hogy kizárólag ikonokkal nem kommunikálunk elsődleges funkciókat: az ikonok nem szimbólumok. Míg a szimbólum a emberek számára egyértelmű megfeleltetést hordoz kép és tartalom között, az ikonok a megértést segítik, de nem helyettesítik a szövegben hordozott információkat.

Általában balra rendezett ikonos linkeket használunk, nagyjából 16-20px széles ikonnal, 20-24px paddinggal a szövegen.

Rengeteg stíluskalauz van a weben. Ez a dokumentum csak ingatlan.com-specifikus dolgokat tartalmaz. Tapasztalaton alapszik, olyan dolgokra tér ki, amire volt rossz példa.

Alap hangvétel: egyszerű, segítőkész, közvetlen, informatív.

Mielőtt leírsz valamit, tisztázd: Miért írod? Kinek írod?

t1-et ne használjunk, hanem e2-t

A gyakorlat előtt egy kis elmélet:
általános tanácsok a jó fogalmazáshoz

• Az olvasó szókincsét használd.
• Kerüld az olvasó számára ismeretlen szavakat (pl. a fejlesztési, üzleti szakkifejezéseket).
• Egy mondat ne legyen hosszabb két sornál.
• Egy mondatban egy fontos gondolat legyen.
• A felesleges szavakat hagyd ki.
• A lényeget tedd a mondat és a bekezdés elejére.
• Előbb az olvasó számára ismert dolgot írd le, aztán az ismeretlent.
• Előbb az okot írd le, aztán az okozatot.

Így kerüld el a dagályos, modoros fogalmazást

Tedd ki a névelőt, amikor kell

Így írd helyesen a nehéz szavakat

A helyesírással általában nincs gond az ingatlan.com-on, de a tapasztalatok alapján ezekre a szavakra különösen ügyelj. Megjegyzés: az ingatlan.com mint márkanév helyesírása nem a hivatalos magyar helyesírást követi, hanem a mi döntésünket.

Kerüld a névszavasítást

A névszavasítás az, amikor egy igéből erőszakkal főnevet csinálunk, majd azt visszakényszerítjük az ige szerepébe. Árulkodó jele a -ság, -ség, és hogy több szó van a mondatban a kelleténél.

Bátran töröld a felesleges szavakat

Van egy csomó szó, amit csak azért használunk, mert megszoktuk, hogy használjuk őket. Valójában a legtöbbször feleslegesen nyújtják a szöveget. Próbáld ki, változik-e a mondat értelme, ha kihagyod ezeket a szavakat (bővítés alatt):

mindig, akár

Dátumok

01

Ügyelj a helyes angol megfelelőkre

Ha a kódban vagy egy URL-ben el kel nevezni valamit, legyen helyes angolul.