Otvorite deset web stranica u istoj industriji. Devet od njih izgledat će kao ista stranica s različitim logotipima. Isti raspored. Iste stock fotografije. Isti plavi gumbi.
To je zadano stanje web dizajna. Većina tvrtki završi s generičkom stranicom jer je generično sigurno. Nikoga ne otpuštaju zbog odabira predloška koji izgleda "profesionalno". Ali nitko ga se ni ne sjeti.
Snažan vizualni identitet jedna je od rijetkih stvari koje mogu učiniti da se vaša stranica zadrži u nečijem pamćenju. Evo kako ga izgraditi.
Tipografija je vaš najsnažniji signal brenda
Ako ne promijenite ništa drugo na web stranici osim tipografije, osjećat će se kao potpuno druga stranica. Toliku težinu fontovi nose.
Većina web stranica koristi sistemske fontove ili sigurne izbore poput Intera, Open Sansa ili Robota. To su dobri fontovi. Također su nevidljivi. Nitko nikad nije zapamtio brend jer koristi Open Sans.
Prilagođeni ili prepoznatljivi fontovi signaliziraju namjernost. Govore posjetiteljima da je netko zaista razmišljao o ovome. Da je svaki detalj razmatran. Tvrtke poput Spotifyja i Airbnba uložile su u prilagođene fontove jer su to razumjele.
Ne trebate font dizajniran od nule da biste se istaknuli. Samo trebate biti namjerni u svojim izborima. Odabir pravog fonta znači razumijevanje osobnosti vašeg brenda i pronalazak fonta koji je izražava bez žrtvovanja čitljivosti.
Nekoliko praktičnih smjernica. Ograničite se na maksimalno dva fonta, jedan za naslove i jedan za tekst. Pobrinite se da vaš font za tekst bude čitljiv u malim veličinama na zaslonima. Testirajte font za naslove u velikim veličinama da potvrdite da ima karakter koji želite. I uvijek, uvijek provjerite kako se vaši fontovi prikazuju na Windowsima. Font koji izgleda prekrasno na Macu može izgledati užasno na PC-u.
Ilustracije umjesto stock fotografija
Stock fotografija je vizualna slijepa ulica. Vaša publika je vidjela istu fotografiju rukovanja, isti laptop na stolu, isti raznoliki tim oko bijele ploče na stotinu drugih web stranica. Te slike ne komuniciraju ništa o vašem specifičnom brendu.
Prilagođene ilustracije jedan su od najučinkovitijih načina za stvaranje prepoznatljivog vizualnog jezika. Stilovi ilustracija su beskonačno raznoliki. Mogu biti minimalni ili detaljni, geometrijski ili organski, razigrani ili ozbiljni. Stil koji odaberete postaje dio vokabulara vašeg brenda.
Ne morate ilustrirati svaku stranicu. Čak i konzistentan set ikona i manjih ilustracija za ključne stranice stvara koherentnost. Važna stvar je dosljednost. Jedan stil ilustracija korišten svugdje daleko je moćniji od mješavine različitih pristupa.
3D ilustracije postale su dostupnije zahvaljujući alatima poput Blendera i Splinea. Dobro izvedena 3D vizuala može dodati dubinu i dimenziju koje ravni dizajn ne može postići. Ali "dobro izvedena" je ključna fraza. Loš 3D izgleda gore od nikakve. Ako krenete tim putem, uložite u kvalitetu.
Boja kao strategija, ne dekoracija
Boja utječe na to kako korisnici percipiraju i interagiraju s vašom stranicom više nego što većina ljudi shvaća. Ne radi se samo o lijepom izgledu. Radi se o komunikaciji.
Vaša paleta boja trebala bi raditi tri stvari. Prvo, trebala bi vas razlikovati od konkurenata. Ako svaki konkurent koristi plavu, možda plava nije vaš najbolji izbor. Drugo, trebala bi stvarati vizualnu hijerarhiju. Korisnici bi trebali moći skenirati vašu stranicu i razumjeti strukturu samo kroz boje. Treće, trebala bi biti pristupačna. Omjeri kontrasta su važni. Otprilike 8% muške populacije ne razlikuje boje.
Uski sustav boja funkcionira bolje od širokog. Odaberite jednu primarnu boju, jednu ili dvije akcentne boje i set neutralnih. Koristite akcente štedljivo za pozive na akciju i važne elemente. Što je vaša paleta suzdržanija, to vaše akcentne boje nose više utjecaja.
Tamne sheme boja prešle su iz trenda u legitimni dizajnerski pristup. Smanjuju naprezanje očiju, štede bateriju na OLED zaslonima i mogu učiniti vizualni sadržaj istaknutijim. Ali zahtijevaju pažljivo upravljanje kontrastom. Tamni način rada nije samo "invertiraj boje." Zahtijeva vlastiti set pažljivo odabranih nijansi i testiranih omjera kontrasta.
Animacija sa svrhom
Animacija na web stranici može poboljšati ili uništiti iskustvo. Razlika se svodi na namjeru.
Svrhovita animacija vodi korisnike. Suptilna animacija na gumbu potvrđuje da je klik registriran. Glatka tranzicija između stranica održava prostorni kontekst. Indikator učitavanja sprječava korisnike da se pitaju je li stranica pokvarena.
Dekorativna animacija je druga priča. Parallax efekti koji čine scrollanje tromim. Ulazne animacije koje odgađaju vidljivost sadržaja. Scroll-jacking koji oduzima kontrolu korisniku. Ovi prioritiziraju spektakl iznad upotrebljivosti.
Najbolji dizajn pokreta jedva je primjetan. Djeluje prirodno, kao da sučelje reagira na vaše akcije umjesto da nastupa za vas. Ako korisnik komentira vaše animacije, vjerojatno su previše istaknute.
Performanse su druga stavka. Svaka animacija troši procesorsku snagu. Na slabijim uređajima, teške animacije stvaraju kašnjenje, zastajkivanje i frustraciju. Testirajte animacije na telefonu srednje klase, ne samo na MacBooku Pro vašeg developera. Ako ne rade glatko na tri godine starom Android telefonu, pojednostavite ih.
Nostalgija i osobnost
Postoji rastući protupokret protiv uglađenog, korporativnog weba. Neki brendovi namjerno prihvaćaju grublju estetiku. Ručno crtane elemente. Retro tipografiju. Namjernu nesavršenost.
Ovo funkcionira kada je autentično. Kreativni studio ili indie brend može izvesti sirovi, ekspresivni vizualni identitet jer odgovara njihovoj osobnosti. Odvjetnička tvrtka vjerojatno ne može.
Y2K revival, pixel art, brutalistički dizajn i drugi retro-inspirirani pristupi nisu samo nostalgija. Reakcija su na web koji je postao vizualno homogen. Ističu se upravo zato što krše pravila koja svi ostali slijede.
Ali učinkovito kršenje pravila zahtijeva da ih prvo razumijete. Najbolji "rule-breaking" dizajni rade ljudi koji duboko razumiju tipografiju, kompoziciju i hijerarhiju. Znaju koja pravila prekršiti, a koja drže sve na okupu.
Dosljednost je multiplikator
Pojedinačni dizajnerski izbori manje znače od dosljednosti kroz sve njih. Prepoznatljivi font uparen sa stock fotografijom šalje mješovite signale. Prilagođene ilustracije na naslovnici, ali generičke ikone na unutarnjim stranicama djeluju nepovezano.
Vizualni identitet funkcionira kroz ponavljanje. Kada svaka dodirna točka, svaka stranica, svaka komponenta odražava isti dizajnerski jezik, kumulativni učinak je daleko veći od bilo kojeg pojedinačnog elementa. Zato dizajn sustavi postoje. Nisu samo pitanje učinkovitosti. Radi se o održavanju koherentnog identiteta u velikoj mjeri.
Dokumentirajte svoje izbore. Stvorite jednostavan vodič kroz stil koji pokriva tipografiju, boje, stil ilustracija, razmake i ton. To osigurava da tko god sljedeći radi na stranici, bilo vi za šest mjeseci ili novi član tima, održava vizualni identitet umjesto da ga erodira.
Isticanje je izbor
Standardni put vodi do još jedne generičke web stranice. Isticanje zahtijeva namjerne odluke o tipografiji, boji, ilustracijama i animaciji. Zahtijeva da kažete ne predlošku i da za nešto kažete da stav.
Ovo ne znači biti čudan radi samog sebe. Znači razumjeti vaš brend, vašu publiku i vaše konkurente dovoljno dobro da donesete dizajnerske odluke koje su izričito vaše. Tako gradite stranicu koju ljudi pamte.
Spremni izgraditi web stranicu sa stvarnim vizualnim identitetom? Pogledajte kako pristupamo prilagođenom web dizajnu i što ga čini drugačijim od predložaka.
