Miért pont a Webflow?

A Webflow kiveszi a webfejlesztés fájdalmas részeit az egyenletből, így a front-end fejlesztők arra összpontosíthatnak, hogy a terveket gyorsabban megvalósíthassák. Végső soron a CSS csak a stílusról szól - amit a tervezők olyan vizuális eszközökkel szoktak megvalósítani, mint a Sketch, a Figma és a Photoshop, de a Webflow-n kívül soha nem volt olyan eszköz, amely vizuálisan biztosítaná a HTML és a CSS erejét.

Miért pont a Webflow?

Ha front-end fejlesztő vagy, felteheted magadnak a kérdést: "Miért a Webflow?" Ebben a bejegyzésben 7 okot fogunk áttekinteni, miért érdemes elkezdeni a vizuális kódolást a Webflow segítségével.

1. A Webflow szakemberek számára készült

A Webflow-t időnként a kevésbé kifinomult weboldal-készítőkkel említik. Ha fejlesztő vagy, és ezt az ítéletet meghoztad, meg tudom érteni a hezitálást. De a fő különbség a Webflow és a többi, fogyasztó-központúbb eszköz között az, hogy a Webflow nem próbálja elrejteni a webfejlesztés összetettségét és erejét - ehelyett magába foglalja azt.

‍A Webflow a kód erejét hozza egy vizuális vászonra - tehát, ha meg tudod tervezni, akkor meg is tudod valósítani. Ez azt jelenti, hogy bármit is szeretnél felépíteni, a Webflow rendelkezik a szükséges funkciókkal ahhoz, hogy valami teljesen egyedi terméket készíts. Vegyünk például egy HR startupot, a Lattice-t, amelynek teljes céges weboldala a Webflow-ra épül és abban menedzselhető.

A fejlesztők gyorsan megértik a Webflow felhasználói felületét

A Webflow egyik legnehezebb része az, hogy - mint bármely másik professzionális tervezőeszköznél - itt is meg kell tanulni a használatát. Ez különösen igaz, ha olyan tervező vagy marketinges vagy, aki soha nem tanulta a HTML és a CSS alapjait. De azoknak a fejlesztőknek, akik már rendelkeznek ezzel a tudással, a Webflow könnyen megtanulható lesz.

‍A Webflow felhasználói felülete közvetlenül a HTML és a CSS vezérlőihez kapcsolódik, bal oldalon az elemeivel (pl. Div blokkok, linkek, szöveg), a jobb oldalon pedig a CSS stílusvezérlőivel. Ez azt jelenti, hogy hasonló modelleket fogsz használni a Webflow-ban, mint a CSS kódszerkesztőben történő írásakor.

És mivel a kezelőfelület közvetlenül a HTML-et és a CSS-t irányítja, és class-ok használatával építesz, a Webflow webhely mögött lévő kód olyan tiszta, mintha kézzel írnád.

Ez különösen akkor hasznos, ha olyan stílusokat készítesz, amelyek CSS-jét különösen nehéz megjegyezni: például egy gombnak sugárirányú színátmenetet adhatsz, amit a grafikusok nagyon szeretnek.

2. A class-ok és az újrafelhasználható stílusok a Webflow alapvető elemei

Az elemek vizuális formázása a CSS erejével a Webflow-ban kiváló, de mi van akkor, ha ezeket a stílusokat újra szeretnéd használni vagy frissíteni a weboldalon? Jó hír, csakúgy, mint a CSS, a Webflow is class-okból épül fel. A Webflow használata nemcsak a weboldal készítését, hanem karbantartását és frissítését is megkönnyíti.

‍A CSS stílus befolyásolja a megjelenést. A Webflow használatával ezeket a CSS-stílusokat nem kódok segítségével kell módosítanod. A vizuális felületen egyszerűen megoldhatók az egész weboldalra kiterjedő változtatások. Az egyes elemek stílusának módosítása és megváltoztatása során látni fogod, hogy a változtatások azonnal megtörténnek. Létrehozhatsz az egész weboldalra kiterjedő CSS-stílusokat egy adott elemhez, vagy szükség szerint teljes mértékben testre szabhatod az egyes elemeket.

‍3. Használj olyan modern elrendezési eszközöket, mint a flexbox és a CSS rács

A Webflow-ban való vizuális munkavégzés nem azt jelenti, hogy korlátozott lehetőségeid vannak az elrendezésekre. Éppen ellenkezőleg, a Webflow előnyben részesíti az olyan modern elrendezési rendszereket, mint a flexbox és a CSS rács, ami azt jelenti, hogy teljes mértékben a saját elképzeléseid szerint építheted fel a weboldalt.

És ami a legjobb, hogy azáltal, hogy ezeket az elrendezési rendszereket vizuálissá teszi, nem kényszerülsz arra, hogy időt tölts az egyik helyen a kód megírásával, majd egy másik helyen az ellenőrzésével. Ehelyett valós időben láthatod, hogy az elrendezés módosítása hogyan befolyásolja a weboldalt fejlesztés közben.

‍Végülis a CSS a vizuális formázásra vonatkozik, tehát ki mondta, hogy ennek egy kódszerkesztőben kell történnie?

4. A publikálás csak egy kattintásra van

‍A Webflow nem csupán a kódolás vizuális módja - ez egy egybeépített publikáló és tárhely platform is. Ez azt jelenti, hogy töredék annyi idő alatt eljuthatsz a nulláról a publikus weboldalig, mintha kézzel írnád a kódokat. Miután vizuálisan elkészítetted a dizájnt, kattints a publikálásra, és máris él a weboldalad.

‍5. Rugalmas és hatékony CMS (hagyd el a WordPress-t)

‍A statikus oldalak vizuális felépítése a Webflow-ban nagyon hatékony. De, ahogy azt bármely tapasztalt fejlesztő tudja, a növekedésre hivatott weboldalak nagymértékben támaszkodnak a motorháztető alatt lévő CMS-re - amely a csapattársaknak vagy ügyfeleknek lehetővé teszi a weboldal frissítését anélkül, hogy zavarnák a jövőbeni fejlesztéseket.

Ebből a szempontból a Webflow CMS egy rendkívül rugalmas és hatékony eszköz, amely egyesíti a Webflow-ban rejlő látványtervezési vezérlőket egy olyan CMS rugalmasságával, amely nem korlátoz be bizonyos formátumokba vagy bejegyzési típusokba. A Webflow segítségével szabadon létrehozhatsz bármilyen típusú tartalmat, amire a weboldaladnak szüksége van, majd teljesen egyedileg készítheted el a hozzá tartozó dizájnt.

‍A Webflow CMS segítségével egyedi mezőket határozhatsz meg, és ezeket a mezőket közvetlenül összekapcsolhatod az általad megtervezett tartalom-sablonnal.

‍A tartalomszerkesztő szempontjából egy Webflow weboldal tartalmának szerkesztése és frissítése egyszerű és intuitív- a Webflow Editor-nak köszönhetően. A szerkesztő egyszerű felhasználói felületet biztosít kollégáidnak és ügyfeleidnek az oldal tartalmának szerkesztéséhez és frissítéséhez, anélkül, hogy bejelentkeznének egy különálló, bonyolult admin felületre.

6. Készíts teljesen egyedi interakciókat és animációkat

Az elrendezések nulláról történő egyedi felépítése az első szintű Webflow tudás. Az elrendezések egyéni CMS-tartalommal történő ellátása a második szint. De miért állnál meg itt? A harmadik szint a Webflow interakciói és animációs eszközei, amiről azt gondolhattad, hogy nem lehetséges a vizuális webfejlesztéssel megvalósítani.

‍A Webflow interakciós és animációs eszközével az animációkat olyan gyakori triggerek segítségével vezérelheted, mint például:

• Oldal betöltése

• Kattintás

• Hover

• Görgetés

• Egér helyzete

• ...és még sok más 

Különösen jó hír azoknak a front-end fejlesztőknek, akik jól érzik magukat a HTML-ben és a CSS-ben, de a JavaScript-et még nem sikerült elsajátítaniuk (vagy késleltetik tanulmányaikat). A Webflow célja, hogy a weboldal-animációk és interakciók erejét közvetlenül egy vizuális eszköztárba helyezze - ezáltal a webdesign egésze vizuálisan kreatívabbá és hozzáférhetőbbé válik.

7. Kezdd el a tanulást a Webflow University-n

‍Egy vadonatúj, professzionális eszköz, mint például a Webflow megtanulása ijesztő lehet. Annak érdekében, hogy ez a tanulási folyamat szórakoztató és hozzáférhető legyen, rengeteg munkát fektettek a Webflow University oktatási videóinak és anyagainak elkészítésébe, így mindenre megtalálhatod a válaszodat és közben még jól is szórakozhatsz.

Zárásként: a tervezőknek és a fejlesztőknek kódolniuk kell - de vizuálisan

‍Úgy szoktam jellemezni a Webflow-t, mint a kódolás alternatív módját. És amikor felmerül az a régi kérdés, hogy a tervezőknek kódolniuk kell-e vagy sem, valójában azt gondolom, hogy a válasz az, hogy "igen, a tervezőknek kódolniuk kell - de vizuálisan".

‍A Webflow egyik alapelve az, hogy a grafikusok amúgy is összetett vizuális eszközöket szoktak megtanulni munkájuk elvégzéséhez, de a web design területén egyik sem volt fejlesztés-orientált. A Webflow áthidalja ezt a hiányosságot azáltal, hogy a fejlesztést vizuálissá teszi. Ez azt jelenti, hogy ha a Webflow felhasználói nem is írnak kódot, ugyanazon mentális modellen mennek keresztül, amikor egy weboldal kivitelezésén gondolkoznak - közvetlenül azzal a közeggel dolgoznak, amelyre terveznek.

‍Végső soron ez arra készteti a grafikusokat és a fejlesztőket, hogy közös nyelvet beszéljenek - és ennek eredményeként sokkal gyorsabban készülhetnek el a digitális termékekkel.

‍‍Forrás: webflow.com