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 dotyczącej pozycjonowania stron, a także promocji. Chciałbym przekazać Ci jeszcze
kilka praktycznych wskazówek jeśli chodzi o SEO i pozycjonowanie Twojej witryny, a także kilka narzędzi.
Najpierw chcę przedstawić Ci ideę zaawansowanych operatorów wyszukiwania, które znajdziesz na stronie
supportu Google, oczywiście która jest w plikach źródłowych. Zaawansowane operatory pozwalają różne rzeczy ciekawe
wpisać do wyszukiwarki Google, na przykład po to aby uzyskać informacje o naszej stronie internetowej.
Jeśli przykładowo skorzystamy z operatora site i wpiszemy site: nazwa domeny, to dostaniemy w Google
wszystkie wyniki, które zwracają nam zaindeksowane podstrony naszej witryny.
To jest niezwykle przydatne np. wtedy, kiedy chcemy sprawdzić czy nasza nowa domena już została za indeksowana
w wyszukiwarce Google.
W ten sposób możemy spokojnie to sprawdzić. Wpisując np. również cache:eduweb.pl
dostaniemy dostęp do tych ostatnich zaindeksowanych i przechowywanych w pamięci podręcznej robota
indeksującego Google podstron naszego serwisu. To co możemy jeszcze wpisać, to np. info, po to aby uzyskać więcej
informacji o naszej zaindeksowanej stronie.
Tutaj pod spodem mamy szereg narzędzi, które pozwalają np. nam pokazać kopie strony zrobioną przez Google'a,
znaleźć strony podobne, znaleźć również strony, które zawierają linki do Eduweb.pl
Także tutaj bardzo ciekawa rzecz, możemy po prostu kliknąć sobie ten element, a następnie zobaczyć które
podstrony zawierają linki do Twojej, które strony internetowe linkują do Twojego serwisu
co powiem Ci jeszcze za moment, że jest bardzo istotne.
Możemy też stosować tzw. zaawansowane operatory, czyli łączyć ze sobą różne operatory.
I na przykład jest to sposób, który pozwoli nam sprawdzić powielone tytuły stron.
Jeśli wpiszesz site:eduweb.pl intitle: i wpiszesz jakąś treść w tytule to zobaczysz na ilu pod stronach witryny
pojawia się taka treść w tytule.
Ponadto np. jeśli chcesz sprawdzić odniesienia do Twojej strony z lub bez przedrostka www, możesz to zrobić.
Dlaczego warto?
Dlatego, że warto tutaj stosować spójne adresy.
Jeżeli wybierzesz, że chcesz Twoją stronę linkować z www to zawsze to rób z www.
Jeśli bez to zawsze bez i jeżeli chcesz znaleźć linki, które zawierają np. www lub nie zawierają www,
możesz użyć frazy -inurl: żeby wyszukać coś w adresie i sprawdzić.
Jeżeli np. chcesz być bez WWW to zwróci Ci wszystkie adresy, wszystkie linki, które warto by było poprawić.
W tym kontekście i myślę, że to również zwiększy możliwość i szanse na bycie wyżej w wynikach
organicznych.
Drugim ważnym aspektem SEO jest linkowanie. Mówiłem Ci o pierwszym ważnym komponencie, którą była treść
na naszej witrynie i nasycenie tej treści słowami kluczowymi, a także wszystkie rzeczy powiązane, takie
jak tytuły, takie jak struktura treści, nagłówki itd.
Teraz pomówimy o drugim, bardzo ważnym komponencie, jakim jest linkowanie.
Linkowanie oznacza po prostu to, że inne serwisy internetowe zamieszczają link do Twojej strony u siebie.
To jest związane po prostu z prastarą zasadą cytowania.
Im częściej ktoś jest cytowany, tym wyżej powinien być w wynikach organicznych i tym bardziej jest popularny.
W związku z tym im więcej linków zewnętrznych prowadzi do Twojej strony, tym lepiej dla niej w kontekście
pozycjonowania. To można powiedzieć, że jest pewna ogólna prawda,
dlatego, że w momencie gdy twórcy stron internetowych dowiedzieli się, że tak działa mechanizm Google,
zaczęli stosować mnóstwo różnych sztuczek, które spowodowały, że ich linki znalazły się na setkach różnych
for internetowych, blogów, wymiana linków itd.
W związku z tym teraz ma to już troszkę mniejsze znaczenie,
również Google stosuje mnóstwo mechanizmów zabezpieczających przed tego typu złymi praktykami i już
na samym początku zdecydowanie odradzam Ci kupowanie linków czy wymianę linkami, ponieważ to zwyczajnie
nie działa.
Co więcej, to może nawet negatywnie wpłynąć na Twoją pozycję w indexie Google, więc bardzo, bardzo na
to uważaj. Google przez pewien czas rozwinęło taką również formę przyznawania linkom
w dużej lub mniejszej wartości.
Otóż Siergiej Brin, który jest jednym z autorów indexu Google wymyślił taki mechanizm, który nazywa się Page
Rank, i który zawiera ranking od zera do dziesięciu.
Popularności i ważności stron internetowych. Jeżeli jakaś strona jest wysoko, np. ma 8 na 10 Page Rank,
to znaczy, że linki, które z niej wychodzą są w tym kontekście pozycjonującym zdecydowanie bardziej istotne
niż inne i teraz obecnie mechanizm Page Rank nie ma już aż takiego znaczenia, aczkolwiek warto jest doinstalować
sobie plugin czy dodatek np. do Chrome'a Google, który pokazuje jaki Pagerank ma dana strona, żeby zobaczyć czy ewentualnie
te strony, które do nas linkują, mają duży wskaźnik, jeśli chodzi o tą ważność linków.
Wtedy na pewno uzyskamy jakby lepsze wyniki jeśli chodzi o pozycjonowanie. Nigdy nie kupujmy linków,
sprawdzajmy PageRank, sprawdzaj status stron 404 w swoim serwisie. Pokazałem Ci jak to zrobić narzędziami Google.
Dlaczego o tym mówię? Dlatego, że jeżeli link z jakiejś witryny prowadzi do Twojej domeny, ale do strony,
która zwraca 404, to nie jest brane pod uwagę przez Googla i Twoja strona nie będzie przez to wyżej w
wynikach wyszukiwania, więc sprawdzaj to nawet jeżeli masz mnóstwo stron, które do Ciebie linkują, a linkują one do stron 404,
będzie to nic nie warte.
Następnie linkowanie wewnętrzne też jest ważne.
To znaczy linkowanie w obrębie twoich podstron tak, aby na Twoich podstronach również było dużo linków, które zawierają
odpowiednie odniesienie.
I teraz w kontekście linków
jeszcze jedna rzecz, czyli tzw. anchor.
Otóż link na stronie internetowej wygląda w ten sposób, że podlinkowany jest jakiś fragment treści.
Jeśli spojrzymy sobie w kod tego elementu, wybiorę polecenie zbadaj, no to taki element, jak widzisz zawiera
składową linku, czyli polecenie, czyli znacznik a href, i to jest konkretny link.
Natomiast to co się wyświetla na stronie, to jest tzw. anchor i teraz uwaga, bardzo ważna rzecz chociaż
bardzo podstawowa.
Pamiętaj żeby ten anchor, czyli ta treść, to było Twoje słowo kluczowe, czyli jeżeli reklamujesz się pod "noclegi
Poznań" to powinno to być "noclegi Poznań", a powinno kierować do Twojej strony "moja-domena-noclegi-Poznań
kropka pl, na przykład.
Więc to jest tzw. anchor i powinniśmy też o to zadbać.
Jedna z podstawowych rzeczy w pozycjonowaniu.
Następnie sprawdzaj się statystyki odesłaniń, pokazałem Ci również jak to robić w narzędziach deweloperskich
gdzie znajduje się sekcja stron, które do nas odsyłają albo jak możesz z pomocą tych zaawansowanych fraz
wpisanych w wyszukiwarkę też to sprawdzić.
Korzystaj także z zewnętrznych narzędzi, czyli z takich narzędzi jak na przykład Screaming Frog.
To jest bardzo fajne narzędzie, które jest po prostu desktopową aplikacją, która za darmo umożliwia Ci śledzenie
500 adresów.
Jeżeli będziesz chciał, możesz śledzić więcej.
Jeżeli wybiorę domenę Eduweb.pl to w tym momencie jest ta strona analizowana w kontekście wszystkich zasobów,
które się tutaj znajdują.
I to co daje takie sprawdzenie przez Screaming Frog to przede wszystkim możemy znaleźć dużo stron, które
zwracają nam status code właśnie np. 302 czy 404. Już mówiłem o tym, że przekierowanie 302 nie jest
dobre, powinniśmy korzystać z 301 tak jak mamy tutaj, no i również te strony, które zwracają 404, też
możemy się dowiedzieć tutaj dużo rzeczy na temat np. informacji o meta description, czyli o tytułach naszych
stron.
To jest wszystko zebrane elegancko razem w bardzo obszerne statystyki, możemy też podejrzeć sobie informacje
o zewnętrznych linkach, które wychodzą z naszych stron, o protokołach, response codes, czyli te wszystkie właśnie kody
odpowiedzi.
Mamy też wszystkie linki zebrane, wszystkie zebrane tytuły stron.
Meta description, meta keywords,
nagłówki h1, nagłówki h2, no wszystko co jest ważne w kontekście pozycjonowania.
Zdecydowanie warto korzystać z tego typu narzędzi, no a z prawej strony mamy również informacje np. o elementach
SEO i możemy tutaj wyświetlić sobie wszystkie elementy albo np. zobaczyć ile elementów typu pdf czy elementów
Flashowych, które np. są trudno indeksowane, znajduje się na naszych stronach.
Nie chcę w tym momencie uczyć Cię obsługi tego narzędzia, ponieważ jest dość zaawansowane i pozwala na
fajne raportowanie również różnych rzeczy związanych z SEO.
Chcę tylko pokazać Ci, że takie narzędzia istnieją i że warto z nich korzystać.
Oprócz tego narzędzia Screaming Frog, które znajdziesz na screamingfrog.co.uk
możesz skorzystać na przykład z,
To jest fajne narzędzie, które pozwala, też link do niego zamieszczam, pozwala znaleźć na przykład linki
stron 404 na Twojej witrynie, czyli pozwala w zasadzie sprawdzić taką żywotność podstron, które zawiera
Twój serwis i jeszcze dużo, dużo więcej.
Następnie mamy specjalistyczne narzędzia takie np. jak pluginy do WorldPress. Jeżeli Twoja strona jest
oparta o WordPressa to możesz ściągnąć sobie taki dodatek jak SEO Yoast.
Jest on bardzo dobry w kontekście również analizy, a także zwiększenia popularności w wyszukiwarkach
Twojej witryny.
Następnie witryna majestic.com pozwala Ci też, podobnie do Screaming Frog śledzić strony, które posiadasz,
śledzić również informacje o linkach zewnętrznych, referencji do Twojej domeny no i mnóstwo różnych jeszcze
innych rzeczy.
Oczywiście zawiera też jakąś wersję premium, wersję płatną, którą ewentualnie możesz sobie wykupić, ale
już z tej wersji darmowej dowiesz się naprawdę bardzo dużo rzeczy o indeksowaniu i o linkach. Podobnie jak na
stronie ahrefs.com gdzie możesz po prostu trackować, czyli sprawdzać to ile osób referuje do Twojej
strony, jak wygląda statystyka słów kluczowych i wiele, wiele innych rzeczy.
Polecam Ci sprawdzić sobie tutaj darmowy trial, ponieważ nie bedę omawiał szczegółowo tego narzędzia, ale chce jedynie wskazać,
że jest jednym z bardziej wartościowych, które możesz wykorzystać.
No i oczywiście nie korzystaj z podejrzanych technik SEO, ponieważ to zawsze odbija się nawet jeżeli
zadziała na krótką metę, zawsze odbija się później.
Mechanizmy Google stale są udoskonalane i warto stosować te dobre praktyki pozycjonowania, o których wspomniałem.
Z mojej strony na razie to wszystko. W tej części przejdziemy jeszcze do sekcji promocji, gdzie chciałbym
powiedzieć o kilku bardzo fajnych technikach promocji dla nowoczesnych stron internetowych.
Zatem do usłyszenia.