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!
Cześć. Witaj w kolejnej lekcji na temat wydajności. Koncentrujemy się teraz na tym właściwym aspekcie
wydajności, czyli szybkości ładowania naszej strony. To jest jeden z kluczowych czynników, który wpływa
na użyteczność również Twojej witryny. Mówiłem, że po trzech, czterech sekundach użytkownik jeżeli nie
widzi nic w przeglądarce to najczęściej zrezygnuje z przeglądania Twojej witryny.
W związku z tym powinieneś zrobić wszystko co jest tylko możliwe, aby Twoja strona ładowała się jak
najszybciej.
Przede wszystkim powinieneś wiedzieć o tym co wpływa na szybkość ładowania strony.
Po pierwsze, jest to łącze użytkownika, czyli coś na co w zasadzie my nie mamy konkretnie wpływu, ale powinniśmy
pamiętać o tym, aby testować naszą witrynę na różnych łączach, słabszych, lepszych.
Czasem jest tak, że się o tym zapomina, my mamy świetny np. internet w firmie i wszystkie nasze witryny
działają naprawdę rewelacyjnie.
Tymczasem większość użytkowników jednak posiada słabsze łącze, a pomyśl również o osobach, które korzystają
z Twojej strony na urządzeniach mobilnych, na telefonach czy tabletach i
czasem nie mają dostępu do LTE, mają słabsze 3G i ta strona ładuje im się naprawdę bardzo, bardzo wolno
i to wszystko trzeba przewidzieć.
Jeśli chodzi o drugi parametr
to jest upload serwera i to już jest coś na co mamy wpływ.
Jest to parametr określający szybkość ładowania czy wysyłania danych z serwera do użytkowników.
No i taką szybkość powinien Ci podać dostawca hostingu.
Jeżeli to jest dobry hosting, na pewno uzyskasz informację o uploadzie.
Może to być np. 100 Mbps, które jest bardzo przyzwoitą wartością, ale też warto pamiętać o tym, że
nie ma co tak liczyć jak gdyby bez oderwania od konkretnych rzeczywistych liczb, czyli od ilości użytkowników,
które mogła być na Twojej stronie,
bo jeżeli okaże się, że nagle 100, 200, 500 czy kilka tysięcy nawet osób wejdzie na Twoją witrynę, okaże
się, że może nawet ten upload 100 Mbps nie wystarczy do tego, aby obsłużyć ten ruch i po Twojej stronie
będzie się to przytykać.
Jeśli chodzi o inne parametry serwera są równie istotne, takie jak procesor, ilość pamięci RAM i to są
rzeczy, które polecam Ci po prostu monitorować.
Może się okazać, że nawet niewielu użytkowników, jeżeli Twoja strona nie jest dobrze zoptymalizowane pod
kątem kodu, wygeneruje bardzo duże zużycie, np. zasobów hardware'owych procesora, bo będą oni wyszukiwać produktów
w Twoim sklepie, mielić cały czas po bazie danych, ta baza danych pewnie też stoi na tym samym serwerze,
w związku z tym może się okazać, że będzie to zwalniać. Albo np. stosujesz dużo zmiennych sesyjnych,
które zapchają pamięć RAM i wtedy też rzeczywiście może to być problem po stronie hardware serwera.
To co polecam to mieć serwer, który jest skalowalny.
Wiele rozwiązań, o których mówiłem w podstawowych pojęciach w tym kursie, oferuje taki hosting, który umożliwia
Ci np. jeżeli na Twojej stronie jest jakieś ogromne oblężenie z powodu promocji, chwilowe zwiększenie
zasobów, czyli zwiększenie parametrów serwera i dzięki temu Twoja strona może dalej działać wydajnie.
Jeśli chodzi o kolejną rzecz to jest ona bardzo ważna i polega na omówieniu szybkości odpowiedzi serwera.
Jeżeli odpalę sobie na Macu terminal, a ty możesz zrobić to np. jeżeli masz peceta, uruchamiając po prostu linię
komend, czyli guzik Windows, następnie wpisz CMD, no i w linii komend wystarczy, że wpiszemy polecenie ping,
a następnie podajemy albo adres domeny albo adres IP serwera.
Jeżeli chcesz wykupić hosting to najlepiej zapytaj swojego dostawcę hostingu na jakim IP będzie
stała Twoja strona, jakie jest IP serwera, na którym będzie stała Twoja strona
i wtedy wpisz sobie ten adres IP i po prostu go 'pingnij', czyli wywołaj tą komendę ping, a następnie w rezultacie
otrzymasz informację o tym jakie są czasy odpowiedzi serwera.
To jest ten parametr time widoczny tutaj z prawej strony. Jest on podany w milisekundach i w przypadku Wirtualnej Polski
np. te czasy są można powiedzieć referencyjne. Pingi na poziomie od 11, tutaj mamy około 48 jakiś największy,
ale to chyba przypadkowy, czyli średnio może 18-20, są to naprawdę Pingi bardzo dobre.
Czyli są to bardzo szybkie czasy odpowiedzi serwera.
Jeżeli Ping jest wysoki, np. powyżej 200 czy 300, to możesz się spodziewać, że Twój serwer jest bardzo
daleko od Ciebie, czyli np. znajduje się gdzieś za oceanem i to nie musi być złe jeżeli np. wszyscy użytkownicy
Twojej strony, czy jej większość znajduje się w Stanach Zjednoczonych, czyli patrz na pingi w taki
sposób aby sprawdzić te czasy odpowiedzi serwera w miejscach, z których Twoi użytkownicy mogą wchodzić
na Twoją witrynę.
Będę mówił jeszcze później o CDN'ach, czyli o możliwości rozprzestrzenienia swoich serwerów w wielu miejscach
tak, aby użytkownicy mogli z różnych miejsc na świecie z nich korzystać równie szybko,
ale przede wszystkim podstawowy parametr, zpinguj, sprawdź.
Jeżeli Twoja strona jest dla polskiej publiczności,
no to sprawdź z kilku miejsc Polski jakie,
jakie są Pingi.
Jeżeli będą około pięćdziesięciu, sześćdziesięciu myślę, że są ok. Wyższe,
warto się zastanowić nad sprawdzeniem jakiegoś innego dostawcy, może zaoferuje nam lepsze Pingi.
No i możesz powiedzieć, że 12ms czy 50ms to jest tak naprawdę bardzo krótko
i czy rzeczywiście ma to jakieś bardzo duże znaczenie.
Pokażę Ci to w praktyce.
Jeżeli wejdziemy na dowolną stronę, np. na Eduweb.pl i wybierzemy polecenie zbadaj element, no to tutaj mamy
taką konsolę, w której zawsze znajduje się taki panel, który nazywa się Network.
Jeżeli w tym momencie w panelu Network będąc, odświeżysz sobie stronę, zobaczysz coś takiego jak waterfall, czyli
inaczej wodospad z ładowanymi
na tej stronie danymi. I teraz to co jest bardzo istotne to ilość danych, która tutaj jest ładowana w postaci
jak widzisz poszczególnych, kolejnych plików. Są to ładowane pliki CSS, np. jakieś JavaScript'y, dalej będziemy
mieli ładowane wszystkie obrazki i to co jest istotne to każdy taki zasób jest osobno ściągany z serwera
w ramach osobnego zapytania GET.
Czyli łącznie do serwera zostało tutaj wygenerowane aż 254 zapytania. W związku z tym musisz pomnożyć ten czas
odpowiedzi serwera razy ilość zapytań, która musi być wykonana aby pobrać Twoją stronę.
Często tych zapytań jest bardzo, bardzo, bardzo dużo, no i wtedy rzeczywiście te pingi mają kluczowe znaczenie,
ponieważ ta odpowiedź serwera,
jeśli nawet to jest kilka milisekund szybciej, to Twoja strona w rezultacie załaduje się dużo, dużo szybciej.
Tutaj mamy informacje o tym kiedy się załadował content, kiedy została załadowana cała strona, tutaj
jest 7 sekund, a więc mógłbyś powiedzieć, że nie za szybko,
ale z drugiej strony proszę zwróć uwagę również na to, że niektóre rzeczy są doładowane na samym końcu
gdy użytkownik już widzi naszą stronę i są one wliczane do tego czasu.
Są to np. skrypty analityki, skrypty takie, które w zasadzie nie wymagają tego aby nasza strona poprawnie
się wyświetlała, a też są na końcu załadowane i wpływają na to obciążenie.
W związku z tym warto pamiętać o pingach i szybkości odpowiedzi serwera.
Następnie ilość zapytań do serwera również jest ważna, bo to mnoży się przez czas odpowiedzi serwera
i też to zwiększa tempo czy spowalnia ładowanie witryny, no i wielkość obrazków.
O tym jeszcze będę mówił w kolejnych lekcjach.
Chodzi mi tutaj o to, że żeby zoptymalizować grafiki zgodnie z tym co mówiłem Ci w lekcji o właśnie grafice
na stronach www i w końcu ilość i wielkość skryptów. Naturalnie skrypty
wbrew pozorom mimo że sam tekst, potrafią ważyć dobre kilkadziesiąt, a nawet kilkaset kilo bajtów, w związku
z tym warto też znaleźć sposoby na ich zmniejszenie i to też pokażę Ci w jednej z kolejnych lekcji. W
związku z tym zapraszam teraz do następnej lekcji, gdzie przeprowadzimy trochę bardziej złożone testy
na naszej stronie, a także będę szczegółowo omawiał poszczególne komponenty.
Także do usłyszenia już za chwilę.