SlideShare a Scribd company logo
1 of 14
Download to read offline
DESIGN
SYSTEM
DEFINICJA
Designed by katemangostar, http://www.freepik.com
DESIGN SYSTEM
zbiór komponentów, które mogą zostać wykorzystane
ponownie w nowych kombinacjach, 

ułatwiając skalowalność projektu graficznego
F. Teixeira, Resources, links, references and articles on Design Systems, http://bit.ly/2H6aYPp
DESIGN SYSTEM
TOŻSAMOŚĆ WARTOŚCI DOBRE PRAKTYKI
KOMPONENTY I WZORCE
dokumentacja funkcjonalna i techniczna
POKREWNE POJĘCIA
style guide
opisuje styl graficzny i sposób
wykorzystania go w projekcie
(kolory, fonty, ikony, ilustracje)
A. Hacq, Everything you need to know about Design Systems, http://bit.ly/2xSlYfj
pattern library
koncentruje się na
elementach funkcjonalnych
i ich zastosowaniu
{design system
PO CO TWORZYĆ SYSTEM?
Rozwój zespołu projektowego może wiązać się ze wzrostem
rozbieżności wykorzystywanych komponentów.
Skutki braku SSoT (Single Source of Truth)?
• pogłębiająca się luka wiedzy
• powtarzanie zbędnych czynności
• wolniejsze wprowadzanie produktu na rynek
• niższa wartość produktu dla użytkowników
M. Treder, J. Cao, Why Build a Design System? The Pocket Guide for Product Teams, http://bit.ly/2Ca6OH5
Im bardziej rozbudowany projekt, im więcej ludzi zaangażowanych w
jego realizację, tym większe prawdopodobieństwo naruszenia spójności
produktu. W czasach gdzie o sukcesie aplikacji niejednokrotnie
decydują sekundy, wciąż aktualne jest przesłanie S. Kruga: nie każ
użytkownikom zastanawiać się nad tym, jak powinni nawigować po
interfejsie twojej aplikacji.
Dlatego wieloosobowe zespoły pracujące nad poszczególnymi
modułami potrzebują jednego, niepodważalnego źródła szczegółowych
wytycznych dotyczących możliwych do wykorzystania komponentów.
ZALETY IMPLEMENTACJI
ZESPÓŁUŻYTKOWNICY
PRZEDSIĘWZIĘCIE
wydajnośćspójność
skalowalność
• wydajność dla zespołu- oszczędność czasu designerów i developerów,
którzy mogą ponownie wykorzystać raz zaprojektowane elementy
• spójność dla użytkowników- ułatwia korzystanie z produktu,
użytkownicy wiedzą czego się spodziewać
• skalowalność dla przedsięwzięcia - umożliwia automatyzację procesu
projektowania, co pozwala tworzyć więcej w tym samym czasie
Design system nie jest jedynie narzędziem zespołów
projektowych służącym zwiększeniu ich wydajności. Dzięki
implementacji tego rozwiązania zyskują również użytkownicy
końcowi. Spójny interfejs ułatwia bowiem korzystanie z
aplikacji, co może przełożyć się na zwiększenie satysfakcji
klientów.
JAK STWORZYĆ
DESIGN SYSTEM?
Designed by katemangostar, http://www.freepik.com
ZASADY TWORZENIA
• produkt jest zależny od systemu
• każdy element jest wykorzystywany ponownie
• partycypacja jest ważniejsza niż kontrola
• prostota jest lepsza niż elastyczność złożonych rozwiązań
• jakość komponentów jest ważniejsza niż ich ilość
N. Curtis, Principles of Designing Systems, Core Beliefs to Guide System Strategy and Tactics, http://bit.ly/2uE7m0n
PRZYKŁADY
MATERIAL DESIGN
https://material.io/
POLARIS
https://polaris.shopify.com/
ATLASSIAN
https://atlassian.design/
Bądźmy w kontakcie:
DZIĘKUJĘ ZA UWAGĘ

More Related Content

Similar to Design system

Smarty. Szablony w aplikacjach PHP
Smarty. Szablony w aplikacjach PHPSmarty. Szablony w aplikacjach PHP
Smarty. Szablony w aplikacjach PHP
Wydawnictwo Helion
 
C#. Wzorce projektowe
C#. Wzorce projektoweC#. Wzorce projektowe
C#. Wzorce projektowe
Wydawnictwo Helion
 
Architektura systemów zarządzania przedsiębiorstwem. Wzorce projektowe
Architektura systemów zarządzania przedsiębiorstwem. Wzorce projektoweArchitektura systemów zarządzania przedsiębiorstwem. Wzorce projektowe
Architektura systemów zarządzania przedsiębiorstwem. Wzorce projektowe
Wydawnictwo Helion
 
Visual Basic .NET. Wzorce projektowe
Visual Basic .NET. Wzorce projektoweVisual Basic .NET. Wzorce projektowe
Visual Basic .NET. Wzorce projektowe
Wydawnictwo Helion
 
J2EE. Stosowanie wzorców projektowych
J2EE. Stosowanie wzorców projektowychJ2EE. Stosowanie wzorców projektowych
J2EE. Stosowanie wzorców projektowych
Wydawnictwo Helion
 

Similar to Design system (20)

Smarty. Szablony w aplikacjach PHP
Smarty. Szablony w aplikacjach PHPSmarty. Szablony w aplikacjach PHP
Smarty. Szablony w aplikacjach PHP
 
Zasady technicznej organizacji projektów programistycznych
Zasady technicznej organizacji projektów programistycznychZasady technicznej organizacji projektów programistycznych
Zasady technicznej organizacji projektów programistycznych
 
NAV365 Microsoft Dynamics NAV w abonamencie
NAV365 Microsoft Dynamics NAV w abonamencieNAV365 Microsoft Dynamics NAV w abonamencie
NAV365 Microsoft Dynamics NAV w abonamencie
 
C#. Wzorce projektowe
C#. Wzorce projektoweC#. Wzorce projektowe
C#. Wzorce projektowe
 
Dlaczego Drupal CMS? - www.siplex.pl
Dlaczego Drupal CMS? - www.siplex.plDlaczego Drupal CMS? - www.siplex.pl
Dlaczego Drupal CMS? - www.siplex.pl
 
3
33
3
 
Systemy dedykowane (pdf)
Systemy dedykowane (pdf)Systemy dedykowane (pdf)
Systemy dedykowane (pdf)
 
Architektura systemów zarządzania przedsiębiorstwem. Wzorce projektowe
Architektura systemów zarządzania przedsiębiorstwem. Wzorce projektoweArchitektura systemów zarządzania przedsiębiorstwem. Wzorce projektowe
Architektura systemów zarządzania przedsiębiorstwem. Wzorce projektowe
 
SOLIDWORKS, SWOOD oraz ALPHACM dla meblarstwa.
SOLIDWORKS, SWOOD oraz ALPHACM dla meblarstwa.SOLIDWORKS, SWOOD oraz ALPHACM dla meblarstwa.
SOLIDWORKS, SWOOD oraz ALPHACM dla meblarstwa.
 
EURECA 4 EXCEL
EURECA 4 EXCELEURECA 4 EXCEL
EURECA 4 EXCEL
 
Summit EOIF GigaCon 2017 - katalog
Summit EOIF GigaCon 2017 - katalogSummit EOIF GigaCon 2017 - katalog
Summit EOIF GigaCon 2017 - katalog
 
Rodzaje programów komputerowych wspomagających sporządzanie dokumentacji budo...
Rodzaje programów komputerowych wspomagających sporządzanie dokumentacji budo...Rodzaje programów komputerowych wspomagających sporządzanie dokumentacji budo...
Rodzaje programów komputerowych wspomagających sporządzanie dokumentacji budo...
 
User Experience w SharePoint – metody wdrożenia i ulepszenia SharePoint ze sz...
User Experience w SharePoint – metody wdrożenia i ulepszenia SharePoint ze sz...User Experience w SharePoint – metody wdrożenia i ulepszenia SharePoint ze sz...
User Experience w SharePoint – metody wdrożenia i ulepszenia SharePoint ze sz...
 
Visual Basic .NET. Wzorce projektowe
Visual Basic .NET. Wzorce projektoweVisual Basic .NET. Wzorce projektowe
Visual Basic .NET. Wzorce projektowe
 
J2EE. Stosowanie wzorców projektowych
J2EE. Stosowanie wzorców projektowychJ2EE. Stosowanie wzorców projektowych
J2EE. Stosowanie wzorców projektowych
 
Produkcja aplikacji internetowych
Produkcja aplikacji internetowychProdukcja aplikacji internetowych
Produkcja aplikacji internetowych
 
KBJ
KBJKBJ
KBJ
 
P. Lech: Zintegrowane systemy zarządzania ERP/ERP II. Rozdział 3: Implementac...
P. Lech: Zintegrowane systemy zarządzania ERP/ERP II. Rozdział 3: Implementac...P. Lech: Zintegrowane systemy zarządzania ERP/ERP II. Rozdział 3: Implementac...
P. Lech: Zintegrowane systemy zarządzania ERP/ERP II. Rozdział 3: Implementac...
 
ADONIS 4.0 - prezentacja nowych funkcji
ADONIS 4.0 - prezentacja nowych funkcjiADONIS 4.0 - prezentacja nowych funkcji
ADONIS 4.0 - prezentacja nowych funkcji
 
SOLIDWORKS-Enhancements-eBook_PL.pdf
SOLIDWORKS-Enhancements-eBook_PL.pdfSOLIDWORKS-Enhancements-eBook_PL.pdf
SOLIDWORKS-Enhancements-eBook_PL.pdf
 

More from Anna Rzepka (8)

Jak rozmawiać o projektach graficznych
Jak rozmawiać o projektach graficznychJak rozmawiać o projektach graficznych
Jak rozmawiać o projektach graficznych
 
Jak rozmawiać o projekcie
Jak rozmawiać o projekcieJak rozmawiać o projekcie
Jak rozmawiać o projekcie
 
Idealny projekt
Idealny projektIdealny projekt
Idealny projekt
 
Atomic design
Atomic designAtomic design
Atomic design
 
Podpis elektroniczny
Podpis elektronicznyPodpis elektroniczny
Podpis elektroniczny
 
Dobry system informatyczny- czyli jaki?
Dobry system informatyczny- czyli jaki?Dobry system informatyczny- czyli jaki?
Dobry system informatyczny- czyli jaki?
 
Wartość poznawcza bilansu
Wartość poznawcza bilansuWartość poznawcza bilansu
Wartość poznawcza bilansu
 
E-dystrybucja
E-dystrybucjaE-dystrybucja
E-dystrybucja
 

Design system

  • 2. DEFINICJA Designed by katemangostar, http://www.freepik.com
  • 3. DESIGN SYSTEM zbiór komponentów, które mogą zostać wykorzystane ponownie w nowych kombinacjach, 
 ułatwiając skalowalność projektu graficznego F. Teixeira, Resources, links, references and articles on Design Systems, http://bit.ly/2H6aYPp
  • 4. DESIGN SYSTEM TOŻSAMOŚĆ WARTOŚCI DOBRE PRAKTYKI KOMPONENTY I WZORCE dokumentacja funkcjonalna i techniczna
  • 5. POKREWNE POJĘCIA style guide opisuje styl graficzny i sposób wykorzystania go w projekcie (kolory, fonty, ikony, ilustracje) A. Hacq, Everything you need to know about Design Systems, http://bit.ly/2xSlYfj pattern library koncentruje się na elementach funkcjonalnych i ich zastosowaniu {design system
  • 6. PO CO TWORZYĆ SYSTEM? Rozwój zespołu projektowego może wiązać się ze wzrostem rozbieżności wykorzystywanych komponentów. Skutki braku SSoT (Single Source of Truth)? • pogłębiająca się luka wiedzy • powtarzanie zbędnych czynności • wolniejsze wprowadzanie produktu na rynek • niższa wartość produktu dla użytkowników M. Treder, J. Cao, Why Build a Design System? The Pocket Guide for Product Teams, http://bit.ly/2Ca6OH5 Im bardziej rozbudowany projekt, im więcej ludzi zaangażowanych w jego realizację, tym większe prawdopodobieństwo naruszenia spójności produktu. W czasach gdzie o sukcesie aplikacji niejednokrotnie decydują sekundy, wciąż aktualne jest przesłanie S. Kruga: nie każ użytkownikom zastanawiać się nad tym, jak powinni nawigować po interfejsie twojej aplikacji. Dlatego wieloosobowe zespoły pracujące nad poszczególnymi modułami potrzebują jednego, niepodważalnego źródła szczegółowych wytycznych dotyczących możliwych do wykorzystania komponentów.
  • 7. ZALETY IMPLEMENTACJI ZESPÓŁUŻYTKOWNICY PRZEDSIĘWZIĘCIE wydajnośćspójność skalowalność • wydajność dla zespołu- oszczędność czasu designerów i developerów, którzy mogą ponownie wykorzystać raz zaprojektowane elementy • spójność dla użytkowników- ułatwia korzystanie z produktu, użytkownicy wiedzą czego się spodziewać • skalowalność dla przedsięwzięcia - umożliwia automatyzację procesu projektowania, co pozwala tworzyć więcej w tym samym czasie Design system nie jest jedynie narzędziem zespołów projektowych służącym zwiększeniu ich wydajności. Dzięki implementacji tego rozwiązania zyskują również użytkownicy końcowi. Spójny interfejs ułatwia bowiem korzystanie z aplikacji, co może przełożyć się na zwiększenie satysfakcji klientów.
  • 8. JAK STWORZYĆ DESIGN SYSTEM? Designed by katemangostar, http://www.freepik.com
  • 9. ZASADY TWORZENIA • produkt jest zależny od systemu • każdy element jest wykorzystywany ponownie • partycypacja jest ważniejsza niż kontrola • prostota jest lepsza niż elastyczność złożonych rozwiązań • jakość komponentów jest ważniejsza niż ich ilość N. Curtis, Principles of Designing Systems, Core Beliefs to Guide System Strategy and Tactics, http://bit.ly/2uE7m0n