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, ostatniej już lekcji tego wprowadzającego działu, w której chciałbym przybliżyć Ci jeszcze
szereg pojęć, a także w pierwszej kolejności pokazać kilka linków, z których będziemy korzystać w dalszych
częściach tego kursu,
a dotyczą one czerpania informacji na temat np. aktualnych przeglądarek, wsparcia dla technologii HTML5,
czy np. adopcji technologii mobilnych.
Pierwsza strona to ranking.pl gdzie znajdziesz dużo takich aktualnych dla polskiego rynku statystyk Gemiusa.
Następnie mamy w3schools, czyli stronę gdzie jest dużo statystyk dotyczących technologii przeglądarek.
google.com/analytics to jest strona Google Analytics gdzie głównie będziesz czerpał informacje o tym jak wygląda adopcja
technologii na Twojej stronie internetowej.
No i w końcu serwis statcounter.com, który zaraz ci pokaże.
Zawiera on naprawdę mnóstwo pożytecznych informacji i na stronach developer.android.com również znajdziesz
tzw. dashboardy, które np. dostarczają szeregu informacji o bieżących rozdzielczościach. Strony statcounter.com
czyli adres gs.statcounter.com prezentuje nam np. mnóstwo rozmaitych statystyk dotyczących użycia
w tym przypadku akurat przeglądarek.
Jak widzisz najwięcej osób, bo aż 54% korzysta z Chrome'a i
jest to trend rosnący, a my możemy tutaj filtrować sobie te wyniki, np. możemy zobaczyć jak to wygląda
w Polsce,
ponieważ tutaj też znajdują się takie statystyki jak statystyki dla poszczególnych krajów. No i oczywiście
możemy nie tylko przeglądać statystyki przeglądarek, jest tutaj masa różnych rzeczy, które są dostępne,
np. rozdzielczości ekranów, systemy operacyjne, silniki wyszukiwarek i możemy przeglądać to łącznie albo
osobno dla desktopów, tabletów, urządzeń mobilnych i np. nawet konsol w związku z tym z tych statystyk
statcounter będziemy sobie korzystać w następnych częściach kursu, a ostatnia rzecz, o której tutaj chciałbym
wspomnieć to jest taki krótki słowniczek dotyczący tego kto jest kim w branży Web. Będę bardzo szczegółowo
wyjaśniał jeszcze dodatkowe role, które mogą pojawić się w procesie przy okazji omawiania technik SCRUM,
o których będę mówił w kontekście nowego podejścia do projektowania, ale teraz na sam początek zapamiętaj
kilka podstawowych terminów. Jeśli chodzi o UI i UX Designera, czyli pierwszą osobę, która bierze udział w naszym
procesie jest to specjalista od tych rzeczy, o których mówiłem w poprzednich lekcjach, czyli w zakresie
użyteczności, architektury informacji na stronie.
Czasem jest to grafik, często jest to grafik i grafik na pewno powinien posiadać tego typu umiejętności,
ale często też jest to zupełnie inna osoba, która orientuje się w aktualnych statystykach, trendach,
a także rozmaitych badaniach i raportach dotyczących tego jak ludzie korzystają z serwisów internetowych
czy aplikacji mobilnych.
Następnie Web Designer to bardzo ogólne pojęcie.
Zazwyczaj jest to grafik, który się specjalizuje dodatkowo w projektowaniu stron internetowych, czyli
osoba, która można powiedzieć ma pewną wiedzę na temat i technologii HTML i Front-End'owych technologii
i również potrafi projektować grafikę.
Najczęściej nie ma ona świadomości, jakiejś dużej, pisania w technologiach serwerowych, ale te wszystkie
technologie Client-Side oraz graficzne potrafi ogarnąć, więc można powiedzieć, że jest to też taka ogólna nazwa
kogoś kto orientuje się w tym wszystkim co jest w świecie Web Designu i trochę potrafi kodować, trochę potrafi
pracować w aplikacjach graficznych.
Jestem przekonany, że po tym kursie, po kursie Nowoczesny Web Design staniesz się właśnie Web Designerem, będziesz miał wszystkie
informacje, które potrzebne są do tego aby ogarnąć te wszystkie nowe technologie. Web Developer to z kolei
już jest programista, czyli ktoś kto specjalizuje się w kodowaniu i programowaniu stron internetowych
czy internetowych aplikacji.
No i developerzy mogą specjalizować się np. w językach Client-Side czy Server-Side
i stąd nazywamy ich tym co jest poniżej - Front- albo Back-End developerem, czyli Front-End Developer to
będzie ten programista, który specjalizuje się w językach Client-Side, takich jak HTML, CSS oraz JavaScript
i ewentualnie pracuje również we Frameworkach typu właśnie Ember, Backbone czy Angular,
natomiast Back-End Developer to programista, który będzie specjalizował się w tych językach serwerowych,
czyli np. w ASP.NET czy w języku PHP
wraz ze współpracą z bazą danych. Inaczej Front-End Developera, czyli tego od HTML i CSS'ów nazywamy często koderem.
Jeśli chodzi o jeszcze jedną osobę, która bierze udział w takim procesie, jest to administrator serwera
czyli inaczej admin.
Osoba która specjalizuje się w administrowaniu, zabezpieczaniu i konserwacji oprogramowania działającego
po stronie serwera.
Jeżeli będziesz posiadał serwer dedykowany, czyli Twoją własną maszynę, na której działa Twoja strona
prawdopodobnie będziesz potrzebował również admina, który oczywiście nie będzie pracował na full time
ale od czasu do czasu pomoże Ci zaktualizować komponenty serwera, zadbać o jego bezpieczeństwo i jest to
na pewno również ważna osoba w takim procesie.
Jeżeli skorzystasz z hostingu, którego dostawca oferuje Ci np. serwer współdzielony, na ogół taka osoba na samym
początku procesu nie jest potrzebna i podstawową konfiguracją może zająć się naprawdę każdy.
Na koniec polecam Ci także sprawdzić serwis Edupraca.pl.
Jest to serwis, który prowadzimy i agreguje on mnóstwo, w zasadzie wszystkie aktualne oferty pracy w branży IT z różnych
serwisów, takich jak pracuj.pl oraz innych i możesz tam bardzo łatwo sprawdzić również jakie jest zapotrzebowanie
na konkretne branże, czyli ile jest np. ofert dla Web Developerów, ile jest dla UI czy UX Designerów, ile
dla administratorów, a także sprawdzić zapotrzebowanie już na konkretne technologie. Wpisując np. ASP.NET Developer
czy PHP Developer.
Jestem przekonany, że teraz ta nomenklatura będzie również Tobie bliższa i mogę spokojnie zaprosić Cię
na kolejne części tego kursu.
Już takie części, które będą zawierały praktyczne wskazówki i informacje dotyczące projektowania nowoczesnych
stron internetowych.
Po kolei będziemy zajmować się całym procesem, począwszy od projektowania i etapów koncepcyjnych z prototypowaniem,
z mockupami, z wieloma narzędziami, które przydadzą nam się w tym procesie przez samą informację o współczesnym
projektowaniu graficznym, o nowoczesnych trendach, o typografii, o kolorach, ikonach, gridzie i wielu wielu
innych rzeczach, przez takie rzeczy również bardzo praktyczne, jak związane z organizacją pracy w zespole
i przydatnym narzędziami, a także promocją i pozycjonowaniem Twojej witryny.
Zatem zapraszam Cię serdecznie na kolejne części kursu.
Nowoczesny Web Design.
Do usłyszenia w kolejnych lekcjach.