SCR ® : Tomáš Pinka, Tomáš Stankovič - Moja mama nevedela čo je komfort, tvoja zase neví čo je náš workflow. Lecture about co-op between Graphic Designer and Front-End Developer. Graphic & Front-End hints, principes and more...

1. Moja mama nevedela čo
je komfort, tvoja zase
neví čo je náš workflow
front-end developer & webdesigner

2. SCR
Fullservisová digitálna agentúra
Zakladajúci člen ADMA
B.Bystrica / BA / Barcelona
(KO)MÉDIA2014 | Created by SCR | 11/2014

3. web
designer
Tomáš Pinka
(KO)MÉDIA2014 | Created by SCR | 11/2014

4. front-end
developer
Tomáš Stankovič
(KO)MÉDIA2014 | Created by SCR | 11/2014

5. 5
story.
Created with passion for digital
(KO)MÉDIA2014 | Created by SCR | 11/2014

6. Created with passion for digital
(KO)MÉDIA2014 | Created by SCR | 11/2014

8. Created with passion for digital
Workflow.
1. Porozumieť značke
2. Kick of meeting - Brief
3. Návrh webu
4. Feedback od klienta
5. Dopracovanie pripomienok
6. Feedback od klienta
7. Dopracovanie pripomienok
8. Testing
8. Front-end coding
9. Testlink pre klienta
10. Testing
11. Dopracovanie pripomienok
12. Back-end coding
(KO)MÉDIA2014 | Created by SCR | 11/2014

9. Created with passion for digital
Porozumieť produktu / značke
Referaty.sk – škola, vzdelávanie, štúdium
Zdielanie informácii, pomoc pri štúdiu
Študenti stredných škôl
Historicky silný brand
(KO)MÉDIA2014 | Created by SCR | 11/2014

10. Created with passion for digital
Kick-of Meeting = Brief
Charakteristika služby
Budúce smerovanie služby
Biznis model
User flow
Site map
Typové stránky
(KO)MÉDIA2014 | Created by SCR | 11/2014

11. Created with passion for digital
Návrh webu #1
Mood research = stanovenie smeru
Štruktúra a obsah webu
Stanovanie KPI = pridaj referat
Grafický návrh webu
(KO)MÉDIA2014 | Created by SCR | 11/2014

13. Chladné!

16. Created with passion for digital
Návrh webu #2
Mood research = stanovenie smeru
Štruktúra a obsah webu
Stanovanie KPI = pridaj referát
Grafický návrh webu
(KO)MÉDIA2014 | Created by SCR | 11/2014

20. Ó, Áno!

21. webdesign.
Created with passion for digital
(KO)MÉDIA2014 | Created by SCR | 11/2014

22. Created with passion for digital
Responsive & Grid
Bootstrap a čo je to?
Responsive
(KO)MÉDIA2014 | Created by SCR | 11/2014

23. 23

24. 24

25. Created with passion for digital
Grid
Čo sú to breakpointy?
Globálne breakpointy sú zle.
(KO)MÉDIA2014 | Created by SCR | 11/2014

26. Created with passion for digital
CSS pixel vládne všetkým! Ó, toto si zapíšem
(KO)MÉDIA2014 | Created by SCR | 11/2014
83% dizajnérov má problém.
iPad má veľké rozlíšenie. Nie, nedostanem na nom desktop web.

27. 27
Nie, nie! Ô, áno!

28. 28
y
x x
y
y
Nie, nie! Ô, áno!

29. 29

30. Created with passion for digital
Design simplicity. Content First!
Použiteľnost a dostupnosť informácii
Kompozícia, farby, typografia, grid, Fotografia
Flat design
Viac priestoru okolo prvkov
Menej dekorácií
Platí aj v interakcii užívateľa s interface
Dostupnosť informácii
(KO)MÉDIA2014 | Created by SCR | 11/2014

31. 31

32. Created with passion for digital
UX Design - mysli na tie dotyky
Desktopové elementy na mobile bolia!
50px x 50px je nutné minimum!
Mobilný web musí mať okraje!
(KO)MÉDIA2014 | Created by SCR | 11/2014

33. Created with passion for digital
Typografia
Stavebný kameň
Dostupné kvalitné fonty
Webfonty (Google Fonts, Typekit …)
Vlastné fonty (CSS @font-face)
Opatrnosť, správna dôraznosť, kombinovanosť
(KO)MÉDIA2014 | Created by SCR | 11/2014

34. 34

35. Created with passion for digital
Ikonografia, illustrácie
Ikonky, ikonky, ikonky…
Namiesto slov
Podpora slov
Estetické ladenie
Podpora brandu, produktov
(KO)MÉDIA2014 | Created by SCR | 11/2014

36. 36

37. Created with passion for digital
Menu
Informácie skryté alebo dostupné
Mobile first prístup
Hamburger menu
(KO)MÉDIA2014 | Created by SCR | 11/2014

38. 38

39. 39

40. Created with passion for digital
Take a break - drink Coffee.
Dobrú výberovu kávu
Vyvinuté telo
Správna acidita
Chute čerešní
Chute mliečnej čokolády
Chute lásky ❤
(KO)MÉDIA2014 | Created by SCR | 11/2014

41. Created with passion for digital
Farby
Pastelové farby
Veľké farebné plochy
Farebné schémy
Kontrast
Biele plochy
(KO)MÉDIA2014 | Created by SCR | 11/2014

42. 42

43. Created with passion for digital
CSS3, HTML 5
Čerešničky na torte
Podpora interaktivity - lepší používateľský zážitok
Nahradenie flash technológie - CSS3 Animácie
Dobrá podpora prehliadačov
Ľudia s IE sú zvyknutý, že internet vyzerá blbo.
(KO)MÉDIA2014 | Created by SCR | 11/2014

44. 44

45. Created with passion for digital
Testovanie
Nie prehliadač nestačí. Nie nestačia ani 2 breakpointy.
Testujeme počas celého vývoja.
Čo najviac prehliadačov a zariadení.
(KO)MÉDIA2014 | Created by SCR | 11/2014

46. .!Komunikácia
Spolupráca
Učenie sa navzájom
Podpora
Disciplína
(KO)MÉDIA2014 | Created by SCR | 11/2014

47. fb:scr.creative.studios
instagram:scr_studios
web:www.scr.sk

48. 48
Ahoj.
Ďakujeme.
(KO)MÉDIA2014 | Created by SCR | 11/2014