Dizajn sistem: kako postići doslednost sajta, čak i kada je mali

Dizajn sistem zvuči kao nešto što imaju samo velike kompanije sa timovima dizajnera i programera. U suštini, to je samo skup dogovorenih pravila: koje boje koristite, koje veličine slova, koliki su razmaci i kako izgledaju dugmad, forme i kartice. Čak i sajt sa deset stranica ima koristi od toga, jer bez pravila svaka nova stranica izgleda malo drugačije, a sajt počinje da deluje neuredno. U ovom tekstu objašnjavamo od čega se sastoji jednostavan dizajn sistem i kako ga primeniti na mali sajt.

Zašto je doslednost važna

Posetilac ne primećuje doslednost kada postoji, ali primećuje kada je nema. Tri različite nijanse plave, dugmad različitih oblika, naslovi koji na svakoj stranici imaju drugu veličinu – sve to stvara utisak nemara, čak i ako posetilac ne ume da kaže šta mu smeta. Doslednost donosi:

• poverenje – uredan sajt deluje kao uredna firma;
• lakše korišćenje – kada svako dugme izgleda isto, posetilac odmah zna šta je klikabilno;
• brži rad – nova stranica se slaže od gotovih delova, bez ponovnog odlučivanja;
• lakše održavanje – promena boje ili fonta radi se na jednom mestu.

Boje: mala, jasna paleta

Većini sajtova dovoljno je nekoliko boja sa jasnim ulogama. Umesto da birate boju za svaki element posebno, definišite paletu jednom:

Svaka kombinacija teksta i pozadine treba da ima dovoljan kontrast – WCAG preporučuje odnos najmanje 4,5:1 za običan tekst. Više o izboru boja i fontova u tekstu boje i tipografija na sajtu.

Tipografija: skala veličina

Umesto da svaki naslov dobije veličinu „od oka“, definišite skalu: nekoliko veličina koje se koriste svuda. Na primer, osnovni tekst 16 do 18 piksela, a naslovi rastu po istom odnosu (manji naslov, srednji naslov, veliki naslov). Pravila koja se isplate:

• jedan ili dva fonta, ne više – jedan za naslove, jedan za tekst, ili isti za oba;
• ograničen broj debljina (na primer normalna i podebljana);
• isti razmak između redova za osnovni tekst na celom sajtu;
• naslovi na telefonu manji nego na računaru, ali po istoj logici.

Manje fontova i debljina ne znači samo uredniji izgled, već i brži sajt, jer se učitava manje fajlova.

Razmaci i raspored

Razmaci su deo dizajna koji se najčešće radi nasumično. Jednostavno rešenje je da svi razmaci budu umnošci jedne osnovne vrednosti, na primer 4 ili 8 piksela: 8, 16, 24, 32, 48, 64. Tako razmak između naslova i teksta, između kartica i između sekcija uvek pripada istom sistemu. Dodajte i dogovor o širini sadržaja (najveća širina kolone teksta) i o tome kako se kolone slažu na telefonu – to je osnova za responzivan dizajn.

Komponente: dugmad, forme, kartice

Komponente su gotovi delovi koje ponovo koristite. Za mali sajt dovoljno je definisati:

• dugmad – primarno, sekundarno i tekstualno, sa stanjima za prelaz mišem, fokus i onemogućeno;
• polja forme – izgled polja, oznake, poruke o grešci;
• kartice – za usluge, radove ili blog tekstove, sa istim rasporedom slike, naslova i teksta;
• sekcije – hero, lista usluga, recenzije, poziv na akciju, česta pitanja;
• ikonice – jedan stil i jedna debljina linija.

Pravilo je jednostavno: ako nešto ima istu funkciju, treba da izgleda isto. Dugme za upit na početnoj i dugme za upit na stranici usluge ne smeju da se razlikuju. Vidljiv fokus za tastaturu nije opcija nego obaveza – pogledajte tekst pristupačnost sajta: WCAG osnove.

Kako to izgleda u praksi za mali sajt

Za sajt male firme dizajn sistem ne mora biti dokument od sto strana. Dovoljno je:

• jedna stranica (ili fajl u alatu kao što je Figma) sa paletom, skalom fontova, razmacima i komponentama;
• u kodu – CSS promenljive za boje, veličine i razmake, tako da se menjaju na jednom mestu;
• u WordPress-u – globalne boje i fontovi u temi ili page builderu, umesto ručnog podešavanja na svakom bloku;
• kratko pravilo za svakog ko dodaje sadržaj: koristi postojeće blokove, ne izmišljaj nove stilove.

Najveći neprijatelj doslednosti je vreme: posle godinu dana izmena, sajt koji je bio uredan često ima pet vrsta dugmadi. Kada vidite da se to desilo, to je jedan od znakova iz teksta redizajn sajta: znaci da je vreme – ali često je dovoljno samo vratiti sve na dogovorena pravila.

Kako proveriti doslednost sajta

Otvorite pet različitih stranica jednu pored druge i uporedite: da li su naslovi iste veličine, da li su dugmad istog oblika i boje, da li su razmaci između sekcija slični, da li se koristi ista nijansa primarne boje. Svaka razlika koja nema razlog je kandidat za ispravku.

Korisno je napraviti i kratak spisak stvari koje se najčešće „raspadnu“ tokom vremena:

• dugmad sa različitim zaobljenjem ivica ili različitim tekstom za istu radnju;
• fotografije različitih proporcija u istom nizu kartica;
• naslovi napisani velikim slovima na jednoj stranici, a malim na drugoj;
• boje unete ručno koje su „skoro iste“ kao boja brenda;
• forme koje na različitim stranicama imaju različit izgled i poruke o grešci.

Ovakva provera ne traži poseban alat – dovoljan je pregledač i pola sata pažnje. Ispravke su obično jednostavne kada postoje jasno zapisana pravila, jer se svaka razlika vraća na dogovorenu vrednost umesto da se ponovo o njoj odlučuje.

Ako želite da vašem sajtu uvedemo jednostavan dizajn sistem ili da uredimo postojeći tako da bude dosledan, pošaljite nam upit za besplatnu analizu i ponudu.