Nasz wykład pomoże Ci dowiedzieć się czy projektowanie interfejsu to właściwy kierunek dla Ciebie. Wyjaśnimy od czego zacząć swoja przygodę z designem oraz z jakich narzędzi warto korzystać. Podczas spotkania opowiemy jak zdobywać wiedzę w tej dziedzinie, jakie są zasady projektowania i dlaczego czasem nie wszystkich warto przestrzegać. Nasi prowadzący, Paweł i Marcin, przygotowali mnóstwo przykładów, use case’ów oraz praktycznych wskazówek. Spotkanie to kierujemy zarówno do developerów chcących poszerzyć swoje umiejętności o elementy wiedzy designerskiej, jak i do początkujących projektantów. Nieważne czy posiadasz kierunkowe wykształcenie, ale brakuje Ci doświadczenia praktycznego czy może masz już w portfolio kilka własnych projektów i chcesz uzupełnić swoją wiedzę. Przyjdź do naszego biura, spotkaj się z członkami naszego zespołu i poznaj 8 kluczowych umiejętności dobrego projektanta interfejsu. https://www.youtube.com/watch?v=qItxzjiEA14

2. Dzień dobry

3. Paweł Hawrylak
Head of Design w Monterail
Wcześniej:
- Dwuosobowe studio graficzne
- Doktorant na Wydziale Architektury
- Asystent w firmie architektonicznej

4. Agenda
- Czym jest Visual Screen Design
- Ekosystem ekranów
- Jak zacząć przygodę?
- Narzędzia
- Zasady

6. Visual Screen Design
Czym jest i o czym będziemy rozmawiać?

7. Product Design
User Experience Design
User Interface Design
Graphic Design
Web Design
etc.

8. Visual
from Late Latin visualis (“of sight”), from Latin visus
(“sight”), from videre (“to see”)

9. Look & feel
Ton wypowiedzi
Co użytkownik czuje?
Doświadczenie
Marka
Estetyka

20. Problem z dribbblem
I innymi portalami z ładnymi obrazkami,
jak pinterest, muzzle, etc.
D.Y.G.R.E.S.J.A

21. Ucząc się na
podstawie
designów z
dribbbla, uczycie
się robić rzeczy
ładne, ale
niekoniecznie
użyteczne czy
funkcjonalne.
Możecie się
nauczyć złych
wzorców.

25. Screen
Małe
Ruchome
Dotykowe
Akcyjne
Duże
Stacjonarne
Standardowe
Odbiorcze
—
—
—
—

29. Świat ekranów
wykracza daleko
poza to co znamy
na co dzień.
Trzeba pamiętać,
że gdzieś tam jest
świat ekranów
specjalistycznych.
Być może
używanych w
fabrykach,
chłodniach,
tartakach, itd.

30. Kontekst
projektowania
może być
kompletnie inny.
Użytkownik może
być w goglach,
może być -40
stopni, ekran może
być nie tak
responsywny jak to
co znamy na co
dzień.

31. Projektowanie
odwzorowujące
świat rzeczywisty
może się okazać
potrzebne w takim
środowisku.

32. Nawet najmniejsze
ekrany oferują nam
ogromnie dużo
możliwości
ekspresji.

37. Design
Proces definicji prowadzony chęcią zrozumienia.
Kreacja + Odbiór.

38. Interakcja z użytkownikiem
Współpraca z frontendem
Współpraca z klientem
Styl wizualny
Style guide
Design system

39. Jak zacząć?

40. Można czytać
Ale nie polecam na start za dużo.
Ogrom wiedzy jest paraliżujący i nigdy nie osiąga się
momentu kiedy “wiem już wszystko, jestem gotowa”.

41. LINK

42. Można obserwować

45. Szukać wzorców

51. Najlepiej próbować

52. Wybieramy prosty
interfejs lub stronę
i przerysowujemy.
Zwykły print
screen i kopia do
programu
graficznego.

54. Szybkie zrozumienie zasad
- kroje pisma
- odstępy między elementami
- wielkości elementów
- kolory
- grid

55. Następny krok
Poprawiamy istniejący produkt

58. To jest ostateczny cel. Poprawa hierarchii wizualnej a
przez to zwiększenie czytelności.

59. Redesign
- Coś czego używacie
- Lokalna usługa z sąsiedztwa
- Skupienie na hierarchii
- Zwiększenie czytelności

60. Narzędzia

62. Ruch / interakcja / animacja
Prototypowanie
Łatwość edycji wielu elementów
Popularność / społeczność
Responsywność
Praca zespołowa
Eksport zasobów

71. Na start polecam Figmę i Atomic, potężne
przeglądarkowe narzędzia.

72. Zasady

73. 3 pytania
Gdzie jestem?
Co mogę zrobić?
Dokąd mogę się udać?

77. Hierarchia wizualna

78. Patrzysz tu
(potem tu)
Wspaniałe, prawda?

79. Wielkość
Kształt
Pozycja
Orientacja
Kolor
Tekstura

80. “an organized whole, is perceived
as greater than the sum of its parts”
LINK

81. Proximity Bliskość
Common region Wspólny obszar
Continuation Kontynuacja
Similarity Podobieństwo
Closure Domknięcie
Common fate Wspólny los ?!?
Symmetry Symetria

82. Proximity (bliskość)
Elementy położone blisko siebie są
postrzegane jako część
funkcjonalnej grupy, bardziej od
położonych w dalszej odległości.

83. Common region
(wspólny obszar)
Elementy ograniczone granicą,
wydają się należeć bardziej do
grupy, niż elementy poza granicą.

84. Similarity
(podobieństwo)
Elementy o podobnych wizualnych
atrybutach są postrzegane jako
bardziej wzajemnie powiązane.

85. Closure
(domknięcie)
Grupa elementów często może
zostać odczytana jako pojedyncza
forma lub obiekt.

86. Symmetry
(symetria)
Elementy ułożone symetrycznie są
postrzegane we wzajemnej relacji,
niezależnie od odległości.

87. Continuity
(ciągłość)
Elementy ułożone w linię, albo łuk,
są postrzegane jako część całości
bardziej niż ułożone przypadkowo
lub w niewyraźnej linii.

88. Common fate
(wspólny los?!?)
Elementy zmierzające w tym samym
kierunku są postrzegane bardziej we
wzajemnym powiązaniu, niż
zmierzające w przeciwnym kierunku,
albo w bezruchu.

89. LINK

91. Typografia
Jakie kroje pism?
Jak łączyć?
Skąd brać?

92. Dobre

93. Zróżnicowane

95. Czytelne
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Fusce id
ultricies arcu. Vivamus mauris augue,
venenatis ut augue ut, scelerisque
tincidunt felis.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce id ultricies arcu. Vivamus
mauris augue, venenatis ut augue ut,
scelerisque tincidunt felis. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Proin suscipit eros at
tempor lobortis.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce id ultricies arcu. Vivamus
mauris augue, venenatis ut augue ut, scelerisque
tincidunt felis.

100. Na start jeden krój
Z tego naprawdę da się dużo złożyć.
I nie trzeba za bardzo kombinować.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce id ultricies arcu.
Vivamus mauris augue, venenatis ut augue
ut, scelerisque tincidunt felis. Vestibulum
ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin
suscipit eros at tempor lobortis.
Cras id sagittis ante. Integer maximus velit
a velit imperdiet pharetra. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Vestibulum egestas velit risus, non
vulputate est tristique sit amet.

102. LINK

103. Kolory
Jakie kolory?
Skąd brać?
Zasady

104. Proste

107. Wariacje

111. RGB HSB
0-255
0-255
0-255
0-360
0-100
0-100
H
S
B
LINK

112. 0
100
1000

113. LINK

115. Grid

121. LINK

122. Skeumorfizm vs flat

126. Ograniczajcie swoje możliwości
Szkicujcie
Prowadźcie wzrok
Patrzcie z dystansu
To nie estetyka, a bardziej
matematyka

129. Dziękuję bardzo

130. - Warsztaty

131. Zadanie
Zaprojektuj ekran mobilnego zegarka/budzika
(1-2 ekrany)
Deadline: Poniedziałek, 9 Luty, godzina 10:00

132. Przykłady

133. Przykłady