Frontend vs Design

Michał Mietliński

Czego chcemy

Więcej czasu

Mniej nerwów

Ciekawszych projektówZadowolonych klientów

$$$$$$$$$$

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;

Projekt

Wykonanie

1920 px 349px

419px

~1800 px

Skalowalne- bez zmian

Responsywne

Ładna grafika?

Czy treść?

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

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

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;

I od początku…

DziękujęDziękujęSzczególnie:

Agnieszce BłaszczakIzabeli Kurkowskiej

Katarzynie KubalskiejMichałowi Dublakowi

mietlinski.michal.priv@gmail.com