Vodič kroz izradu landing stranice u Frameru, od šablona i rasporeda do forme, domena i objavljivanja, uz greške koje početnici najčešće prave.
Ovo je praktičan vodič za izradu landing stranice u Frameru, redom kojim i sam radim: od pripreme i izbora šablona, preko rasporeda, komponenti i prikaza za telefon, do forme, domena i objavljivanja. Na kraju su greške koje početnici najčešće prave, da ih preskočite.
Napomena: linkovi ka Frameru u ovom tekstu su partnerski, što znači da dobijam proviziju ako preko njih kupite pretplatu.
Framer je alat u kome dizajnirate stranicu i iz istog prozora je objavljujete, bez pisanja koda. Ako još odlučujete da li je to pravi izbor za vašu firmu, poslovnu stranu priče sam opisao u tekstu kako Framer pomaže konverzijama i marketing timu.
Pre nego što otvorite Framer
Najviše vremena se izgubi kada se dizajn započne bez sadržaja. Zato prvo rešite tri stvari na papiru ili u običnom dokumentu.
- Jedan cilj. Odlučite šta posetilac treba da uradi: da ostavi email, zakaže razgovor ili kupi. Landing stranica sa dva jednako važna cilja obično ne ispuni nijedan.
- Skica rasporeda. Nacrtajte redosled sekcija olovkom ili u Figmi. Ne mora da bude lepo, treba samo da znate šta ide ispod čega.
- Gotovi materijali. Pripremite tekstove, fotografije, logo i eventualni video pre dizajna. Tekst koji „stiže kasnije“ skoro uvek poremeti raspored koji ste već složili.
Koje sekcije stranica treba da ima i kojim redom ih poređati ovde ne ponavljam, jer sam to detaljno objasnio u vodiču kako napraviti landing stranicu. U nastavku se bavim samo time kako se to izvodi u Frameru.
Izrada landing stranice u Frameru korak po korak
1. Šablon, remix ili prazno platno
Kada napravite nalog i otvorite Framer, novi projekat možete započeti na tri načina.
- Šablon. Framer ima biblioteku besplatnih i plaćenih šablona. Za prvu stranicu ovo je najbrži put, jer dobijate već podešene stilove, prikaze za telefon i osnovne komponente.
- Remix. Autor Framer sajta može da podeli link preko koga kopirate ceo projekat u svoj nalog. Koristan način da vidite kako je neko iskusniji složio stranicu.
- Prazno platno. Ima smisla kada već imate gotov dizajn ili iskustvo sa alatom. Sve gradite sami, pa imate potpunu kontrolu, ali i više posla.
Ako krećete od šablona, birajte ga po strukturi, ne po bojama. Boje i fontove ćete promeniti za nekoliko minuta, a raspored koji ne odgovara vašem sadržaju prepravljaćete satima.
2. Raspored: stack i grid
Framer ima dva osnovna alata za raspored. Stack ređa elemente jedan ispod drugog ili jedan pored drugog, sa razmakom koji sami zadate. Grid ih slaže u kolone i redove, što je zgodno za kartice sa prednostima ili cenama.
Preporučujem da svaku sekciju stavite u stack i da razmake podešavate kroz njega, a ne ručnim pomeranjem elemenata. Elementi koji su slobodno postavljeni na platno izgledaju dobro samo na širini na kojoj ste ih crtali. Čim se ekran suzi, počinju da se preklapaju. Širinu sadržaja ograničite jednom maksimalnom vrednošću, da tekst na velikim monitorima ne ode u predugačke redove.
3. Stilovi, komponente i stanja
Pre nego što složite celu stranicu, napravite stilove za boje i tekst. Kada kasnije poželite da promenite nijansu ili veličinu naslova, menjate je na jednom mestu.
Sve što se ponavlja pretvorite u komponentu: dugme, karticu, navigaciju, podnožje. Komponenta može da ima varijante, na primer osnovno dugme i dugme sa okvirom, i stanja, kao što je izgled kada posetilac pređe mišem preko njega ili ga pritisne. Prelaz između stanja Framer animira sam, a vi birate trajanje i tip prelaza.
Sa animacijama budite štedljivi. Blago pojavljivanje sadržaja pri skrolovanju i jasna reakcija dugmeta su dovoljni za većinu stranica. Brzina mi je uvek na prvom mestu, jer ljudi odu sa stranice koja se ne otvori brzo. Zato izbegavam teške animacije i efekte koji usporavaju stranicu, a animaciju dodajem samo ako stranica sa njom ostane brza.
4. Prikazi za tablet i telefon
Framer za svaku stranicu nudi posebne prikaze (breakpoints) za desktop, tablet i telefon. Izmene koje napravite na užem prikazu važe samo za njega, pa možete da smanjite naslov, promenite raspored iz tri kolone u jednu ili sakrijete element koji na telefonu smeta.
Na telefonu proverite tri stvari: da li je glavni poziv na akciju (CTA) vidljiv bez mnogo skrolovanja, da li su dugmad dovoljno velika za prst i da li je tekst čitljiv bez zumiranja. Pregled u samom alatu nije dovoljan, pa stranicu obavezno otvorite i na pravom telefonu.
5. CMS za sadržaj koji se ponavlja
CMS vam treba kada na stranici imate više stavki iste vrste: utiske klijenata, česta pitanja, studije slučaja ili blog. Napravite kolekciju, definišete polja (na primer ime, tekst i fotografija), a zatim listu na stranici povežete sa kolekcijom. Novu stavku posle toga dodajete kao red u tabeli, bez diranja dizajna.
Za jednu jednostavnu landing stranicu CMS često nije potreban. Ako imate tri utiska klijenata koji se retko menjaju, brže je da ih upišete direktno.
6. Forma
Framer ima ugrađene forme: ubacite polja, označite koja su obavezna i izaberete gde stižu prijave, na primer na email. Tražite samo podatke koji vam zaista trebaju, jer svako dodatno polje je razlog da neko odustane.
Podesite i šta se dešava posle slanja: jasnu poruku da je prijava primljena ili prelazak na stranicu zahvalnosti. Pre objavljivanja pošaljite probnu prijavu i proverite da li je stigla.
7. SEO podešavanja i pristupačnost
U podešavanjima stranice upišite naslov i opis koji se prikazuju u pretrazi i sliku za deljenje na društvenim mrežama. Na samoj stranici ostavite jedan H1 naslov, a ostale naslove poređajte redom (H2, pa H3). Slikama dodajte alt tekst koji opisuje šta je na njima.
Proverite i kontrast teksta i to da li se kroz stranicu može proći tastaturom. Više o tome pišem u tekstu o WCAG standardu. Stranica koju svi mogu da koriste ima i više šanse da ispuni svoj cilj.
8. Domen i objavljivanje
Klikom na „Publish“ stranica izlazi na besplatnu Framer adresu, što je dovoljno za testiranje i pokazivanje kolegama. Za sopstveni domen potreban je plaćeni plan. Domen povezujete tako što kod svog registra domena upišete DNS zapise koje vam Framer prikaže. Hosting je uključen u plan, pa ga ne kupujete posebno.
Svaka kasnija izmena postaje vidljiva tek kada ponovo objavite stranicu. To je korisno, jer možete mirno da radite na novoj verziji dok je stara i dalje na internetu.
Kontrolna lista pre objavljivanja
- Svi linkovi i dugmad vode tamo gde treba.
- Forma je testirana i prijava je stigla.
- Naslov i opis stranice su upisani, slika za deljenje je postavljena.
- Stranica je pregledana na pravom telefonu, ne samo u alatu.
- Slike su smanjene na veličinu u kojoj se prikazuju.
- Brzina je proverena alatom kao što je PageSpeed Insights.
- U tekstu nema ostataka iz šablona, na primer probnog teksta ili tuđih kontakt podataka.
Tipične greške početnika
Greška 1: slobodno postavljeni elementi umesto stackova
Stranica izgleda uredno na vašem monitoru, a raspada se na svakom drugom. Rešenje je da sve sekcije budu u stacku ili gridu, sa razmacima zadatim kroz njih.
Greška 2: previše animacija
Kada je svaki element animiran, ništa se ne ističe, a stranica postaje sporija. Animirajte ono što vodi ka cilju stranice i proverite brzinu posle svake veće izmene.
Greška 3: prikaz za telefon ostavljen za kraj
Ako telefon gledate tek kada je desktop gotov, često morate da prepravljate pola stranice. Proveravajte uži prikaz posle svake sekcije.
Greška 4: ogromne slike
Fotografija direktno sa telefona ili iz foto banke može biti mnogo veća nego što stranici treba. Smanjite je pre ubacivanja i izbegavajte video koji se sam pokreće u pozadini ako nije neophodan.
Greška 5: šablon bez prilagođavanja
Šablon je polazna tačka. Ako ostavite njegov redosled sekcija iako vaš sadržaj traži drugačiji, stranica će izgledati lepo, ali neće objasniti vašu ponudu.
Primer iz mog portfolija
Jedan od sajtova koje sam napravio na ovaj način je logo i sajt za marketinšku agenciju Marketit, gde je ceo sajt urađen u Frameru.
Ako pre početka želite da uporedite Framer sa drugim rešenjima, pogledajte i poređenje Framera, Webflowa i ručno pisanog koda.
Šta dalje
Najbolji način da naučite alat je da napravite jednu stvarnu stranicu. Nalog možete otvoriti besplatno i proći kroz korake iz ovog teksta. Ako vam je draže da to neko uradi umesto vas, pogledajte kako radim izradu sajtova u Frameru ili mi se javite preko kontakt stranice za besplatne konsultacije.
