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 tego kursu, w której porozmawiamy o następnym ważnym aspekcie komunikacji z naszym
zespołem, jakim jest tworzenie i edycja dokumentacji i tworzenie repozytorium treści, content inventory,
o którym mówiłem.
No i właśnie taką dokumentację na ogół trzyma się w miejscu innym niż nasze główne repozytorium strony,
czyli nie na Git'cie, nie przez Githuba, z tego powodu, że na ogół właśnie Github jest to narzędzie dla tych bardzo bliskich
współpracowników naszej firmy czy developerów, którzy na bieżąco aktualizują kod naszej strony.
Natomiast dokumentacja nadaje się często do udostępniania osobom, które np. są spoza naszej firmy.
Są to agencje reklamowe, np. możemy mieć dokumentację jakiejś kampanii reklamowej czy Landing Page'a
czy grywalizacji na naszej stronie i są to dokumenty, które chcemy często udostępnić również innym osobom,
więc nie robimy z nich członków repozytorium.
Nie uczymy ich np. obsługi Githuba czy Git'a tylko korzystamy z prostszych rozwiązań, takich jak Dropbox,
Google Drive czy OneDrive.
Myślę, że każdy praktycznie zna Dropboxa, jest to rozwiązanie, które pozwala nam ściągnąć aplikację, stworzyć
sobie folder na naszym komputerze, który jest na bieżąco automatycznie synchronizowany z przestrzenią
dyskową Dropboxa i możemy linki do tych plików, które znajdują się na Dropboxie udostępniać innym osobom
tak, aby mogli je pobierać i z nich korzystać, czy współpracować razem z nami na tych plikach.
Jednak w kontekście tworzenia dokumentacji uważam, że akurat OneDrive jest lepszym narzędziem od Dropboxa.
Dlaczego? Dlatego, że OneDrive jest stricte powiązany z branżowym standardem jeśli chodzi o tworzenie
dokumentów czy arkuszy konkurencyjnych, czyli Officem.
Jeżeli korzystamy z Office'a to OneDrive będzie świetną decyzją jeśli chodzi o możliwość tworzenia i trzymania
naszych plików tutaj na tej platformie.
Zaraz pokażę Ci kilka zalet OneDrive'a. Po pierwsze jest on darmowy i już na start dostajesz sporo gigabajtów
przestrzeni dyskowej, które w zupełności wystarczą na całą dokumentację.
Można jeszcze z pomocą różnych sztuczek uzyskać dużo, dużo więcej miejsca.
Ja mam ponad 1 TB miejsca na OneDrive'ie, które myślę że jest w zupełności wystarczające na wszystkie
potrzeby.
Jeżeli chodzi o połączenie tego z aplikacjami Office'a, to jest to bardzo, bardzo przyjazne, bo pokazywałem
Ci już wcześniej aplikacje OneNote.
Mówiłem o tym, że w OneNote'cie gromadzimy takie rzeczy jak np. właśnie repozytorium treści na stronę i teraz
zauważ, że w momencie kiedy ja wchodzę sobie w jakiś notes, na chwilę zapala się tutaj taka lampka
synchronizowania. Tego pliku OneNote'a ja nigdzie nie zapisuje.
Mam taką możliwość, ale nigdy tego nie robię dlatego, że on jest automatycznie synchronizowany z wirtualną
przestrzenią dyskową Microsoftu. I teraz ja mam zawsze aktualną kopię tego pliku na OneDrive'ie, ponieważ
zawsze cały czas przebiega tutaj synchronizacja.
Jeżeli chciałbym zaprosić inne osoby do współpracy nad tym dokumentem, tak jak Ci pokazywałem, mogę użyć
tej małej ikonki z prawej strony udostępniania i ta mała ikonka znajduje się we wszystkich nowych aplikacjach
pakietu Office. To znaczy jest w Wordzie, w Excelu
i te wszystkie typy dokumentów możemy udostępnić innym w bardzo łatwy i intuicyjny sposób, np. zaprosić
je mailem albo zwyczajnie skopiować link do przeglądania i edycji takiego dokumentu.
W tym momencie generowane jest łącze, generowany jest link do tego dokumentu, nad którym pracuję, do
treści na stronie www.
Zauważ, że jest to link, który kieruje bezpośrednio do mojego OneDrive'a, więc mogę teraz sobie np. skopiować
to łącze i wysłać je jakiejkolwiek innej osobie, która może takie łącze otworzyć sobie w przeglądarce
i to co się stanie,
to już pokazywałem, dostanie ona możliwość edycji tego dokumentu.
Nie musi to być OneNote.
Może to być dowolny Excel, dowolny Word, nawet jeśli ta osoba nie ma zainstalowanej aplikacji, zainstalowanych
aplikacji Office, to będzie mogła bezpośrednio w przeglądarce taki notes edytować.
Dlaczego to jest dobre jeśli chodzi o dzielenie się dokumentami i współpracę? No na przykład również dlatego,
że jeśli taka osoba wybierze sobie np. OneNote'a online to za chwilę uzyska informacje o tych wszystkich
innych osobach, które naraz edytują ten dokument.
Tutaj również, tak jak w przypadku repozytorium, nie ma możliwości nadpisać sobie treści, bo cały czas na
bieżąco widzimy które osoby edytują ten dokument i widzimy również informacje np. o tym, która osoba
konkretnie z imienia i nazwiska wyedytowała jaki fragment tego dokumentu. I tak jest w przypadku wszystkich
dokumentów, z którymi pracujemy w tej wirtualnej przestrzeni dyskowej
OneDrive także zdecydowanie polecam to rozwiązanie, ja już od dawna właśnie w ten sposób tworzę, edytuję i
pracuję z dokumentami, tu mam dokumenty grywalizacji, ja np. jeżeli wybierzemy np. specyfikację maili to
jest po prostu arkusz kalkulacyjny, który jest zawsze aktualny, jest udostępniony również
programistom, którzy doskonale wiedzą jak wygląda specyfika np. maili w ramach serwisu eduweb.pl, które zresztą
może mi bardzo jasno tutaj dać do zrozumienia, dopisać jakieś komentarze czy dać do zrozumienia nawet kontrolując
jakieś elementy, że ten element jest już wdrożony i nawet nie musimy wzajemnie wymieniać korespondencji. Zauważ,
że mamy tutaj informacje o tym, że inni użytkownicy edytują ten dokument, więc mamy zawsze właśnie tego podgląd
no i z tego m.in. powodu polecam zdecydowanie OneDrive'a. W samym interfejsie webowym też możemy udostępniać, też
możemy zarządzać tymi plikami, jest to naprawdę bardzo, bardzo fajne.
Co jeszcze oprócz OneDrive'a? Oczywiście Google Drive, który też ma właśnie tę zaletę, że tam możemy pracować
nad, razem z dokumentami Google,
czyli możemy używać aplikacji Google Docs, czyli tych arkuszy kalkulacyjnych czy np. właśnie tworzyć prezentacje
i jest on pod tym względem podobny do OneDrive'a, więc też mogę spokojnie to rozwiązanie polecić. I na sam
koniec jeszcze wspomnę o jednym zasobniku pomysłów,
ponieważ mówiłem Ci wcześniej o tym, że możemy zbierać jakieś swoje idee i inspiracje np. za pomocą
Styletiles czy możemy tworzyć sobie np. na Pinterest'cie zbiory naszych grafik.
A gdybyśmy chcieli pójść o krok dalej, ale nie korzystać np. z OneDrive'a
to jest jedno, bardzo fajne narzędzie, które mogę Ci polecić i nazywa się Dropmark.
Jeśli jeszcze nie korzystałeś z Dropmarka to na pewno warto sobie to sprawdzić.
Jest to bardzo przyjazny, fajny interfejs, który pozwala nam właśnie w ramach takiego naszego dashboardu, tworzyć
sobie nowe repozytoria treści. Ja tutaj mam np. jedno repozytorium Grywalizacja.
Mogę sobie dodać po prostu nową kolekcję i wpisać tutaj WWW.
Znów mam opcję udostępniania, komu udostępniamy, czy wszystkim publicznie, czy wszystkim, którzy mają link czy
tylko osobom, które współpracują z nami nad tym dokumentem.
Tutaj mamy członków zespołu, w którym możemy później sobie dodać.
No i jak widzisz po prostu możemy dodawać tutaj bardzo łatwo pliki. Wystarczy, że przerzucę sobie jakiś dokument,
no przerzućmy jakąś grafikę, która jest tutaj dodawana i również podobnie jak pokazywałem przed chwilą
w przypadku OneDrive'a, możemy bardzo łatwo dzielić się takimi plikami, udostępniać je. No
niestety w przypadku Dropmarka jest to narzędzie płatne, więc kilka dolarów musimy zapłacić. Wersja podstawowa
jest bardzo okrojona, więc trudno jest z niej w pełni skutecznie korzystać.
No i jeśli chodzi o wymianę dokumentów i zasobnik pomysłów, który chciałem Ci pokazać to już jest wszystko.
W tej lekcji dziękuję Ci za uwagę, a w kolejnej będziemy pracować nad następnymi, fajnymi narzędziami,
które pomogą nam pracować w zespole.
Do usłyszenia.