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!
Cześć. Witaj w kolejnej części tego kursu, w której będziemy pracowali nad, między innymi nawigacją na
naszej stronie, ale fachowo będziemy nazywać to treścią oraz architekturą informacji, która znajdzie się
w obrębie naszego serwisu.
Wiemy już z poprzednich lekcji fazy koncepcyjnej, że wiemy to czego chcą nasi użytkownicy, znamy cel naszej
witryny, również założenia biznesowe.
Wiemy na jakie problemy użytkowników ma odpowiadać nasza strona. Przyszła w związku z tym pora na to
abyśmy wszystkie te funkcjonalności i te rzeczy, które mają znaleźć się na naszej stronie, ubrali w formę
poszczególnych podstron, odpowiednio je zatytułowali, a także stworzyli swoistą mapę serwisu i mapę treści,
która pozwoli nam dalej przygotować schemat nawigacji.
Pierwsze pytanie na jakie musimy sobie odpowiedzieć, to jaka treść znajdzie się na stronie, czyli te małe
skrawki informacji o tym jakie funkcjonalności ma mieć nasza strona, następnie jak będzie ta treść zorganizowana
no i kolejno jak mamy zaprojektować interakcje między treścią, czyli architekturę informacji, to które strony
będą nadrzędne, a które będą podrzędne, co pozwoli nam w konsekwencji stworzyć na stronie schemat nawigacji
i zaprojektować tzw. mapę strony. I w tej lekcji chciałbym opowiedzieć Ci o tych wszystkich komponentach
dość ogólnie powołując się na pewne fajne przykłady i praktyki, które możesz wykorzystać.
Na początku robimy schemat podstron serwisu. Schemat podstron serwisu opiera się o coś takiego co nazywamy
schematem treści, a po angielsku Content Inventory.
Polecam Ci zapamiętać tą nazwę, ponieważ bardzo łatwo w Google można znaleźć mnóstwo artykułów na temat
tego, jak tworzyć Content Inventory, jakie są dobre praktyki, nawet wzory Content Inventory,
gotowe dokumenty, które możesz pobrać, ponieważ content inventory zwykle jest to np. jakiś arkusz kalkulacyjny,
taki Excel, którego masz pod ręką, i w którym są zagregowane wszystkie podstrony Twojego serwisu, w taki sposób, że
przynajmniej wpisujesz sobie tytuł takiej podstrony,
następnie rodzaj treści, które na tej podstronie mają się znaleźć, czyli czy to będą media, czy PDF,
czy to będzie film, czy artykuł, czy to będzie np. jakieś kawałek treści na blogu i również jest tutaj
ostatnia rzecz, którą wymieniłem,
czyli poziom zagnieżdżenia. W tym Excelu, który tutaj widzisz jest to oznaczone na górze poszczególnymi
levelami. Level 1, Level 2, level 3 i
j ak widzisz poszczególne komórki mają odpowiednie wcięcia, żeby zasygnalizować gdzie ta konkretna podstrona
znajduje się w hierarchii naszej witryny.
Czy jest to hierarchia nadrzędna, czyli te najważniejsze strony, później mniej ważne, jeszcze mniej ważne
itd.
Jeśli chodzi o sam poziom zagnieżdżenia, na samym początku nie musisz tego robić.
Pokażę Ci pewne fajne doświadczenie, które pozwoli jeszcze zorientować się w tym jak ewentualnie te poziomy
zagnieżdżenia powinny wyglądać.
Zanim jednak przejdę do kolejnego slajdu to jeszcze jedna rzecz,
tutaj na dole, która wymaga podkreślenia, mianowicie to abyś zapamiętał sobie angielską nomenklaturę.
Cała Twoja strona, czyli cały Twój serwis, to inaczej Site.
Natomiast poszczególne jego podstrony to Pages.
Jeżeli będziesz czytał jakąś branżową literaturę to właśnie w ten sposób będziesz wiedział,
że Site to cała strona, a Page to poszczególne podstrony tego serwisu.
Następnie zadajemy sobie kolejne pytanie - jaka byłaby najlepsza struktura dla tej treści, którą stworzyliśmy
w ramach content inventory. Czyli wypisaliśmy poszczególne elementy treści, które mają się znaleźć na stronie
w każdej z komórek
i teraz jeszcze jej nie zorganizowaliśmy, w związku z tym zastanawiamy się nad najlepszą strukturą. Będziemy
w konsekwencji musieli wybrać coś takiego jak działy czy sekcje, które będą agregować mniejszą czy większą
ilość podstron na jakimś poziomie zagnieżdżenia.
Następnie będziemy musieli ten wybór uzasadnić.
Czyli nie jest tak, że 'a wydaje mi się, że to będzie fajne', ale musimy mieć dobre uzasadnienie na to, dlaczego np.
tą podstronę chcemy wsadzić do tego działu.
Następnie jak będzie zorganizowana ta treść, czyli ile podstron, w jakim dziale i w jakiej sekcji oraz jaki
rodzaj nawigacji zastosować do tego konkretnego schematu, który nam wyjdzie. Może nam wyjść bardzo dużo
działów, wtedy ewentualnie jeszcze to jakoś połączymy, może wyjść mniej.
Tutaj trudno mi jest podać jakąś uniwersalną receptę, z tego powodu, że każda strona jest inna i każda
strona ma inną strukturę.
Ale podam Ci się jedno bardzo fajne rozwiązanie, które może ci pomóc na etapie tego procesu koncepcyjnego,
właśnie tworzenia architektury treści.
Jest to coś takiego co nazywa się 'testem z karteczkami', czy inaczej Cart-sort testing.
I znów, jeżeli piszesz Cart-sort testing w Google, uzyskasz mnóstwo badań na ten temat, w ogóle jak to przeprowadzić
tak dalej.
W zasadzie idea jest bardzo prosta. Polega to na tym, że bierzesz wszystkie elementy, które ma realizować
Twoja strona, czyli w zasadzie wszystkie rzeczy, które chcesz umieścić na tej stronie.
Jeśli mamy stronę firmową, będzie to informacja o mojej firmie, informacje o ofercie, informacje o produkcie,
kontakt, treści powitalne,
czy inaczej strona główna, więc rzeczy wypisujesz
hasłowo na małych karteczkach i robisz kilka kopii tych karteczek, ponieważ będziesz do tego badania zapraszał
swoich znajomych czy np. swoich współpracowników, a następnie prosić ich o to aby odpowiednio uporządkowali
te kartki tak jak myślą, że pasowałyby one do jakiegoś, do jakiejś jednej grupy. Czyli żeby w pewien sposób
wykonały systematykę tych karteczek, które dostaną.
Dlaczego to jest ważne i dlaczego to robimy z innymi?
Musisz wiedzieć, że nasz mózg działa w ten sposób, że nawet podświadomie stara się cały czas kategoryzować
i porządkować pewne rzeczy.
Mózg ma najwygodniej jeżeli wszystko jest robione w pewnym schemacie, jeżeli wie dokładnie co gdzie jest,
w każdej, w dowolnej szufladce, wie gdzie co znaleźć, w związku z tym musisz pamiętać o tym, że nawet
właśnie nieświadomie ludzie będą to robić.
Jeżeli nie zrobisz żadnego schematu nawigacji czy architektury treści, ludzie i tak zrobią go za Ciebie.
Jeżeli zrobisz zły,
ludzie też zrobią go za Ciebie tak, żeby było im wygodniej.
No i wtedy niekoniecznie będzie to zgodne z tym Twoim planem.
Nie wiem czy czytałeś "20 tysięcy mil podmorskiej żeglugi", tam był taki facet który, kategoryzował
wszystko, czyli elementy fauny i flory, którą którą widział pod wodą starał się od razu skategoryzować w
jakąś odpowiednią grupę, rząd, rodzaj, gatunek itd, więc on właśnie myślał w ten sposób schematycznie i
nawet jeżeli ludzie nie operują właśnie na codzień takimi podziałami, to tak naprawdę widząc Twoją stronę, systematyzują
treści sami i również robią to w inny sposób. Każdy człowiek ma jakieś tam inne metody na systematyzowanie
tego co widzi i dlatego warto dać im do zrobienia taki test z karteczkami, ponieważ wtedy może Ci wyjść
kilka ciekawych wyników i przede wszystkim możesz zobaczyć, że nie wszyscy rozumują dokładnie tak jak
Ty, że mogą oni inaczej podejść do zagadnienia właśnie tworzenia architektury na Twojej stronie.
Pierwsze zadanie dla nich jest takie żeby wzięli te karteczki i ułożyli je w takie stosy, które po prostu
będą zgrupowaniem tych kartek tematycznie.
Czyli niech nie zajmują się strukturą wewnątrz tych karteczek, ale niech wezmą po prostu kartki i ułożą w
kilka stosików, które prawdopodobnie zgrupują się w poszczególne działy na Twojej stronie.
Dopiero później możesz poprosić ich o to aby nałożyli np. na siebie te karteczki, które mają należeć
do jednej podstrony, czyli funkcje które mogą być realizowane na jednej podstronie, albo np. funkcje, które Twoi
użytkownicy uważają za identyczne, realizujące te same zadania, powinni nałożyć na siebie
i wtedy dopiero będą mogli ułożyć pewną hierarchię ważności tych karteczek, czyli ułożyć karteczki jedna
pod drugą, albo obok siebie, w zależności od tego czy w ich ocenie te karteczki powinny być na jednym
poziomie zagnieżdżenia, czy powinny być w strukturze pionowej, w strukturze pewnych zależności.
Na przykład jeżeli mamy stronę nadrzędną galeria, to pod nią może znaleźć się galeria z Tatr, galeria
Bieszczady, galeria np. Karkonosze i to będą strony podrzędne do galerii, ale będą siostrzane względem
siebie.
Mam nadzieję, że wiesz o co mi chodzi.
W związku z tym te dwa eksperymenty - nakładamy na siebie karteczki, a później porządkuje je w taki sposób
i na sam koniec to co im wyjdzie w poszczególnych stosach, będzie trzeba jeszcze zatytułować, czyli bierzemy
jakąś dodatkową kartkę, nalepiamy ją na górę takiego stosu, tak jak na screenie jest tutaj ta niebieska karteczka,
i staramy się bardzo zwięźle i intuicyjnie opisać jednym słowem najlepiej, to co znajduje się
na tych podstronach, czyli na karteczkach poniżej.
I prawdopodobnie to będzie właśnie Twój nagłówek,
czy Twoja nazwa konkretnej sekcji, która znajdzie się w menu.
Dodatkowo od siebie mogę jeszcze polecić jedną fajną rzecz, mianowicie jeśli chodzi o testy z karteczkami
warto na koniec zadać użytkownikom jeszcze zadanie, aby postarali się ograniczyć liczbę kartek do minimum.
Zobaczysz jak wielu osobom uda się usunąć treści, które oni uznają za niepotrzebne, a Ty myślałeś, że były
bardzo ważne.
A po drugie, w ramach tej metody będą mogli grupować też ze sobą kartki, w związku z tym może uda im się
zminimalizować ilość podstron, które będą na Twojej stronie i jakoś funkcjonalnie ułożyć to lepiej niż nawet Ty
sobie zakładałeś. Także także mając gotowe takie stosy karteczek i odpowiednio zatytułowane okaże się, że udało Ci się
stworzyć coś takiego, co nazywamy mapą witryny.
To czym jest mapa witryny oraz pewne ciekawe narzędzia, które w ramach map witryny są dostępne, wytłumaczę Ci
w kolejnej lekcji. Do usłyszenia.