Michał opowie Wam, jakie błędy najczęściej popełniają developerzy i projektanci podczas współpracy nad projektem.

1. Frontend vs Design
Michał Mietliński

2. Czego chcemy
Więcej czasu
Mniej nerwów
Ciekawszych projektówZadowolonych klientów
$$$$$$$$$$

3. Jeśli każdy wokół Ciebie
jest idiotą, to Ty masz
problem – Nawet jeśli
masz rację, komunikuj to
przyjaźnie.
Nigdy nie miej 100%
pewności – sprawdzaj
swoje działania, proś o
feedback, bądź gotowy
poprawić swoją pracę.
Dołóż od siebie więcej niż
byś chciał/a – z tego
bierze się jakość i renoma.

4. Czas, perfekcja, dobre
działanie – wybierz dwa.
Weź pod uwagę innych
wykonawców Twojego dzieła
i wszystkie etapy, włącznie z
Pozwól swojemu dziecku na
rozwinięcie się – oryginalny
pomysł rzadko ujrzy światłoi wszystkie etapy, włącznie z
utrzymaniem;
pomysł rzadko ujrzy światło
dzienne w niezmienionej
formie.
Oczywiście świat jest pełen ludzi
niekompetentnych, warto mieć pewność, że
nie należy się do tej grupy.

5. Zakres wiedzy
Photoshop
HTML
CSS + SASS / LESS
NODE JS + GULP/Grunt
Talent/Boska inspiracja
Wyczucie
Narzędzia – Adobe etc.
Kolory
PS
RWD
Frontend
Design
NODE JS + GULP/Grunt
RWD
JS +Jquery
Angular/React/Backbone
Browsers!
E-mails!
Webfonts
Połączenie z backendem
Kolory
Kompozycja
UX
UI
Fonty
RWD
FONTS
UX/UI

6. Proces
Specyfikacja
UX
Design
Feedback / accept
Development
Specyfikacja
UX
Design
Feedback / accept
Backend
Świat idealny Realia
Backend Frontend
Testy
UAT – testy klienta
Launch
Wsparcie
Frontend
Testy
UAT – testy klienta
Launch( o ile)

8. Front-end dawniej i dziś
IE5/6/7 - CSS
Treść ładowana w trakcie sesji - API;
Kiedyś:
Obecnie:
Statyczne widoki z back-end; Treść stała / generowana w templatce;
Logika biznesowa po stronie BE; JS w formie animacji;
Logika biznesowa również w FE;Treść ładowana w trakcie sesji - API;
Sass/Less – czyli „programowanie” styli
Efekt?
Front-end może więcej niż kiedykolwiek, kosztem złożoności projektu;
Przyszłość:
One page apps, logika biznesowa w większości po stronie Front-end, dostosowanie
strony do zachowania użytkownika
Dynamiczne widoki;
Logika biznesowa również w FE;
Aplikacja w JS po stronie użytkownika Urządzenia mobilne

9. Grzechy Front-endu
„Nie da się” jako idealna odpowiedź na wszystko;
„U mnie działa”
– czyli „nie chce mi się
drążyć tematu”
„A jakoś tak się układa”
– widzę, że krzywo ale może
przejdzie testy
„Znów zmiany?”
„Nie jestem od wymyślania”
„Zrobiłem” – a mimo to nie działa,
czyli przebijanie zadań bez sprawdzenia
– czy faktycznie działa, czy jest na serwerze etc.;
drążyć tematu”„Znów zmiany?”
– Syndrom księżniczki
„Andrzej, to J#%%#”
– czyli sygnalizowanie ograniczeń
technologii;

10. Projekt
Wykonanie

11. 1920 px 349px
419px
~1800 px
Skalowalne- bez zmian
Responsywne

12. Ładna grafika?
Czy treść?

13. Design dawniej i dziś
Styl bardziej „ramkowy” Narzucone standardowe rozdzielczości; FLASH;
Ograniczone animacje;
Ogromna ilość rozwiązań, styli, technologii; Urządzenia mobilne, RWD etc.
Kiedyś:
Obecnie:
Ogromna ilość rozwiązań, styli, technologii; Urządzenia mobilne, RWD etc.
- JS + CSS3 = nowe możliwości! Material design i inne wzorce; Szersze spojrzenie
– UX,UI;
Efekt?
Więcej form ekspresji, nieograniczona ilość inspiracji, przy jednoczesnym
nastawieniu na ewolucję projektu, a nie zamknięty charakter dzieła.
Przyszłość:

14. Grzechy Designu
• Warstwy, layer comps, smart objecty – więcej niż tylko layout.
Odrobina pracy designera to olbrzymia oszczędność czasu dla reszty
zespołu.
• Diabeł tkwi w szczegółach - warianty, pop-upy, modale, etc.
• Nie każdy ma PS, Macbooka…
• Wireframe jedno, a design drugie – design vs UX/specyfikacja
Często kodując opieramy się na finalnym designie, zakładając jegoCzęsto kodując opieramy się na finalnym designie, zakładając jego
zgodność ze specyfikacją.
• „Zrób, żeby było dobrze”, „ Wszystko się da”, „Nic nie działa”, „A to jest
łatwe”, „To jest prawie to samo” – Nie wszystko się da, ani nie jest
oczywiste, warto rozmawiać i szukać rozwiązań lub konsensusu;
• Content messes up my design! – Klient nie zawsze zachowa idealną
formę;
• Zastąp lorem ipsum przepisem na pierogi.

15. • Gradienty, cienie i e-maile –
Warto pamiętać, że e-maile
rządzą się swoimi prawami
• Proporcje i paski narzędzi –
16:9 na full screen kontra16:9 na full screen kontra
rzeczywistość

16. Proporcje
4:3; 16:9, 5:4, 16:10; 21:9
3:2; 8:5
Vertical – Horizontal
Paski narzędzi aplikacji / przeglądarki
Ctrl +, ctr-;
RWD / Skalowalność / v. Mobilna
RWD – czytelność i blokowość – UX!
- Break points; Floats; Flex;
Skalowalność – Perfekcyjne proporcje –
DESIGN!
-% ; vw;
Wersja mobilna
- Osobny układ, pliki
RWD / Skalowalność / v. Mobilna

17. Paski narzędzi, proporcje ekranu…Paski narzędzi, proporcje ekranu…

18. Przykładowe layouty:
- Desktop – 1200+
- Tablet horizontal
- Tablet vertical
- Mobile horizontal
- Mobile vertical
Desktop – widok RWD + stałe
czcionki
Tablet – Widok skalowalny –
zachowanie proporcji czcionekzachowanie proporcji czcionek
Mobile – Widok RWD – stałe
czcionki poniżej pewnego
minimum

19. Klient
Niedoinformowany:
• Zmieniły nam się priorytety
• Czy dało by się jednak…
• U mnie się źle wyświetla…
Trudny:
• To ma być inaczej i ma być teraz
• Poproszę jeszcze jedną wersję
• U mnie się źle wyświetla…
Narzędzia:
• Specyfikacja
• Akceptacje
• Szablon zgłoszenia błędu
• Wszystko na piśmie – e-maile, historia zgłoszeń
• Nic na gębę

20. Dobre rady wujka stefana
Front-end:
- Przewertuj dokładnie specyfikację,
określ na wstępie braki, ustal z PM
zadania;
- W ramach kodowania twórz
komentarze, specyfikację produkcyjną;
- Dostarcz współpracownikom formatkę
Design:
- Dokładnie określ potrzebne / brakujące
widoki, detale;
- Podaj formaty plików, ustal sposób zapisu,
przechowania;
- Zachowuj spójność różnych wersji,
podkreśl różnice między wersjami;- Dostarcz współpracownikom formatkę
zgłaszania błędów i pilnuj jej.
- Przetestuj na kilku przeglądarkach
swoją pracę, przed przekazaniem jej do
testów;
- Łącz pytania w bloki – nie przerywaj
pracy innych co 5 minut;
podkreśl różnice między wersjami;
- Zaznacz w tekście najważniejsze
informacje;
- Określ nazewnictwo warstw, dodaj małe
Readme;
- Dostarcz w paczce źródła / fonty;

21. I od początku…

22. DziękujęDziękuję
Szczególnie:
Agnieszce Błaszczak
Izabeli Kurkowskiej
Katarzynie Kubalskiej
Michałowi Dublakowi
mietlinski.michal.priv@gmail.com