Mamy pomysł na aplikację na iPhone i co dalej? Skąd brać inspiracje? Na co najbardziej zwracać uwagę podczas projektowania? Z jakich narzędzi korzystać by usprawnić sobie pracę? Prezentacja ze spotkania TipiUX#4 które odbyło się w strefie startupów PPNT Gdynia.

1. P RO C E S P RO J E K TO WA N I A I N T E R F E J S Ó W
A P L I K AC J I N A P L AT F O R M I E I O S W P I G U Ł C E
O D P O M Y S Ł U D O W D ROŻ E N I A
Maciej Kołek
iOS Developer

2. • Kogo potrzebujemy do
stworzenia naszej aplikacji?
• Etapy tworzenia interfejsu
• Na co zwracać uwagę przy
tworzeniu interfejsów na
platformę iOS?
K R Ó T K A
A G E N D A

3. K O G O P O T R Z E B U J E M Y D O
S T W O R Z E N I A A P L I K A C J I ?

4. K O G O P O T R Z E B U J E M Y D O
S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca

5. K O G O P O T R Z E B U J E M Y D O
S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca Grafik

6. K O G O P O T R Z E B U J E M Y D O
S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca Grafik Programista

7. K O G O P O T R Z E B U J E M Y D O
S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca Grafik Programista
Programista API Tester Konsultant

8. E TA P P O M Y S Ł O D AW C Y

9. W PA D L I Ś M Y N A P O M Y S Ł S T W O R Z E N I A
U N I K AT O W E J A P L I K A C J I M O B I L N E J …

10. W PA D L I Ś M Y N A P O M Y S Ł S T W O R Z E N I A
U N I K AT O W E J A P L I K A C J I M O B I L N E J …

11. S N A P P Y

12. S K Ą D B R A Ć P O M Y S Ł Y N A I N T E R F E J S ?
https://ios.uplabs.com

13. G D Z I E C Z Y TA Ć O D O B RY M U X ?
http://uxplanet.org

14. O D C Z E G O Z A C Z Ą Ć ?

15. O D C Z E G O Z A C Z Ą Ć ?

16. C O D A L E J ?

17. C O D A L E J ?

18. Z A P O M O C Ą A P L I K A C J I P O P
S P R AW B Y T W O J E
B A Z G R O Ł Y O Ż Y Ł Y

19. Z A P O M O C Ą A P L I K A C J I P O P
S P R AW B Y T W O J E
B A Z G R O Ł Y O Ż Y Ł Y

20. Z A P O M O C Ą A P L I K A C J I P O P
S P R AW B Y T W O J E
B A Z G R O Ł Y O Ż Y Ł Y

21. N I E U M I E M RY S O WA Ć , C O T E R A Z ?

22. R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E
K O M P U T E R O W E
B A Z G R O Ł Y O Ż Y Ł Y

23. R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E
K O M P U T E R O W E
B A Z G R O Ł Y O Ż Y Ł Y

24. R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E
K O M P U T E R O W E
B A Z G R O Ł Y O Ż Y Ł Y

25. R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E
K O M P U T E R O W E
B A Z G R O Ł Y O Ż Y Ł Y

26. E TA P G R A F I K A

27. P H O T O S H O P V S S K E T C H
http://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop/

28. P L E A S E , J U S T U S E S K E T C H .
To jedyne narzędzie które coś kosztuje: 99$ po 30 dniach triala

29. G R A F I K N I E P Ł A K A Ł J A K P R O J E K T O WA Ł
J A K P R A C O WA Ć Z K L I E N T E M N A D
P R O J E K TA M I G R A F I C Z N Y M I ?

30. R O Z W I Ą Z A N I E : I N V I S I O N A P P

31. R O Z W I Ą Z A N I E : I N V I S I O N A P P

32. R O Z W I Ą Z A N I E : I N V I S I O N A P P

33. R O Z W I Ą Z A N I E : I N V I S I O N A P P

34. T E S T O WA N I E M A K I E T Z U Ż Y C I E M I N V I S I O N A P P

35. T E S T O WA N I E M A K I E T Z U Ż Y C I E M I N V I S I O N A P P

36. P R O J E K T
G O T O W Y.
C O D A L E J ?

37. P R O B L E M ?
1 p x ≠ 1 p t

38. R O Z W I Ą Z A N I E :
http://zeplin.io

40. E k s p o r t b e z p o ś re d n i o z e S k e t c h a

49. E TA P P R O G R A M I S T Y

50. J A K P R O G R A M I S TA P R Z Y G O T O W U J E
I N T E R F E J S A P L I K A C J I ?

51. Tabele i Kolekcje

52. Nawigacja

53. C O P R O G R A M I S TA M U S I W I E D Z I E Ć Z A N I M
U S I Ą D Z I E D O P R A C Y ?
• Na jakie urządzenia piszemy aplikacje?
• Jaki jest główny system operacyjny który
będziemy wspierać w aplikacji?
• Jak wygląda podstawowy flow nawigacji w
aplikacji?
DLA CAŁEGO PROJEKTU:

54. C O P R O G R A M I S TA M U S I W I E D Z I E Ć Z A N I M
U S I Ą D Z I E D O P R A C Y ?
• Która części interfejsu będą dynamiczne, a które statyczne?
• Jak wygląda nawigacja w tym ekranie?
• Skąd użytkownik może wejść do tego ekranu?
• Jak mają zachowywać się wszystkie elementy tego interfejsu?
(przyciski, zmiany stanów, alerty)
• Jak aplikacja ma wyświetlać się na mniejszych i większych
ekranach?
• Jakie są odległości i wymiary wszystkich elementów ekranu?
• Czy mamy już wszystkie grafiki w odpowiednich rozmiarach
(x1,x2,x3)?
PER EKRAN INTERFEJSU:

55. P O C O T Y L E P Y TA Ń ?

56. K A Ż D Y E L E M E N T
I N T E R F E J S U M A
S W O J E Z A L E Ż N O Ś C I :
O D L E G Ł O Ś C I
R E L AT Y W N E O D
I N N Y C H E L E M E N T Ó W
I N T E R F E J S U
+ S W O J Ą W I E L K O Ś Ć
( S TA Ł Ą L U B
D Y N A M I C Z N Ą )

57. D L AT E G O
T E N
P R O J E K T…

58. W X C O D E
W Y G L Ą D A
TA K :

59. Już na podglądzie możemy zobaczyć, że na mniejszym iPhone musimy zmniejszać pierwszy obrazek.

60. O C Z Y M PA M I Ę TA Ć P R Z Y
P R O J E K T O WA N I U A P L I K A C J I ?
• Wsparcie dla mniejszych urządzeń - nie każdy ma iPhone 6
• Jak elementy interfejsu reagują na interakcje? (stany przycisków)
• Klawiatura zasłania większą część ekranu
• Design ikony ma znaczenie
• Splash screen jest częścią interfejsu, nie statyczną grafiką
• Wszystkie rozmiary elementów interfejsu powinny być parzyste

61. P Y TA N I A ?
Maciej Kołek
iOS Developer @ferusinfohello@ferus.info
Jeśli tworzysz coś mobilnego i potrzebujesz porady
lub szukasz programisty iOS do projektu:
Zapraszam do kontaktu!

62. A jeśli szukasz fotografa na dowolną okazję:
http://fb.me/maciejkolekcom