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. Skoro mamy już zdefiniowane pewne cele oraz zadania, które ma realizować nasza
strona, to teraz pora bliżej przyjrzeć się użytkownikom.
Kolejne ćwiczenie, które warto wykonać w ramach pracy koncepcyjnej jest naprawdę bardzo ciekawe i wartościowe
z tego punktu widzenia, że pozwoli Ci wybrać pewne typowe zachowania i typowych użytkowników, których chciałbyś
widzieć na swojej stronie.
Wszystkie środki, które później wybierzesz po to aby zachęcić ich do odwiedzenia witryny będą w zasadzie
sprowadzały się do tego, że masz świadomość kim oni właśnie są.
Po pierwsze polecam Ci znowu wziąć kartkę i wypisać na niej szczegółowo odpowiedzi na pytania, które tutaj
przygotowałem.
Pierwsze najważniejsze pytanie, to dla kogo jest nasza strona?
I to pytanie jest dość ogólne, więc chcę żebyś zapamiętał jedną bardzo ważną rzecz.
Twoja strona nie jest dla wszystkich!
Jeszcze raz - Twoja strona nie jest dla wszystkich.
To nie jest tak, że wszyscy będą Twoimi klientami.
To nawet nie jest niestety tak, że wszystkim będzie się podobać Twoja strona.
I przede wszystkim nie musisz wszystkich obsługiwać, nie musisz wszystkim proponować swojej usługi.
Odpowiedź na to pytanie chcę żebyś traktował w takiej konwencji, 'kto jest moim ulubionym klientem', 'kogo
ja chcę mieć na stronie', 'kto jest moim wymarzonym odbiorcą'.
Chodzi o to żebyś zarysował tą koncepcję tak, aby na Twoją stronę przychodzili ludzie, których chcesz
obsługiwać i myślę, że to jest naprawdę wartościowe,
później w kontekście całej dalszej pracy. Jakie są w związku z tym cechy tych użytkowników? Począwszy
od takich cech bardziej ogólnych, np. możesz zarysować ich wiek, zainteresowania, płeć itd.
Możesz wymyślić konkretnych użytkowników i zaraz to również podpowiem.
Natomiast ważne żebyś też skoncentrował się na cechach dotyczących np. umiejętności obsługi technologii.
Wiadomo, że np. osoby młodsze, które cały czas siedzą w internecie będą potrafiły lepiej zrozumieć pewne
konwencje na stronach internetowych, np. takie, że po kliknięciu w logo przechodzimy do strony głównej,
niż osoby starsze, które nie korzystają na codzień z internetu i mają z tym naturalnie trochę większy
problem. Ponadto są pewne grupy osób, gdzie technologicznie są bardziej zaawansowane, np. programiści czy
Web Developerzy.
Jeżeli jeżeli robisz stronę z poradnikami czy z kursami dla Web Developerów, no to naturalnie możesz założyć,
że mnóstwo koncepcji i konwersji jeśli chodzi o projektowanie stron i te praktyki, które się stosuje
oni bez problemu są w stanie wyłapać.
Natomiast staraj się żeby ta strona tak czy inaczej była jak najprostsza.
Podam Ci jeden przykład. Typowe menu hamburger, czyli takie trzy kreseczki, które otwierają nam menu
w aplikacjach mobilnych czy coraz częściej na stronach internetowych, jest rozpoznawane tylko przez około
50-60% użytkowników, czyli 40 pare procent użytkowników mówi, że w ogóle nie wie co to jest i nie
wie, że pod spodem jest menu.
Tak dowodzą badania.
Więc zanim zastosujesz jakiś element na stronie, zastanów się też w kontekście tej grupy docelowej
i tych użytkowników, których określiłeś,
czy rzeczywiście jest to dobry element pod kątem ich umiejętności i ich wieku.
itd. Więc dalej, jakie są ich typowe zachowania?
Co robią?
Czym się interesują? Jak użytkownicy odbierają nasze treści, czyli czy też chcemy udostępnić np. im jakąś
możliwość dzielenia się tymi treściami, czy oni agregują te treści, jak je konsumują, czy np. czytają
je raz, czy do nich wracają i to wszystko później pozwoli Ci zdeterminować pewne środki przekazu i środki
techniczne również, które pozwolą lepiej ich zaadresować.
Dla kogo jest nasza strona?
Odpowiadając na to pytanie można zrobić sobie ćwiczenie, gdzie określamy pewne persony.
Oczywiście jest to ważna rzecz w zależności od tego też jaka jest wielkość naszego serwisu.
jak duże jest nasze przedsięwzięcie.
Więcej czy mniej czasu poświęcimy na definiowanie takich person, oraz np. ewentualnie Lab'y z żyjącymi,
rzeczywistymi ludźmi.
Ale na tym etapie chciałbym, żeby to było abstrakcyjne żebyś
nie przesadzał zbytnio z ilością czasu, którą na to poświęcasz, tylko wybrał sobie po prostu kilka typów
osób, takich, które chciałbyś obsługiwać i zrobił, dorobił do nich np. tego typu wizytówki.
Możesz w ramach minimum dla Persony określić jej jakieś podstawowe cechy, takie jak wiek, zainteresowania
czy zawód.
Przede wszystkim też powinien się tam znaleźć cel wizyty na stronie, czyli co ta osoba chce osiągnąć,
oraz pewne cenione wartości.
To też jest niezwykle istotne.
Pracując z kimś w ramach jakiejś burzy mózgów w Twojej pracy koncepcyjnej, może paść mnóstwo jakichś takich wartości,
które są tobie bliskie, np. bezpieczeństwo wykonywanych transakcji, np. bezpieczeństwo danych, które się
przekazuje w formularzach.
To mogą być rzeczy bardzo ważne dla jednej osoby. Dla drugiej, np. super ważna może być szybkość działania
Twojej strony, albo np. to czy jest ona przyjazna dla urządzeń mobilnych, ponieważ korzysta z tej strony responsywnie
na telefonie, więc te wszystkie cenione wartości warto sobie wypisać i warto stworzyć szereg takich
profili psychologicznych, można powiedzieć, osób które będą naszymi ulubionymi klientami.
Możesz to zrobić obrazkowo, nie musisz wszystkiego pisać, możesz na przykład wybrać sobie jakieś zdjęcia,
a następnie dodać do tego jakąś historię, np. tak jak po prawej stronie: "Ania, 35l, chce kupić zegarek
dla męża", ale też dużo wynika z samego zdjęcia.
Nawet to jaki kolor włosów ma Ania, również to jak i czym się zajmuje.
Oczywiście to nawet pozwoli nam się domyślać, że prawdopodobnie jako, że jest dziennikarką no to
biegle posługuje się stronami internetowymi, potrafi szybko znaleźć informacje, które ją interesują.
Ok.
W ten sposób tworzymy persony, następnie dopisujemy do tych person, czyli do tych stworzonych przez nas
wirtualnych ludzi, których chcemy obsługiwać pewne historie.
Przede wszystkim tworzymy je w oparciu o pewien schemat, czyli jako użytkownik cechy, czyli jako ta persona,
którą stworzyliśmy.
Ania 35 lat, dziennikarka itd itd, chce osiągnąć jakiś cel, czyli chce kupić zegarek dla męża, ponieważ
tak, a nie inaczej to jest w zasadzie opcjonalne, ponieważ ma urodziny.
Na przykład, taki jest powód.
I to też nam sporo powiedziałby o tym może w jaki sposób dostarczyć te informacje.
Natomiast ta część, ponieważ czasem można ją odrzucić i zostawić tylko cechy użytkownika i cel który on
chce osiągnąć. Jako Pinky, postać z kreskówki, chcę zdobyć świat i w zasadzie nam, jako komuś kto umożliwia
czy np. oferuje usługi zdobywania świata, powinna ta informacja wystarczyć, a nie powinien być aż tak
istotny powód.
Ale można wypisać sobie również, powody 'ponieważ chcę rządzić ludźmi, i wtedy możemy dostarczyć Pinky'emu
w ramach naszej usługi zdobywania świata, jeszcze jakieś dodatkowe atrybuty, np. broń, która pozwoli kontrolować
umysł zdalnie. To wszystko w tej lekcji.
To wszystko o budowaniu Person.
Dziękuję ci za uwagę i do usłyszenia w kolejnej lekcji o schematach koncepcyjnych na naszą stronę.