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.
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ń.
Bieżąca
komunikacja
PRACA W ZESPOLE
Możesz skorzystać ze Skype lub użyć dedykowanych narzędzi do komunikacji w zespole.
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
Współpraca z Agencja i Developerem
By eduweb
