Tworzenie stron i sekcji ze Storyblok i Vue.js

Z tego artykułu dowiesz się:

• Jakie są metodologie tworzenia komponentów
• Czym są Atomic Design, Storyblok i Vue.js
• Które rozwiązania najlepiej sprawdzą się w Twojej firmie
• Czy interfejs użytkownika wpływa na User Experience
• Jak wdrożyć poszczególne opcje w konkretnym projekcie
• Co robić, by sprawnie pracować z komponentami
   

Atomic Design, Storyblok i Vue.js, czyli jak skutecznie pracować z komponentami

Pracując z różnego rodzaju komponentami, możesz natknąć się na szereg dostępnych metodologii, które z powodzeniem wykorzystasz w systemach headless.

Przed przystąpieniem do działania warto jednak zapoznać się z możliwymi rozwiązaniami, skupiając się najbardziej na tych, które przydadzą się zarówno Twojej firmie, jak i klientom.

Działanie w oparciu o komponenty pozwala na bardziej szczegółowy design i instrukcje, a przez to intuicyjny i przede wszystkim przyjemny w użytkowaniu interfejs, który spodoba się nawet wybitnie wymagającym użytkownikom.

User Experience a interfejs aplikacji

Nieodłącznym elementem User Experience jest sposób, w jaki odbiorcom korzysta się z przygotowanego specjalnie dla nich interfejsu aplikacji.

Interfejs użytkownika to rodzaj panelu administracyjnego, w którym każda nowo przybyła osoba powinna szybko się odnaleźć. Korzystanie z takiego narzędzia musi być zarówno intuicyjne, jak i zwyczajnie przyjemne.

Aby skutecznie tworzyć wysokiej jakości interfejsy użytkownika, warto skorzystać z metodologii pracy z komponentami. Narzędzia, które umożliwiają budowanie systemów w najdrobniejszych detalach, sprawią, że doświadczenia Twoich klientów będą naprawdę niezapomniane.

Tworząc interfejs użytkownika, zwracaj uwagę nie tylko na jego warstwę wizualną, ale też użyteczność. Każde narzędzie przeznaczone do korzystania przez internautów powinno być proste w obsłudze i dostosowane do najróżniejszych osób, nawet tych zmagających się z ograniczeniami.

Metodologie tworzenia komponentów

Choć metodologie tworzenia komponentów szczycić się mogą popularnością w świecie e-commerce, nie każdy wie, które rozwiązanie okaże się najbardziej adekwatnym wyborem.

We’re not designing pages, we’re designing systems of components. - Stephen Hay

Przytoczone słowa pokazują, że tworzenie na bazie komponentów to bardziej składanie systemu z różnych mniejszych elementów, a nie zwyczajne budowanie stron internetowych.

Przez szeroki wybór rozwiązań w pracy z komponentami trudno znaleźć to idealne dla danego biznesu. A dokonanie odpowiedniego wyboru wymaga wcześniej zaplanowanego działania.

Właśnie dlatego poniżej przedstawiamy krótkie zestawienie znanych podejść do tworzenia komponentów. Mamy nadzieję, że z naszą pomocą szybko znajdziesz opcję idealną dla Twojego biznesu.

Atomic Design

To metoda projektowania polegająca na podziale interfejsu na coraz mniejsze elementy, która składa się z pięciu poziomów takich jak:

1. Atomy
2. Cząsteczki
3. Organizmy
4. Szablony
5. Strony

Każdy kolejny poziom oznacza rozkład całości na elementy o stopniowo zmniejszającym się zaawansowaniu.

Pattern Lab

To narzędzie, które daje możliwość szybkiego tworzenia i testowania komponentów grupowanych w kategorie, a następnie wykorzystywanych do tworzenia szablonów.

Storyblok

Ten system ułatwia tworzenie i testowanie komponentów. Wykorzystując go, możesz także izolować środowiska dla każdego elementu, co usprawnia personalizację.

Web Components

Ta technologia umożliwia tworzenie niestandardowych elementów HTML i umieszczanie ich w aplikacji. Decydując się na to rozwiązanie, bez problemu wykorzystasz komponenty w różnych miejscach.

Jak widzisz, metodologii tworzenia komponentów jest mnóstwo. Poniżej wybraliśmy najpopularniejsze rozwiązania, które naszym zdaniem najlepiej sprawdzą się w każdym nowoczesnym biznesie online.

 

Czym jest Atomic Design i dlaczego warto z niego korzystać?

Wspomniana wyżej metodologia Atomic Design nie bez powodu cieszy się największą popularnością.

Atomic Design pozwala na łatwe tworzenie interfejsów poprzez ich podział na mniejsze, bardziej podstawowe elementy. Taki sposób działania został zaproponowany przez cenionego specjalistę w dziedzinie informatyki, Brada Frosta.

Wymienione wcześniej poziomy Atomic Design odnoszą się do hierarchiczności tego modelu i oznaczają kolejno:

• Atomy - najmniejsze elementy interfejsu, np. przyciski, pola tekstowe czy ikony.
• Cząsteczki - połączenie atomów tworzących bardziej skomplikowane elementy, takie jak formularze albo pola wyszukiwania.
• Organizmy - złożone elementy składające się zarówno z atomów, jak i cząsteczek, takie jak nagłówki, stopki czy menu.
• Szablony - elementy łączące atomy, cząsteczki oraz organizmy w konkretne sekcje, takie jak nagłówek, treść itd.
• Strony - produkt finalny, czyli witryny internetowe lub aplikacje, które składają się z atomów, cząsteczek, organizmów oraz szablonów.

Jeśli zastosujesz podejście Atomic Design w swoim biznesie online, możesz liczyć na szereg korzyści takich jak:

Łatwe zarządzanie

Podział interfejsu na mniejsze elementy sprawia, że zarządzanie staje się proste i intuicyjne.

Spójny design

Tworzenie w oparciu o komponenty pozwala na zachowanie spójnego designu, w który każdy drobny element będzie dopasowany do pozostałych.

Wydajność

Komponenty pozwalają na wykorzystanie tych samych elementów wielokrotnie, dzięki czemu zamiast zaczynać od nowa dla każdej strony, zwiększasz wydajność całego procesu.

Modularyzacja

Dzięki modularności projektu z łatwością wprowadzisz zmiany i udostępnisz poszczególne elementy do ponownego wykorzystania.

Jak widzisz, Atomic Design to podejście, które skupia się na rozkładaniu aplikacji na poszczególne części. Dzięki temu, że dotarcie do każdego elementu jest szybkie i proste, cały system pozostaje spójny oraz szczegółowo dopracowany.

Czy Storyblok to opcja właśnie dla Ciebie?

Storyblok nie bez przyczyny reklamuje się jako droga do tworzenia nowoczesnych treści.

Storyblok is one of the easiest CMSs I have ever worked with. Having worked with various CMSs before, and knowing my way around, Storyblok was the easiest to learn how to use, teach others, and adapt to your content needs.

Emelie Samuelsson, Head of Tech at Xlash

Ten system CMS pozwala na zarządzanie treścią w niezwykle innowacyjny sposób. Obecnie korzystają z niego między innymi takie firmy jak Netflix, Adidas, Tesla czy Saint Laurent.

System cieszy się uznaniem zwłaszcza ze względu na możliwość pracy z komponentami. Taki model jest wygodny w użyciu i pozwala na tworzenie treści dopracowanych pod każdym możliwym kątem.

Dodatkowo platforma zapewnia niezawodną technologię headless, wysokiej jakości bezpieczeństwo oraz skalowalność. Wybierając Storyblok, możesz mieć pewność, że zadowoleni będą zarówno Twoi klienci, jak i poszczególni pracownicy.

Vue.js, czyli nowoczesne środowisko programistyczne

Vue.js to nowoczesny framework JavaScript, z którego każdego dnia korzysta mnóstwo programistów z całego świata. Rozwiązanie sprawdzi się zarówno wśród freelancerów, startupów, jak i pracowników międzynarodowych organizacji.

Wybierając wspomnianą platformę, zyskujesz elastyczne narzędzie przeznaczone do tworzenia internetowych interfejsów użytkownika.

Niewątpliwą zaletą Vue.js jest możliwość sprawnej integracji narzędzia z innymi oprogramowaniami. Dzięki temu, dołączając do platformy, nie musisz martwić się o połączenie z rozwiązaniami, które dotychczas sprawdzały się w Twojej firmie. 

Mając do wyboru kilka środowisk programistycznych, pamiętaj, że Vue.js to nie tylko sprawdzony framework, ale też skuteczne narzędzie, które pozwoli Ci tworzyć nawet najbardziej zaawansowane interfejsy użytkownika.

Wdrożenie wybranego modelu projektowania w projekcie - instrukcja

Niezależnie od tego, w jakiej branży działasz, odpowiedni model projektowania może Ci się przydać. Jeśli zastanawiasz się, w jaki sposób wdrożyć tego typu rozwiązanie w swojej firmie, skorzystaj z poniższych instrukcji.

Jak skutecznie wdrożyć Atomic Design?

• Określ cele projektu: przed rozpoczęciem projektu warto przemyśleć swoje oczekiwania, a następnie zastanowić się, jakie elementy będą konieczne do ich realizacji. 
• Stwórz listę atomów - na podstawie poprzedniego punktu przygotuj listę atomów, których będziesz potrzebować.
• Wyeksponuj cząsteczki - połącz atomy w bardziej skomplikowane elementy, tworząc na przykład formularz kontaktowy.
• Skomponuj organizmy - masz już wszystkie potrzebne elementy, aby wykreować nagłówki, menu czy stopki.
• Utwórz szablony - zebrane części połącz w motyw witryny, który będzie łatwy w użyciu oraz modyfikacji.

Powtarzając wymienione wyżej kroki, z powodzeniem wdrożysz Atomic Design w swoim biznesie, sprawiając, że praca na komponentach będzie prosta i efektywna.

Jak wykorzystać Storyblok do zbudowania struktury elementów?

Aby zbudować strukturę elementów w Storyblok, na początku stwórz dla foldery (grupy) o nazwie molecules i organisms. Następnie, aby wykreować komponent odpowiadający na wyrenderowane karty z nazwą, opisem i ikoną w danym kolorze, przejdź przez poniższe kroki:

1. W folderze molecules utwórz komponent o nazwie service-card.
2. Dodaj właściwości dla stworzone komponentu, takie jak: name, icon, color, description.
3. Utwórz element o nazwie services wewnątrz grupy organisms o właściwościach:

Utworzony komponent powinien posiadać następujące właściwości:

• heading - nagłówej sekcji na stronie
• services - kontener zawierający molekuły (service-card)

Pamiętaj, że właściwości wewnątrz komponentu muszą być zdefiniowane jako blok. Nie wskazujesz bowiem konkretów jak w przypadku molekuł, które zostały wcześniej odpowiednio zdefiniowane.

W tym samym miejscu możesz również podać maksymalną liczbę molekuł, które znajdą się w danym organizmie.

W przypadku molekuł i organizmów typ zawartości określany jest jako nestable block, podczas gdy szablony posiadają content type block. Konkretny motyw tworzony jest poprzez:

• nazwę: page-template
• pole title
• pole body (możesz w tym miejscu ograniczyć możliwość umieszczania komponentów, które znajdują się jedynie w grupie organisms)

Podsumowanie

Podsumowując, tworzenie stron i interfejsów użytkownika to nie lada wyzwanie. Istnieje jednak wiele metodologii, które w skuteczny sposób pozwalają mu sprostać.

Do popularnych rozwiązań należą Atomic Design, Storyblok czy Vue.js. Każde z tych narzędzie oferuje różnorodne funkcje, dlatego wybór odpowiedniej opcji ma niemałe znaczenie.

Decydując się na któreś z wymienionych w artykule rozwiązań, weź pod uwagę specyfikę branży, w której działasz oraz realne potrzeby grupy docelowej.

Już wiesz, który model tworzenia komponentów odpowiada Ci najbardziej? A może wciąż masz wątpliwości? Niezależnie od odpowiedzi, skontaktuj się z nami, a z przyjemnością zaplanujemy działania dostosowane do Twoich oczekiwań.