System design w stronach www
20 czerwca 2022
System design w stronach www. Projektowanie stron internetowych na przestrzeni lat zmienia się cały czas – cały czas ewoluuje nie tylko stylistyka i design jako taki, ale także – a może przede wszystkim – rozwija się cała dziedzina developmentu. Tworzenie efektywnego i sprawnie działającego kodu, kompatybilnego ze wszystkimi urządzeniami mobilnymi nie jest lada wyzwaniem, zwłaszcza jeśli mamy rozbudowany i skomplikowany projekt do wdrożenia.
Czy zastanawialiście się kiedyś tak tworzone są duże serwisy, sklepy internetowe czy aplikacje? Ile razy developer musi zakodować i ostylować dany przycisk, by w każdej podstronie wyglądał tak samo i tak samo działał? Właśnie do tego, stworzone zostały Design Systemy.
Design System to zbiór komponentów, które mogą być użyte wiele razy w różnych kombinacjach. Pozwalają zarządzać projektowaniem w przypadku, gdzie w grę wchodzi skala. Wbrew pozorom to pojęcie wcale nie jest najnowszym odkryciem – tak jak wspomnieliśmy na początku artykułu, programowanie stron www wciąż się rozwija i udoskonala. W rozwoju oprogramowaniu pojęcie pojawiało się kilkanaście lat temu, zmienił się jednak sposób w jaki go używamy. Design systemy są związane z rozwojem produktów cyfrowych takich jak strony czy aplikacje, ale nie tylko. Mogą wkraczać w obszary związane z brandingiem czy komunikacją.
Design System staje się konieczny już przy dwóch produktach sygnowanych nazwą tej samej marki np – strona internetowa i aplikacja. Strona internetowa + sklep online. W przypadku dużych organizacji, posiadających, rozwijających kilkanaście, kilkadziesiąt produktów cyfrowych jest on po prostu niezbędny. Jego brak w sposób dotkliwy będzie wpływał na konkurencyjność nowych produktów (czas oraz koszt ich wyprodukowania może być większy nawet kilkukrotnie).
Łatwo sobie wyobrazić bałagan jaki nastanie, jeśli osobne grupy UI designerów zaczną projektować coś “niby takie samo, ale jednak inne” – spójne będą co najwyżej kolory, chociaż i co do tego nie ma pewności 🙂
W praktyce – Design System jest zbiorem następujących elementów:
- kolorystyki logotypów,
- elementów graficznych (ikonografik, stylu w jakim są one tworzone)
- nawigacji reguł tworzenia menu,
- formularzy szablonów stron, podstron, ekranów (przydatne dla developerów!)
- systemów typografii (rodziny czcionek i sposobów ich zastosowania w różnych rodzajach tekstu i w różnych kontekstach)
- wielkości elementów i ich relacji (np. proporcji, odległości).