Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 22/ 26Przenoszenie do Webflow

0:00 / 0:00
UI, UX i WebdesignWebflowFramework dla Webflow

Strony WWW z SystemFlow: Przenoszenie do Webflow

4 godz. 22 min wideo26 lekcji6 modułów

Grzegorz RógIdea Architect
Wszystkie kursy autora

Czego się nauczysz

  • Omówienie dokumentacji SystemFlow
  • Praktyczny Case Study - Tworzenie strony
  • Praca z UI Kitem w Figma
  • Live Componenty
  • Korzystanie z klas i tokenów
  • I wiele więcej!

Strony WWW z SystemFlow - Framework dla Webflow

SystemFlow to framework stworzony z myślą o niezwykle wydajnej pracy w Webflow. Jeśli tworzysz strony dla klientów i chcesz znacznie przyspieszyć swoją pracę w Figma oraz Webflow - ten kurs powstał właśnie dla Ciebie! Omawia on wszystkie ważne składowe i koncepcje SystemFlow, pokazując podejście systemowe do projektowania. Sam SystemFlow zawiera dziesiątki gotowych do użycia komponentów i ponad 1000 klas CSS, które pomogą Ci zapanować nad prostymi i bardziej złożonymi projektami. Sam SystemFlow oraz dostęp do Webflow czy Figmy należy wykupić osobno, ale w kursie znajdziesz kupon o wartości około 100 zł, którym obniżysz cenę SystemFlow przy jego zakupie.

Tworzenie prostych stron i Landing Page'y

Duż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.

Od Figmy do Webflow

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.

Design Tokeny - Kolory, Fonty, Spacing

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.

Żyjący Design System

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

Pracuj Sprytniej

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ę!

Dla kogo jest ten kurs?

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!

Wersja oprogramowania: SystemFlow 1.0+

Kurs Strony WWW z SystemFlow

6 rozdziałów26 lekcji4h 22min

Wprowadzenie

18min
  • Wstęp do kursu4min(zablokowana)
  • Dokumentacja10min(zablokowana)
  • Strona Customize5min(zablokowana)

SystemFlow dla Webflow

1h 27min
  • Komponenty Webflow10min(zablokowana)
  • Praca z Klasami13min(zablokowana)
  • Typografia11min(zablokowana)
  • Jednostki w Typografii10min(zablokowana)
  • Kolory12min(zablokowana)
  • Praca z Ikonami10min(zablokowana)
  • Marginesy i Padding12min(zablokowana)
  • Przyciski10min(zablokowana)

Live Components

30min
  • Wprowadzenie do LC8min(zablokowana)
  • Countdown6min(zablokowana)
  • Temporal5min(zablokowana)
  • Notyfikacje Cookie7min(zablokowana)
  • Confetti5min(zablokowana)

SystemFlow dla Figma

45min
  • Wprowadzenie do Figma4min(zablokowana)
  • Auto Layout6min(zablokowana)
  • Warianty6min(zablokowana)
  • Komponenty9min(zablokowana)
  • Style i Tokeny7min(zablokowana)
  • Przenoszenie do Webflow13min(zablokowana)

Showcase

1h 10min
  • Projektowanie w Figma29min(zablokowana)
  • Wdrożenie w Webflow41min(zablokowana)

Extra

12min
  • Licencje i zgłoszenia6min(zablokowana)
  • Praca z różnymi wersjami6min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Grzegorz Róg
Średnia ocen autora: 4,8

Bio

Od wielu lat projektuje serwisy internetowe, dużą wagę przykładając do ich funkcjonalności a także skutecznych technik promocji. Swoje umiejętności praktyczne zdobywa projektując grafikę oraz strony www dla wiodących polskich i zagranicznych agencji reklamowych. Współpracuje między innymi z Adobe, Microsoft, Wacom. Jako trener i spiker prowadzi szkolenia oraz eventy i warsztaty. Posiada szereg uprawnień i certyfikatów eksperckich.

W wolnych chwilach stara się przekazać Ci całą praktyczną wiedzę, pasję i doświadczenie. Zapraszamy do kursu - gwarantujemy, że ta świetna zabawa przyniesie Ci mnóstwo satysfakcji!

Inne kursy tego autora

Pokaż więcej kursów