digitális, web

A webdizájn gyakorlatának jövője most: Webflow

Weblow @work

Ha valaki valaha már nekifogott valamiféle weboldal dizájnolásának-építésének, akkor tisztában van vele, hogy bár egyszerűnek tűnik, azért valójában ez sem véletlenül külön szakma. Igenis kell hozzá HTML, CSS, és némi javascript ismeret – és ez csak a minimum, hiszen manapság nagy valószínűséggel valamilyen tartalomkezelő rendszerre készül a sablon, így annak a nyavalyáit is illik ismerni, nem beszélve a mostanság kötelező reszponzív tulajdonságok implementációjáról! Azon túl, hogy persze továbbra sincs itt a kánaán, elkészült egy ügyes, vizuális felületen buherálható szerkesztő, amivel jóval egyszerűbb, és nem utolsó sorban élvezetesebb is a webdizájn: ez a béta fázisban, meghívásos alapon működő Webflow.

A szerkesztő felülete intuitív, gyorsan meg lehet szokni az alap fogásokat, és persze ér játszadozni, a hibákból tanulni (és van pár jól követhető és érthető tutorial is). A bal függőleges sávban találjuk a készülő oldal megtekintésével kapcsolatos opciókat (dizájn nézet, előnézet, kód export, desktop, táblagép, mobil vízszintes, és mobil portré mód megjelenítések, gridek, valamint x-ray rávetítése kapcsolók), középen ott a vászon, amin kiéljük művészi hajlamainkat, jobb oldalon pedig ott a rengeteg beállítási lehetőség tematikusan csoportosítva. Indulásként lehet már előre elkészített sablonokból válogatni, vagy – bátrabbak és kalandvágyóbbak – rögvest fejest ugorhatnak az üres vászonnak is. A módszer hihetetlen egyszerű: a jobb oldali menü paneljei fölött ott egy plusz jel – arra kell kattintani, és a megfelelő dobozokat, illetve elemeket át kell húzni a vászonra. Érdemes persze mindjárt itt okosan építkezni: a body szegmensbe kezdjünk section-öket dobálni (ezek lesznek a főbb vízszintes alap sávok, mint pl. fejléc, tartalom, lábléc), majd ezekbe container részeket (ezek majd főképpen a mobilos nézeteknél lesznek fontosak), és ezekbe jönnek az oszlopok, amiket többféle elrendezésbe is alakíthatunk, miután bedobáltuk őket a felületünkre.

Pillanatok alatt tartalmi egységekkel gazdagítjuk a kialakított rubrikáinkat, és kezdődhet a dizájnolás – mindeközben már azt is figyelhetjük, miként fog a bonyolultabbnál bonyolultabb struktúránk az egyes mobil interfészeken megjelenni, átrendeződni. Ha valami nem úgy működik, mint ahogy elvárnánk, vagy esetleg azt szeretnénk, hogy mobilon egészen máshová kerüljön vagy másképp jelenjen meg egy-egy elem, akkor az adott mobilos nézetben egyszerűen alakítsuk át a dizájnt, és kész. Így egészen komplex viselkedéseket is beállíthatunk: mondjuk a desktop nézetben legfölül lévő hirdetést át tehetjük középre, vagy a menüt lökjük a logó alá, holott más nézetben fölötte volt – persze mindennek lényege az, hogy próbálgassuk, teszteljük, melyik felületen hogy működik a legoptimálisabb módon a felépített oldalunk. Importálhatunk képeket, háttérelemeket, használhatunk webfontokat (a Google jóvoltából), és ha készen vagyunk, egyszerűen nyomjuk meg az export gombot: máris megkapjuk a teljes dizájnt egy zip fáljba csomagolva.

Természetesen ez az eszköz sem helyettesíti a dizájner szaktudását, az elképzelést, a víziót, az egyes elemek értelmes elrendezését, stb., viszont hihetetlenül képes felgyorsítani a dizájn folyamatát. Pillanatok alatt készíthetünk látványtervet, ami ha tetszik, azonnal használható kóddal érkezik, így nem kell különválasztani a folyamatokat. A rendszer menti és megőrzi a terveinket, így nem kell attól tartani, hogy elveszne valami, vagy másnap kezdhetjük elölről az egész munkát. Hasznos, látványos, élvezetes eszköz.

Standard