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, niestety ostatniej już części tego kursu.
Jednak jest to część bardzo istotna, ponieważ porozmawiamy o promocji i o pozycjonowaniu Twojej strony
internetowej, czyli dwa tematy, których na pewno nie powinieneś zaniedbać w procesie tworzenia i wspierania
swojego serwisu.
Jeżeli chodzi o te tematy to na pewno poruszę tylko czubek góry lodowej, ponieważ pozycjonowanie i promocja
doczekała się wielu publikacji, jest to temat niezwykle obszerny. W tej tematyce oczywiście
polecam Ci kursy na Eduweb.pl również i inne zasoby, kursy AdWords, również kurs
Pawła Tkaczyka, który dotyczy budowania i strategii marki, jest naprawdę świetny. Jeśli chodzi o pozycjonowanie
i promocję,
będę chciał jedynie zahaczyć się o te najważniejsze rzeczy, które w mojej ocenie i tak sprawią, że większość
firm czy stron jeżeli zastosuje te wskazówki, to i tak będzie lepsza od konkurencji,
w tym kontekście, a zatem zaczynamy od podstawy pozycjonowania i chciałbym zwrócić Twoją uwagę na Copyrights
oraz keywords. To są dwa słowa klucze, jeśli chodzi o pozycjonowanie. Copy, czyli treści na stronie.
Mówiłem już o tym, że Bill Gates jest autorem powiedzenia "content is the king", czyli treść jest najważniejsza
i rzeczywiście tak jest.
Przede wszystkim proszę, piszcie strony dla użytkowników, a nie dla robotów indeksujących Googla.
Oczywiście te strony i treści, które się w nich znajdują powinny być nasycone słowami kluczowymi, które
użytkownicy wpisują w wyszukiwarce, ale nie sugerujcie się absolutnie jakimiś procentowymi ilościami
tych tego nasycenia.
To nie jest tak, że, to cały czas się zmienia, algorytmy są takie, że to nie jest tak, że jest jakaś stała, złota
wartość tego ile powinno być tych słów kluczowych w treści. Powinno być ich tyle, aby użytkownicy nie
zauważyli, że jest to tekst pisany pod pozycjonowanie i aby przede wszystkim ten tekst był napisany dla
ich wygody, ponieważ algorytmy indeksujące się zmieniają, a użytkownicy będą korzystać cały czas z
Twojej strony i na pewno Google będzie coraz bardziej inteligentne w kontekście wyłapywania takich technik
spamerskich jeśli chodzi o słowa kluczowe.
Najpierw zacznijmy od rzeczy elementarnych, czyli od struktury wyników w wyszukiwarce Google.
Mówię o Google dlatego, że to jest z 99,99 ruchu
jeśli chodzi o polski internet.
Gdzie indziej te statystyki prezentują się troszkę inaczej, ale u nas w zasadzie króluje Google i Google jest
właśnie najważniejsze.
Zacznijmy od struktury wyników.
Dlaczego? Dlatego, że okazuje się, że to jest tak, że nowe badania pokazują, że na przykład większość nastolatków
w ogóle nie rozróżnia wyników płatnych od organicznych.
I tutaj pewnie marketerzy się ucieszą i osoby, które promują się przez AdWords, ponieważ okazuje się, że
większość nastolatków np. nie wie, że to jest w ogóle reklama. Jeśli chodzi o frazę "nocleg Sopot" to jest
fraza, która składa się ze słów kluczowych, które tak jak wspomniałem są istotne również w treści Twojej
strony, ale także w innych miejscach, o czym zaraz, zwraca nam wyniki płatne
i wyniki organiczne oraz wyniki Googla.
Wyniki Google'a to są często wyniki, które pochodzą np. ze sklepu, z modułów e-commerce Google'a czy takie
wyniki jak np. możliwość zarezerwowania przez Google jakiegoś noclegu,
wyniki z map, które są prezentowane w sposób graficzny. Oprócz tego są wyniki sponsorowane, czyli po prostu
reklamy oznaczone tu na pomarańczowo i w tym miejscu, a także wyniki organiczne, czyli te strony, które najlepiej
zostały sklasyfikowane przez robota interesującego.
Czyli generalnie jeśli chodzi o SEO to jest właśnie to.
No i teraz już wiedząc jak wygląda struktura tych wyników, wiedząc, że są wyniki płatne i organiczne zastanówmy
się to co ma największy, nad tym co ma największy wpływ jeśli chodzi o bycie wysoko w wynikach organicznych.
Przede wszystkim jest to treść na naszych stronach, aczkolwiek jest jeszcze jeden istotny komponent, o
którym będę później mówił. No jeżeli chodzi o treść to w zasadzie powinieneś zastosować się do tego wszystkiego,
o czym mówiłem w dziale przy okazji contentu, przy okazji organizacji i struktury treści, tworzenia hiperłącz,
content inventory itd.
Te wszystkie rzeczy były mocno zorientowane na SEO i mówiłem Ci o tym, że warto na przykład w tytułach
naszych stron, czyli w znacznikach, a również w linkach, umieszczać słowa kluczowe.
Dlaczego?
Dlatego, że tytuły stron wyświetlają się po prostu jako wynik organiczny, natomiast słowa kluczowe w linkach,
samych URL'ach, są pogrubiane w wyszukiwarce Google.
Ponadto meta description, to co opisywałem, jest tym elementem, który ma zachęcić użytkownika do odwiedzenia
naszej strony i wyświetla się również pod wynikiem organicznym, więc te rzeczy są absolutnie kluczowe.
Jeżeli chodzi o strukturę linków i słowa kluczowe, to też weź pod uwagę fakt, że robot indeksujący wyszukiwarki
porusza się, co już mówiłem przy okazji site mapy, porusza się po linkach, na Twojej stronie.
Zadbaj o to aby do każdego miejsca na Twojej stronie prowadziło jakieś łącze.
W innym przypadku robot nie będzie mógł wejść i zainteresować tej treści, która się tam znajduje. Ewentualnie jeżeli nie masz
jakiś łącz do niektórych podstron, zastosuj po prostu jedną sitemapę, którą robot będzie mógł przeanalizować
i przejść się po tych wszystkich podstronach. Następnie tytuły i meta description podstron, o tym już wspominałem.
Tytuły, czyli znaczniki title wyświetlają się tutaj.
Meta description, czyli opisy stron wyświetlają się poniżej.
I mówiłem również nawet o odpowiedniej długości dla tytułów, którą powinieneś zastosować, więc to już wszystko
było.
Jeśli chodzi o treści podstron i nasycenie słowami kluczowymi,
tak jak wspominałem, pamiętaj żeby po prostu nie przesadzić z tym nasyceniem.
Oczywiście one muszą tam być, ale staraj się tak, aby te słowa kluczowe znajdowały się w odpowiedniej
hierarchii na twoich podstronach, tzn.
aby słowa kluczowe, np. jeśli pozycjonujesz się pod "noclegi Sopot", były np. w nagłówkach typu H1 czy H2,
ponieważ są to treści, które są z punktu widzenia robota zdecydowanie bardziej istotne, nawet elementy
wyróżnione treści, takie jak elementy pogrubione czy pochylone, mają większą wagę pozycjonującą,
w związku z tym staraj się w treści pogrubionej też umieszczać słowa kluczowe.
No i to jest właśnie ta część o nagłówkach i strukturze na stronie.
No i jest jeszcze coś takiego jak plik robots.txt.
Oprócz mapy witryny, o której wspominałem, że ma ona duże znaczenie w kontekście tego jak robot zainteresuje
Twoją witrynę,
jest jeszcze coś takiego jak plik robots.txt, który możesz umieścić na serwerze i zawiera on pewne
specyficzne instrukcje dla robota indeksującego.
Np. informacje o stronach, które już są nieaktywne i o jakiejś przekierowaniach do innych witryn, albo o
stronach, które są zablokowane i których nie chcemy indeksować.
Zatem plik robots.txt oraz mapa witryny to jest taka nasza płaszczyzna rozmowy z robotem. I chciałbym
jeszcze pokazać Ci na koniec tej lekcji wprowadzającej jedno z najważniejszych narzędzi, z którego będziesz
korzystał.
Mianowicie jest to narzędzie Google Webmaster Tools, które znajdziesz na stronie google.pl/webmasters
i wybierasz po prostu zaloguj się do search console.
To jest jedno z najważniejszych narzędzi i w zasadzie jedyne, które warto na bieżąco śledzić jeśli chodzi
o statystyki indeksowania i pozycjonowania naszej strony. Na przestrzeni tych lekcji będę Ci pokazywał
jak to wygląda, a teraz już możesz skonfigurować sobie, jeśli jeszcze nie masz, skonfigurowanego panelu
Google Webmasters poprzez zalogowanie się do konta Google i dodanie swojej swojej strony WWW, poprzez wpisanie tutaj adresu.
Będziesz musiał plik HTML, który zostanie wygenerowany, po prostu w celach weryfikacji, że jesteś właścicielem
strony, umieścić na swoim serwerze FTP, tam gdzie znajduje się ten główny adres domeny i wtedy będziesz
już mógł wejść sobie do tzw. Google Search Console, gdzie uzyskasz mnóstwo informacji na temat stanu Twojej strony
w wyszukiwarce, ruchu z wyszukiwania, indeksu Google oraz samego indeksowania oraz błędów, co jest bardzo, bardzo
istotne.
Jeśli zerkniesz sobie tutaj na stan indeksowania to będziesz mógł zobaczyć jak na przestrzeni kolejnych
dni odbywało się indeksowanie Twojej witryny, ile stron zostało zaindeksowanych
i jak widzisz robot indeksuje codziennie ileś podstron naszej, witryny związku z tym to indeksowanie jest procesem
ciągłym, to nie jest tak, że robot wchodzi indeksuje raz i wraca za pół roku. Cały czas robot przemierza
sobie internet w poszukiwaniu linków i również zagląda na Twoją stronę.
Tymi oraz innymi statystykami, które znajdziesz w Google Search Console, a także wskazówkami dotyczącymi
SEO zajmiemy się w kolejnej lekcji, do której serdecznie zapraszam.