NOWOCZESNE STRONY WWW
Witaj w świecie
Nowoczesnych Stron WWW
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
DLA KOGO JEST NASZA STRONA?
JAKA TREŚĆ ZNAJDZIE SIĘ NA STRONIE
JAK BĘDZIE ZORGANIZOWANA TREŚĆ
JAK ZAPROJEKTOWAĆ ARCHITEKTURĘ INFORMACJI
NOWOCZESNE STRONY WWW
Technologie w sieci
- Pojęcia
Grzegorz Róg
@grzegorzrog
Server-Side
TECHNOLOGIE - POJĘCIA
To grupa technologii działających na serwerze i obsługujących żądania wysyłane np. przez przeglądarkę. Back-end – określenie technologii Server Side, tych które „działają na zapleczu” i użytkownik nie widzi bezpośrednio wyniku.
Client-Side
To grupa technologii działających po stronie użytkownika, tzn. w przeglądarce.
Front-end – określenie technologii Client Side, tych które bezpośrednio wpływają na to co widzi użytkownik.
PHP, ASP.NET, Java, MySQL, PostgreeSQL, SQL Server.
HTML, CSS, JavaScript, ActionScript
PHP
TECHNOLOGIE - POJĘCIA
Języki serwerowe NIE są widoczne po stronie klienta i można z ich pomocą wykonywać bezpieczne operacje
JavaScript
Języki client-side są widoczne dla klienta i każdy może je podejrzeć oraz zmodyfikować
Baza Danych
Działa po stronie serwera - dane w bazie, takiej jak MySQL czy SQL są bezpieczne i trwałe.
Cookies
Ciasteczka działają po stronie klienta - są zapisywane w pamięci podręcznej przeglądarki na dysku.
Współpraca z bazą danych
TECHNOLOGIE - POJĘCIA
POST
PHP
OK?
Baza Danych - oprogramowanie na serwerze, w aplikacjach WWW służy do przetrzymywania informacji i danych jak np. lista użytkowników, artykuły, posty, komentarze
Najważniejsze komponenty do uruchomienia strony WWW?
TECHNOLOGIE - POJĘCIA
HOSTING
Serwer WWW
Baza Danych
DOMENA
W technologii ASP.NET
lub PHP (Apache)
VPN lub serwer
dedykowany
Serwer współdzielony
Upload
Download
> Przekierowana na serwer WWW z pomocą rekordu DNS
Technologie Client-Side
TECHNOLOGIE - POJĘCIA
HTML
(ang. HyperText Markup Language) – język wykorzystywany do tworzenia stron internetowych. Głównymi elementami języka HTML są znaczniki (tagi), które opisują strukturę dokumentu (strony internetowej).
CSS
(ang. Cascading Style Sheets) – język wykorzystywany do opisu warstwy prezentacji stron internetowych - stylów.
JavaScript
skryptowy język programowania najczęściej stosowany na stronach internetowych. Skrypty napisane w JavaScript uruchamiane są w przeglądarce użytkownika.
Czym jest HTML5?
TECHNOLOGIE - POJĘCIA
HTML5 często funkcjonuje nie tylko jako kolejna specyfikacja HTML i jego znaczników, ale także jako określenie wszystkich nowoczesnych technologii działających po stronie przeglądarki, najczęściej z wykorzystaniem JavaScript i CSS3.
Can I use - narzędzie, które pozwala sprawdzić możliwości przeglądarki pod kątem implementacji nowości w HTML5.
- HTML Shiv - pozwala na użycie nowej semantyki HTML5 w starszych przeglądarkach IE.
- Modernizr - jedna z najlepszych bibliotek oferująca wsparcie dla nowych standardów w starszych przeglądarkach oraz łatwą detekcję wspieranych nowych możliwości
- Selectivizr - podobny do Modernizr, z większym naciskiem na CSS i dobrą emulacją IE
- Video.js
- IE7.js - wsparcie dla starszych wersji IE6-8, jak kanał alfa
- Fallback.js - biblioteka zapewniająca wsparcie dla wszystkich ładowanych z zewnątrz skryptów
Czym są Frameworki
i biblioteki JavaScript
TECHNOLOGIE - POJĘCIA
Dużą popularnością cieszą się rozmaite gotowe rozwiązania oparte o język JavaScript. Pomyśl o nich jak o gotowych komponentach w swoim projekcie. Jeśli chcesz użyć na stronie zegarka w JS możesz pobrać aktulaną datę, sformatować ją, dostosować do stref czasowych etc., albo po prostu skorzystać z gotowca, mógłaby być to biblioteka ZegarekJS.
Popularne rozwiązania to:
- jQuery - framework wykorzystywany w większości stron WWW, pozwala przyspieszyć i uprościć podstawowe operacje JS na stronie np. wskazywanie konkretnych elelementów HTML ($)
- AngularJS - rozbudowany framework oferujący niezwykle ciekawe możliwości stosowany także w dużych projektach
- Polymer - bardzo ciekawy, nowoczesny framework rozwijany przez Google, stosowany nie tylko w projektach Material Design
- Bootstrap - bardzo rozbudowany i popularny framework, poza samymi bibliotekami HTML i CSS, zawiera też szereg gotowych komponentów JavaScript, jak przyciski, popupy, formularze
- EmberJS, BackboneJS, Knockout, ExtJS
TECHNOLOGIE - POJĘCIA
UX
UI
USER EXPERIENCE (UXD/UED/XD)
Ogół procesów polegających na ułatwieniu użytkownikowi korzystania z aplikacji/strony WWW, na które składają się poprawa użyteczności, dostępności, optymalizacja ergonomii
i innych elementów.
DOSTĘPNOŚĆ (ACCESIBILITY) - polega na wdrożeniu ułatwień dla osób z niepełnosprawnościami (niedowidzących etc.)
USER INTERFACE
Interfejs użytkownika - czyli to, co widzi użytkownik w przeglądarce - przyciski, style, formularze, kolory i inne komponenty strony WWW.
UI
TECHNOLOGIE - POJĘCIA
UX
Statystyki Internetu -
skąd czerpać informacje?
TECHNOLOGIE - POJĘCIA
Kto jest kim w branży Web?
OGÓLNE POJĘCIA
Web Designer
Zazwyczaj grafik specjalizujący się w projektowaniu stron WWW. Web Designer od zwykłego grafika różni się tym, że posiada też wiedzę w jaki sposób strony WWW są kodowane w HTML i CSS, co pozwala mu dobrać odpowiednie techniki, które mogą być zastosowane na stronie WWW.
Web Developer
Programista specjalizujący się w kodowaniu i programowaniu stron i aplikacji internetowych. Developerzy często specjalizują się w swoich technologiach, przez co można spotkać się z określeniami: PHP Developer, Java Developer, Symfony2 Developer.
Administrator, Admin
Osoba specjalizująca się w administrowaniu, zabezpieczaniu i konserwacji oprogramowania działającego na serwerze internetowym. Często osoba ta nie posiada specjalistycznej wiedzy technologii Client Side i Server Side.
Front/Back end Developer
Jest to programista specjalizujący się w technologiach odpowiednio Client Side lub Server Side. Front-end Developer powinien mieć opanowane technologie: HTML, CSS i JavaScript i jest potocznie nazywany Koderem.
UI/UX Designer
Specjalista w zakresie użyteczności oraz architektury informacji. Może, ale nie musi być to grafik. Posiada też ogólną wiedzę o technologiach i możliwościach współczesnych interfejsów web i mobilnych. Pracuje w narzędziach do tworzenia prototypów, makiet, mockupów.
Warto sprawdzić
NOWOCZESNE STRONY WWW
Mobile first
Grzegorz Róg
@grzegorzrog
Czym jest podejście Mobile First?
RESPONSIVE WEB DESIGN
Mobile First to skoncentrowanie procesu projektowego na najmniejszym ekranie a następnie skalowanie naszego projektu w górę. Na chwilę obecną jest to smartfon, może już wkrótce zegarek?
użytkowników na świecie korzysta z internetu TYLKO z urządzenia moblinego
25%
2014 ROK
urządzenia mobilne generują więcej ruchu w sieci niż komputery przenośne i stacjonarne.
Co znaczy mobliny?
MOBILE FIRST
użytkowników mobilnych korzysta z urządzenia w domu lub w szkole.
77%
tylko 17%
użytkowników mobilnych korzysta z urządzeń "w ruchu" poza domem.
http://www.slideshare.net/annadahlstrom/building-device-agnostic-ux-systems-geekgirl-london-28-oct-2014
Dlaczego Mobile First?
MOBILE FIRST
Ponieważ pozwala skoncentrować się na
Najważniejszych funkcjonalnościach
bo łatwiej jest dodawać niż odejmować kod
Ponieważ możesz skoncentrować się na
hierarchii informacji
Mobile is not about making things smaller!
MOBILE FIRST
Progressive enchancement
MOBILE FIRST
Technika w której rozpoczynamy od najmniejszego ekranu i dodajemy funkcjonalności oraz treści w miarę powiększania rozdzielczości.
Zalety:
- Skupienie się na najważniejszych elementach
- Największe skupienie na mobile
- Łatwość implementacji
Wady:
- Trudność przestawienia się
Graceful degradation
vs
Przeciwieństwo Progressive enchancement, polega na rozpoczęciu od najbardziej skomplikowanego layoutu a następnie odejmowaniu elementów na mniejsze ekrany.
Zalety:
- Zebranie wszystkich niezbędnych informacji już na początku procesu projektowego
Wady:
- Marginalizowanie wersji mobilnych
- Niepotrzebne trudności w implementacji
- Tendencja do rozbudowywania contentu
- Brak zorientowania na najważniejsze funkcje
Czym jest Linear Design?
MOBILE FIRST
Polega na tworzeniu interfejsów, które skalują się w dół, co pozwala zachować czytelną strukturę i hierarchię treści - budujemy tak, aby na górze znalazły się najbardziej istotne elementy, a poniżej te, które są coraz mniej kluczowe, przy możliwie jak najmniejszej liczbie kliknięć.
przewijanie = kontynuacja kliknięcie = decyzja
Projektowanie pod dotyk
MOBILE FIRST
Istnieje szereg wytycznych związanych z projektowaniem interfejsów pod urządzenia dotykowe. Warto wziąć pod uwagę następujące sugestie:
- Na urządzeniach dotykowych nie ma stanu hover
- Interakcje mobilne dają większe możliwości niż mysz
- Pamiętaj o minimalnym rozmiarze > 5 mm
- Rozmiar dla wygodnych przycisków to 44 px
- Wykorzystaj różne gesty, które znają użytkownicy
- Stwórz samouczek, jeśli używasz mało popularnych gestów
Referencja: static.lukew.com/TouchGestureGuide.pdf
Sensory i VR
MOBILE FIRST
Jedną z największych zalet urządzeń przenośnych jest możliwość wykorzystania sensorów, także w aplikacjach webowych (strony WWW), dzięki czemu możemy np. sprawdzić lokalizację użytkownika, czy wykorzystać zdjęcie zrobione aparatem w telefonie.
Przykładowe sensory to:
Akcelerometr
Żyroskop
GPS - lokalizacja
Kamera
Mikrofon
NFC z pomocą RFID
Czujnik światła
Sensor orientacji
Dotyk
Komunikacja - WiFi, LE Bluetooth
Heart beat sensor
...
Na co zwrócić uwagę?
MOBILE FIRST
- Hierarchia elementów - nadaj elementom odpowiednią wagę
- Czytelność - powiększ fonty, zadbaj o interlinię i 35-40 znaków w linii
- Powiększ elementy interaktywne jak przyciski z myślą o dotyku
- Nie polegaj na elementach hover i rozwijanych menu
- Optymalizuj skrypty i grafiki dla szybkiego ładowania
- Testuj na urządzeniach w rzeczywistych warunkach
- Unikaj bladych i neutralnych kolorów w interfejsie
Web
vs
Native
Webowe
MOBILE FIRST
+ Multiplatofrmowe
Natywne
+ Brak konieczności instalacji
+ Na każdym urządzeniu
+ Łatwe aktualizacje
+ Mniejsze koszty
- Tylko online*
- Niedostosowane do standardów
- Brak wsparcia funkcji natywnych*
+ Funkcje Natywne
+ Look & Feel
+ Użytkownicy je lubią!
+ Szybkość
+ Tryb offline
- Wiele platform
- Utrzymanie i aktualizacje
- Początkowa faza
WEBOWE = RWD
NOWOCZESNE STRONY WWW
Responsive Web Design
Grzegorz Róg
@grzegorzrog
Problem współczesnego designera
RESPONSIVE WEB DESIGN
Warto sprawdzić: https://en.wikipedia.org/wiki/Display_resolution
Fragmentacja urządzeń
RESPONSIVE WEB DESIGN
slashgear.com
Platformy...
RESPONSIVE WEB DESIGN
Czym jest Responsive Web Design?
RESPONSIVE WEB DESIGN
Responsive Web Design to technika, która pozwala dostosować stronę WWW do różnych rozdzielczości, tak, aby poprawnie wyświetlała się na wielu urządzeniach i ekranach.
poprawnie =/= tak samo
RWD Działa! MTV Redesign
RESPONSIVE WEB DESIGN
wzrost wizyt
mobilnych
wzrost odsłon
mobilnych
wzrost czasu
wizyty
RWD a AWD
RESPONSIVE WEB DESIGN
Responsive Web Design (RWD) - projektowanie jednego interfejsu, który dostosowuje się do urządzenia, na którym jest wyświetlany. Na przykład fluid / CSS3 Media Queries.
Adaptive Web Design (AWD)* - projektowanie kilku osobnych wersji interfejsu, które wczytywane są w zależności od urządzenia.
*technika niezalecana
m. subdomeny* - tworzenie stron mobilnych jako zupełnie osobnych serwisów, które wczytywane były na osobnej subdomenie jak m. czy .mobile w zależności od wykrytego urządzenia.
*technika przestarzała - niezalecana
Pixel
ANATOMIA EKRANÓW
Najmniejsza fizyczna składowa ekranu
Rodzielczość
Stosunek szerokości do wysokości ekranu w pixelach
Aspect Ratio
Proporcje - stosunek szerokości do wysokości ekranu
Rozmiar
Przekątna podawana w calach
DPI
Gęstość pikseli - ilość pikseli na cal
Przeglądarka a ekran?
RESPONSIVE WEB DESIGN
Od czego zacząć?
RESPONSIVE WEB DESIGN
Sprawdź statystyki ekranów
Polecane serwisy:
Breakpointy a urządzenia
RESPONSIVE WEB DESIGN
źródło: https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf
Zapomnij o urządzeniach!
Jak projektować?
RESPONSIVE WEB DESIGN
Sprawdź http://bradfrost.com/demo/ish/
Jak działa skalowanie na urządzeniach?
RESPONSIVE WEB DESIGN
Nowoczesne wyświetlacze HiDPI skalują zawartość ekranu "sprzętowo", co znaczy, że rozdzielczość, którą widzi użytkownik jest np. 2x lub 3x większa niż fizyczna rozdzielczość urządzenia.
Podstawowe techniki RWD
RESPONSIVE WEB DESIGN
Fluid
Polega na wykorzystaniu jednostek relatywnych do określenia rozmiarów kontenerów na stronie WWW. Stosujemy np. %, rem, em, zamiast px
Media Queries
Tworzymy instrukcje warunkowe, które dopasowują style strony WWW w zależności od szerokości ekranu lub urządzenia.
Technika Fluid
RESPONSIVE WEB DESIGN
%
CSS3 Media Queries
RESPONSIVE WEB DESIGN
@media
Co możesz sprawdzić?
RESPONSIVE WEB DESIGN
Responsywne obrazki
RESPONSIVE WEB DESIGN
Responsywny tekst
Podstawowe pytania
RESPONSIVE WEB DESIGN
Które z breakpointów są dla nas ważne i dlaczego?
Czy zmieniać wielkość tekstu w zależności od urządzenia?
Jak będzie wyglądać nawigacja na różnych rozdzielczościach?
Jak zmienia się footer?
Które z elementów mają być fluid, a które fixed?
Czy sekcje boczne ukrywamy, czy zmieniamy ich pozycję?
Podsumowanie
RESPONSIVE WEB DESIGN
RWD pozwala dopasować stronę WWW do różnych ekranów
Dwie podstawowe techniki to Liquid i Media Queries
Czego nie wiemy? Na jakim urządzeniu, w jakim kontekście, z jakiej odległości użytkownik ogląda naszą stronę WWW
Warto pomyśleć o responsywnych obrazkach i tekście
Z pomocą @media możesz sprawdzić nie tylko rozdzielczość
Pamiętaj o popularnych rozdzielczościach i skalowaniu
NOWOCZESNE STRONY WWW
Projektowanie jako proces
Grzegorz Róg
@grzegorzrog
Proces projektowania kiedyś...
PROCES PROJEKTOWANIA
Proces koncepcyjny
Projektowanie grafiki *kreacja
Kodowanie
Publikacja
SCRUM
Czym jest scrum?
PROCES PROJEKTOWANIA
- Scrum to proces Agile, który pozwala na optymalizację czasu i efektów pracy nad oprogramowaniem
- Zaletą Scrum jest zorientowanie na szybki efekt w ramach sprintu, co pomaga uniknąć przestojów z powodu problemów
- Scrum jest zorientowany biznesowo - na osiągnięcie konkretnych rezultatów w jak najkrótszym czasie z pomocą wielu iteracji
- Produkt jest widoczny na przestrzeni krótkiego okresu czasu. Sprint trwa 1-2 tygodnie a w jego ramach powstaje działający kawełek serwisu który można rozbudować.
Zalety Scrum
PROCES PROJEKTOWANIA
Szybka reakcja na potrzeby klienta
Dostarczanie działających rozwiązań w krótkim czasie
Kooperacja z klientem na każdym etapie procesu
Obszerna dokumentacja
Negocjacje zakresu zadań na cały projekt
Długoterminowy plan
Proces projektowania dziś
PROCES PROJEKTOWANIA
Koncepcja
Test
Produkcja
Publikacja
Prototypowanie
Kreacja
Front / Back-end
SPRINT
Iteracje = sprinty
PROCES PROJEKTOWANIA
Koncepcja
Publikacja
Jakie są role w procesie?
PROCES PROJEKTOWANIA
Osoba odpowiedzialna za treść
Architekt informacji
Tester strony WWW
Projektant interfejsu / grafik
UX Designer (niekoniecznie grafik)
Front-end developer
Back-end developer
ROLE SCRUM
Właściciel projektu - zleceniodawca
Scrum Master - menedżer projektu
Zespół
Ramy czasowe
PROCES PROJEKTOWANIA
-
PLAN - cały zespół, ustalenie indywidualnych zadań (1-15 godzin)
-
DNIÓWKA - cały zespół, 15 min - podsumowanie
-
SPRINT - okres pracy nad zadaniami - 1-2 tygodnie
- PODSUMOWANIE - po sprincie, sprawdzenie założeń, poprawki
SCRUM nie nadaje się do wszystkich projektów!
Proces tworzenia stron WWW
PROCES PROJEKTOWANIA
PRACA KONCEPCYJNA
AGREGOWANIE I STRATEGIA TREŚCI
DESIGN / DEVELOPMENT
TESTY
OPTYMALIZACJA
PUBLIKACJA
UŻYTKOWNICY I TESTY
PROMOCJA - SEM / SEO / SOCIAL MEDIA
PRACA KONCEPCYJNA
CELE BIZNESOWE SERWISU
UŻYTKOWNICY I TESTY
AGREGOWANIE TREŚCI
PRZYGOTOWANIE MAPY STRONY
TWORZENIE WIREFRAMÓW PODSTRON
TWORZENIE MAKIET Z TREŚCIĄ
ROZPISANIE FLOW - PRZEPŁYWÓW
PROTOTYPOWANIE
DEFINIOWANIE CELÓW BIZNESOWYCH
Podstawy pracy koncepcyjnej
Grzegorz Róg
@grzegorzrog
DEFINIOWANIE CELÓW BIZNESOWYCH
JAKIE CELE MA REALIZOWAĆ SERWIS
JAKIE PROBLEMY CHCEMY ROZWIĄZAĆ
JAKI JEST MODEL BIZNESOWY
JAKIE SĄ KRÓTKO- I DŁUGO-TERMINOWE CELE
JAKIE FUNKCJE MA MIEĆ NASZ SERWIS
CZY NASZA WIZJA JEST SPÓJNA Z OCZEKIWANIAMI KLIENTA?*
Cele i akcje vs funkcje
PRACA KONCEPCYJNA
Zwiększenie świadomości marki
Zwiększenie sprzedaży biletów
Rejestracja
w serwisie
Zapisanie na newsletter
Komentowanie artykułów
Zbudowanie społeczności
Ranking użytkowników
1000 aktywnych użykowników w rok
2000 użytkowników newslettera w kwartał
Rejestracja w 3 minuty
Krótkie formularze
Udostępnianie
w social media
Hierarchizowanie
PRACA KONCEPCYJNA
Zwiększenie świadomości marki
Zwiększenie sprzedaży biletów
Rejestracja w serwisie
Zapisanie na newsletter
Zbudowanie społeczności
1000 aktywnych użykowników w rok
2000 użytkowników newslettera w kwartał
Rejestracja w 3 minuty
Użytkownicy i testy
Grzegorz Róg
@grzegorzrog
UŻYTKOWNICY
TREŚĆ NA STRONACH WWW
DLA KOGO JEST NASZA STRONA
JAKIE SĄ CECHY NASZYCH UŻYTKOWNIKÓW
JAKIE SĄ ICH TYPOWE ZACHOWANIA
JAK UŻYTKOWNICY ODBIERAJĄ NASZE TREŚCI
Dla kogo jest
nasza strona?
TREŚĆ NA STRONACH WWW
PERSONA
Tworzymy persony
TREŚĆ NA STRONACH WWW
Cechy:
wiek -
zainteresowania -
zawód -
Cel wizyty na stronie
Cenione wartości
Ania, 35l, chce kupić zegarek dla męża
Piszemy historie
TREŚĆ NA STRONACH WWW
Jako /użytkownik: cechy/, chcę /osiągnąć cel/, ponieważ /tak a nie inaczej/
Jako Pinky, postać z kreskówki, chcę zdobyć świat, ponieważ chcę rządzić ludźmi
Treść i architektura informacji na stronie WWW
Grzegorz Róg
@grzegorzrog
TREŚĆ NA STRONACH WWW
TREŚĆ NA STRONACH WWW
JAKA TREŚĆ ZNAJDZIE SIĘ NA STRONIE
JAK BĘDZIE ZORGANIZOWANA TREŚĆ
JAK ZAPROJEKTOWAĆ ARCHITEKTURĘ INFORMACJI
JAK STWORZYĆ NAWIGACJĘ NA STRONIE
PROJEKTOWANIE MAPY STRONY
SCHEMAT PODSTRON SERWISU
1
Schemat treści
TREŚĆ NA STRONACH WWW
Content Inventory, to dokument, zwykle arkusz kalkulacyjny, w którym znajdą się informacje o podstronach oraz mediach w ramach Twojej witryny oraz zależnościach między nimi.
Podstawowe elementy to:
- Tytuł
- Rodzaj treści (podstrona, pdf, mov)
- Link do treści
- Poziom zagnieżdżenia
Poziomy zagnieżdżenia (levels) dotyczą tego, jak głęboko w strukturze strony (site) znajdzie się dana podstrona (page)
http://www.bumblebel.com/portfolio/ux-website-content-inventory/
TREŚĆ NA STRONACH WWW
JAKA BYŁABY NAJLEPSZA STRUKTURA DLA TREŚCI?
JAK NAJLEPIEJ UZASADNIĆ TEN WYBÓR?
JAK BĘDZIE ZORGANIZOWANA TREŚĆ?
JAKI RODZAJ NAWIGACJI ZASTOSOWAĆ?
Testy z karteczkami
TREŚĆ NA STRONACH WWW
Cart-sort testing to metoda, która polega na wypisaniu elementów, które mają znaleźć się na naszej stronie na małych karteczkach, a następnie uporządkowanie ich w ramach labu przez testowych użytkowników. Karteczki:
- Układamy obok siebie lub jedna pod drugą - w zależności czy dany element jest podrzędny czy siostrzany
- Nakładamy na siebie jeśli mają należeć do jednej podstrony
- Nad stosikami ułożonymi jedna pod drugą dodajemy na koniec karteczki z tytułami sekcji, które będą obejmowały poszczególne podstrony
Mapa witryny
TREŚĆ NA STRONACH WWW
Mapa witryny to uporządkowany schemat podstron serwisu pogrupowany w sekcje - działy, a także ułożony w odpowiedniej relacji rodzic - dziecko oraz rodzeństwo.
Gratulacje!
Stworzyłeś Projekt Nawigacji
NAWIGACJA W PRAKTYCE
2
Wskazówki do nawigacji
NAWIGACJA NA STRONIE WWW
- Zasada 3 kliknięć jest nieprawdziwa
- Stosuj 7 +- 2 elementy w nawigacji
- Korzystaj z breadcrumbs
- Pamiętaj że kliknięcie to decyzja
- Stosuj spójną nomenklaturę w nawigacji
- Side/secondary nav - footer oraz np. panel logowania
Pionowa czy pozioma?
NAWIGACJA NA STRONIE WWW
Taksonomie i URL-e
TREŚĆ NA STRONACH WWW
Pomyśl o strukturze linków na stronie
Umieść w tytułach i nazwach słowa kluczowe
Pozwól na nawigację w pasku adresu
http://www.adres.pl/kategoria/podkategoria/podkategoria/produkt/
http://www.samochody.pl/osobowe/ferrari/enzo/
PRZYGOTOWANIE TREŚCI
2
TREŚĆ NA STRONACH WWW
PODSTAWA TREŚCI - SPÓJNOŚĆ (GŁOS)
WYZNACZENIE OSÓB ODPOWIEDZIALNYCH ZA TREŚĆ
STWORZENIE HARMONOGRAMU AKTUALIZACJI
JAKIE ZADANIA OBEJMUJĄ ZARZĄDZANIE TREŚCIĄ
WYZNACZENIE OSÓB DO KOREKTY I MODERACJI
JAK BĘDZIE PRZEBIEGAŁO DODAWANIE TREŚCI
Typy treści na stronie WWW
TREŚĆ NA STRONIE WWW
Treść autorska (właściwa)
Najbardziej wartościwa - treści podstron, artykuły, wideo etc.
Treść zagregowana (od innych autorów)
Ładowana z zewnętrznych API, np. artykuły z blogów, posty z Facebook'a
Treść oparta na danych (żyjąca)
Prezentowana na ogół dynamicznie - jak ilość polubień, dane pogodowe etc.
Treść generowana przez użytkowników (UGC)
Komentarze, podpisy, recenzje etc. Prawie darmowa - na ogół wymaga moderacji
Treść zewnętrzna (na ogół social media)
Treści, które generujemy w celach promocyjnych - press release, social media etc.
Treść prawna
Regulaminy, polityka prywatności, umowy z wykonawcami etc.
Repozytorium treści i aktualizacje
PROCES PROJEKTOWANIA
Markdown i inne schematy
TREŚĆ NA STRONACH WWW
Markdown to zyskujący popularność sposób zapisu treści tak, aby można było łatwo i w zautomatyzowany sposób przekształcić je w kod, na przykład HTML.
Warto sprawdzić: http://www.noisli.com/
DEFINIOWANIE PODSTRON
3
Poziomy zagnieżdżenia podstron
TREŚĆ NA STRONACH WWW
HUB
SECTION
DETAIL
Master page
TREŚĆ NA STRONACH WWW
Nagłówek:
- logo
- wyszukiwarka
- menu
Lewa szpalta:
- menu podręczne
Footer:
- notka copyright
- podręczne menu
- dane kontaktowe
- logo
Warto sprawdzić: http://muse.adobe.com
Master page A, B
TREŚĆ NA STRONACH WWW
Nagłówek:
- logo
- wyszukiwarka
- menu
Footer:
- notka copyright
- podręczne menu
- dane kontaktowe
- logo
Gratulacje!
Stworzyłeś Wireframe
Warto sprawdzić: https://moqups.com/
Czym są Wireframe'y?
TREŚĆ NA STRONACH WWW
Struktura strony
Wireframe >> Mockup >> Prototyp
Elementy wizualne
Interakcje
Sposoby tworzenia Wireframe'ów
- Szkicowanie (papier, flipchart)
- Narzędzia graficzne (Photoshop, Illustrator
- Narzędzia do prototypowania np. Balsamiq
- Aplikacje na urządzenia przenośne (Proto)
Warto sprawdzić: https://balsamiq.com/
Podstrona - projekt tekstowy
TREŚĆ NA STRONACH WWW
Projektowanie tekstowe pozwala skupić się na tym, co najważniejsze - czyli na treści na Twojej stronie oraz jej rozmieszczeniu i relacji.
W pierwszych etapach pracy z właściwą treścią zrezygnuj z elementów designu po by niepotrzebnie się nie rozpraszać.
Warto zapamiętać
TREŚĆ NA STRONACH WWW
- Jeśli masz więcej niż 3 typy nagłówków - zrób nową (pod)stronę
- Pierwsze 11 liter ma magiczne znaczenie
- W tytułach nie używaj więcej niż 64 znaków
- Fold ma coraz mniejsze znaczenie
- Używaj jeszcze więcej nagłówków, list, wypunktowań, pauz
- Wyrzuć
niepotrzebnewyrazy
PROTOTYPOWANIE
5
hi-fi kontra lo-fi
PROTOTYPOWANIE
Prototypowanie lo-fidelity to tylko nieco więcej niż Wireframe'y. Poza określeniem położenia elementów na prototypach o małej szczegółowości możemy dodać elementy jak oznaczenie ikon, grafik, pola formularzy etc.
Prototyp hi-fidelity posiada większy stopień złożoności i może przypominać prawie gotową grafikę dla strony WWW, może też zawierać proste interakcje i przejścia.
Prototypy lo-fi można także określić mianem Mockupów
Prototypuj FLOW
Prototypujemy!
PROTOTYPOWANIE
NOWOCZESNE STRONY WWW
Podsumowanie pracy koncepcyjnej
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
CELE BIZNESOWE SERWISU
UŻYTKOWNICY I TESTY
AGREGOWANIE TREŚCI
PRZYGOTOWANIE MAPY STRONY
TWORZENIE WIREFRAMÓW PODSTRON
TWORZENIE MAKIET Z TREŚCIĄ
ROZPISANIE FLOW - PRZEPŁYWÓW
PROTOTYPOWANIE
NOWOCZESNE STRONY WWW
Atomowe komponenty
Grzegorz Róg
@grzegorzrog
Nie tworzymy stron WWW - projektujemy systemy oparte o komponenty.
Projektowanie w oparciu o atomy
ATOMOWE KOMPONENTY
Atomy
Molekuły
Organizm
Atomy
ATOMOWE KOMPONENTY
Najmniejsze elementy projektowe, które stanowią fundament mechanizmów funkcjonowania strony WWW.
Przykładowe atomy:
- pole wyszukiwania
- logotyp
- label
- ikona
- obrazek
- ...
Molekuły
ATOMOWE KOMPONENTY
Atomy tworzą spójną całość jaką są molekuły - większe całości tworzące spójną, sensowną całość, mogące występować w obrębie naszej witryny w różnych miejsc
Przykładowe atomy:
- wyszukiwarka
- avatar z nazwą użytkownika
- kafelek ze zdjęciem i opisem
- ...
Organizm
ATOMOWE KOMPONENTY
https://dribbble.com/manyo
Molekuły składają się na gotową całość, jaką jest strona w ramach Twojego serwisu WWW. Myśląc o każdym z elementów serwisu w kontekście odrębnego molekułu pozwala projektować a także zmieniać interfejsy stron WWW w sposób elastyczny.
Technologia, która jako pierwsza umożliwiła tego typu myślenie jest CSS, dzięki któremu możemy oddzielić warstwę dokumentu (markup - HTML) od warstwy prezentacji (stylów - CSS).
Graficzne biblioteki komponentów
ATOMOWE KOMPONENTY
Wykorzystanie bibliotek Adobe Creative Cloud pozwala na sprawną organizację komponentów w aplikacjach graficznych oraz ich współdzielenie w obrębie aplikacji Adobe.
Zalety:
- Dowolność twórcza
- Kompatybilne między aplikacjami CC
Wady:
- Tworzone jedynie przez grafików
- Konieczność implementacji
- Czasochłonność
Rozwiązania bazujące na HTML/CSS
ATOMOWE KOMPONENTY
Istnieje wiele narzędzi, które dają nam możliwość projektowania bezpośrednio w przeglądarce. Dzięki temu możemy łatwo przetestować komponenty
Zalety:
- Ograniczenia technologii
- Łatwość tworzenia dla każdego
- Gotowy kod aplikacji
- Oszczędność czasu
Wady:
- Pewne narzucone rozwiązania
- Podstawy kodowania mile widziane
Gratulacje!
Stworzyłeś Style Guide
Warto sprawdzić: http://styleguides.io/examples.html
Czym jest Style Guide?
ATOMOWE KOMPONENTY
Style Guide - Przykłady
ATOMOWE KOMPONENTY
- https://dribbble.com/shots/1669299-Airbnb-UI-Toolkit-Web/attachments/263198
- https://ratnacahayarina.files.wordpress.com/2014/03/kfc.pdf
- http://www.bbc.co.uk/gel
- https://www.mozilla.org/en-US/styleguide/websites/sandstone/
- https://disqus.com/pages/style-guide/#logo
- http://brand.uber.com/typography/hierarchy/#about
- http://fbrctr.github.io/
- https://frontify.com/styleguide
- http://bjankord.github.io/Style-Guide-Boilerplate/
NOWOCZESNE STRONY WWW
Liczy się styl!
Grzegorz Róg
@grzegorzrog
"Proszę pokazać projekty,
które się Panu podobają"
...czyli Moodboard
Warto sprawdzić: http://www.gomoodboard.com/
Pomysłowe kafelki
LICZY SIĘ STYL
NOWOCZESNE STRONY WWW
Język projektowania - współczesne trendy
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
Grafika na stronach WWW
Grzegorz Róg
@grzegorzrog
Formaty grafiki
GRAFIKA NA STRONACH WWW
SVG
jpg / png
Aplikacje graficzne
GRAFIKA NA STRONACH WWW
.psd
.ai
.sketch
Skalowanie bitmap
GRAFIKA NA STRONY WWW
Zapamiętaj!
GRAFIKA NA STRONY WWW
Jeśli to możliwe, korzystaj z wektorów - unikaj bitmap
Pamiętaj o przekazaniu plików edycyjnych do projektu
Pamiętaj o skalowaniu grafiki i różnych rozdzielczościach
Uważaj na aplikacje które nie są branżowym standardem
Więcej w części o Optymalizacji
NOWOCZESNE STRONY WWW
Projektowanie w oparciu
o zasoby
Grzegorz Róg
@grzegorzrog
UI Kits
PROJEKTOWANIE W OPARCIU O ZASOBY
Stockowe fotografie
PROJEKTOWANIE W OPARCIU O ZASOBY
Ikony
PROJEKTOWANIE W OPARCIU O ZASOBY
Gotowe szablony
PROJEKTOWANIE W OPARCIU O ZASOBY
Zalety
Przyspiesza pracę
Mniejszy budżet
Doświadczenie innych
Brak unikalności
Trudność w adaptacji
Brak kompletnych źródeł
Wady
NOWOCZESNE STRONY WWW
Typografia w sieci
Grzegorz Róg
@grzegorzrog
NAZEWNICTWO
Font
Czcionka
Krój pisma
Warto sprawdzić:
Hierarchia dzięki typografii
TYPOGRAFIA W SIECI
Nagłówek 1
Nagłówek 2
Nagłówek 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur venenatis tortor et efficitur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nec venenatis eros. Mauris sagittis, augue a fermentum tempus, arcu velit facilisis nunc, id dictum dolor nibh non turpis. Morbi augue nulla, luctus nec massa eu, aliquam vestibulum massa.
Sed pulvinar magna ac quam auctor, quis semper lorem suscipit. Nam ut lacinia odio. Mauris eget mattis felis. Fusce commodo nisi dui, non imperdiet mauris tincidunt quis. Cras ac vulputate libero. Phasellus id turpis mi. Curabitur ullamcorper nec erat nec suscipit.
Skąd przeglądarka bierze fonty?
TYPOGRAFIA W SIECI
Fonty, które renderuje przeglądarka, są domyślnie zaczytywane z systemu użytkownika, co oznacza, że muszą być zainstalowane, aby poprawnie wyświetlały się na stronie WWW.
Na stronie możemy podać wiele rodzin, które będą wykorzystane jako tzw. fallback, lub skorzystać z generycznych _sans i _serif
Wyświetlanie fontów z CSS
TYPOGRAFIA W SIECI
Bezpieczne fonty
TYPOGRAFIA W SIECI
Arial
Courier New, Courier
Garamond
Georgia
Lucida
Tahoma
Times New Roman, Times
Trebuchet
Verdana
Palatino
Bezpiecznych webowych fontów możesz używać bez przeszkód na każdej stronie i w każdej aplikacji, ponieważ są one preinstalowane w systemie użytkownika, a co za tym idzie, będą poprawnie wyświetlały się bez konieczności dołączania ich do strony na każdej platformie.
Często stosuje się ten zestaw fontów jako tzw. fallback. Są one także poprawnie renderowane w klientach pocztowych.
Reguła @font-face
TYPOGRAFIA NA STRONACH WWW
Jak korzystać?
Możesz wykorzystać regułę @font-face, aby osadzić dowolny font, który posiadasz, na Twojej stronie WWW
Pamiętaj!
Muszą na to zezwalać zapisy licencyjne danego fonta
Hostowane fonty
TYPOGRAFIA NA STRONACH WWW
Osadzanie fontów
Fonty hostowane najczęściej korzystają z fragmentu kodu JavaScript na naszej stronie.
Wykorzystanie web vs desktop
Pamiętaj o tym że aby projektować interfejs, musisz mieć font zainstalowany w systemie.
Warto sprawdzić: fonts.google.com typekit.com webtype.com typography.com
KERNING
PODSTAWOWE POJĘCIA
Odległość pomiędzy jedną parą znaków
TRACKING
Odległość pomiędzy wszystkimi parami znaków
LEDING (INTERLINIA)
Odległość pomiędzy wierszami tekstu
WYRÓWNANIE
Do prawej, lewej strony i justowanie
Rytm - Grid
FONTY NA STRONACH WWW
Warto sprawdzić: gridlover.com/app
Długość linii tekstu
FONTY NA STRONACH WWW
Warto sprawdzić: http://www.microsoft.com/typography/ctfonts/wordrecognition.aspx
Rozmiary fontu na stronie
TYPOGRAFIA NA STRONACH WWW
16px = 1em
rem?
TYPE RAMP
FONTY NA STRONACH WWW
Określa rytm fontów na stronie WWW - nie jest w żaden sposób narzucony, jednak różne języki projektowania zawierają podpowiedzi dotyczące wykorzystania popularnych krojów.
Type Ramp może być także elementem księgi znaku, jeśli projektujesz dla zleceniodawcy.
1.61803399...
TYPOGRAFIA NA STRONACH WWW
Rytm w typografii interfejsu można określić biorąc pod uwagę pewne uniwersalne zasady, takie jak złoty podział, lub inne matematycznie zbliżone do ideału.
Warto sprawdzić narzędzia:
FONTY NA STRONACH WWW
Czym jest Open Type?
Warto sprawdzić: http://clagnut.com/sandbox/css3/
Czym są
Icon Fonty?
TYPOGRAFIA NA STRONACH WWW
Przegląd fontów
TYPOGRAFIA NA STRONACH WWW
Pobierz fonty Google z https://github.com/google/fonts/
- Open Sans
- Lato
- Ubuntu
- Droid
- PT Mono
- Roboto
- Gravitas One
- PT Serif
- Old Standard TT
Pozostałe (sprawdź myfonts.com/topwebfonts/)
- Proxima Nova
- Museo sans
- Futura
- Sofia Pro
- San Francisco (iOS/Mac)
- Avenir
- Frutiger
- Gill Sans
Dodatkowe wskazówki
FONTY NA STRONACH WWW
Czytanie na ekranie jest trudne. Zadbaj o wysoki kontrast.
Nie używaj WIELKICH LITER poza nagłówkami
Fonty sans i serif czyta się równie wygodnie
Długie linie sprzyjają szybkiemu czytaniu, ale ludzie wolą krótsze
Rozbijaj tekst na wersy, korzystaj z wypunktowań
Największy komfort zapewnia linia 40-60 znaków
Pamiętaj, aby treść była wartościowa!
... jeszcze więcej wskazówek ;)
FONTY NA STRONACH WWW
Traktuj słowa w tekście jak cegiełki, korzystaj z lorem ipsum
Odstępy w tekście są jak pauzy, zaczerpnięcie powietrza
Im mniejszy font wybierzesz, tym większe odstępy są potrzebne
Zadbaj o odpowiednią kolorystykę dla różnych urządzeń
Jeśli nie musisz - nie baw się kerningiem ;)
Pamiętaj o różnych orientacjach na urządzeniach mobilnych
NOWOCZESNE STRONY WWW
Kolory w sieci
Grzegorz Róg
@grzegorzrog
Ile kolorów ma Internet?
KOLORY W SIECI
Prehistoria - 256 kolorów (bezpieczna paleta webowa)
Teraz - przynajmniej 16,8 mln kolorów (98% użytkowników w 2014)
1 bit = 2 kolory (czarny / biały)
2 bit = 2*2 = 4, 4 bit = 2*2*2*2 = 16 etc, 8 bit = 256
Notacja
KOLORY W SIECI
System heksadecymalny = szesnastkowy
#RRGGBB
0-9 / A-F
https://en.wikipedia.org/wiki/Web_colors
Notacja w CSS
KOLORY W SIECI
Czym jest koło kolorów?
KOLORY W SIECI
Rok 1666 - Isaac Newton dokumentuje pryzmat kolorów białego światła w postaci koła.
Primary colors
Secondary colors
Tertiary colors
Żółty, niebieski, czerwony
Powstały ze zmieszania kolorów podstawowych
Powstały ze zmieszania kolorów podstawowych
z najbliższym kolorem dopełniającym
Zasady koła kolorów
KOLORY W SIECI
Warto sprawdzić: https://color.adobe.com
Profile kolorystyczne i kalibracja
KOLORY W SIECI
Kalibracja sprzętowa
Kalibracja software'owa
sRGB
Wskazówki do kolorów i kalibracji
KOLORY W SIECI
Zawsze korzystaj z profilu sRGB do sieci
Pamiętaj o opcji proof colors w oprogramowaniu
Ustaw gammę w monitorze na 2.2
Ustaw profil kolorów w oprogramowaniu na sRGB
Ustaw temperaturę raczej na 6500K niż 5500K
Uważaj na odcienie szarości w projekcie
Więcej o kalibracji sprzętowej:
Czerwony
miłość
ważne
ostrzeżenie
Żółty
uwaga
optymizm
szczęście, zabawa
Pomarańczowy
entuzjazm
kreatywność
ciepło
ambicja
Różowy
Młodość
pasja, romans
wrażliwość
delikatność
Zielony
sukces, szczęście
natura
bezpieczeństwo
Niebieski
zaufanie, honor
profesjonalizm
spokój, harmonia
Filolet
spokój, ciepło
wartość, nobliwość
moc, duchowość
Zapamiętaj
KOLORY W SIECI
Korzystaj z narzędzi takich jak Adobe Color
Twórz własne biblioteki kolorów oraz fotografuj schematy
Kolory przeciwstawne będą zawsze wizualnie atrakcyjne
Zachowaj kontrast dla większej czytelności
Stosuj kontrast aby przyciągnąć uwagę użytkownika
Eksperymentuj (tylko jeśli wiesz co robisz;)
Pamiętaj o profilach kolorów i kalibracji monitora
NOWOCZESNE STRONY WWW
Grid - projektowanie w oparciu o siatkę
Grzegorz Róg
@grzegorzrog
International Typographic Style - Swiss
Warto sprawdzić: https://goo.gl/J8qfdz
Różne zastosowania siatki
PROJEKTOWANIE W OPARCIU O SIATKĘ
Podstawowe zalety
PROJEKTOWANIE W OPARCIU O SIATKĘ
Warto sprawdzić: http://gridsetapp.com
Stabilny layout
Przewidywalna długość linii
Łatwa implementacja
Frameworki
i wytyczne projektowe
PROJEKTOWANIE W OPARCIU O GRID
Bootstrap
Foundation
%
Fluid Grid
Zapamiętaj!
PROJEKTOWANIE W OPARCIU O GRID
Siatkę stosujemy aby zachować spójny układ i proporcje
Grid możesz ustalić samodzielnie i trzymać się określonych wartości
Tak zwany Fluid Grid jest korzystny w przypadku skalowania stron
Siatka pozwala zachować rytm w treści na stronie WWW
Siatkę możesz ustawić w każdej aplikacji do projektowania
Frameworki wykorzystują grid do systematyzowania struktury
Nie bój się eksperymentować!
NOWOCZESNE STRONY WWW
Narzędzia wspomagające proces - jak czytać kod?
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
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
KANAŁY KOMUNIKACJI
1
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.
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.
O krok dalej z aplikacjami graficznymi...
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.
NOWOCZESNE STRONY WWW
Wydajność stron WWW
Grzegorz Róg
@grzegorzrog
NOWOCZESNE STRONY WWW
Promocja i pozycjonowanie
Grzegorz Róg
@grzegorzrog
Nowoczesny Web Design
By eduweb
