Hány színt és betűtípust használj, hogy a weboldalad ne tűnjön olcsónak

Ha ránézel a weboldaladra, és úgy érzed, hogy valami „túl sok”, de nem tudod pontosan megmondani, mi az, a bűnös szinte mindig az, hogy hány színt és betűtípust kevertél össze. Ez a leggyakoribb oka annak az olcsó, zsúfolt kinézetnek — és a jó hír, hogy egyben ezt a legkönnyebb kijavítani.

Nincs szükséged „ízlésre” ahhoz, hogy ezt megoldd. Egyetlen egyszerű szabályra van szükséged, és arra a fegyelemre, hogy mindenhol alkalmazd. Ebben a cikkben megadom neked a pontos szabályt, amit a profi tervezők használnak: hány szín, hány betűtípus, hogyan válassz olyanokat, amelyek jól működnek együtt, és egy gyors, kétperces tesztet, amelyet a közzététel előtt lefuttatsz. Semmi felesleges elmélet — csak az, amit ma alkalmazni tudsz.

A rövid szabály: 2-3 szín, legfeljebb 2 betűtípus

Ha egyetlen dolgot megjegyzel az egész cikkből, legyen ez az: egy letisztult kinézetű webhely 2-3 színt és legfeljebb 2 betűtípus-családot használ. Ennyi.

A színeknél, a gyakorlatban:

• egy domináns semleges szín (általában fehér vagy nagyon világosszürke a háttérhez)
• egy sötét szín a szöveghez (lágy fekete vagy sötétszürke, nem rideg tiszta fekete)
• egyetlen kiemelőszín — az, amelyik magára vonja a figyelmet a gombokon, linkeken, kulcsfontosságú címsorokon

A betűtípusoknál: egy a címsorokhoz, egy a szövegtörzshöz. Vagy, még egyszerűbben, egyetlen betűtípus különböző vastagságokban használva. Az olcsó kinézet szinte mindig akkor jelenik meg, amikor túllépsz ezeken a határokon — a negyedik kiemelőszín, a harmadik betűtípus —, nem pedig amikor betartod őket.

Miért néz ki egy webhely valójában olcsónak

Egy webhely nem azért néz ki olcsónak, mert „csúnya” színei vannak, hanem mert semminek sincs elsőbbsége. Amikor az összes szöveg színes, semmi sem emelkedik ki. Amikor három-négy élénk kiemelés van, a szem nem tudja, hová landoljon, és minden egyszerre látszik kiabálni.

Ugyanez a helyzet a betűtípusokkal. Minden betűtípusnak van „személyisége”. Tegyél hármat-négyet egy oldalra, és olyan, mintha négy ember beszélne egyszerre, mindegyik más hangnemben. Az olvasó agya érzi a rendetlenséget, még ha nem is tudja megnevezni.

A drágának tűnő webhelyek titka épp az ellenkezője: sok nyugalom (semleges színek, üres tér) és egyetlen hely, ahol a „szín” megtörténik. A kontraszt csak akkor működik, ha ritka.

Hogyan válassz olyan színeket, amelyek valóban jól működnek együtt

Ne találgass fejből. Indulj ki valamiből, amid már megvan — a logódból, egy termékből, egy jellegzetes fotóból —, és onnan húzd elő a kiemelőszínedet.

Állíts fel konkrét szabályokat:

• A semleges színek végzik a munka nagy részét: világos háttér, sötét szöveg. Ezek fedik le az oldal többségét.
• A kiemelőszín takarékosan jelenik meg, és mindig ugyanabban a szerepben: gombok, linkek, néhány részlet. Ne szórd szét mindenhová.
• Ha több változatosságot szeretnél, használd ugyanannak a színnek az árnyalatait (világosabb / sötétebb), ne új színeket.

Egy régi, megbízható útmutató a 60-30-10: nagyjából 60% domináns semleges szín, 30% egy visszafogottabb második szín, 10% a kiemelőszín. Ne vonalzóval mérd — csak tartsd észben az elvet: a kiemelőszín a legkevésbé használt, és épp ezért emelkedik ki.

Hogyan válassz betűtípust hibázás nélkül

A legbiztonságosabb választás annak, aki bizonytalan az ízlésében: egyetlen, jól megválasztott betűtípus, különböző vastagságokban használva. A címsorok félkövérek és nagyok, a szövegtörzs nyugodt és normál. Ez önmagában hierarchiát ad neked, nulla kockázattal.

Ha két betűtípust szeretnél, tedd őket egyértelműen különbözővé, ne homályosan hasonlóvá — például egy serif (kis „lábakkal”) a címsorokhoz és egy letisztult sans-serif a szövegtörzshöz. Két egymásra hasonlító betűtípus hibának tűnik, nem választásnak.

A hierarchia (mi a fontos, mi a másodlagos) a méretből és vastagságból ered, nem új színekből vagy betűtípusokból. Egy nagy, félkövér címsor legyőz bármilyen élénk színt. Állj ellen a késztetésnek, hogy még egy színnel jelezd a fontosságot — inkább tedd nagyobbá, félkövérebbé, adj neki teret a lélegzéshez.

A kétperces teszt a közzététel előtt

Mielőtt élesítenéd a webhelyet, futtasd le ezt a gyors ellenőrzést:

• Számold meg a látható színeket egy oldalon. Több mint három (a semleges szín árnyalatait nem számítva)? Vágj le néhányat.
• Számold meg a betűtípusokat. Több mint kettő? Távolíts el egyet.
• Készíts képernyőképet, és tedd fekete-fehérré (vagy hunyorogj rá). Ha még mindig meg tudod mondani, mi a fontos és mi nem, a hierarchiád egészséges. Ha minden egyformán „hangosnak” tűnik, nincs elég kontraszt a méretben.
• Ellenőrizd, hogy a fő cselekvésre hívó gombod mindenhol ugyanolyan színű-e. Ha az egyik oldalon piros, a másikon zöld, az olvasó soha nem tanulja meg, hová kell kattintania.

Ha nehéz objektíven megítélni a saját webhelyedet — normális, túl közel vagy hozzá —, egy külső szem rengeteget segít.

Az MPO Web Studiónál pontosan ezen elv szerint dolgozunk: először ingyenes demót építünk a webhelyedről, a palettával és a betűtípusokkal már letisztultan összeállítva, hogy lásd az eredményt, mielőtt bármit fizetnél. Távolról dolgozunk, országszerte, átlátható árazással. Ha őszinte véleményt szeretnél a jelenlegi webhelyedről, írj nekünk WhatsAppon — röviden megmondjuk, mit érdemes lecsökkenteni.