Animacje, przepływ danych, API, CMSy, strategie treści, architektura informacji, mikrointerackje… a nasze makiety nadal szare. Potem „grafik źle pokolorował”. Adobe Xd, Framer, web design taki sam wszędzie. A taki fajny pomysł na makietę był. Dzisiaj każdy potrafi zrobić makietę, ale niewiele osób nadaje im znaczenia. To najczęściej przystanki na drodze wodospadu wpadające do skrzynki klienta i czekające na akcept, albo slajdy na prezentacji dla teamu, który potem dostaje PDFa i nie wie co z tym dalej zrobić. Czas nadać znaczenie tym szarym boksom, które dzisiaj robią wszyscy, bo myślą, że robią UX.

1. Meaningful wireframes, czyli
nie rób makiet. Nadawaj im
znaczenie
4developers 2016

2. @lukasztyrala
creativestyle.pl → vml.com → miastologia.pl
lukasz@tyra.la

3. Praca
zespołowa
Proces
projektowy
Makiety
Znaczenie

7. Poniedziałek Piątek

8. 💰
Piątek

9. Artefact czy deliverable?

13. Praca
zespołowa
Proces
projektowy
Makiety
Znaczenie

14. UX UIBiznes
makiety

15. UX to nie makiety!

16. Nie możemy ruszyć dalej
dopóki makiety nie będą
zaakceptowane!

17. Musimy mieć treści, żeby
zrobić makiety!

18. Nie pamiętam, kiedy
ostatnio robiłam
makietę…

20. Any Given Sunday: Willie Beamen Enters First Game

21. W pracy zespołowej najtrudniejsza
jest komunikacja.

22. Research UX UI
Product
manager
makiety

23. Research UX/UI front-end
Product
manager
prototyp

25. Brad Frost, Atomic Design Methodology, Chapter 2

26. Praca
zespołowa
Proces
projektowy
Makiety
Znaczenie

27. wireframe • n. A visual
model of an electronic
representation of
a three-dimensional
object • n. A basic visual
guide used to suggest
the layout of
fundamental elements
in a web interface
makieta • 1. model
wykonany
w zmniejszonej skali;
2. fragment dekoracji
teatralnej lub filmowej
imitujący autentyczny
obiekt; 3. plan układu
graficznego materiału
przeznaczonego do
druku; szczotka

31. Projekt byłspoko, ale źle
go pokolorowali…

33. wireframe • n. A visual
model of an electronic
representation of
a three-dimensional
object • n. A basic visual
guide used to suggest
the layout of
fundamental elements
in a web interface
makieta • 1. model
wykonany
w zmniejszonej skali;
2. fragment dekoracji
teatralnej lub filmowej
imitujący autentyczny
obiekt; 3. plan układu
graficznego materiału
przeznaczonego do
druku; szczotka

37. Praca
zespołowa
Proces
projektowy
Makiety
Znaczenie

38. Dobra makieta, to taka, którąłatwo
wyrzucić (edytować) lub zamienić
w prototyp.

39. Zawiera informacje nie tylko
o stanach, które obrazuje, ale
również o tym co dzieje się pomiędzy.

40. Baza
Back-end
Analityka
API
SMS/Mail

41. Pozwala zrozumieć projekt, a nie
tylko go eksplorować.

44. Nie pokazuje informacji tylko przez
pryzmat szablonów (podstron) –
komunikuje nie tylko architekturę
informacji.

45. Dan Mall, Content and Design Patters

46. Powstaje w oparciu o współpracę
i na potrzeby współpracy, a nie żeby
zostać zaakceptowanym.

50. Współgra z procesem projektowym
danego zespołu – i tym jak praca
nad projektem wygląda.

51. Odpowiadają i komunikują
rozwiązania problemów, przed
którymi stoi zespół, a nie utarte
schematy.

52. Kryje się za nimi zrozumienie ludzi –
a nie tylko potrzeby zespołu
technologicznego lub biznesowe
założenia.

53. Każdy może robić makiety – ale nie
każda makieta jest tak samo ważna.

55. makieta • wizualne odzwierciedlenie intencji
projektowej zespołu, nieprzywiązane do konkretnej
formy graficznej lub etapu pracy, a pozwalające
zrozumieć rozwiązanie dla zadanego problemu
i kontekst całego projektu

56. Rób lepsze makiety!

57. Charlie Waite for Focul Lab
Aurélien Salomon
Alex Sailer for Focus Lab
Greg Dlubacz

58. Janna Hagan

59. @lukasztyrala • lukasz@tyra.la