Nowoczesny Webdesign: Dlaczego korzystać z Mobile First?
Projektowanie stron i UI/UX
11 godz. 24 min · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Mobile First i RWD – Najlepsze Praktyki
- Praca koncepcyjna - UX, Uzytkownicy, Prototypowanie
- Grafika i UI strony WWW – Narzedzia, Formaty
- Typografia na stronach WWW
- Najlepsze, inspirujace przyklady serwisów
- Architektura Informacji i Nawigacja
- Optymalizacja stron WWW
- Praca w Zespole - Praktyczne Narzedzia
- Wstep do SEO - Pozycjonowanie i Promocja
- I wiele wiecej!
Technologie w sieci - Pojęcia
Poznasz podstawowe zagadnienia związane z funkcjonowaniem stron WWW w sieci - porozmawiamy o przeglądarce, domenach oraz DNS, wyborze odpowiedniego dostawcy usług hostingowych i najważniejszych parametrach na które należy zwrócić uwagę aby nasza strona WWW mogła skalować się wraz ze wzrostem ruchu. Powiem też o tym jak wygląda podział ról w procesie projektowania a także poznamy podstawowe pojęcia jak serwer i client-side oraz ich najważniejsze technologie html css js, pomówimy o blibliotekach i frameworkach, bazach danych i technologiach serwerowych jak asp net i php. Ta część głównie kierowana jest do osób które stawiają swoje pierwsze kroki w webdesignie i stanowi dopełnienie całego materiału.
Mobile first
Czy wiesz, że aż 25% ludzi na świecie korzysta wyłącznie z urządzeń mobilnych do przeglądania sieci? W tej części kursu będziesz miał okazję zainspirować się nowym podejściem do projektowania w związku ze zmieniającym się ekosystemem urządzeń i technologii mobilnych. Dowiesz się czym jest podejście mobile first oraz jakie są zalety rozpoczęcia procesu projektowego od małych ekranów. Poznasz też aktualne kierunki i trendy związane z wykorzystaniem IOT oraz VR i sensorów. Sprawdzimy statystyki i przygotujemy się do praktycznych aspektów projektowania na wiele ekranów, czyli…
Responsive Web Design
Projektowanie jako proces
Współczesny proces tworzenia serwisów, czy raczej aplikacji internetowych w ciągu ostatnich lat ewoluował w kierunku sprawnego dostarczania rezultatów i realizacji celów biznesowych w rekordowym czasie. W kursie omówimy dokładnie nowe podejście, wspominając także o metodologii Agile i podejściu Scrum, które z odpowiednimi modyfikacjami zastosujesz do każdego serwisu - niezależnie, czy tworzy go duży zespół osób, czy tylko grafik i programista. Jeśli słyszałeś o Agile UX i Lean UX to prawdopodobnie zainteresuje Cię to w jaki sposób zorganizować pracę tak aby przebiegała ona z nakierowaniem na rezultat. Powiem Ci też jak niemal całkowicie zrezygnować z przestarzałej dokumentacji na rzecz aktywnego angażowania zespołu i właściciela projektu.
Podstawy pracy koncepcyjnej
Kurs, który masz przed sobą prowadzi Cię w sposób spójny i zrozumiały po kolejnych etapach procesu projektowania stron WWW. Ma on stanowić kompletne źródło wiedzy, do którego będziesz wracał w różnych fazach swoich projektów. Dlatego kolejnym działem jest wyjaśnienie zagadnienia pracy koncepcyjnej i jego pierwszego etapu jakim jest definicja celów oraz stworzenie modelu biznesowego dla powstającej witryny. Pokażę Ci jak zdefiniować cele, akcje oraz funkcje serwisu i jak powinien przebiegać podział tych elementów w fazie koncepcyjnej.
Użytkownicy i testy
Kolejnym etapem pracy będzie zweryfikowanie tego, czy cele biznesowe serwisu odpowiadają zapotrzebowaniu oraz specyficznym wymaganiom użytkowników. Powiem Ci jak małym nakładem czasu przeprowadzić testy na użytkownikach i wyjaśnię, dlaczego są potrzebne w fazie koncepcyjnej. Zdefiniujemy także użytkowników, do których chcemy kierować swój serwis a także stworzymy persony, które będą towarzyszyć nam podczas kreowania strategii treści dla serwisu.
Treść i architektura informacji na stronie WWW
Ta obszerna część kursu obejmuje niezwykle ważny etap pracy koncepcyjnej, w ramach którego najpierw opracujemy schemat i architekturę treści dla naszego serwisu a następnie zbudujemy relację podstron witryny tworząc tym samym tzw. Sitemapę. Przy okazji pokażę Ci mnóstwo ciekawych narzędzi wspierających ten proces. Zajmiemy się kolejno hierarchią treści i podstron budując tym samym nawigację na naszej stronie. Pokażę Ci także szereg praktycznych, nowoczesnych rozwiązań związanych z nawigacją w serwisie.Kolejno zajmiemy się tworzeniem wizualnego schematu witryny a naszą pracę rozpoczniemy od prostych Wireframe'ów oraz projektowania w oparciu o tekst, by przejść do coraz bardziej zaawansowanych technik pracując nad mockupami oraz prototypami serwisu. Pokażę Ci szereg rozwiązań i narzędzi które będą pomocne również do tworzenia interaktywnych prototypów takich jak UX Pin, Invision czy Adobe Muse.Zbudujemy też tzw. Content Inventory, czyli repozytorium treści, które znajdą się w serwisie. Poznasz sposoby na jego łatwą aktualizację oraz narzędzia chmurowe, które pozwolą na zdalną współpracę nad treścią z innymi autorami.
Atomowe komponenty
Zamiast tworzenia klasycznych stron WWW opartych o podstrony, zaproponuję Ci zupełnie nowe podejście bazujące na tworzeniu systemów opartych o komponenty. Poznasz atomy oraz molekuły tworzące gotowy organizm i strony Twojego serwisu i odkryjesz mnóstwo zalet takiego podejścia, które znacznie odciąży Twój serwis i sprawi, że będziesz mógł go łatwo skalować. Pomówimy o graficznych bibliotekach komponentów oraz ich organizacji a także rozwiązaniach opartych o przeglądarkę i HTML oraz CSS. Dowiesz się czym jest Style Guide i jak stworzyć uniwersalne wytyczne do komponentów w Twoim serwisie. Pokażę Ci też najlepiej przygotowane przykłady Style Guide.
Liczy się styl!
Kolejną część kursu poświęcimy na omówienie praktycznych zagadnień związanych z poszukiwaniem inspiracji stylistycznych do projektu. Pokażę Ci narzędzia, które pozwolą w łatwy sposób gromadzić inspiracje w postaci zasobów i tablic a następnie na ich podstawie stworzymy wytyczne do zaprojektowania graficznego UI serwisu. Dowiesz się czym są Style Tiles i dlaczego warto tą część procesu zaplanować w odpowiednim czasie.
BONUS! Inspirujące Strony WWW - Trendy 2016
To nie wszystko! Jako bonus do tego kursu otrzymasz ponad godzinną lekcję z przeglądem setek serwisów WWW, które zainspirują Cię do dalszej pracy. Przyjrzymy się aktualnym trendom w projektowaniu takim jak Flat UI czy Material Design. Będziesz miał okazję obejrzeć najlepiej zaprojektowane serwisy na Świecie i dowiedzieć się, co sprawia że ich UI i UX są wyjątkowe. To nie wszystko! W ramach kursu otrzymasz darmowe aktualizacje tego materiału w każdym roku tak, abyś mógł dopasować się do zmieniających się trendów!
Grafika na stronach WWW
W kolejnej części kursu porozmawiamy o nowych trendach w zakresie przygotowywania i optymalizacji na strony WWW. Dowiesz się jakie są popularne formaty grafiki, jak możemy zastąpić ją z pomocą typografii czy elementów CSS3 a także jak przygotować pliki na Twoją stronę WWW. Dowiesz się też jak pracować z formatem SVG i popularnymi bibliotekami wspomagającymi pracę z grafiką.Porozmawiamy także o projektowaniu w oparciu o zasoby - przekażę Ci mnóstwo linków do darmowych zasobów jak grafiki - zdjęcia, ikony, czy gotowe zestawy UI przygotowane dla Photoshop, Sketch czy Illustrator, tak abyś mógł pracować wydajniej mając do dyspozycji świetnej jakości źródła.
Typografia w sieci
Kolory w sieci i Grid
Kolejna część dotyczy kolorystyki na stronach WWW oraz siatki - poznasz właściwe zastosowania kolorów oraz dowiesz się jak działa psychologia kolorów. Pokażę Ci także szereg narzędzi, które ułatwią i pomogą w wyborze kolorystyki na stronę WWW. Poza tym będziemy także pracować w oparciu o siatkę jako jeden z kanonów projektowania, który łatwo zrozumiesz dzięki aplikacjom optymalizującym pracę na gridzie.
Praca w zespole
Z kursu dowiesz się także jak skutecznie pracować w zespole. Nieważne, czy jest to zespół składający się z kilkunastu osób pracujących zdalnie, czy z dwóch które ściśle ze sobą współpracują - pokażę Ci jak zautomatyzować procesy oraz jak zarządzać skuteczną komunikacją w zespole z wykorzystaniem nowych, ciekawych narzędzi. Automatyzatory zadań, repozytoria plików, praca w oparciu o chmurę czy biblioteki CC, Slack, OneDrive i wiele innych narzędzi pomoże Ci zrealizować sprawnie zadania projektowe w ramach nowego procesu Parallel Design.
Wydajność stron WWW
Promocja i pozycjonowanie
Ostatnia część kursu stanowi wprowadzenie do nowoczesnego SEO, czyli optymalizacji strony pod kątem indeksowania w wyszukiwarkach. Poznasz elementarne składowe procesu zarządzania indeksowaniem oraz sposoby na monitorowanie i analitykę Twojej strony pod tym kątem. Poza tym, będziemy także mówić o promocji strony w sieci, gdzie poznasz podstawowe kanały, którymi warto obecnie docierać do Twoich odbiorców.Jako bonus do kursu znajdziesz również wzory prawidłowo skonstruowanych dokumentów!
Podsumowując, dowiesz się między innymi:
- Wprowadzenie do webdesignu i podstawowe pojęcia
- Proces projektowania stron WWW
- Mobile First jako nowoczesne podejście do projektowania
- Responsive Web Design – najlepsze praktyki
- Praca koncepcyjna nad serwisem
- Grafika na strony WWW – narzędzia, formaty i wiele więcej
- Typografia na stronach WWW
- Narzędzia wspierające proces kreatywny
- Najlepsze przykłady serwisów i rozwiązań
- Nawigacja na stronach WWW
- Optymalizacja stron WWW
- Praca w zespole i ciekawe narzędzia
- Wstęp do pozycjonowania i promocji
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs jest przeznaczony dla wszystkich osób, które pracują ze stronami WWW - grafików, programistów, koderów, a także osób które kierują projektami webowymi lub odpowiadają za ich ousourcing w firmach. Jeśli chcesz dowiedzieć się, jak funkcjonują nowoczesne strony WWW - ten kurs jest właśnie dla Ciebie!
Witaj w kolejnej lekcji, kontynuujemy temat Mobile first i teraz chciałbym przejść do najważniejszego,
czyli nie do statystyk, a do tego jakie są zalety podejścia Mobile first i dlaczego powinniśmy je stosować
nawet wtedy, kiedy wiemy, że jeszcze na naszym rynku tych urządzeń mobilnych nie ma więcej jeśli chodzi
o ich ruch w internecie niż desktopów.
To się zmieni, ale zalety Mobile first leżą gdzieś indziej. Leżą one w samej koncepcji i podejściu do
projektowania, które pozwala nam skoncentrować się na najważniejszych funkcjonalnościach w pierwszej kolejności.
Zauważyłem w praktyce, że projektując i myśląc o tym jak ma wyglądać nasz serwis, jeżeli zaczynamy od
najmniejszego ekranu to koncentrujemy się na tych Core, na tych najważniejszych funkcjonalnościach, które
powinny się znaleźć i tym samym determinujemy pewne cele i zadania, które ma mieć nasza strona internetowa.
W przeciwieństwie do dużego ekranu, gdzie staramy się wcisnąć jak najwięcej informacji, tutaj tak naprawdę
koncentrujemy się na tym co jest esencją i pozwala nam to się dobrze nastawić do dalszego procesu projektowania.
Dlaczego tak robimy? Oczywiście dlatego, że mamy po prostu mało miejsca do zagospodarowania na ekranie
takiego telefonu, a poza tym mamy świadomość tego, że na urządzeniach mobilnych użytkownicy, chociaż nie
jest to do końca prawda,
ale tak się utarło, że krócej korzystają z tych naszych serwisów, więc chcemy szybciej dostarczyć w małej
przystępnej formie skondensowane informacje.
I to jest niezwykle istotne
to jest zaleta, która przemawia za Mobile first bardzo mocno.
Ponadto łatwiej jest dodawać niż odejmować, nie tylko w tym kontekście, ale również w kontekście pisania
kodu.
Zdecydowanie prościej jest programiście - i zapytaj każdego Front czy Back-End Developera o to, że łatwiej jest zacząć
od małego ekranu, a następnie dopisywać, rozszerzać funkcjonalności dopisywać, metody, funkcje, klasy do
naszego projektu niż robić na odwrót, czyli mam do dyspozycji całą gotową stronę i teraz trzeba od niej
zabrać te rzeczy aby była ona dopasowana do małego ekranu.
Zrobiliśmy praktyczny test korzystając z tego samego projektu. Staraliśmy się odjąć z jednej strony, a
z drugiej strony dodać do aplikacji i przynajmniej jest to również różnica kilkuset czy nawet więcej
linii kodu.
Ponieważ odejmując nie jesteśmy w stanie optymalnie zaprojektować tego co ma znaleźć się na małym ekranie
zatem będzie to też wzrost szybkości dla Twojej strony no i oczywiście oszczędność czasu dla programistów.
Ponadto możesz łatwiej skoncentrować się na właściwej hierarchii informacji, czyli w skrócie skoncentrować
się na tym co powinniśmy użytkownikowi zaprezentować jako pierwszą, najważniejszą rzecz, a te mniej ważne
informacje dodajemy dopiero w fazie tabletowej i desktopowej.
Następnie, jeszcze mam tutaj jeden wykres, w zasadzie który oferuje nam porównanie danych głosowych i
danych transferowanych przez przeglądarkę czy przez właśnie tych danych internetowych gdzie korzystają użytkownicy
urządzeń mobilnych.
Zauważ, że dane głosowe są na tym samym małym poziomie.
Natomiast jeśli chodzi o transfer danych to ogromnie on rośnie i to w sumie może prowadzić nas do pytania
kiedy w końcu przestaniemy telefon nazywać telefonem, że służy on do dzwonienia ponieważ jest to urządzenie,
które w zdecydowanej mierze robi zdecydowanie inne rzeczy.
Jeśli chodzi o taki fajny cytat, który można tutaj przywołać to jest to cytat po angielsku,
ale myślę że jego angielski wydźwięk doskonale ilustruje to jak powinno wyglądać, jak powinien wyglądać
proces Mobile first.
Nie chodzi o to żeby zrobić coś co już mamy mniejszym, żeby wszystkie funkcjonalności, które mamy w wersji
desktopowej przenieść na malutki ekran.
Podejście Mobile first jest zupełnie inne.
Chodzi o to żeby inaczej w ogóle zacząć myśleć o małym ekranie, a inaczej o np. desktopie.
Dlaczego?
Dlatego, że również zupełnie inny jest rodzaj interakcji między użytkownikiem, a takim ekranem.
Zwykle na telefonie korzystamy np. z gestów czy korzystamy z dotyku.
Natomiast w desktopach mamy zdecydowanie bardziej precyzyjny wskaźnik jakim jest mysz.
W związku z tym nasze decyzje projektowe, także w kontekście tego jak ma być skonstruowany layout, w
dużej mierze zależą od tego, czy to jest mobile czy to jest desktop.
Ale nie robimy tak, że wszystko to samo chcemy upchnąć na jednym i drugim.
Następnie ważna rzecz i znów, wybacz, że frazy są po angielsku, ale myślę, że to będzie zdecydowanie bardziej
przydatne.
Z tego powodu, że nawet jeżeli w Google wpiszesz sobie te frazy to otrzymasz mnóstwo wyników, natomiast nie ma dobrego
tłumaczenia na polski, ale dokładnie wytłumaczę Ci co oznaczają dwa tak naprawdę podejścia do projektowania
Progressive enchancement kontra Graceful degradation. Progressive Enchancement
to jest technika, w której rozpoczynamy od najmniejszego ekranu i dodajemy funkcjonalności oraz treści w
miarę powiększania rozdzielczości, czyli jest to ucieleśnienie mobile first.
Tego o czym mówiłem wcześniej, gdzie największe zalety to tak jak wspomnieliśmy, skupiamy się na najważniejszych
elementach, skupiamy się na Mobile, który też jest trendem, który zaczyna dominować na rynku.
No i oczywiście mamy łatwość implementacji,
to jest to o czym mówiłem pod kątem odejmowania i dodawania kodu.
Natomiast wadą jest pewna trudność przestawienia się.
Zauważyłem, że jest to największy problem, zarówno po stronie developerów i osób, które do tej pory projektowały
strony zawsze zaczynając od desktopu, ale również dla klientów, dlatego podrzucam Ci te zalety, które wymieniłem
wcześniej,
po to żebyś mógł łatwo przekonać klienta, że rzeczywiście podejście Mobile first jest właściwe dlatego,
że nie spotkałem jeszcze nikogo kto przychodzi do mnie i chce wykonać stronę internetową i myśli o niej
jak o stronie mobilnej, żeby zaczynać od tego ekranu mobilnego zawsze ma gdzieś przed oczami wizję dużego,
panoramicznego monitora albo nawet telewizora.
Natomiast Graceful degradation, w przeciwieństwie do Progressive enchancement, to jest technika, która polega
na rozpoczęciu od najbardziej skomplikowanego layoutu, od największej dostępnej przestrzeni, od upchania
tam największej ilości funkcji, po to żeby jak gdyby zamknąć ten worek, żeby powiedzieć to jest wszystko
co chcemy mieć nic więcej
i teraz od tego odejmujemy.
Czyli zaletą jest zebranie na początek wszystkich rzeczy, które chcemy zrobić, no ale wad jest zdecydowanie
więcej.
Czyli marginalizowanie wersji mobilnych, trudności w implementacji tak jak powiedziałem, trudność w rozbudowie
contentu, ponieważ musimy z tego contentu zabierać
i znowu tutaj łatwiej jest dodawać niż odejmować.
No i brak zorientowana na te najważniejsze funkcje, które mamy od początku myśląc o tym projekcie mobilnym.
Więc technika Graceful degradation
dla mnie nie jest techniką dobrą, zdecydowanie powinniśmy korzystać z Progressive enchancement. Antoine de
Saint-Exupéry, który jest jednym z moich ulubionych autorów powiedział kiedyś, to jest mój bardzo luźny przekład.
W zasadzie chodzi tutaj o wydobycie tej idei.
Powiedział o tym, że nie sztuką jest sprawić, że nic się już więcej nie da dodać, ale sztuką jest sprawić, że
nic więcej nie da się już odjąć.
I to jest praktycznie cała technika Progressive enchancement
i z tego powinniśmy korzystać.
To jest Mobile first.
To jest nowoczesne podejście do projektowania. Czym jest jeszcze w tym kontekście Linear Design?
Bo mając przed oczami ekran telefonu, jak widzisz ten ekran jest, on nie do końca ma wyznaczone granice
w pionie, on ma wyznaczone na pewno granice jeśli chodzi o horyzontalną oś.
Czyli nie będziemy tutaj scrollować na boki na pewno,
ale jeżeli chodzi o scrollowanie góra-dół absolutnie nie ma z tym żadnego problemu i chcę żebyś zrozumiał
Linear Design jako tworzenie interfejsów, które skalują się w dół.
Że to jest dobre, że pozwala to zachować pewną strukturę, hierarchię treści.
Czyli na górze zawsze umieszczamy to co jest najważniejsze, ale nie bój się tego żeby powyżej tego co
widzi użytkownik otwierając Twoją stronę, żeby poniżej tego były
może nie tak ważne treści, ale żeby znalazły się treści uzupełniające.
Uwierz mi proszę, użytkownicy lubią scrollować, lubią dotykać swoich telefonów, po to jest ten interfejs
żeby z niego korzystać, bawić się przesuwaniem tej strony góra-dół.
I absolutnie nie mają z tym żadnego problemu.
Pamiętaj jednak, że o ile właśnie takie przewijanie jest kontynuacją tego co robimy, to kliknięcie polega
już na decyzji.
Czyli żeby wejść gdzieś dalej w głąb naszego serwisu, użytkownik musi kliknąć czyli tapnąć w jakiś link
i to już jest decyzja.
Czasem tą decyzję jest trudno użytkownikowi podjąć z tego powodu, że np. nie wie co jest za tym linkiem. Czy
tam jest strona, która wygląda równie dobrze, czy tam jest strona która ładuje się szybko czy potrwa to pół
godziny i będzie musiał wracać i znowu czekać na załadowanie contentu, w którym jest. W związku z tym
morał z tego taki, że jeśli chodzi o podejście Mobile first i urządzenia przenośne, staraj się jak najwięcej
treści umieszczać na jednej stronie.
Oczywiście nie mówię żeby tu niepotrzebnie je rozbudowywać, bo to też wpływa na szybkość ładowania, ale
nie ma sensu dzielić tego na jakieś osobne rzeczy,
jeżeli możesz zaoferować użytkownikowi płynne przejścia w postaci scrollowania góra-dół. Ok myślę,
że to tyle jeśli chodzi o te najważniejsze rzeczy, które mogą skłonić Cię do myślenia o swoim nowym projekcie
w kontekście Mobile first i Progressive Enchancement.
Polecam te rzeczy, a w kolejnej lekcji i będziemy jeszcze rozmawiać o podejściu Mobile first i o pewnym
innym schematach zachowania użytkowników na urządzeniach mobilnych.
Do usłyszenia.