Dizajn iz Figme pretvoren u produkcijsku platformu

Izazov

Dovršen dizajn još uvijek nije produkcijska stranica

HyProMag USA već je imao jasan vizualni smjer izrađen u Figmi, koji je napravila druga agencija.

Uloga Norvarisa bila je uzeti taj dizajn i riješiti sve što je potrebno da proradi kao stvarna web stranica:

• prevesti vizualni sustav u čist i responzivan kod
• prilagoditi desktop orijentirane rasporede za mobitel i tablet
• razriješiti interakcije i animacije koje u dizajnu nisu bile do kraja definirane
• restrukturirati elemente koji se nisu čisto prenosili iz Figme u preglednik
• izgraditi sustav za upravljanje sadržajem koji klijent stvarno može koristiti
• zadržati vizualnu kvalitetu bez gubitka brzine
• zamijeniti postojeću HyProMag USA stranicu
• postaviti SEO, analitiku, forme i produkcijsku infrastrukturu
• isporučiti finalnu stranicu u stisnutom roku

Izazov nije bio samo vizualna vjernost. Bio je to pretvaranje složenog dizajna u održivu, responzivnu i brzu korporativnu platformu.

Polazna točka

Odluke na koje statična datoteka ne daje odgovor

Isporučena Figma pokrivala je najveći dio vizualnog smjera na desktopu, uz dio mobilnih stanja.

Produkcijska izvedba ipak je otvorila odluke na koje statične dizajnerske datoteke ne daju uvijek odgovor:

• kako se složene sekcije trebaju preslagivati na međuširinama
• kako se velike vizualne kompozicije trebaju ponašati na malim ekranima
• kako slojevite grafike treba razrezati i učitavati učinkovito
• kako animacije trebaju raditi bez štete za upotrebljivost i performanse
• kako se novostima, članovima tima i korporativnim dokumentima upravlja nakon lansiranja
• kako dizajn reagira kad se stvarni sadržaj promijeni

Umjesto doslovnog preslikavanja svakog okvira, Norvaris je Figmu tretirao kao dizajn sustav i donosio izvedbene odluke ondje gdje su bile potrebne.

01 — Iz Figme u custom WordPress

Građeno od nule, a ne složeno u page builderu

Stranica je razvijena kao potpuno custom WordPress izvedba.

Cilj je bio zadržati vizualni karakter isporučenog dizajna, a izbjeći višak markupa, krute rasporede i nepotrebne ovisnosti koje često dolaze uz generičke page builder izvedbe.

Custom pristup dao je veću kontrolu nad responzivnim ponašanjem, trajanjem animacija, strukturom komponenti, rukovanjem slikama, strategijom učitavanja, SEO ispisom, održivošću i performansama.

To je ujedno omogućilo prilagodbu pojedinih sekcija ondje gdje se izvorni statični dizajn ne bi dobro prenio u preglednik. Isti pristup primjenjujemo kod izrade web stranica — dizajn, responzivno ponašanje, upravljanje sadržajem i tehnička izvedba razvijaju se kao jedna produkcijska cjelina, a ne kao skup gotovih predložaka.

02 — Prilagodba dizajna i responzivna izvedba

Vjernost ondje gdje je važna. Izmjene ondje gdje ih preglednik traži.

Figma pokazuje kako raspored treba izgledati na odabranim širinama. Produkcijska stranica mora raditi na svakoj širini između njih.

Nekoliko sekcija zato je tražilo dizajnerske odluke tijekom razvoja. Norvaris je doradio pojedine rasporede stranica, ponašanje na mobitelu, prikaz novosti, responzivne razmake i kompoziciju, obrasce interakcije, ponašanje animacija, prikaz videa te obradu i rezanje slika.

Te izmjene nisu rađene radi redizajna samog po sebi. Uvedene su ondje gdje bi izravan prijenos statičnog dizajna dao slabiju upotrebljivost, nezgrapno responzivno ponašanje ili nepotreban tehnički teret.

03 — Složena vizualna izvedba

Slojevite kompozicije pretvorene u učinkovite web komponente

Jedan od najzahtjevnijih dijelova projekta bio je broj vizualnih elemenata i interakcija kroz stranicu.

Pojedine kompozicije trebalo je razdvojiti u zasebne slikovne datoteke i slojeve sučelja umjesto izvoza kao jedne velike snimke.

To je tražilo ravnotežu tri prioriteta:

Vizualna vjernost

Produkcijska stranica i dalje je morala djelovati kao odobreni dizajn.

Responzivno ponašanje

Slojeviti sadržaj morao je ostati upotrebljiv na desktopu, tabletu i mobitelu.

Performanse

Velike grafike i interakcije nisu smjele prijeći u pretjeranu težinu stranice ili blokirajući JavaScript.

Rezultat je vizualno bogata stranica koja ostaje tehnički lagana.

04 — CMS za trajnu korporativnu komunikaciju

Klijent može ažurirati ključni sadržaj bez diranja koda

Stranica nije građena kao statično jednokratno lansiranje.

Uredivi WordPress sadržaj napravljen je za područja koja će tim HyProMag USA vjerojatno ažurirati kako se tvrtka razvija. To uključuje dodavanje i uređivanje novosti, upravljanje članovima tima, učitavanje i zamjenu korporativnih prezentacija, upravljanje dokumentima za preuzimanje i ažuriranje ključnog sadržaja bez intervencije programera.

To je osobito važno za korporativnu stranicu na kojoj se vodstvo, projektne prekretnice, novosti i materijali za investitore mogu redovito mijenjati.

05 — Inženjering performansi

Vizualna složenost bez spore stranice

Performanse su tretirane kao dio izrade, a ne kao čišćenje nakon lansiranja.

Izvedba je uključivala isporuku preko CDN-a, lokalno hostanje fontova, preloading resursa, WebP optimizaciju slika, dimenzioniranje i kompresiju, predmemoriju, optimizirano učitavanje resursa i pažljivo rukovanje većim vizualnim elementima i interakcijama.

Desktop Lighthouse rezultati

Dva PageSpeed Insights desktop testa na živoj produkcijskoj stranici dala su:

Riječ je o laboratorijskim Lighthouse mjerenjima koja variraju između pojedinačnih pokretanja, pa studija slučaja prikazuje raspon umjesto da jedan rezultat tretira kao trajan.

Ključni je rezultat dosljednost: i uz vizualno bogato sučelje, produkcijska stranica ostala je iznimno brza u desktop testiranju.

06 — Tehnički SEO

Temelji za pretraživače ugrađeni u izvedbu

Produkcijska izrada uključila je on-page i tehnički SEO temelj potreban da nova stranica čisto krene.

Posao je obuhvatio naslove stranica i meta opise, hijerarhiju naslova, kanonske URL-ove, konfiguraciju XML sitemapa, robots direktive, Open Graph metapodatke, strukturirane podatke, alt tekstove slika, interno povezivanje, rukovanje preusmjeravanjima, konfiguraciju indeksiranja te postavljanje Google Search Consolea i predaju sitemapa.

Umjesto da se SEO tretira kao dodatak instaliran na kraju projekta, tehnička struktura razmatrana je tijekom razvoja. Živa stranica postigla je Lighthouse SEO rezultat 100 u oba desktop testa.  Tehnički SEO zato je dio naše izrade web stranica od samog početka projekta, a ne dodatak koji se pokušava popraviti nakon lansiranja.

07 — Analitika i mjerenje

Nova stranica lansirana je spremna proizvoditi korisne podatke

Google Analytics 4 povezan je kao dio produkcijskog postavljanja.

To je HyProMag USA dalo čist analitički temelj od lansiranja i uklonilo potrebu za naknadnim dodavanjem osnovnog mjerenja kad je stranica već bila živa.

Stranica sada može podržati kontinuiranu analizu prometa, izvora posjeta, angažmana na stranicama, uspješnosti sadržaja, kontaktne aktivnosti i budućih kampanja.

08 — Forme i pouzdana isporuka e-pošte

Kontakt koji radi i iza sučelja

Kontaktno iskustvo izvedeno je kao dio cjelovitog produkcijskog sustava, a ne kao izolirana vizualna forma.

Postavljanje je uključilo produkcijski spremne forme, validaciju, zaštitu od neželjenih poruka, rukovanje obavijestima, SMTP isporuku e-pošte i pouzdano usmjeravanje prijava.

Time se smanjuje ovisnost o zadanoj WordPress isporuci pošte i dobiva pouzdaniji put između upita sa stranice i tima HyProMag USA.

09 — Sigurnost, sigurnosne kopije i produkcijska infrastruktura

Dijelovi stranice koje posjetitelj ne vidi

Produkcijska korporativna stranica treba i infrastrukturu iza sučelja.

Norvaris je postavio prateći tehnički sloj, uključujući SMTP, planirane sigurnosne kopije, sigurnosne alate, zaštitu vatrozidom, predmemoriju i optimiziranu produkcijsku isporuku.

Cilj je bio predati stranicu spremnu za svakodnevni rad, a ne samo skup dovršenih frontend predložaka.

10 — Zamjena postojeće stranice

Kontrolirani prelazak sa stare stranice na novu platformu

Projekt je zamijenio postojeću HyProMag USA stranicu. To je značilo da posao nije mogao biti samo razvoj u izolaciji.

Novu izradu trebalo je pripremiti za produkciju, pregledati postojeće URL-ove i SEO implikacije, provjeriti forme i analitiku, postaviti infrastrukturu i lansirati novu platformu bez nedovršene tehničke predaje.

Završna faza projekta ušla je i u uži rok za lansiranje, što je tražilo da se izvedba, kontrola kvalitete i objava naprave učinkovito, bez rezanja jezgre izrade.

Rezultat

Korporativna stranica dizajnirana u Figmi — inženjerski izvedena za stvarni svijet

HyProMag USA sada ima custom korporativnu platformu sposobnu tehnički složeno poslovanje prenijeti kroz jasno i moderno digitalno iskustvo.

Custom frontend izvedba

WordPress izrada od nule na temelju isporučenog Figma smjera.

Responzivna prilagodba

Rasporedi i interakcije razriješeni na desktopu, tabletu i mobitelu.

Sadržaj kojim upravlja klijent

Novosti, članovi tima, prezentacije i korporativni dokumenti mogu se ažurirati interno.

Visoke performanse

Desktop Lighthouse performanse izmjerene između 96 i 99 u isporučenim produkcijskim testovima.

Tehnički SEO

Cjelovit on-page i tehnički SEO temelj uz Lighthouse SEO 100 u oba testa.

Analitika

GA4 postavljen od lansiranja.

Pouzdane forme

Rukovanje formama, zaštita od neželjenih poruka i SMTP isporuka.

Produkcijska infrastruktura

Predmemorija, CDN, sigurnosne kopije, sigurnost i vatrozid.

Finalni proizvod čuva ambiciju izvornog dizajna i dodaje tehnički rad potreban za brzu, održivu i produkcijski spremnu korporativnu stranicu.