Projektowanie stron i UI/UX
11 godz. 24 min · UI, UX i Webdesign
Grzegorz RógIdea ArchitectPoznasz 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.
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…
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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!
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, ostatniej już lekcji w dziale o wydajności, w której będę chciał krótko podsumować to
czego udało nam się nauczyć w kilku poprzednich lekcjach.
Po pierwsze, pamiętaj o tym aby analizować statystyki swojej strony, a także analizować to jak Twoja strona
działa i generuje się pod różnymi np. prędkościami łącz internetowych.
To było to testowanie z pomocą narzędzi developerskich, o których mówiłem.
Ponadto warto testować również za pomocą narzędzi, które pozwalają testować wydajność. To jest konkretnie
to narzędzie Google Speed Insights, które Ci poleciałem, na pewno warto przetestować i spełnić te wszystkie wymogi,
które Google dla nas tam nakłada. Korzystaj z sieci CDN oraz z cache'u.
Po pierwsze z cache'u po stronie przeglądarki, ale po drugie, również, czyli tutaj mam akurat konkretny header, który należy
stosować, header Expires,
natomiast z drugiej strony, korzystaj też proszę z tego cache'u serwerowego, który pozwoli te Twoje bardziej
dynamiczne strony, które rzadziej się zmieniają, zcache'ować tak, aby były szybciej dostarczalne do użytkownika. Sieć
CDN,
mam tutaj na myśli zarówno hostowane skrypty, takie jak pokazywałem na przykładzie CDN'a jQuery,
ale również CDN Twojego hosting, który pozwoli Twoją witrynę zcache'ować na wielu serwerach na całym świecie,
zwłaszcza gdy Twoja publiczność jest właśnie w wielu częściach globu.
Pozwoli to zdecydowanie szybciej serwować jej content. Nie stosuj przekierowań.
O tym będziemy mówili jeszcze w kolejnej części o SEO, aczkolwiek tutaj przekierowania mam na myśli pod
względem wydajności.
Chodzi mi m.in. o to, że użytkownik gdy wchodzi na Twoją stronę, np. twojadomena.pl, to może być przekierowany
na np. subdomena.twojadomena.pl albo twojadomena.pl/podkatalog, jakaś strona i te przekierowania
możemy włączyć sobie na serwerze.
Proponuję używać ich tylko i wyłącznie wtedy, kiedy jest to absolutnie konieczne, ponieważ takie przekierowanie
zwiększa ilość zapytań i zwiększa czas ładowania naszej strony. 90% optymalizacji szybkości to kompresja
obrazów i odpowiednie dostarczenie obrazów we właściwych rozmiarach, właściwie zapisanych.
W związku z tym to jest jedna z najważniejszych rzeczy, które powinieneś wziąć pod uwagę.
No i oczywiście minifikacja skryptów. Jeżeli korzystasz ze skryptów no to pamiętaj o tym, aby stosować
tę ich wersje zminifikowane, pokazałem Ci minifikację podstawie bardzo prostego narzędzia, które znajdziemy
w przeglądarce, czyli to Online JavaScript Compression Tool,
ale tak naprawdę zaawansowana minifikacja może być zautomatyzowana, np. z pomocą Granta czy innych, automatycznych
automatyzatorów zadań, które pozwoli Ci np. już przy wrzucaniu wersji, np. do repozytorium, do Gita
czy na serwer produkcyjny, w locie imprezować pliki. To już jest temat trochę bardziej zaawansowany, ale
wiedz o tym, że coś takiego istnieje i zdecydowanie powinniśmy z tego korzystać.
Chciałbym jeszcze pokazać Ci w narzędziach deweloperskich, skoro tutaj jesteśmy,
strukturę strony i kolejność ładowania elementów.
Pamiętaj o tym, że przeglądarka parsując Twoją witrynę, wyświetlając ją dla użytkownika idzie sobie po prostu
po kolei, po poszczególnych liniach kodu 1, 2, 3, 4 itd.
i w momencie kiedy napotka np. jakiś skrypt do załadowania, pewnie będzie tego dużo w sekcji head,
no to w tym momencie mamy jakiś link do Google APIs i ładujemy jakąś rodzinę krojów pisma, akurat stąd, w związku
z tym jeżeli mamy taki link zewnętrzny do załadowania zasobów, w tym momencie przeglądarka zatrzymuje się
i zaczyna ładować te zasoby. Dopiero kiedy skończy przechodzi do kolejnej linii.
No i teraz mamy do załadowania jakiś obrazek PNG.
Dopiero kiedy zostanie załadowany przechodzimy niżej itd itd.
Dlaczego chcę żebyś to zrozumiał? Dlatego, że na stronie bardzo często stosujemy wiele różnych skryptów,
np. skryptów analitycznych. Takich, które nic nie dają użytkownikowi w kontekście wyświetlania naszej
strony, ale za to są dla nas przydatne, bo pozwalają np. nam zebrać statystyki dotyczące sprzedaży, są to skrypty
Google Analytics itd.
I takie skrypty, które nie są konieczne do wyświetlania i nie są przydatne dla użytkownika,
powinniśmy po prostu stosować w taki sposób, że umieszczać je na samym dole na naszej stronie. Dlatego,
że na samym dole w momencie gdy dojedzie przeglądarka do samego dołu, już nic nie będzie jej powstrzymywało
tego głównego contentu przed załadowaniem
i te skrypty spokojnie mogą się później w tle ładować, pod warunkiem, że będą rzeczywiście na dole w strukturze
naszej witryny.
Więc to jest również bardzo, bardzo istotne. Jeśli chodzi o wskazówki dotyczące szybkości,
wydaje mi się, że jeżeli nawet to były podstawowe wskazówki, to jeżeli zastosujesz wszystkie, które Ci podałem,
jesteś w stanie stworzyć stronę, która jest lepiej zoptymalizowane niż 99% witryn w Internecie, mimo
tego, że to jest naprawdę proste, niewiele osób to stosuje, bardzo często ten kod strony bardzo mocno się
rozrasta.
Nie ma tej automatyzacji jeśli chodzi o minifikację i kompresję obrazów, a to są podstawowe elementy, które pozwolą
Ci zrobić stronę, która działa szybciej niż inne, i którą użytkownicy chętniej chcą odwiedzać.
Dziękuję bardzo za uwagę w tej części.
Mam nadzieję, że informacje które przekazałem były dla Ciebie wartościowe, a tymczasem zapraszam na ostatnią
część kursu, czyli część poświęconą SEO, a także promocji.
Do usłyszenia.