Zbigniew Cisiński - Design dla estetycznie ograniczonych http://www.tsh.io Tworząc aplikacje mobilne na co dzień spotykamy się z designem. Czasem dobrym, czasem złym. Podświadomie odróżniamy jeden od drugiego​,​ ponieważ zasady dobrego designu biorą się z tego​,​ jak postrzegamy otaczający nas świat. Znając je będziesz mógł lepiej wykorzystywać to, co dostajesz od klienta czy designera, a świat designu już nigdy nie będzie dla Ciebie taki sam. prezentacja z Uszanowanka Programowanka #15 http://www.meetup.com/Uszanowanko-Programowanko/events/233585217/

1. Design dla estetycznie
ograniczonych
Zbigniew Cisiński
zbigniew (at) cisinski.com

2. O czym będzie
• podstawowe elementy i zasady designu
• skupimy się na UI
• będzie “po naszemu”
• typografia
• animacje

3. Designer

4. Dlaczego?

6. Dobra i zła wiadomość

7. Design

8. Elementy designu
• kolor
• tekstura
• figura
• kształt
• przestrzeń

9. Kolor

10. Koło kolorów

11. Koło kolorów
Kolory podstawowe

12. Koło kolorów
Kolory drugorzędne

13. Koło kolorów
Kolory trzeciorzędne

14. Koło kolorów
Kolory ciepłe i zimne
zimne
ciepłe

15. Koło kolorów
Tinta, odcień, ton
czysty kolor
tinta
ton
odcień

16. Koło kolorów
Prawdziwy widok

17. Kolory
Kolory wystające i chowające się

18. Kolory
Kolory wystające i chowające się

19. Kolory
Kolory wystające i chowające się
Lorem Adipiscing Quam
Sed posuere consectetur est
Lorem Adipiscing Quam
Sed posuere consectetur est
Nullam quis risus eget urna mollis ornare
vel eu leo. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet.
Maecenas sed diam eget risus varius
blandit sit amet non magna. Etiam porta
sem malesuada magna mollis euismod.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Nullam quis risus eget urna mollis ornare
vel eu leo. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet.
Maecenas sed diam eget risus varius
blandit sit amet non magna. Etiam porta
sem malesuada magna mollis euismod.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.

20. Kolory
Obrazy impresjonistów

21. Kolory
Subtelne różnice
Click here Click here

22. Na co uważać
• profile kolorów
• niedoskonałości monitorów
• klienta
• moda
• ślepota na barwy
• przyjęte konwencje
• kontrast

23. Kolory
Kontrast
To jest bardzo niski
kontrast
To jest dobrze
dobrany kontrast
1.3 5.3

24. Dobór koloru
• branding
• max 5

25. Metody doboru koloru
Monochromatyczny

26. Metody doboru koloru
Analogiczny

27. Metody doboru koloru
Komplementarny

28. Metody doboru koloru
Półkomplementarny (Split-Complementary)

29. Metody doboru koloru
Triadyczny

30. Metody doboru koloru
Tetradyczny

31. Dobór koloru
• narzędzia w sieci
• colorschemedesigner.com
• kuler.adobe.com
• https://designschool.canva.com/blog/100-
color-combinations/

32. Dobór koloru
https://designschool.canva.com/blog/100-color-combinations/

33. Dobór koloru
https://designschool.canva.com/blog/100-color-combinations/

34. Dobór koloru
https://designschool.canva.com/blog/100-color-combinations/

35. Dobór koloru
• narzędzia w sieci
• colorschemedesigner.com
• kuler.adobe.com
• https://designschool.canva.com/blog/100-color-
combinations/
• po tagach
• metody doboru

37. Animacje

38. The Animation

40. Animacje
Easing
czas
wartość
0
3
6
9
12
Duration

41. Rola animacji
• prowadzą oko użytkownika

42. Rola animacji
• prowadzą oko użytkownika
• budują model mentalny

43. Rola animacji
• prowadzą oko użytkownika
• budują model mentalny
• tłumaczą zmiany w UI

44. Rola animacji
• prowadzą oko użytkownika
• budują model mentalny
• tłumaczą zmiany w UI
• nadają charakter

45. Rola animacji
• prowadzą oko użytkownika
• budują model mentalny
• tłumaczą zmiany w UI
• nadają charakter
• sugerują dostępność

46. Rola animacji
• prowadzą oko użytkownika
• budują model mentalny
• tłumaczą zmiany w UI
• nadają charakter
• sugerują dostępność
• skupiają uwagę

47. Rola animacji
• prowadzą oko użytkownika
• budują model mentalny
• tłumaczą zmiany w UI
• nadają charakter
• sugerują dostępność
• skupiają uwagę
• sprawiają, że UI wydaje się
naturalnie reagować

48. Animacja
• nie jest łatwo stworzyć coś, co ma sens
• muszą być spójne
• animacje systemowe
• płynne
• interaktywne i nie przeszkadzające
• mieć sens w danym kontekście

49. Typografia

50. Typografia
Fonty szeryfowe i bezszeryfowe

51. Czytelność
• szerokość
• szeryfowe fonty są czytelniejsze
• wysokość linii
• kapitalizacja wyrazów
• odległości między znakami
• izolacja problemu
• 1 font
• systemowy

52. Niestandardowe fonty
• licencja
• naprawa
• dobór

53. Charakter fontu

54. Charakter fontu

55. Niestandardowe fonty
• serwisy z gotowymi
wzorcami
• najlepiej zestawić
nieszeryfowe fonty
dla nagłówków z
szeryfowym dla
tekstu

56. Przestrzeń i układ

57. Przestrzeń i układ
Wyrównanie optyczne

58. Przestrzeń i układ
Wyrównanie optyczne

59. Przestrzeń i układ
Wyrównanie optyczne

60. Przestrzeń i układ
Do linii
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem
malesuada magna mollis euismod.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla
sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam
quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.
Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit
sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed
odio dui. Vestibulum id ligula porta felis euismod semper.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna
mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.

61. Przestrzeń i układ
Do linii
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem
malesuada magna mollis euismod.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla
sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam
quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.
Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit
sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed
odio dui. Vestibulum id ligula porta felis euismod semper.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna
mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.

62. Przestrzeń i układ
Marginesy

63. Przestrzeń i układ
Mit Złotego Podziału
1.61803398875

64. Przestrzeń i układ
Mit Złotego Podziału

65. Przestrzeń i układ
Mit Złotego Podziału
Cum sociis natoque
penatibus et magnis dis
parturient montes,
nascetur ridiculus mus.
Nulla vitae elit libero, a
pharetra augue. Fusce
dapibus, tellus ac cursus
commodo, tortor mauris
condimentum nibh, ut
fermentum massa justo sit
amet risus.
Vulputate
Pellentesque
Commodo
Etiam

66. Przestrzeń i układ
Inne proporcje
• 1:√2
• 2:3
• 3:4

67. Przestrzeń i układ
Urządzenia mobilne
• Przykładowo:
• Google Nexus One - 0,6 (3:5)
• Macbook Pro - 0,625 (5:8)
• iPhone 4 - 0,66 (2:3)
• stare ekrany - 0,75 (3:4)

68. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

69. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

70. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

71. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

72. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

73. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

74. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

75. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

76. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

77. Przestrzeń i układ
Jak wykorzystać proporcje w projektowaniu?

78. Przestrzeń i układ
Siatka

79. Przestrzeń i układ
Siatka

80. Przestrzeń i układ
Siatka

81. Przestrzeń i układ
Przestrzeń negatywna

82. Przestrzeń i układ
Przestrzeń negatywna

83. Przestrzeń i układ
Przestrzeń negatywna

84. Przestrzeń i układ
Przestrzeń negatywna

85. Przestrzeń i układ
Przestrzeń negatywna

86. Przestrzeń i układ
Przestrzeń negatywna

87. Przestrzeń i układ
Przestrzeń negatywna

88. Zasady designu

89. Zasady designu
Równowaga symetryczna
Aenean eu leo quam.
Pellentesque ornare sem
lacinia quam venenatis
vestibulum. Vivamus
sagittis lacus vel augue
laoreet rutrum faucibus
dolor auctor. Curabitur
blandit tempus porttitor.
Maecenas faucibus
mollis interdum.
Praesent commodo
cursus magna, vel
scelerisque nisl
consectetur et. nisi erat
porttitor ligula mauris
condimentum nibh

90. Zasady designu
Równowaga asymetryczna
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Donec id elit non mi porta
gravida at eget metus. Cras justo odio, dapibus ac facilisis in,
egestas eget quam.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Curabitur blandit tempus porttitor. Nullam id dolor
id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies
vehicula ut id elit.
Integer posuere erat a ante venenatis dapibus posuere velit
aliquet. Vestibulum id ligula porta felis euismod semper. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Sed
posuere consectetur est at lobortis. Duis mollis, est non
commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem
nec elit.
Cras mattis consectetur purus sit amet fermentum. Nullam quis
risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean lacinia bibendum nulla sed consectetur.

91. Zasady designu
Bliskość

92. Zasady designu
Powtórzenie

93. Zasady designu
Powtórzenie - rytm

94. Zasady designu
Kontrast

95. Wyróżnienie

96. Wyróżnienie
• Przez złamanie zasad:
• bliskości - izolacja

97. Wyróżnienie
• Przez złamanie zasad:
• bliskości - izolacja
• powtórzenia i rytmu, zaburzenie podobieństwa

98. Wyróżnienie
• Przez złamanie zasad:
• bliskości - izolacja
• powtórzenia i rytmu,
zaburzenie podobieństwa
• kontrast

99. Wyróżnienie
• Przez złamanie zasad:
• bliskości - izolacja
• powtórzenia i rytmu,
zaburzenie podobieństwa
• kontrast
• proporcje, skala, dominacja

100. Budowanie hierarchii

101. Budowanie hierarchii
• appka randkowa dla fanów Star Trek - widok profilu
• “firmowe kolory”
• zdjęcia, głosowanie hot/not, ulubione odcinki wraz z linkami
do opisu, dodawanie do znajomych, imię, nazwisko, nick
• kluczowa funkcjonalność: zdjęcia, głosowanie, dodawanie
do znajomych
• design ma być “lekki”, ale “firmowy”, karta z widokiem
profilu ma się zmieścić na 1 ekranie
• zdjęcie ma być kwadratowe i wyraźne

122. Podsumowanie

123. Design dla estetycznie
ograniczonych
Zbigniew Cisiński
zbigniew (at) cisinski.com