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 zajmiemy się opracowaniem treści na naszą stronę, a raczej poszczególnymi
typami treści, które powinieneś wziąć pod uwagę.
Przede wszystkim podstawą treści jest spójność, czyli inaczej głos, który nazywa się czasem też głosem
marki i
chodzi tutaj o to, aby wydźwięk naszych tekstów, czyli inaczej naszego copy na stronie, copy od copy
writing.
Jeżeli szukamy kogoś, kto przygotuje dla nas teksty na stronę to szukamy często copywritera, więc właśnie
istotą tego copy na naszej stronie powinno być to, aby było ono napisane jednym głosem, a więc aby w
ten sam sposób adresowało np. osoby, do których się zwracamy, ale też żeby było napisane podobnym charakterem.
Chodzi mi o to, że możemy potraktować teksty z naszej strony trochę bardziej luźno, trochę bardziej rozrywkowo,
choć oczywiście nie powinniśmy żartować ani używać jakiegoś takiego żargonu.
Powinniśmy zdecydowanie unikać jakiś takich słów potocznych w ramach tych treści, ale powinniśmy tak czy inaczej
zadbać o ich spójność, czyli jeżeli np. do naszego odbiorcy zwracamy się per Ty, powinniśmy zawsze to
robić i być w tym konsekwentni.
I również jeżeli przyjmiemy jakąś strategię odnośnie tego jaki wydźwięk mają mieć nasze treści na stronie,
czy są trochę bardziej przyjazne, czy trochę bardziej poważne, w zależności też od charakteru naszej strony powinno
być to zachowane. Wyznaczenie następnie osób odpowiedzialnych za treść, to też jest niezwykle istotne,
czyli wyznaczenie kogoś, kto będzie opiekował się całym content inventory.
To jest jedna rzecz.
Druga rzecz, całym zasobem wszystkich treści, które będą zgregowane w pewien sposób na naszej stronie i
najlepiej jest wyznaczyć coś takiego jak harmonogram aktualizacji, czyli te osoby, które sprawują pieczę
nad treścią powinny np. co tydzień czy dwa, zrewidować jakąś określoną sekcję materiału na stronie, bo
bardzo często taka treść przestarzała, powoduje pewne niedopowiedzenia na naszej stronie, użytkownicy mogą
niezbyt intuicyjnie z niej korzystać.
Jakie zadania obejmuje zarządzanie treścią? To
powinniśmy wyznaczyć w momencie gdy umawiamy się z kimś żeby opiekował się naszą treścią, a nawet jeżeli
sami bierzemy na siebie to zadanie, to powinniśmy sobie wypisać pewne pewne kroki, pewne rzeczy, które
trzeba po prostu zrobić systematycznie, np. co miesiąc sprawdzić to i to w ramach content inventory.
Następnie wyznaczamy ewentualnie osoby do korekty i moderacji.
I to jest ważne, z tego powodu, że chyba że mamy profesjonalnego copywritera, ale zwykle jest tak, że dostajemy, mamy
treści z różnych źródeł i warto żeby jakaś jedna osoba sprawdziła je pod kątem tego naszego głosu, czyli
tej spójności po pierwsze, a po drugie żeby zrobiła korektę tekstu, korektę językową.
Jak będzie przebiegało dodawanie treści to też musimy ustalić. Czy robimy system CMS, który pozwoli nam
aktualizować stronę internetową przez jakiś interfejs webowy, czyli w zasadzie każdy będzie mógł to robić bez żadnego
problemu,
czy nie inwestujemy w taki system i np. będzie przebiegało dodawanie treści w taki sposób, że do
administratora strony wysyłamy nową treść i on to zmienia.
Trzeba to ustalić, ponieważ to pozwoli nam też określić jaki będzie czas od modyfikacji treści do wdrożenia
tego na stronę, a czasem jest to bardzo istotne.
Następnie to jakie mamy typy treści na stronach internetowych. Tych typów jest kilka i warto właśnie wiedzieć,
że, jak je zorganizować i jakie to mogą być,
jakie to mogą być typy. Treść autorska to jest ta treść,
którą się nazywa inaczej treścią właściwą, to jest treść, którą my wygenerujemy sami, która jest treścią najważniejszą
dla naszej strony, i która jest najbardziej wartościową.
To są treści naszych artykułów, które są unikalne, to są nawet nasze materiały multimedialne, takie jak
video czy treści naszych podstron.
Następnie mamy treść zagregowaną, czyli treść, którą pożyczają sobie od innych autorów, pożyczamy czy którą
dostarczają nam jakieś metody zewnętrzne ładowane API, np. nawet to są treści pogodowe na naszej stronie
czy artykuły z blogów, czy posty z Facebooka, które wyświetlamy sobie w jakiejś belce z pomocą Facebookowego
API.
W każdym razie taka treść też pojawia się na naszej stronie.
Następnie treść oparta na danych, czyli inaczej treść żyjąca. Jest to treść, która jest publikowana dynamicznie
i zmienia się często niezależnie od nas, np. są to komentarze użytkowników, ilości polubień,
chociaż komentarze użytkowników będą innym rodzajem treści, także ilości polubień, np. dane pogodowe, które
gdzieś tam zaczytujemy z jakiegoś serwisu pokładowego, np. serwisu pogodowego Yahoo!
Natomiast ta treść komentarzy, jest to jeszcze jeden typ treści, który możemy wyróżnić, czyli inaczej
treść generowana przez użytkowników.
Jeszcze inaczej, skrót UGC, czyli user generated content, jest to treść, którą nam użytkownicy generują w
postaci komentarzy do naszych artykułów, podpisów, recenzji, które przesyłają, no i
zaletą tej treści jest oczywiście to, że jest praktycznie za darmo, ale praktycznie za darmo nie oznacza, że całkiem za darmo,
ponieważ musimy mieć, kogoś kto treść będzie moderował,
kto będzie w razie potrzeby usuwał jakieś złe wpisy, hejty i inne, które nie powinny znaleźć się na naszej
stronie, a więc wymaga to moderacji.
Mamy jeszcze coś takiego jak treść zewnętrzna, którą można wyróżnić, i którą generujemy w celach promocyjnych,
ale już nie jest stricte na naszej stronie internetowej, tylko po prostu prowadzimy swój fanpage na Facebooku
i to też jest treść, którą trzeba przygotować, więc jeżeli myślisz o takim dużym zbiorze treści, no to
tam również powinna się znaleźć zakładka, do której będą lądować treści postów na Facebooku i myślę, że
jest to bardzo, bardzo ważne, bo często jest to niedoceniana sprawa, a potrafią takie np. wpisy, jakiejś
press release, które wysyłamy do prasy,
wpisy na Facebooka, na Twittera, na LinkedIn'a, zdjęcia na Instagrama, naprawdę potrafią pochłonąć mnóstwo zasobów
i zająć bardzo dużo czasu, więc powinniśmy zarezerwować sobie czas na ich przygotowanie.
No i w końcu treść, której nikt nie lubi, czyli treść prawna.
Prawdopodobnie taka treść, za którą warto komuś zapłacić żeby to zrobił i mieć to z głowy.
Są to rzeczy, takie jak regulaminy, polityki prywatności, ale również np. umowy z wykonawcami, umowy o wykonanie
i utrzymywanie serwisu, umowy z copywriterami,
umowy z osobami odpowiedzialnymi za moderację, za prowadzenie social media, jeżeli takich mamy, więc to
wszystko jest treść prawna, która też należy do jednego wspólnego woreczka, który określa wszystkie treści
w ramach serwisu, które musimy przygotować.
Teraz jedna ciekawostka, repozytorium treści. Repozytorium treści to jest trochę coś innego niż niż to,
o czym mówiłem wcześniej, czyli content inventory. W content inventory mamy tylko i wyłącznie tak naprawdę
tytuły stron, później treść jaka ta strona zawiera, jeśli chodzi o jej typ, czyli czy to są media,
czy to jest tekst, czy to są PDFy czy coś innego,
i mamy również link do takiej podstrony, natomiast nie mamy samej tej właściwej treści, która ma znaleźć się
na naszej stronie internetowej.
Po to żeby nie zaśmiecać właśnie content inventory.
Dlatego dodatkowo robimy sobie coś takiego, co nazywa się repozytorium treści i właśnie za to repozytorium
są są odpowiedzialne osoby, które zarządzają treścią na naszej stronie,
czyli ten harmonogram zmian treści dotyczy tego repozytorium.
Teraz jak robić repozytorium treści? Oczywiście możemy mieć gdzieś tam jakieś dokumenty Worda porozrzucane
po 50 dyskach, Google Drive'ach i innych które sobie tworzymy razem z innymi.
Natomiast możemy skorzystać z jednego, bardzo fajnego, darmowego narzędzia, które chciałbym Ci pokazać,
jakim jest Microsoft OneNote, który pozwala nam w bardzo ciekawy, intuicyjny sposób organizować treść i tworzyć
właśnie tego typu repozytoria.
W związku z tym pozwól, że teraz w krótkiej następnej lekcji pokażę Ci jak działa OneNote i jak możesz wykorzystać
wykorzystać go do tego aby stworzyć repozytorium na Twoją stronę.
Do usłyszenia.