Framework dla Webflow
4 godz. 22 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectDuża część naszej pracy sprowadza się do projektowania prostych stron - wydarzeń, małych sklepów, ofert, landing page'y. SystemFlow znacznie upraszcza i przyspiesza naszą pracę w tym zakresie, oferując szereg gotowych komponentów, sekcji i template'ów, które możesz wykorzystać do poskładania takiej strony w kilka minut.
SystemFlow jest w całości zmapowany na Figmę, co znaczy, że otrzymujesz kompletny UI Kit dla Figmy, z pomocą którego możesz projektować. Następnie, stworzone w ten sposób projekty w prosty sposób przeniesiesz do Webflow, korzystając z tych samych nazw komponentów, tworząc z tego gotowy, działający projekt strony.
W SystemFlow masz możliwość zdefiniowania własnej stylistyki całego systemu - globalne zmiany do typografii oraz swatchy kolorystycznych sprawią, że fonty i kolory zmienią się na przestrzeni całego Twojego projektu! W ten sposób łatwo przygotujesz strony, które stylistycznie znacznie odbiegają od pierwotnej koncepcji framework'u i są dopasowane do identyfikacji Twojego klienta.
Plik Webflow, na którym pracujesz z Frameworkiem, zawiera pełną dokumentację, która zmienia się na żywo, w trakcie projektowania. Oznacza to, że po publikacji samej strony w Webflow, otrzymujesz kompletną referencję z design tokenami, wyglądem formularzy, przycisków, komponentów i innych elementów, którą możesz przekazać klientowi. Przykład dokumentacji wygląda tak: https://systemflow-v-1-1-51e1ee81-49590199e0f65.webflow.io/style-guide/about/overview
SystemFlow powstał w jednym celu - aby pomóc nam tworzyć projekty dla siebie i naszych klientów znacznie szybciej, wydajniej, w sposób zorganizowany. Ponadto, aby wykorzystać Webflow jako najlepszy edytor, dający nam łatwy dostęp do zmian w ramach uporządkowanej struktury, obsługę CMS, E-Commerce, a klientowi możliwość edycji elementów strony z przeglądarki. Z drugiej strony, wykorzystaliśmy Figmę czyli najlepsze narzędzie do projektowania UI z masą dodatków i pluginów, które usprawnią Twoją pracę!
Ten kurs przygotowany jest z myślą o osobach, które w swoich firmach tworzą wiele stron, na przykład marketingowych i chcą czy to do tworzenia finalnych stron czy prototypów, wykorzystać Webflow i ewentualnie Figmę. Kurs nadaje się też doskonale dla Freelancerów którzy oferują swoje usługi tworzenia stron w Webflow, a także agencji kreatywnych, które mogą znacznie przyspieszyć swoją pracę dzięki SystemFlow!
SystemFlow 1.0+
Cześć, Z tej strony Grzegorz Róg z PL.
Mam przyjemność zaprosić Cię na mój
kolejny kurs, który tym razem dotyczy frameworka System Flow, który
przygotowaliśmy dla Łap Flow i pozwala on na super wydajne tworzenie stron
internetowych, zwykle prostych stron, takich jak landing page.
A jeśli pracujesz już wietrzą i tworzysz
sporo takich projektów dla siebie albo oferujesz takie usługi klientom, to system
jest czymś, co znacznie przyspieszy Twoją pracę.
Dlaczego?
Ponieważ Web Flow po to, aby projektować strony.
Musisz zacząć od czystej kartki, od pustego kampusu.
Natomiast system oferuje szereg gotowych
komponentów, z których możesz rozpocząć pracę, takie jak nasz Bar Hero, sekcje,
formularze kontaktowe i wiele, wiele więcej.
Dzięki temu możesz składać strony
internetowe z klocków, a następnie dopasowywać ich stylistykę.
No właśnie.
Drugim komponentem System Flow są style, które możesz bardzo łatwo zmienić.
Masz do dyspozycji definicję kolorów jako oczy, a także definicję typografii.
To co jest ciekawe jeśli zmienisz to w
jednym miejscu we frameworku, to tak naprawdę zmieni się cała Twoja strona,
wszystkie podstrony i cały projekt, który tworzysz.
To dlatego właśnie system Flow jest bardzo
wydajnym design systemem, który pomoże Ci zorganizować się w łeb flow.
I w końcu jeszcze jeden kluczowy komponent, czyli klasy CSS.
Przygotowaliśmy ich ponad 1000 i są to klasy, którymi możesz zarządzać z passing
marginesy, padding, kolorami, wielkością i masą innych rzeczy.
Dzięki temu nie będziesz tworzył swoich własnych, nie zorganizowanych klas, tylko
wykorzystasz te we frameworku po to, aby nałożyć już predefiniowane style.
I znów zmiana w ramach jednej klasy będzie skutkować tym, że cały Twój design system
zostanie zmieniony i cała strona się zmieni.
No właśnie system to też jest dynamiczne
żyjący design system, który jest w przeglądarce i po opublikowaniu Twojej
strony jest dostępny również dla klienta czy innych osób np.
marketingu, które mogą teraz
zobaczyć jakie kolory, jaka typografia jest użyta w projekcie.
Jednym słowem system flow to jest taki
kombajn dla Web Flow, który pozwoli Ci bardzo wydajnie tworzyć strony w oparciu o
predefiniowane komponenty z użyciem własnych styli, które możesz definiować.
Dla kogo przygotowałem ten kurs?
Przede wszystkim dla osób, które znają już web i tworzą własne projekty i tworzą ich
sporo lub też tworzą projekty dla klientów.
To właśnie tutaj.
Jeśli pracujesz w agencji czy tworzysz
strony jako freelancer, system Flow na pewno ma mnóstwo zalet,
które pozwolą Ci pracować dużo, dużo szybciej.
No i ma on też wersję dla firmy, więc dla wszystkich osób, które korzystają z firmy
będą te osoby mogły przygotować sobie również prototypy stron i kierować po nich
tymi samymi zasobami, co framework, które przygotowaliśmy dla Web Flow.
Więc jeśli czujesz się dobrze Web Flow i
projektujesz wiele różnych stron, są to np.
strony marketingowe, landing page czy
strony dla Twoich klientów, prawdopodobnie powinieneś zainteresować się system Flow.
No i na koniec mam dla Was jeszcze niespodziankę cena tego kursu, jak również
cena abonamentu w zależności w jakiej wersji to oglądacie jest jednocześnie
rabatem, który uzyskuje Cię na system flow.
To znaczy, że przy zakupie System Flow ten
kurs kosztuje Was zero, ponieważ w jednej z kolejnych lekcji przekazujesz specjalny
kupon na system Flow, który możesz wykorzystać.
Jest on na równowartość ceny tego materiału.
Mam nadzieję, że będziesz chciał sprawdzić
system Flow i wykorzystać go w swoich projektach.
Ja szczerze mówiąc nie mogę się doczekać, żeby zobaczyć to, co z nim zrobisz.
Dziękuję Ci za uwagę i zapraszam do pierwszej lekcji kursu.