NOWOCZESNE STRONY WWW

Kreacja i Development

Praca w zespole

Grzegorz Róg

@grzegorzrog

Design

Development

PRACA W ZESPOLE

KANAŁY KOMUNIKACJI W ZESPOLE

PRZYDATNE NARZĘDZIA

ORGANIZACJA PLIKÓW I ZASOBÓW

WSPÓLNY JĘZYK

Zarządzanie plikami

PRACA W ZESPOLE

Systemy zarządzania plikami jak GIT mają mnóstwo zalet:

Współpraca nad witryną bez wzajemnego nadpisywania plików
Możliwość porównania wersji skonfliktowanych plików
Możliwość przywrócenia starszej wersji strony
Możliwość wyodrębnienia gałęzi z klonem kodu

Dokumentacja

PRACA W ZESPOLE

Tworzenie repozytoriów treści oraz wytycznych do wybranych Milestone'ów z pomocą rozwiązań chmurowych ułatwia współpracę i synchronizację plików.

Zasobnik pomysłów

PRACA W ZESPOLE

Korzystając z narzędzi pozwalających agregować pomysły możesz łatwo komunikować stylistykę projektu w ramach zespołu.

http://www.dropmark.com/

Tickety

PRACA W ZESPOLE

Systemy do tworzenia tzw. ticketów pozwalają na efektywną pracę oraz ustalanie hierarchii ważności w ramach poszczególnych zadań.

https://www.springloops.io/

Bieżąca

komunikacja

PRACA W ZESPOLE

Możesz skorzystać ze Skype lub użyć dedykowanych narzędzi do komunikacji w zespole.

https://slack.com/

Narzędzia procesu projektowania

PRACA W ZESPOLE

Korzystając z Adobe Creative Cloud możesz łatwo wersjonować i udostępniać pliki do podglądu dla Twoich klientów i współpracowników. Inne narzędzia, z których możesz skorzystać to na przykład Pixelapse, które jest zaawansowanym systemem kontroli wersji dla Designerów.

Wspólny język

PRACA W ZESPOLE

Odpowiednia struktura

i nazewnictwo warstw może

być przydatne w późniejszym

procesie kodowania strony

i przy eksporcie CSS.

Cięcie layoutu w nowym wydaniu

PRACA W ZESPOLE

Technologie takie jak bezpośredni eksport grafik wektorowych z Adobe Illustrator czy możliwość kopiowania kodu CSS z warstw, a także narzędzie Adobe Extract pozwalają agregować i tworzyć komponenty bezpośrednio z aplikacji graficznych, będących branżowym standardem.

Co zweryfikować w kreacji?

PRACA W ZESPOLE

Które elementy są fixed / fluid i jak wygląda RWD

W jakiej jakości / rozdzielczości są przygotowane grafiki

Czy każdy z elementów poradzi sobie z większą ilością tekstu

Czy elementy interaktywne mają zaprojektowane stany

Referencja kolorów, rozmiarów, fontów

Czy zostały zaprojektowane komunikaty błędów / sukcesu?

Zrobiliśmy świetny layout, ale programiści wszystko zepsuli...

PRACA W ZESPOLE

- Kiepski Designer

Dlaczego designer musi umieć czytać kod?

PRACA W ZESPOLE

Aby lepiej rozumieć medium na które tworzy
Aby tworzyć lepsze tickety
Aby skutecznie komunikować się z programistą
Aby znać ograniczenia technologi
Aby samodzielnie testować rozwiązania w przeglądarce

Zrób tą beleczkę na górze bardziej fioletową

i powiększ kapkę font

Zmień kolor .header > span na #631cb2 i ustaw font-size na 1.2em

PRACA W ZESPOLE

Narzędzia developerskie w przeglądarce

Zapamiętaj!

PRACA W ZESPOLE

Korzystaj z narzędzi kontroli wersji

Dokumentację i inspiracje trzymaj w chmurze

Zorganizuj pliki PSD oraz korzystaj z kontroli wersji

Proces cięcia stron WWW ewoluował

Pokazuj, nie tłumacz! Rozmawiaj, współpracuj

Statyczne obrazki są martwe

Baw się tym! Droga może być lepsza od celu

NOWOCZESNE STRONY WWW

Brief me, please!

Grzegorz Róg

@grzegorzrog

Brief - a po co to komu?

1 Elementy Biznesowe

CO W BRIEFIE?

Cele biznesowe

Trudności biznesowe

Model biznesowy

Kryteria sukcesu

Research

CO W BRIEFIE?

Dla kogo projektujemy?

Priorytety użytkowników / persony

Analiza konkurencji

Specyfika klienta

Brand

CO W BRIEFIE?

Misja produktu / firmy

Podstawy stylistyki / projektowe

Głos

Inspiracje

Co dołączyć?

CO W BRIEFIE?

Wireframe'y, Sitemapy

Scenariusze

Use case'y

Prototypy flow

Wymagania

CO W BRIEFIE?

Technologie

Platformy

Dostępność - accessibility

Dostarczanie materiałów

Elementy Briefu

BRIEF

Temat - Firma - Produkt - Marka
Unikalna cecha Produktu
Dystrybucja
Grupa docelowa
Konkurencja
Cel
Zadania
Elementy Obowiązkowe (SG)
Wskazówki wykonawcze
Plansze, Mockupy, Modele
Termin realizacji
Forma Projektu
Osoba kontaktowa

UMOWA? whaaat?

2 Umowa z Agencją Kreatywną

UMOWA

Terminy, terminy, terminy!
Etapy oddawek
Poprawki oraz płatności
Kara umowna a odszkodowanie
Zaliczka a zadatek
Autorskie prawa majątkowe
Licencje
Pliki graficzne
Fonty - Muzyka - Zdjęcia i wideo
Oświadczenia uczestników
Pliki źródłowe oraz produkcyjne
Możliwość publikacji w Portfolio
NDA w umowie lub osobny dokument
Brief jako załącznik

TYPOWE ZADANIA

1

TYPOWE ZADANIA

CID (Identyfikacja wizualna)
Bannery
Layout strony WWW
Aplikacja mobilna
Plakat
Ilustracja

Ile to kosztuje?
Opłaty dodatkowe – licencje

Po co mi pliki edycyjne?
.psd
.ai
.indd
.cdr
.fla

.swf
.pdf
.png

DOBRE WZORCE UX

Responsive Web Design i UX

Grzegorz Róg

@grzegorzrog

DEFINIOWANIE POTRZEB

JAKIE KORZYŚCI OFERUJEMY UŻYTKOWNIKOM

JAKI CEL DLA USERA MA REALIZOWAĆ NASZ SERWIS

JAKIE SĄ CELE BIZNESOWE I CZY SĄ Z TYM ZGODNE

JAK ZORGANIZOWANA JEST TREŚĆ

JAKIE CELE REALIZUJĄ PODSTRONY

JAKIE ROZWIĄZANIA TECHNICZNE WYKORZYSTAĆ

Co dają Wzorce? (Patterns)

Rozwiązują typowe

Problemy projektowe

są skoncentrowane na użytkowniku

Pozwalają wykorzystać

wyuczone nawyki

DOBRE WZORCE UX

Podejście TOP

DOBRE WZORCE UX

DOWN

ZDEFINIUJ PROBLEM

PRZESTUDIUJ DOSTĘPNE WZORCE

ZAPROTOTYPUJ ROZWIĄZANIE

PRZETESTUJ

DOBRE WZORCE UX

WYCIĄGAJ WNIOSKI I ITERUJ...

F-Pattern

DOBRE WZORCE UX

Problem:

Rozwiązanie:

Wskazówki:

Dużo treści trudnej do "ogarnięcia"

Koncentracja na nawykach przeglądania treści od góry i od lewej strony a co za tym idzie wprowadzenie wzorca F-Pattern

Umieść CTA z lewej i z prawej strony
Prawa kolumna jest inaczej postrzegana
Zadbaj o odpowiednie nagłówki i tytuły
Zaczynaj akapity od słów kluczowych

Z-Pattern

DOBRE WZORCE UX

Problem:

Rozwiązanie:

Wskazówki:

Najczęściej jedno specyficzne CTA

Zwykle mniej treści, więc możemy prowadzić użytkownika przez zalety do naszego CTA

Umieść CTA na górze i na dole
Zadbaj o odpowiedni rytm informacji
Skup się na pierwszej linii tekstu

Card Design i Grid

DOBRE WZORCE UX

Problem:

Rozwiązanie:

Wskazówki:

Dużo równoważnych treści do przeglądania,

część danych jest ważna ale nie kluczowa.

Wizualne kafelki, które po rozwinięciu / najechaniu oferują więcej informacji.

Każdy z kafelków powinien być jednorodny
Uwzględnij RWD przed wybraniem formatu
Staraj się jak najbardziej uprościć kafelki
Cały kafelek powinien być klikalny, stan hover jest ok

Styl Gazetowy

DOBRE WZORCE UX

Problem:

Rozwiązanie:

Wskazówki:

Dużo treści i konieczność wyróżnienia kluczowych informacji

Koncentracja na nawykach przeglądania treści od góry i od lewej strony a co za tym idzie wprowadzenie wzorca F-Pattern

Duży nacisk na przyciągające wzrok obrazy
Na ogół poziome menu
Przełamanie monotonii rozmiarem elementów
Zwykle 2-3 kolumny

Dowolny układ

DOBRE WZORCE UX

Problem:

Rozwiązanie:

Wskazówki:

Zwykle minimalistyczne interfejsy, prezentacje, folio

Swoboda twórcza w momencie, gdy sam content na stronie jest kluczowy i to on determinuje użyteczność.

Zwykle nadaje się do mało przeładowanych stron
Jeśli to możliwe, jak najwięcej linków
Na ogół brak układu kontenerów na stronie
Ważna rola typografii

Symetria i asymetria

DOBRE WZORCE UX

Problem:

Rozwiązanie:

Wskazówki:

Dużo treści trudnej do "ogarnięcia"

Koncentracja na nawykach przeglądania treści od góry i od lewej strony a co za tym idzie wprowadzenie wzorca F-Pattern

Umieść CTA z lewej i z prawej strony
Prawa kolumna jest inaczej postrzegana
Zadbaj o odpowiednie nagłówki i tytuły
Zaczynaj akapity od słów kluczowych

MOSTLY FLUID

COLUMN DROP

LAYOUT SHIFTER

TINY TWEAKS

OFF CANVAS