Design system podczas tworzenia strony internetowej

Image Description
Michalina Banaczyk
20 stycznia 2022
Share:

Wpisując w wyszukiwarkę internetową frazę “design system” z pewnością wyskoczy Wam wiele wpisów, które opisują to pojęcie. Jest to spowodowane niewątpliwie faktem, że w ostatnich latach zdobywa on coraz większą popularność. Choć jego zastosowanie można przenieść na wiele płaszczyzn działalności większych i mniejszych firm - chcemy pokazać Wam czym jest nasz dedykowany dla klienta design system w tworzeniu strony internetowej i w jaki sposób wpływa on na usprawnienie tworzenia i rozbudowywania stron internetowych.

Design system - czym jest i jak go używać?

Aby zapoznać się nieco bardziej z tematem poniżej znajdziecie krótki opis czym jest design system. Nie jest to jednak sztywna, książkowa definicja, a jedynie pewien obraz zagadnienia:

Design system łączy w sobie dwie definicje. Można by powiedzieć, że się z nich wywodzi i jednocześnie jest ich połączeniem. Pierwsza z nich to style guide czyli pewien styl identyfikacji wizualnej, opisujący jak ma wyglądać cały komunikat wizualny dla odbiorcy. Druga natomiast to code snippets czyli baza gotowych elementów ułatwiające pracę głównie web-developerom kodującym stronę www.

Można więc powiedzieć, że design system to pewien schemat, czy wzór działania lub konkretne elementy identyfikacji wizualnej, które możemy wykorzystać w budowaniu i formatowaniu treści strony internetowej. Design system obsługiwany z poziomu Magico CMS jest jeszcze bardziej zawężonym elementem. Chcąc przedstawić ten temat bardziej obrazowo przytoczę Wam prosty przykład.

Tworzymy dla Klienta stronę internetową ze standardowymi zakładkami. Po jakimś czasie klient uzupełniając ją i rozwijając chce użyć więcej elementów spójnych z wyglądem szablonu strony - jednak nie są to elementy standardowe. Aby przygotować spersonalizowaną podstronę z wyjątkowym układem treści, elementów, bloków oferty, tabeli etc - niezbędny będzie dodatkowy projekt graficzny, jego zakodowanie i podpięcie do istniejącej strony - a co za tym idzie dodatkowa praca - czyli dodatkowy koszt. Jeśli tak stworzona podstrona ma być jedna - to zwykle nie jest problemem. Jednak mając bardziej rozbudowany serwis internetowy lub myśląc o jego rozwoju stajemy przed wyborem - czy za każdym razem chcemy przechodzić przez ten proces? Jasne, że nie. Właśnie tu pojawia się potrzeba opracowania design systemu.

Stworzenie design systemu dla strony internetowej to przygotowanie komponentów lub układów graficznych opracowanych wspólnie z klientem i dostosowanych do potrzeb w danej branży. Stają się one później elementami większej całości jaką są podstrony i zakładki naszej witryny. Zupełnie jakbyśmy wyprodukowali klocki, z których później budujemy większe konstrukcje. Dzięki takiemu rozwiązaniu nasi klienci mogą budować wiele unikatowych podstron na swojej witrynie. Najważniejsze, że użycie ich nie wymaga specjalistycznych umiejętności. Elementy te bowiem są przygotowane w taki sposób, aby szybko i bez problemu dodać je do edytora podstrony po czym edytować tylko ich zawartość!

Ten zabieg jest kojarzony zatem głównie z grafiką na stronie internetowej, a tymczasem daje on nie tylko korzyści wizualne. Oprócz tego, że można w bardzo ciekawy sposób rozwinąć i rozbudować swoją stronę internetową tak, aby była atrakcyjna dla użytkownika - dzięki takiemu rozwiązaniu taka strona może wyświetlać się wyżej w wynikach indeksowania - ale to bardziej złożony proces, który opiszę później.

Jaka jest główna zaleta posiadania Design systemu dla swojej strony internetowej?

Pewnie już domyślacie się, że chodzi tu o czas. Czas, który dla każdego jest niezwykle cenny, a czasem nawet dosłownie - ponieważ czas pracy nad dodatkowymi elementami czy układami graficznymi strony to dodatkowe koszty. Tworząc design system - pracę wykonujemy tylko raz, a systemu możesz używać w tylu miejscach w ilu Ci się zamarzy - odpowiednio dostosowując go do swoich potrzeb.

Jest też drugi - bardzo ważny aspekt. Dzięki wykorzystaniu Design systemu tworzymy strony, które mają lepszy UX - a to głównie dlatego, że nasza uwaga nie skupia się na wyglądzie danych komponenetów - bo te mamy już gotowe - a bardziej na ich funkcjonalności, działaniu oraz odpowiednim umiejscowieniu na stronie.

Czy warto inwestować w design system jeśli mam małą firmę?

Na to pytanie nie da się odpowiedzieć jednoznacznie. Z własnego, wieloletniego już doświadczenia wiemy, że istnieje pewien ciąg przyczynowo - skutkowy.


Tworzysz dobrze opracowane zakładki oferty Twojej firmy, dodajesz aktualności, dbasz o to by strona była na bieżąco uaktualniana i rozwiana to:

  • google lepiej ją indeksuje i pojawia się ona wyżej w wynikach wyszukiwania.
  • jeśli jest wyżej - istnieje większa szansa, że klienci trafią do Ciebie z organicznego wyszukiwania w google (tj. szukania przez szukajkę)
  • jeśli trafią na Twoją stronę i zobaczą, że jest ona profesjonalna - z pewnością będą mieli poczucie, że produkty czy usługi, które świadczy Twoja firma - również takie są.

Można więc powiedzieć, że z tego przykładu jasno wynika, że design system jest dla Tych, którzy chcą profesjonalnie rozwijać swoje strony internetowe - czy jesteś małą, czy dużą firmą - taki system może być dobrze wykorzystany. Jeśli jednak nie masz czasu na tworzenie nowych treści i wiesz, że nie będziesz tego robić - nie ma sensu wydawać na design system dodatkowych środków. Oczywiście i na brak czasu jest rozwiązanie :) Można przecież takie treści komuś zlecić, aby na Twojej stronie był ruch, a co za tym idzie strona była ciągle aktualna. Jest to jednak kolejny obszerny temat łączący się już pośrednio z design systemem! Może wpis na ten temat niebawem również pojawi się w naszej bazie wiedzy!

Jeśli nadal nie wiesz czy design system jest dla Ciebie - skontaktuj się z nami, a z chęcią porozmawiamy o Twoich potrzebach.

Odezwij się do naszego zespołu!

Image Description

O autorze

Image Description

Michalina Banaczyk

Gdy klienci stają za plecami Michaliny mają jeszcze szerzej otwartą buzie, niż gdy stoją za naszymi programistami. Mistrz photoshopa i postprodukcji. Doskonale zna się na brandingu i wie, jak powinno wyglądać dobre logo. Lubi koty i projektowanie identyfikacji dla naszych klientów.