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, dalej zajmujemy się efektywną pracą w zespole i pokazałem Ci Dropmark, ale
chciałbym jeszcze wspomnieć o Trello. Tylko dlatego, że wiele zespołów pracuje na Trello. Jest to też bardzo
fajny, darmowy system, który pozwala nam gromadzić rozmaite zasoby.
Jest to dużo więcej niż Pinterest, trochę więcej niż Dropmark, ponieważ możemy tworzyć na wzór Pinteresta
właśnie takie swoje Boards, czyli tablice gdzie dodajemy różne rzeczy, różne zasoby, ale również ma bardzo
rozbudowany system notyfikacji oraz system właśnie współpracy w grupie, ponieważ możemy dodawać do takiego
projektu, do takiej tablicy różnych użytkowników, którzy mogą razem z nami ją współtworzyć.
Możemy również z nimi rozmawiać, a także tworzyć rozmaite zadania oraz przypomnienia czy notyfikacje.
Być może spotkasz się z Trello.
Dlatego
to narzędzie też Ci pokazuje i warto też oczywiście je przetestować bo każdy ma swoje indywidualne
preferencje. Być może będziesz chciał z niego skorzystać.
Natomiast temat ważniejszy, który chciałbym poruszyć w tej lekcji.
Jest to temat tzw. ticketów i systemów do tworzenia i zarządzania ticketami, które pozwalają na budowanie
pewnej struktury zadań oraz przypisywanie im pewnych priorytetów.
No i oczywiście trackowanie, śledzenie tych wszystkich zadań.
Czym są systemy do ticketów i
które z nich chciałbym pokazać, ponieważ jest ich naprawdę bardzo, bardzo dużo.
Jest Basecamp, ogromny system, z którego dużo osób korzysta.
Jest dosłownie dziesiątki czy setki jeszcze innych systemów, które mógłbym polecić, ale nie chcę aż tak
mocno mieszać Ci w głowie. Chcę pokazać Ci taki system, z którego ja korzystam najczęściej i korzystam
z niego też na potrzeby Eduweba.
Uważam, że Springloops jest naprawdę bardzo dobry, ponieważ jest to system, który może rosnąć razem z Twoimi
potrzebami.
Jest to naprawdę bardzo kompleksowe narzędzie, które oprócz samego ticketowania i przydzielania zadań, oferuje
nam możliwości np. połączenia go z repozytorium SVN czy z Gitem albo trackowania czasu, nawet fakturowania,
wystawiania rachunków i wiele, wiele więcej.
Natomiast na początku jest dla nas bardzo przyjazny i tak naprawdę w miarę dopiero gdy będziemy potrzebować
dodatkowych rzeczy okazuje się, że możemy zrobić to w ramach Springloops. Ale nie musimy, więc polecam
Springloops i pokaże Ci jakiś archiwalny kawałek tego jak wyglądały np. zadania, czy wyglądają zadania
w ramach Eduweba.
Wygląda to tak, że główny panel, który mamy na Springloopie mamy podzielony na nasze projekty, jestem w
tym momencie w projekcie Eduweba no i jestem w czymś takim jak newsfeed, czyli po prostu mam tutaj informacje o
wszystkich najnowszych wydarzeniach. które miały miejsce.
Mamy też sekcję notyfikacji po lewej stronie, którą możemy przeglądać, gdzie będą informacje o jakichś
bieżących zadaniach, które się wydarzyły niedawno. Mamy informacje o tym kto jest online, o członkach naszego
zespołu, mamy members.
Mamy również możliwość tworzenia i od tego w zasadzie zaczynamy, tzw. milestone'ów i teraz przejdę do tej
zakładki. Jest to zakładka, która pozwala zbudować taką serię jak gdyby najważniejszych kroków milowych
w życiu naszego serwisu, które mają jakieś konkretne daty.
Jeżeli dodamy sobie nowy milestone to jak widzisz poza jego nazwą określamy od kiedy do kiedy ten milestone
ma trwać i do takiego każdego milestone'a będziemy dopiero przypisywać zadania, czyli definiować je jako tzw.
taski.
Pozwól, że w takim razie zanim przejdę do tasków jeszcze wytłumaczę Ci co tu innego. Możemy jak widzisz trackować, czyli
sprawdzać, śledzić czas jaki poświęcamy na wykorzystanie, na wykonanie każdego zadania, a także oglądać
dosyć szczegółowe raporty. Te raporty z poświęconego czasu nad różnymi zadaniami mogą później przełożyć
się np. na faktury itd. dla naszych współpracowników.
Ale myślę, że to nie jest akurat tutaj najważniejsze.
Zauważ, że śledzenie czasu jest bardzo proste, ponieważ mamy timers i np. nasze bieżące czy najnowsze zadania
możemy po prostu włączyć tutaj sobie Timer
i on odlicza czas, który poświęcamy na pracę nad tym zadaniem.
Następnie mamy Wiki, czyli po prostu taką Wikipedię firmową, gdzie będziemy mogli umieścić różne
dokumentacje, na przykład ważne kontakty, np. jakieś dokumenty poszczególnych milestone'ów.
Bardzo często też właśnie tak się robi.
No i mamy ewentualnie przy kontroli wersji Source i Deployments w momencie kiedy mamy to połączone z SVN'em
czy z Gitem.
No i teraz możemy w zasadzie już przejść do tasków, czyli do najważniejszego.
Jak widzisz mamy tutaj podzielone taski na pewne kategorie, np. Moje do wykonania czy Dodane przeze mnie. Możemy
tworzyć i dodawać takie swoje kategorie i przeglądać w ramach tych kategorii właśnie taski,
czyli zadania. No a możemy stworzyć sobie po prostu nowy task.
Jak widzisz oprócz tego możemy po prostu stworzyć sobie np. nową prywatną wiadomość do jakiegoś członka
naszej drużyny, czyli np. utworzyć nowy Timer czy stronę Wikipedii.
Wybierzmy nowy task i to jest tytuł zadania, które tworzymy czyli na przykład "Zmiany na stronie głównej",
gdybym jeszcze umiał pisać, a następnie treść tego zadania, czyli wprowadźmy jakieś następujące zmiany.
Teraz bardzo łatwo możemy np. przeciągnąć tutaj jakiś dodatkowy plik z naszego komputera, który zostanie
załadowany. Jak widzisz jest to plik PSD, który ktoś będzie mógł pobrać i zgodnie z tymi wskazówkami wykonać
jakąś rzecz, którą mu tutaj zlecimy.
Komu zlecamy tą rzecz? Na przykład możemy ją zlecić Marcinowi, to są członkowie zespołu, którzy biorą np. udział
razem z nami we współtworzeniu tego serwisu, czy właśnie tego projektu, nad którym pracujemy.
Możemy przypisać go do konkretnego Milestone'a czyli np. jeżeli to są bieżące poprawki na Eduwebie, proszę bardzo, przypisuję go
do tego milestone'a.
Następnie nadaje mu konkretny priorytet, czyli priorytet typu "Krytyczny"
to jest taki błąd, który jakby uniemożliwia już w ogóle działanie naszej strony i trzeba w środku nocy wstać
i go naprawiać.
Następnie mamy priorytet "ważny", ,Low i Minor.
Oczywiście można te priorytety sobie, zmieniać można nimi zarządzać.
Proponuję uważać na to, żeby no nie dawać wszystkich tasków krytycznych czy bardzo ważnych, ponieważ często
to tak się kończy, ale warto rzeczywiście zastanowić się nad tą hierarchią ważności.
Możemy określić, że to zadanie ma być wykonane np. jutro, w następnym tygodniu czy określić konkretną datę,
np. damy na wykonanie tego zadania komuś bardzo długi termin dla naszego programisty, czyli np. jeden
dzień.
Zważywszy że dziś jest już wieczór, no to myślę, że jutro rano powinienem to mieć i teraz wybieram po prostu
Create task. To co się stało to ten task został dodany.
Ja mogę teraz go sobie zobaczyć, jest to konkretny ticket, ma on konkretny plik, który został przypisany
no i dodatkowo konkretną osobę, która została przypisana do jego wykonania na jutro.
Teraz mogę oczywiście tą osobę usunąć.
Mogę zmienić osoby odpowiedzialne, mogę zmienić wszystkie parametry tego taska no i mogę także zaktualizować
jakoś status tego taska, np. dodać do niego jakiś komentarz.
I to samo będą mogli zrobić moi współpracownicy.
Mogę również zaktualizować status typu np. ważność.
Jeżeli on jest teraz bardziej istotny, no to nadam mu wysoki priorytet
i te zmiany też zostały uwzględnione,
natomiast wszyscy moi współpracownicy te zmiany będą widzieć, te których dotyczy ten task,
te osoby będą miały to wszystko w powiadomieniach.
Również mamy ustawione powiadomienia mailowe, także te powiadomienia również do nich dotrą. Także w ten
sposób możemy bardzo łatwo tworzyć i zarządzać zadaniami, a także trzymać, że tak powiem, właśnie pieczę
nad całym tym systemem wszystkich rzeczy, które zmieniają się na naszej stronie i wszystkich aktualizacji.
Mam nadzieję, że taki system do ticketów będzie dla Ciebie przyjazny,
a ja jeszcze w kolejnej lekcji tej części powiem Ci jak ważne jest odpowiednie formułowanie ticketów i
co powinien zrobić designer aby tworzyć dobre tickety dla developera.
Natomiast na razie chciałem zamknąć tą lekcję jeszcze mówiąc o bieżącej komunikacji i podając kilka
fajnych narzędzi, bo oczywiście oprócz takiego narzędzia do tasków tutaj mamy co prawda bezpośrednie wiadomości,
ale tak naprawdę musimy też zadbać o komunikację instant, czyli taką typu telefoniczną, która jest ok,
ale również np. komunikacja na Skype jest bardzo dobra, ponieważ pozwala przesyłać pliki, przesyłać
fragmenty kodu, które możemy skopiować i wkleić,
więc też polecam Skype'a.
Jeżeli korzystasz z OneDrive'a i z Office'a to jedna ciekawa rzecz w kontekście Skype'a. Jest on tutaj dostępny
na stronach OneDrive'a, więc wystarczy kliknąć sobie w Skype'a i
zostanie on uruchomiony i po prawej stronie mamy konwersacje i możemy na bieżąco rozmawiać również z
członkami naszego zespołu.
No i oczywiście chcę polecić też Slacka, slack.com. Slack to jest nowe, fajne narzędzie wykorzystywane
w coraz większej ilości firm, które tworzy, które oprócz możliwości bezpośredniego kontaktu umożliwia
też trochę bardziej zaawansowane opcje współpracy,
ale to o tym proponuję Ci tutaj doczytać.
Ja mogę sobie szybciutko utworzyć nowy zespół, już na taki adres, chyba na ten adres jeszcze nie mam zespołu,
zobaczmy, więc tworzę sobie nowy zespół
i zauważ, że jest to bardzo, bardzo proste.
Slack jest darmowym narzędziem.
Możemy oczywiście je tam rozbudować znowu zaawansowanymi, płatnymi opcjami,
ale nie ma takiej potrzeby.
Tworzę sobie Slacka typu Eduweb, następnie jak widzisz mam coś takiego jak eduwebteam.slack.com
i to jest dla mnie ok.
Wybieram sobie dla mnie nazwę użytkownika i to jest gotowe. W zasadzie wszystko co mieliśmy do zrobienia
aby założyć nowy zespół,
oprócz wysłania zaproszeń do użytkowników naszego zespołu jest w porządku.
Na razie nie będę tego robił, więc wybieram Skip.
Gdybym to zrobił, wszyscy dostali by elegancko zaproszenia mailowe i mogliby się wpisać do mojego zespołu.
W tym momencie nie będę uruchamiał tutoriala, możesz to sobie zrobić żeby właśnie poznać możliwości Slacka,
no ale tutaj jak widzisz mamy bardzo przyjazny interfejs, który również będzie listował dla nas wszystkich
członków zespołu, a także umożliwiał m.in. wpisywanie rozmaitych wiadomości na tablicy naszego zespołu,
Instant tak jak ma Skype oraz komunikowanie się bezpośrednio z pomocą direct message, z bezpośrednich wiadomości
z członkami naszego zespołu. To nie wszystko na co pozwala nam Slack, ale pozwól, że zostawię odkrywanie
tego naprawdę bardzo fajnego narzędzia już Tobie i Twojej ciekawości. Mam nadzieję, że z tego skorzystasz,
ponieważ myślę, że Slack jest jednym z fajniejszych rzeczy, którą możesz wdrożyć w swoim zespole. No i na tym
prawie chciałbym skończyć tę lekcję.
Jeszcze oczywiście wspomnę o TeamViewerze i o narzędziach, które umożliwiają współpracę na żywo z pomocą zdalnego
pulpitu. Oczywiście takie narzędzia jak RDP, po prostu zdalny pulpit Windowsowy
pewnie każdy zna, natomiast TeamViewer'a prawdopodobnie też. Jeśli jeszcze go nie znasz to pokażę Ci jak działa.
Wystarczy, że zainstalujemy sobie TeamViewer'a na dwóch komputerach.
Ja mam tutaj na przykład dostępne w tym momencie komputery, do których mogę się połączyć, więc wybieram
mój komputer roboczy,
no i proszę bardzo, jestem już nim połączony.
Teraz jestem na Macu, mój komputer jest na Windowsie, to nic nie przeszkadza, mam tutaj możliwość pracy
na tym komputerze. Oczywiście na przykład warto by było wybrać inną rozdzielczość ekranu, np. taką, która
będzie najbardziej wygodna akurat na tym ekranie, na którym ja teraz jestem.
Jeżeli chcemy na przykład w ramach naszego zespołu komuś pomóc, dopisać mu jakiś fragment kodu czy np.
zobaczyć to co on akurat na bieżąco robi w Photoshopie to możemy skorzystać z TeamViewera, a np. narzędzie
Adobe, tj. Photoshop, mają jeszcze jedną fajną opcję i o tym pewnie jeszcze nie wiedziałeś.
W menu edycji mamy coś takiego jak Remote Connections... Z pomocą Remote Connections... w narzędziach Adobe
możemy postawić sobie serwer, do którego nasi użytkownicy, których zaprosimy pod konkretny adres IP będą
mogli się połączyć i zobaczyć wszystko to co robimy w Photoshopie na żywo.
No i tymi narzędziami kolaboracji na żywo i współpracy takiej z pomocą wiadomości instant chciałbym zakończyć
tą lekcję i zaprosić Cię do lekcji kolejnej.
Do usłyszenia.