.svg)
A Webflow segít elkerülni a webfejlesztés fájdalmas részeit, így a front-end fejlesztők arra összpontosíthatnak, hogy a grafikai terveket minél gyorsabban kivitelezzék. Végső soron a CSS csak a stílusról szól - amit a tervezők olyan összetett vizuális eszközökben szoktak csinálni, mint a Sketch, az Figma és a Photoshop - de a Webflow-n kívül soha nem volt olyan kivitelezés-orientált eszköz, amely vizuálisan biztosítaná a HTML és a CSS lehetőségeit.
A Webflow segít elkerülni a webfejlesztés fájdalmas részeit, így a front-end fejlesztők arra összpontosíthatnak, hogy a grafikai terveket minél gyorsabban kivitelezzék. Végső soron a CSS csak a stílusról szól - amit a tervezők olyan összetett vizuális eszközökben szoktak csinálni, mint a Sketch, az Figma és a Photoshop - de a Webflow-n kívül soha nem volt olyan kivitelezés-orientált eszköz, amely vizuálisan biztosítaná a HTML és a CSS lehetőségeit.
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.
A Webflow-t időnként a kevésbé kifinomult website-készítőkkel egy kalap alatt említik. Ha fejlesztő vagy, és meghoztad ezt az ítéletet, meg tudom érteni. De a legfőbb 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 ötvözi egy vizuális UI-al - ami azt jelenti, hogy ha meg tudod tervezni, akkor meg is tudod valósítani. Ez azt jelenti, hogy bármit is szeretnél létrehozni, a Webflow rendelkezik a szükséges funkciókkal ahhoz, hogy valami teljesen egyedi terméket készíts. Vegyünk példáulul egy HR startupot, a Lattice-t, amelynek teljes céges weboldala a Webflow-ra épül és abban menedzselhető.
A Webflow alkalmazásának egyik legnehezebb pontja, hogy - mint bármely professzionális tervezőeszköz - itt is meg kell tanulni a használatát. Ez különösen igaz, ha olyan tervező vagy marketingszakember 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 megérthető.
A Webflow felhasználói felülete közvetlenül a HTML és a CSS vezérlőihez kapcsolódik, bal oldalon az elemekkel (pl. Div blokkok, linkek, szöveg), jobb oldalon pedig a CSS stílusvezérlőivel. Ez azt jelenti, hogy hasonló mentális modelleket használsz a Webflow-ban, mint a CSS kódszerkesztőben történő írásakor.
Mivel a felhasználói felület közvetlenül a HTML-t é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 hasznos akkor, ha olyan stílusokat készítesz, amelyek CSS-ét különösen nehéz megjegyezni: például egy gombnak sugárirányú színátmenetet adhatsz, amelyet úgy tűnik, a grafikusok nagyon szeretnek.
Az elemek vizuális formázása a Webflow-ban a CSS erejével remekül működik, de mi van akkor, ha ezeket a stílusokat újra szeretnéd használni vagy frissíteni a weboldalon? Jó hír, hogy csakúgy, mint a CSS, a Webflow is class-okból épül fel. A Webflow nemcsak a webhelyek 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 nem kell ezeket a CSS-stílusokat kód segítségével módosítani. A vizuális felület használatával az egész website-ot érintő változtatások egyszerűek. 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 egész website-ra kiterjedő CSS-stílusokat egy adott elemhez, vagy szükség szerint teljes mértékben személyre szabhatod az egyes elemeket.
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 gird, ami azt jelenti, hogy a website-ot teljes mértékben tetszés szerint felépítheted.
És ami a legjobb, hogy azáltal, hogy ezeket az elrendezési rendszereket vizuálissá teszi, nem kell időt pocsékolnod arra, hogy felkutasd vagy megírd az adott kódsort az egyik helyen, majd máshol ellenőrizd az eredményt. Ehelyett valós időben láthatod, hogy az elrendezés módosítása hogyan befolyásolja a site-ot fejlesztés közben.
Végülis, a CSS írása a vizuális formázásra vonatkozik - ki mondja, hogy ennek egy kódszerkesztőben kell történnie?
A Webflow nem csupán a kódolás egy vizuális módja - ez egy beépített publikáló és tárhely platform is. Ez azt jelenti, hogy a nulláról a közzétett website-ig eljutni töredéke annak az időnek, amit a kódolás igényel. Miután vizuálisan elkészítetted a dizájnt, egyszerűen kattints a publikálásra és máris él a site-od.
Nincs FTP, nincsenek bosszantó beállítások - csak kattints a publikáláshoz.
A Webflowban statikus oldalakat vizuálisan felépíteni nagyon hatékony. De, mint bármely tapasztalt fejlesztő tudja, a növekedésre hivatott website-ok nagymértékben támaszkodnak a motorháztető alatt lévő CMS-re - amely lehetővé teszi a webhely frissítését csapattársak vagy ügyfelek számára anélkül, hogy zavarnák a jövőbeni fejlesztéseket.
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 bizonyos formátumokkal vagy bejegyzési típusokkal. A Webflow segítségével szabadon létrehozhatsz bármilyen típusú tartalmat amire a site-odnak szüksége van, majd teljesen egyedileg készítheted el a tartalomnak megfelelő design-t.
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 website tartalmának szerkesztése és frissítése egyszerű és intuitív - a Webflow Editornak köszönhetően. A szerkesztő egyszerű felhasználói felületet biztosít kollégáidnak és ügyfeleidnek a tartalom szerkesztésére és frissítésére közvetlenül az oldalon, anélkül, hogy bejelentkeznének egy bonyolult, különálló admin felületre.
Az elrendezések nulláról történő elkészítése az 1. szintű Webflow használat. Az elrendezések egyéni CMS-tartalommal történő ellátása a 2. szint. De miért állnál meg itt? A 3. szint a Webflow interakciói és animációs eszközeinek használata - amelyek túlmutatnak azon, amit lehetségesnek gondoltál volna a vizuális webfejlesztésben.
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:
Ez 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 még mindig próbálják elsajátítani a JavaScript-et (vagy késleltetik tanulmányaikat). A Webflow célja, hogy a weboldal-animációk és interakciók tárházát közvetlenül egy vizuális eszköztárba helyezze - ezáltal a webdesign egészét kreatívabbá és hozzáférhetőbbé téve.
Egy vadonatúj, professzionális eszköz, mint például a Webflow elsajátítása ijesztő lehet. Annak érdekében, hogy ez a tanulási folyamat szórakoztató és hozzáférhető legyen, rengeteget fektettek a Webflow University oktatási videóinak és anyagainak létrehozásába, így megtalálhatod a keresett válaszokat, és közben még jól is érezheted magad.
Ú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 kell-e kódolniuk vagy sem, 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 egyébként is összetett vizuális eszközöket szoktak megtanulni munkájuk elvégzéséhez, de korábban ezek egyike sem volt kivitelezés-orientált. A Webflow áthidalja ezt a hiányosságot azáltal, hogy a front-end fejlesztést vizuálissá teszi. Ez azt jelenti, hogy ha a Webflow felhasználói nem is írnak kódot, ugyanazon mentális folyamaton mennek végig, amikor egy website kivitelezésén gondolkoznak - közvetlenül azzal a közeggel dolgozhatnak, amelyre terveznek.
Végső soron ez arra készteti a grafikus tervezőket és a fejlesztőket, hogy közös nyelvet beszéljenek - és ennek eredményeként sokkal gyorsabban szállítsák a digitális termékeket.
Forrás: webflow.com
Töltsd le ezt az ingyenes dokumentumot, ami segít stratégiai szemlélettel átgondolni új vagy meglévő márkádat.
Ha egy új webshop indítása előtt állsz, vagy esetleg egy már meglévő webshopot szeretnél stratégiai szempontból átgondolni, szükséged van erre az útmutatóra.
Töltsd le!
Hetente egyszer küldünk neked egy új cikket.
