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, w której chciałbym pomówić jeszcze o jednym skutecznym kanale, jakim jest e-mail
marketing, a także o narzędziach analitycznych i takich narzędziach, z których warto korzystać w kontekście śledzenia
swojej firmy i swoich kampanii.
Najpierw e-mail marketing, który oczywiście jest prawdopodobnie rzeczą znaną.
Wysyłanie maili do potencjalnych klientów, oferowanie im jakichś np. specjalnych warunków czy promocji
za pomocą tego kanału jest bardzo skuteczne, zwłaszcza również w połączeniu z content marketingiem.
To co mówiłem wcześniej, czyli np. stworzenie jakiegoś produktu, do którego dostęp jest po podaniu maila,
pozwala nam stworzyć taką listę marketingową osób, do których będziemy mogli wysyłać wiadomości np. za
pomocą narzędzi, takich jak Mailchimp. Uczulam Cię tutaj na wrażliwość danych osobowych i również na to aby klienci
mogli w każdej chwili z takiej listy się wypisać, aby byli świadomi tego, iż będziesz wysyłał im tego
typu wiadomości.
Ponieważ nie warto jest trafić na jakieś jakiejkolwiek spam-listy no i oczywiście nie ma sensu wysyłać
maili do kogoś, kto tych maili nie chce.
W związku z tym Mailchimp jest np. narzędziem, które pozwoli Ci zarządzać wszystkimi rzeczami związanymi
z wysyłką, począwszy od tworzenia maili, przez właśnie taki edytor HTML'owy, gdzie mamy mnóstwo bardzo
fajnych szablonów maili, przez śledzenie bardzo zaawansowanych statystyk, dotyczących wysyłek i ich skuteczności,
czyli np. informacji o tym ile osób kliknęło w link, ile osób wykonało konkretną akcję.
Mailchimp jest narzędziem płatnym, aczkolwiek dla małych baz danych, jeżeli masz jeszcze niewielu klientów
na liście mailigowej, jest on narzędziem darmowym, więc możesz zacząć za darmo i zobaczyć jak fajnie działa
to narzędzie. Zdecydowanie polecam i myślę, że prowadzenie kampanii przez Mailchimpa i jego dane analityczne,
jeżeli tylko je śledzimy, pozwoli nam bardzo skutecznie optymalizować to jak działają nasze maile.
Ponadto zestaw danych mogę pokazać Ci również w aplikacji Sendgrid, z której także korzystam.
Jest to aplikacja, która umożliwia też wysyłki maili i umożliwia bardzo fajną integrację tego z kodem
Twojej strony internetowej, więc wszystkie maile mogą iść przez Sendgrida.
To co jest tutaj właśnie dobre to informacje o tym do kogo mail dotarł,
kto w niego kliknął i
bardzo dużo statystyk dotyczących kampanii, m.in. statystyki geograficzne, ale również statystyki dotyczące
np. informacji o tym z jakich klientów pocztowych korzystają Twoi użytkownicy.
Informacje dotyczące przeglądarek, to też warto śledzić w kontekście później testowania na przykład kampanii
mailingowych na poszczególnych platformach. Także tutaj jest mnóstwo statystyk włącznie ze statystykami
dotyczącymi kliknięć.
Dostarczeń tych elementów, Sendgrid jest też systemem, który wspiera dostarczanie maili, czyli tak
optymalizuje wysyłkę aby dotarło to do jak największej ilości osób.
No i na koniec chciałbym jeszcze wspomnieć o narzędziach analitycznych. Wspominałem i mówiłem o Google
Analytics, który jest potężnym kombajnem, który pozwoli Ci śledzić naprawdę mnóstwo elementów związanych
z pozyskiwaniem ruchu, ze słowami kluczowymi, z frazami, które wpisują użytkownicy w przeglądarce, z tym
jak użytkownicy poruszają się na stronach, te wszystkie rzeczy na przestrzeni kursu w ramach Analytics
wielokrotnie pokazywałem. Teraz na koniec chcę zwrócić Twoją uwagę na jeszcze jedno fajne narzędzie w
kontekście nie tyle samych statystyk, co monitorowania internetu.
Jedną z skuteczniejszych
rzeczy, które możesz zrobić
jest śledzenie internetu w poszukiwaniu opinii o Twojej marce, o Twoim produkcie, czyli jedną z najlepszych
rzeczy, którą możesz zrobić jest po prostu słuchanie Twoich klientów lub słuchanie potencjalnych klientów.
Nie musisz tego robić na wszystkich sieciach społecznościowych wpisując hashtagi, filtrując słów kluczowych.
Możesz skorzystać z narzędzi takich jak np. Brand24, które pozwalają Ci gromadzić i agregować rozmaite
dane.
Ja np. ustaliłem sobie kampanię na frazę Eduweb, ponieważ oczywiście interesuje mnie to co ludzie piszą w internecie
i co pojawia się, jakie informacje pojawiają się na frazę Eduweb.
Rzecz jasna, jeżeli chcesz możesz też śledzić np. frazy swojej konkurencji i to też jest ciekawy sposób
na wyłapywać jakichś interesujących rzeczy czy pomysłów, które możesz wdrożyć w siebie. Aczkolwiek na
pewno warto śledzić swoją markę i Brand24 oferuje nam takie możliwości, ponieważ przeszukuje cały internet
w poszukiwaniu tych słów kluczowych, tej frazy, którą tutaj wpiszesz, a następnie wyświetla Ci wyniki kierujące do
Facebooka, z mikroblogów, z forów internetowych itd.
Zauważ, że mamy też coś takiego jak filtr sentymentu, co jest bardzo ciekawe, co pozwoli Ci sprawdzić, które
z tych komentarzy są np. negatywne. No i wtedy ewentualnie na tego typu komentarze warto zareagować czy
przynajmniej wiedzieć w jaki sposób odnoszą się do Twojego produktu czy do twojej firmy.
Brand24 oferuje tutaj mnóstwo różnych, innych też rzeczy, takich jak raporty PDF, infografiki, które możemy sobie wyświetlić.
To jest zresztą bardzo fajna opcja, która pozwala w takim zbiorczym zakresie zobaczyć informacje o tym
co się dzieje, ile mam wyników, jakie są pozytywne, jakie są negatywne i naprawdę bardzo interesujące
dane można z tego wyczytać. Możesz oczywiście korzystać też z darmowych alternatyw, aczkolwiek nie ma ich
zbyt wiele.
Są to np. Alerty Google, które możesz ustawić na konkretne frazy i Google będzie wysyłało Ci maile z informacjami
o tym co się dzieje w wyszukiwarce na tą frazę, ale moim zdaniem warto zainwestować w takie narzędzie
do monitorowania danych. Brand24 jest jednym z nich i takim, które mogę spokojnie polecić.
No i to w zasadzie wszystko co chciałem powiedzieć w części o promocji oraz o pozycjonowaniu.
Wydaje mi się, że mimo tego, że zrobiliśmy to na bardzo dużym stopniu ogólności i tak naprawdę powiedziałem
Ci takie podstawowe rzeczy jeśli chodzi o pozycjonowanie i narzędzia analityczne, narzędzia promocyjne,
to tak czy inaczej jeżeli zastosujesz się nawet do tych postaw, jestem przekonany, że zdobędzie większą
publiczność i będziesz skuteczniejszy niż zdecydowana większość serwisów, które funkcjonują obecnie w
sieci.
Także polecam Ci oczywiście te informacje rozszerzać, również z naszych kursów, a tymczasem wydaje mi się,
że również jest to domknięcie całego tego materiału, który był nakierowany na przekazanie Ci tej aktualnej,
nowoczesnej wiedzy o tym jak tworzyć strony internetowe.
Jestem więcej niż pewny, że po zastosowaniu tych wskazówek nie tylko będziesz tworzył strony, które są
dobre wizualnie, dobre estetycznie, i które spełniają te nowe standardy, ale także będą to strony przyjazne
dla użytkowników, funkcjonalne i takie, z których użytkownicy chcą i lubią korzystać.
Chciałbym abyś potraktował ten kurs jako pewne kompendium wiedzy, do którego będziesz wracał.
Rzecz jasna obejrzenie tego na jedno posiedzenie nie jest możliwe, ponieważ wyszło bardzo dużo materiału
i prawdopodobnie właśnie w ten sposób będziesz traktował ten materiał, wracał do niego w odpowiednich
momentach.
O to też mi chodziło. Chcę żebyś w miarę możliwości korzystał z tych poszczególnych lekcji w miarę poszczególnych
etapów powstawania Twoich serwisów, a wkrótce na pewno te zasady wejdą Ci w krew i będziesz mógł je z
powodzeniem stosować również bez odnoszenia się do kursu.
Także z mojej strony chciałbym bardzo serdecznie podziękować Ci za uwagę.
Pamiętaj o tym, że w tym kursie znajduje się cała część poświęcona nowym trendom w projektowaniu, którą
będę regularnie uzupełniał i aktualizował i będziesz również otrzymywał powiadomienia o tym kiedy ten
materiał został zaktualizowany.
Będzie on dla Ciebie dostępny za darmo, także zachęcam do odkrywania nowych, ciekawych rzeczy z tym kursem.
Dziękuję Ci bardzo za uwagę i do usłyszenia w kolejnych materiałach.