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.
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ło i 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.
Zakres wiedzy
PhotoshopHTMLCSS + SASS / LESSNODE JS + GULP/Grunt
Talent/Boska inspiracjaWyczucie
Narzędzia – Adobe etc. Kolory
PSRWD
FrontendDesign
NODE JS + GULP/GruntRWDJS +JqueryAngular/React/BackboneBrowsers!E-mails!WebfontsPołączenie z backendem
KoloryKompozycja
UXUI
Fonty
RWDFONTSUX/UI
ProcesSpecyfikacja
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)
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
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;
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ść:
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/specyfikacjaCzęsto kodując opieramy się na finalnym designie, zakładając jego Czę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.
• 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 kontra 16:9 na full screen kontra rzeczywistość
Proporcje4:3; 16:9, 5:4, 16:10; 21:93:2; 8:5Vertical – HorizontalPaski narzędzi aplikacji / przeglądarkiCtrl +, 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
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
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ę
Dobre rady wujka stefana
Front-end:- Przewertuj dokładnie specyfikację,
określ na wstępie braki, ustal z PMzadania;
- W ramach kodowania twórzkomentarze, 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ądarkachswoją pracę, przed przekazaniem jej dotestów;
- Łącz pytania w bloki – nie przerywajpracy 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;
DziękujęDziękujęSzczególnie:
Agnieszce BłaszczakIzabeli Kurkowskiej
Katarzynie KubalskiejMichałowi Dublakowi
Top Related