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 lekcji tego kursu związanej z SEO oraz indeksowaniem naszej witryny, a także Google
Webmaster Tools, bo to jest narzędzie, w którym jesteśmy na samym początku.
Bardzo istotne jest dobre skonfigurowanie tego narzędzia i jako pierwsze powinieneś wykonać kilka podstawowych
operacji.
Po pierwsze wchodzimy sobie w stan w wyszukiwarce, a następnie udoskonalenia HTML.
Tutaj znajdują się wszystkie informacje o tym co możemy poprawić w kodzie HTML naszych podstron tak, aby
były one indeksowane jeszcze lepiej i żebyśmy byli wyżej w Google.
Po pierwsze mamy podwójne meta opisy, których nie powinno tutaj zdecydowanie być.
Brak tagów tytułowych, czy też jeżeli jakaś nasza strona nie zawiera tagu title, to też powinniśmy to uzupełnić.
Jeżeli tutaj pojawią się jakieś liczby, warto to przeanalizować.
Oczywiście w przypadku Twojej witryny nie zawsze takie rzeczy jak np. podwójne meta opisy będą bardzo
złe. Np. my mamy bardzo dużo generowanych dynamicznie podstron, które generują takie same meta
opisy, ponieważ nie ma potrzeby, aby były one inne.
W związku z tym jest tutaj ta wartość, ale o ile wiesz co robić, to rzeczywiście to jest ok,
natomiast domyślnie powinieneś dążyć do tego, aby wszędzie były zera.
Jeżeli masz jakieś błędy no to możesz zawsze je tutaj sobie podejrzeć. Klikając na ten link dostaniesz konkretny
link i konkretną informacje o podstronie, na której taki błąd w HTMLu występuje i co należałoby udoskonalić.
Następnie mamy Indeks Google, gdzie stan indeksowania już Ci pokazywałem.
Warto przejrzeć też słowa kluczowe w treści i zobaczyć czy te słowa, które wybrał Google bot jako te
najbardziej nasycone, najczęściej występujące na naszej stronie, pokrywają się z tym pod co chcemy się pozycjonować w Google.
Jeżeli jest inaczej, no to warto zweryfikować tą strategię i nasycić w trochę inny sposób słowami kluczowymi
nasze podstrony.
Ponadto mamy informacje o indeksowaniu
i tutaj jest dużo bardzo ważnych rzeczy, m.in. błędy indeksowania. Błędy indeksowania w przypadku dużych
witryn mogą występować i np. my mamy podzielone tutaj błędy na błędy serwera, odmowę dostępu oraz strony, których
nie znaleziono, aczkolwiek warto zdecydowanie sprawdzać te rzeczy i weryfikować czy te błędy, które się
tutaj znajdują, rzeczywiście nie zostały zawinione przez jakiś błąd, np. w konstrukcji adresu URL czy
błąd w konstrukcji przekierowań.
To, że błędy się tutaj pojawiają to nie jest aż takie złe, ale warto żeby przejrzeć je i zobaczyć skąd
pochodzą,
ponieważ to może rzeczywiście pomóc nam w polepszeniu wyników w indeksie. Statystyki indeksowania, informacje
o tym jak często robot w ostatnich 90 dniach przemierzał nasze strony i je indeksował.
No i bardzo fajna sekcja - pobierz jako Google, czyli możemy pobrać naszą witrynę jako Google bot i to co jest istotne
tutaj to kiedyś była taka opinia, że Google bot pobiera naszą stronę tylko i wyłącznie tekstowo.
Dlatego często aby przyspieszyć działanie indeksowania, niektórzy blokowali dla Google bota dostęp np. do plików CSS
czy JavaScript. W tym momencie mamy taką opcję jak pobierz zrenderuj i w tym momencie już Google bot działa w
taki sposób, że potrafi też czytać style CSS, potrafi też dobrać się czasem nawet do zasobów dynamicznych,
JavaScript'ów i innych.
W związku z tym nie ograniczajmy mu tych możliwości, bo bardzo często może on zaindeksować naszą stronę
lepiej i ma dostęp do tej treści zrenderowanej.
Tutaj możemy sobie właśnie wybrać wersję np. dla telefonów komórkowych, wersję mobilną i po prostu pobrać całą
zawartość naszej witryny tak jak to widzi Google bot, a następnie zobaczyć jak to wygląda.
Możemy też przesłać mapy witrynę, możemy przetestować plik robots.txt. Jeżeli nie prześlemy pliku robots
to wszystkie nasze strony po prostu będą indeksowane.
No i właśnie, teraz jeśli chodzi o samo indeksowanie, to możemy nie chcieć aby jakieś części naszego serwisu
były indeksowane, np. te treści, które są zastrzeżone dla tylko niektórych użytkowników albo te, które
zwyczajnie są mało informacyjne i nie powinien ich Google bot indeksować, zatem podstrony, które chcesz wykluczyć
z indeksowania możesz wykluczyć poprzez skorzystanie ze specjalnego znacznika meta. W HTML wystarczy
zapisać meta name="robots" i content="noindex,nofollow". Jest tych właściwości
masa, ale to są te najlepiej wspierane przez wszystkie roboty indeksujące,
więc to wystarczy aby dana strona nie była indeksowana. Jeżeli chcesz również żeby np. Twoja nowa witryna, którą
jeszcze testujesz, ale już znajduje się pod domeną produkcyjną, nie była indeksowana, żeby ludzie na nią
nie wchodzili,
możesz chwilowo umieścić meta noindex, nofollow.
Nie martw się, jeżeli to zdejmiesz to robot zaindeksuje twoją witrynę, aczkolwiek jeżeli masz nową witrynę
i nie prowadzi do niej żaden link z zewnątrz, to też nie powinieneś się przejmować, nie zostanie ona zainteresowana,
ponieważ tak jak wspomniałem, Google bot porusza się po linkach w sieci i jeżeli żaden link nikt nie prowadzi do Twojej
strony to po prostu nie będzie ona zaindeksowana w indeksie Google.
I jeszcze jedna rzecz, którą chciałbym wyjaśnić. Plik robots.txt nie ukrywa linku w wyszukiwarce.
To znaczy, nawet jeżeli powiemy disallow do robota, czyli zabronimy mu indeksować zawartości, to tak czy
inaczej link do tej strony będzie w indeksie Google i będzie do znalezienia, ale będzie pod nim informacja, że
Google bot nie uzyskał dostępu do zawartości tej strony z powodu pliku robots.txt.
I rzeczywiście z pomocą robots możemy po prostu w ten sposób zablokować określone katalogi czy części
naszej strony przed indeksowaniem.
Dlaczego to zrobić? No też nie warto nadwyrężać cierpliwości robota Google na naszej stronie, mogę to powiedzieć
w uproszczeniu, i jeżeli rzeczywiście są treści, których nie ma sensu w ogóle indeksować, to zostawmy to
i oszczędźmy mu pracy. W ten sposób również będziemy, można powiedzieć, trochę lepiej promować te treści, które
są wartościowe na naszej stronie.
Jeżeli chodzi o blokowaną treść, czyli taką, do której index Google i robot nie ma dostępu, bo to też warto
o tym pamiętać,
to trzeba uważać na treść dynamiczną, zwłaszcza korzystanie z Ajaxa i czyli z treści jak gdyby wczytywanych
na naszą stronę bezpośrednio z bazy danych bez przeładowywania strony.
To są treści, które bardzo często robot Google może w pewien sposób pominąć.
Może się do nich nie dostać.
W związku z tym trzeba na to uważać.
I również dotyczy to stosowania frameworków bardzo mocno bazujących na Ajaxie, czyli np. frameworka
AngularJS.
Nie chcę tutaj absolutnie powiedzieć, że stosowanie Angulara jest czymkolwiek złym, tylko trzeba pamiętać
o tym, że w kontekście SEO stosując Angulara trzeba zastosować dodatkowe sztuczki po to, żeby robot mógł
zaindeksować z powodzeniem naszą stronę.
Jeśli chodzi o takie sztuczki właśnie, które były sugerowane, bo najczęściej ten błąd występuje wtedy, kiedy w
naszym adresie, i możesz to uznać za charakterystyczny objaw, występuje coś takiego jak znak #.
Jeżeli # występuje w adresie,
istnieje prawdopodobieństwo, że być może robot będzie miał jakiś problem z dostępem do do tej
treści.
Google zastosowało kiedyś taką, takie rozwiązanie, które nazywało się hashbang i używanie tego typu zapisu
w adresie, ale raczej odradza się stosowanie tego sposobu, ponieważ nie jest on tak bardzo popularny i
jakoś się nie przyjął.
W HTML5 jest coś takiego jak pushState i to jest coś, co ja rekomenduję wykorzystywać w takich przypadkach.
W przypadku właśnie dynamicznych witryn.
Jeżeli w adresie pojawia się właśnie coś takiego jak #, to stosując pushState w HTML5, ten # zostanie
zlikwidowany i nasza strona będzie dostępna w skrócie dla robota pod takim konkretnym adresem już bez
#.
W związku z tym nie jest istotne abyś to teraz bardzo dobrze rozumiał, ale pamiętaj, że w przypadku danych
dynamicznych, Ajaxa, Frameworków, warto wspomagać się takimi rzeczami, które pozwolą robotowi indeksować
treści na naszej stronie. Jeszcze jedna, sprytna sztuczka, która pozwala na takie indeksowane, to np. jeżeli
wejdę na Eduwebie w sekcję pomoc, znajduje się tutaj strefa Support, która prawie w całości obsługiwana
jest Ajaxowo.
Jeżeli będziemy ładować poszczególne wątki, tematy w supporcie,
zauważ, że nic się nie dzieje w adresie, w związku z tym tak naprawdę robot miałby pewien problem z
zaindeksowaniem całych treści, które się tutaj znajdują, również Ajaxowo jest obsługiwana paginacja.
Jak widzisz właśnie po # m.in. w związku z tym żeby pozwolić robotowi zainteresować całą zawartość,
która znajduje się tutaj w supporcie, a w zasadzie jest to dla nas wartościowe, ponieważ jest tutaj mnóstwo
słów kluczowych, na których zależy nam, aby były zaindeksowane, mamy tutaj taki malutki link "wszystkie",
który oczywiście jest statycznym linkiem, w związku z tym robot bez problemu może go kliknąć i po wejściu
do linku wszystkie, są już wylistowane
wszystkie, bez żadnej paginacji, wątki w supporcie jako linki, więc robot może bez problemu wejść sobie
do każdego takiego linku i zaindeksować treść, która się tutaj znajduje.
To jest taka sprytna sztuczka, która pozwoli Ci również na indeksowane tej dynamicznej treści z bazy
danych.
Ponadto unikaj treści powielonej, pamiętaj o tym, że powielona treść dla robota to jest taka treść, która
jest dostępna, która zwraca status 200, do której może się dostać, i która wygląda dokładnie, czy jej fragmenty,
czy kod HTML, tak samo jak treść na innej podstronie.
W związku z tym unikaj takiej powielonej treści, często Google analizuje strony, które rzeczywiście
dużo takiej powielonej treści mają. Stosuj przekierowania 301, a nie 302. To jest też istotna sprawa. Jeśli
chodzi o strony, które z jakiegoś powodu chcesz przekierować ich adres, chcesz zmienić adres jakiejś
strony, to zawsze stosuje przekierowanie 301. 302 jest domyślnym Apache'owym przekierowaniem serwerów bazujących
na Apache'u,
w związku z tym pamiętaj żeby właśnie z niego nie korzystać, a korzystać z przekierowania 301. 301 i 302
różnią się tym, że w nomenklaturze serwerowej i dla robota, 302 będzie przekierowaniem tymczasowym i ma
to pewne konotacje w tym jak później treść jest indeksowana, a 301 jest przekierowanie stałym.
Więc jeżeli wiesz, że na stałe zmieniasz adres takiej podstrony czy takiego katalogu, to zawsze stosuj przekierowania
301 i to nie jest tak, że nie można zmienić sobie adresu strony i zostawić tej mocy pozycjonowania którą,
ona miała.
Jak najbardziej można.
Tylko wtedy trzeba zastosować odpowiednie przekierowanie
301. No i to tyle jeśli chodzi o treść blokowaną.
A w kolejnej lekcji jeszcze będę chciał powiedzieć Ci trochę o narzędziach, które możesz wykorzystać
w procesie pozycjonowania i o diagnostyce linków. Zatem
do usłyszenia już w kolejnej lekcji.