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 lekcji, w kolejnym etapie naszej pracy, którym jest proces koncepcyjny, czyli zbieranie
wszystkich informacji, które potrzebne będą nam do tego, aby później zacząć przygotowywać wstępne szkice
i koncepcje naszej strony.
Najpierw zajmiemy się zdefiniowaniem celów biznesowych. Chciałbym tutaj przestrzec i podkreślić jedną
ważną rzecz - w tym kursie nie dowiesz się wszystkiego
o pracy koncepcyjnej.
Chcę podkreślić te najważniejsze z mojego punktu widzenia rzeczy, ale pamiętaj, że proces koncepcyjny
to również np. wybieranie nazwy dla Twojej strony.
Na tym etapie można już kupić np. domenę, ale przede wszystkim pamiętaj też o tym, że powinieneś zrobić
bardzo precyzyjny research, czyli znaleźć po prostu to co jest potrzebą klientów, na którą ewentualnie chcesz
odpowiedzieć i zrobić badanie konkurencji i badanie rynku.
To jest coś co jest poza moim zakresem ekspertyzy, ale jest bardzo ważne i polecam o tym nie zapominać.
Badanie rynku i badanie konkurencji pozwoli Ci wskazać te nefralgiczne rzeczy, na których się trzeba skoncentrować
albo zdeterminuje Twój dalszy kierunek działań, ponieważ twierdzisz, że np. jest bardzo duża konkurencja
w tym zakresie i trudno Ci będzie ją dogonić, więc może będzie szukał jakiś innych, unikalnych cech swojego
produktu i Twojej strony, które pozwolą odpowiedzieć na pewne rynkowe potrzeby.
Błagam nie pytaj tylko i wyłącznie swojej żony, albo swoich najbliższych przyjaciół o to, czy twój pomysł
jest dobry.
Oni zawsze powiedzą Ci, że jest dobry, po to żeby Ci nie podpaść, albo ponieważ chcą Cię wspierać. Raczej
skoncentruj się na zbadaniu rynku pod kątem właśnie realiów takich 'czego oczekują klienci' i tego jaka
jest odpowiedź innych firm, a gdzie plasuje się Twoja, unikalna oferta i Twoje unikalne cechy Twojej strony,
którą próbujesz zrobić.
Pamiętaj, że internet nie jest miejscem, gdzie ludzie przychodzą dla zabawy tylko i wyłącznie żeby pochodzić
sobie po jakichś stronach i je pooglądać,
tylko ludzie przychodzą po to, aby zrealizować pewien konkretny cel i szukają konkretnych rzeczy. W związku
z tym pierwsze istotne pytanie, to jakie cele ma realizować Twój serwis?
Bierzesz teraz kartkę czy notatnik i wypisujesz sobie wszystkie te cele, które Twoim zdaniem są najbardziej
istotne.
Ponadto jakie problemy chcesz rozwiązać?
Tak jak wspomniałem, tworzenie stron internetowych nie jest sztuką samą w sobie, chociaż jest bardzo fajne,
jest odpowiadaniem na realne i rzeczywiste potrzeby użytkowników i problemy, które tą stroną rozwiązujemy.
Kolejno,
warto też pomyśleć o tym jaki jest model biznesowy naszej strony.
Chyba, że planujesz zrobić serwis, który na razie po prostu ma agregować jak największą ilość osób, czy ma powodować,
że jak najwięcej osób zapisze się np. na newsletter czy zarejestruje konto.
No ale to też jest cel biznesowy, to też jest coś, co w pierwszej kolejności determinuje pewne pewne Twoje
działania, a niekoniecznie cel biznesowy musi od razu być przeliczalny na gotówkę i najczęściej jest tak,
że sam model biznesowy w przypadku serwisów na przestrzeni pierwszego roku ich funkcjonowania, bardzo znacząco
się zmienia.
Jest dużo serwisów czy startupów, które w ogóle nie mają takiego gotówkowego celu biznesowego, np. Twitter
czy Facebook, bardzo długo te serwisy nie monetyzowały, nie konwertowały, tylko były serwisami darmowymi, które
zbierały, agregowały bardzo duży ruch
i bardzo dużo kont, a dopiero później przekładało się to na rzeczywisty model biznesowy, który
określany był wartością pieniężną.
Następna rzecz to krótko oraz długoterminowe cele Twojej inwestycji.
Oczywiście trzeba sobie jakieś cele założyć i później konsekwentnie dążyć do tego aby je realizować,
również dobierając właściwe środki. Także to jest
kolejna rzecz na Twojej liście, którą powinieneś wymienić i wypisać sobie na kartce, no i w końcu bardziej
przyziemna sprawa.
Czyli jeżeli już zdefiniujemy sobie te wszystkie rzeczy to zastanawiamy się jakie cele, jakie funkcje
powinien mieć nasz serwis już bardziej konkretne, czyli czy chcemy mieć forum, czy chcemy mieć bloga, czy
chcemy, co chcemy zagregować wokół tego naszego serwisu.
No i jeżeli nie jesteśmy jednocześnie sponsorem i właścicielem strony, musimy jeszcze skonsultować to
czy nasza wizja,
to co wymyśliliśmy wcześniej, jest zgodne z tym co wymyślił klient.
Na ogół klient odpowie nam na większość tych pytań, które tutaj są i tak powinno być,
a jeżeli to my robimy taki research, to powinniśmy sprawdzić czy to co wymyśliliśmy jest zgodne z tym
co zakłada sobie klient.
Kolejną rzeczą, którą robimy jest odłożenie tej dużej kartki gdzie wypisaliśmy sobie odpowiedzi na te wszystkie
pytania i skorzystanie z takich małych karteczek.
Najlepiej jeszcze mieć dodatkowo jakiś flipchart, o którym zaraz jeszcze wspomnę i najlepiej żeby
te karteczki dało się gdzieś nalepić.
I to co robimy to definiujemy następnie cele oraz akcje, bo cele i akcje to jest w zasadzie bardzo podobna
rzecz, na której chcemy się skoncentrować, kontra
funkcje naszego serwisu. Już tłumaczę o co chodzi.
Na przykład zwiększenie świadomości marki jest naszym celem.
To co chcemy osiągnąć z pomocą strony. Kolejno, zwiększenie sprzedaży biletów, np. biletów lotniczych czy
biletów do teatru, to też jest nasz cel, coś co chcemy osiągnąć, kolejno dwa tysiące użytkowników newslettera w
kwartał, to też jest zdefiniowany, bardzo jasno zdefiniowany cel.
Jak widzisz, w związku z tym cele mogą być definiowane w sposób abstrakcyjny, np. zwiększenie świadomości
marki jest trudno policzalne, trudno je zmierzyć.
Z drugiej strony cele mogą być definiowane w sposób liczbowy, np. chce osiągnąć 2000 użytkowników albo
1000 aktywnych użytkowników w ciągu roku.
Następnie, zbudowanie społeczności.
To też jest cel.
Rejestracja w trzy minuty, to też jest cel, następnie sam proces rejestracji będzie już akcją.
Czyli można wyróżnić tutaj, pewnie między celem a akcją jest taka delikatna granica, ale np. zapisanie na
newsletter to będzie już akcja, coś co użytkownik musi wykonać.
Aczkolwiek cele i akcje agregujemy w jednym miejscu. To co musimy rozdzielić między celami od celów i akcji,
to są funkcje naszego serwisu. Np. komentowanie artykułów, czyli skorzystanie z jakiegoś pluginu czy napisanie
systemu komentarzy dla naszej strony.
Jest to jej funkcja, czyli funkcjonalność.
Krótkie formularze, to żeby formularze były zwięzłe już na tym etapie konkretnym.
Jest to funkcja naszej strony. Udostępnianie w social media, czyli stworzenie guzików, które po prostu
będą umożliwiały użytkownikom dzielenie się zawartością na naszej stronie.
To też jest jej funkcja, to nie jest cel, który realizujemy.
Naszym celem nie jest wspieranie Facebooka.
Naszym celem jest zwiększanie świadomości marki, ale określona funkcja na naszej stronie pomoże nam w
osiągnięciu tego celu, ponieważ im więcej ludzie będą share'ować, tym więcej ich znajomych zobaczy naszą
firmę.
Kolejno, ranking użytkowników.
To też nie jest cel, ale to jest funkcja naszej witryny, czyli jakaś grywalizacja i te elementy grywalizacji
na stronie.
Będą to funkcje naszej witryny.
Dlaczego to robimy?
Dlaczego rozdzielamy cele i akcje kontra funkcje i wszystkie, przypominam, zapisujemy sobie na karteczkach, czyli np. właśnie
świadomość marki.
Mamy jedną karteczkę, następna - dwa tysiące użytkowników newsletter i gromadzimy ileś takich kartek i sprawdzamy,
które z nich są celem akcjom, a które z nich są funkcją. Wszystkie, które są funkcją wyrzucamy sobie na bok
i nie będziemy z nich korzystać.
Natomiast wszystkie te, które są tutaj na szaro, czyli cele i akcje wykorzystamy w następujący sposób.
I teraz właśnie przyda się flipchart, albo jakiś duży stół, na którym po prostu możemy narysować sobie
duży trójkąt i podzielić ten trójkąt na trzy segmenty, czyli robimy dwie wyraźne kreski i na samej górze
tego trójkąta będziemy układali te karteczki, które są dla nas najważniejsze.
Dla mnie istotne jest to, żeby na samej górze znalazło się nie więcej niż dwie albo trzy karteczki.
To są te najważniejsze cele, które chcemy osiągnąć w ramach naszego serwisu.
Następnie, poniżej znajdzie się większa ilość celów takich drugorzędnych.
Coś co nie jest dla nas najbardziej istotne, więc będzie to około czterech - ośmiu, może nawet do dziesięciu
celów, które chcemy zrealizować, które mają dla nas powiedzmy mniejsze znaczenie, a na samym dole
znajdą się te rzeczy, które zostały wypisane co prawda na kartkach, ale stwierdzimy, że nie są one dla
nas kluczowe.
I tutaj znajdzie się reszta. Na ogół wygląda to tak, że po prostu na początku układamy wszystkie kartki
tak jak uważamy, a później staramy się wszystko przesunąć na dół, czyli zminimalizować ilość tych kartek,
które znajdują się na górze maksymalnie do dwóch trzech, zminimalizować ilość kartek w środku do maksymalnie
ośmiu, dziesięciu.
No i na dole będziemy mieli bardzo dużo pewnie karteczek, które tutaj się znajdą, natomiast nie będziemy mieli
tutaj tych kartek, które definiują funkcje. Na tej piramidzie ma się znaleźć tylko i wyłącznie nasza struktura
celów i tego co chcemy osiągnąć.
Mam nadzieję, że w tej dość przegadanej chyba trochę lekcji, ale mam nadzieję, że udało mi się wytłumaczyć Ci
taki proces myślowy, którym kieruję się zawsze przy okazji definiowania celów, również biznesowych serwisu
i jestem przekonany, że takie uporządkowanie Twojego myślenia o tym co jest najważniejsze,
a co jest mniej istotne pozwoli Ci zaplanować później odpowiednie funkcje i zacząć prototypować stronę
w taki sposób, aby realizować te właśnie rzeczy, które są dla wszystkich istotne.
To wszystko co chciałem powiedzieć w tej lekcji.
Dziękuję za uwagę.
Później przejdziemy już sobie do dalszego etapu naszego procesu koncepcyjnego, związanego z prototypowaniem i szukaniem
dalej inspiracji, do usłyszenia już za chwilę.