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, powoli przechodzimy już do bardzo ważnego tematu jakim jest Responsive Web Design,
ale zanim o nim powiem chciałbym jeszcze w tej krótkiej lekcji wytłumaczyć i powiedzieć, wspomnieć o
jednej istotnej rzeczy w kontekście urządzeń przenośnych.
Aplikacje przeglądarkowe, czyli strony internetowe nie są jedyną rzeczą, jedynym sposobem w jaki możesz dostać
się do kieszeni użytkownika, czyli na to urządzenie przenośne.
Oprócz stron, które działają w mobilnych przeglądarkach takich jak mobilna Opera, Chrome czy np. Safari na iOS'ie,
możesz również stworzyć i napisać własną aplikację natywną, czyli taki program, który instaluje się
na telefonie i jest dostępny w postaci takiego jakiegoś kafelka czy ikonki np. na ekranie startowym.
Na pewno doskonale zdajesz sobie sprawę i nie chcę obrażać Twojej inteligencji,
jeśli chodzi o aplikacje natywne i aplikacje webowe, ale chcę żebyś wiedział, że jest to enumeratywna i
wyczerpana sprawa jeśli chodzi o to jak można dotrzeć do użytkownika.
Możesz też zastanawiać się nad tym czy przypadkiem właśnie aplikacje natywne nie są lepszym sposobem na to aby właśnie
stworzyć takie doświadczenie mobilne.
Czyli stworzyć mobilną aplikację, z której użytkownicy będą korzystać.
Otóż oczywiście użytkownicy i
potwierdzają to badania, które mówią, że użytkownicy wolą korzystać z takich dobrze napisanych aplikacji
natywnych, ale nie wyklucza to tego, że Twoja strona internetowa musi również być dopasowana do małego
ekranu.
Nie zawsze są tacy użytkownicy, których nazywam użytkownikami spontanicznymi.
Nie zawsze będziemy chcieli skorzystać z aplikacji natywnej, jeżeli np. jadę do Zakopanego i chce odwiedzić
stronę pensjonatu, do którego jadę aby tam np. zarezerwować pokój to nie będę na pewno korzystał z aplikacji
natywnej tego pensjonatu, no chyba, że z jakiejś aplikacji Booking, ale tam niekoniecznie może on być, tylko
skorzystam z przeglądarki w telefonie, wpisze w Google nazwę pensjonatu i w ten sposób wejdę na jego
stronę.
Będę spontanicznym klientem, a więc będę korzystał z aplikacji webowej, czyli strony internetowej.
Czyli musisz wiedzieć o tym, że te dwie formy - aplikacje natywne i aplikacje webowe, będą koegzystować
i będą może nie zawsze równoważne, ale zawsze będą potrzebne.
Jeśli chodzi o podstawowe wady i zalety jednego i drugiego rozwiązania to chcę żebyś też miał ich świadomość.
Przede wszystkim ogromnym plusem aplikacji webowych, czyli stron internetowych po prostu na urządzeniach
przenośnych jest to, że są multiplatformowe, czyli strona zrobiona raz działa w każdym, w każdej przeglądarce
niezależnie od urządzenia czy to jest telefon, tablet
może to być pralka, lodówka, łóżko, teraz już wszystko będzie miało za chwilę przeglądarkę natomiast będzie
wszędzie to działało.
O ile oczywiście zoptymalizujemy to pod różne rozdzielczości, będzie wszędzie
ta jedna wersja multiplatformowa. Nie ma konieczności instalacji i po prostu wchodzimy do przeglądarki
i wpisujemy adres, jest na każdym urządzeniu dostępna i są łatwe aktualizacje po obu stronach, czyli użytkownik
żeby aktualizować stronę internetową po prostu ją odświeża w przeglądarce,
natomiast my jako deweloperzy, twórcy stron po prostu wrzucamy nową wersję na serwer
i to tyle. Także wszyscy już to mają, wszyscy mają tą nową wersję.
To również determinuje mniejsze koszty pisania tych stron internetowych dostosowanych do urządzeń przenośnych.
Minusy i wady webowych aplikacji to fakt, że są one dostępne tylko online. No przeglądarka bez internetu niestety
nie zadziała.
Zrobiłem tutaj małą gwiazdkę, ponieważ nowe technologie jak HTML5 oferują np. coś takiego jak aplikacje
offline, czyli możliwość pobrania zawartości strony internetowej i przeglądania wtedy jej również w trybie
offline. Aczkolwiek na razie nie jest to popularne rozwiązanie jeśli chodzi o urządzenia mobilne, ale
mała gwiazdka dlatego, że może w przyszłości będziesz z tego korzystał.
Ponadto taka aplikacja nie gwarantuje nam dostosowania do pewnych standardów jeśli chodzi o obsługę
samego systemu i samej platformy na telefonie.
Użytkownicy są przyzwyczajeni do pewnych schematów zachowania, np. wiedzą, że na iPhonie zawsze w lewym
górnym rogu znajdą przycisk, który skieruje ich wstecz do poprzedniej planszy.
W przeglądarce też to jest, ale na naszej stronie te standardy nie muszą być implementowane.
Inne są wytyczne i guideline'y i standardy dla Androida, inne dla iOS, inne dla Windowsa i tworząc aplikacje natywne
my z nich korzystamy tym samym ułatwiając trochę użytkownikom odebranie naszych treści, bo oni są nauczeni
po prostu tych schematów postępowania na konkretnej platformie.
Natomiast jeśli chodzi o Web nie mamy takiej możliwości jakby sprofilować pod konkretną platformę, a nawet
gdybyśmy mieli to nie bardzo się to robi.
Brak wsparcia funkcji natywnych również z gwiazdką, funkcje natywne to są właśnie te wszystkie sensory
m.in. czyli akcelerometr, żyroskop itd.
Tutaj postawiłem gwiazdkę ponieważ znów są mechanizmy HTML5, które pozwalają w pewien sposób się dobrać
np. do zdjęć w telefonie, albo sam wiesz, że np. Google Maps działa z pomocą jakiejś geolokalizacji, może to być po GPS'ie
i może działać w przeglądarce, aczkolwiek nie wszystkie te rzeczy możemy wykorzystać na stronach
internetowych i są pewne narzędzia wspomagające, np. jest taka platforma jak PhoneGap i PhoneGap jako framework,
który jest dostępny, framework JavaScriptowy, który może działać na Twojej stronie.
Jeżeli wybierzemy sobie na przykład jakąś dokumentację zauważysz, że PhoneGap umożliwia rozszerzenie możliwości
Twojej strony internetowej o dostęp do pewnych negatywnych API, które znajdują się w, znajdują się w telefonie
komórkowym.
Jeżeli wejdziemy sobie do Plugin APIs to zauważ, że możemy np. sprawdzić status baterii, uruchomić kamerę, dostać
się do kontaktów, dostać się np. do zapisu plików na urządzeniu, geolokalizacji itd.
Możemy uruchomić wibracje na telefonie, czyli to jest pewien Framework, który pozwala Twoją stronę internetową
wyposażyć w pewne funkcjonalności, które zadziałają z tymi natywnymi API, czyli właśnie z tymi natywnymi
funkcjami telefonu i również z sensorami. Ale nie jest to taka rzecz, która jest gotowa dla nas, istnieje
już od razu możemy z tego skorzystać, musimy na przykład coś dodać coś doinstalować do naszej strony.
Ale warto pamiętać że np. PhoneGap to oferuje.
Ponadto mamy plusy aplikacji natywnych, czyli tych instalowanych na telefonie, które musimy pobrać z np.
AppStore czy z Google Play i to jest możliwość dostępu do tych funkcji natywnych urządzenia, czyli właśnie do sensorów.
Później mamy Look & Feel, czyli to jest właśnie ta możliwość dostosowania do tych specyficznych guideline'ów i wymogów,
do tego żeby użytkownikom łatwo korzystało się z aplikacji tylko i wyłącznie przez to, że inna aplikacja
na tej samej platformie działają podobnie.
Następnie mamy "Użytkownicy je lubią!", to co mówiłem o statystykach.
Użytkownicy wolą korzystać z aplikacji natywnych jeżeli są dobrze napisane. Napisane dobrze są również
szybsze, bo po pierwsze nie musimy tracić czasu na otwieranie przeglądarki i wprowadzanie adresu i
załadowanie naszej strony, no a
po drugie jakby te aplikacje natywne łączą się bezpośrednio bez żadnej warstwy, bez żadnej powłoki,
która jest przeglądarką bezpośrednio z tym kodem który działa na telefonie i dlatego mogą działać szybciej.
Jednak aplikacje natywne mają również swoje wady, m.in. musimy obsługiwać wiele platform, czyli musimy
osobno pisać aplikacje na przynajmniej te trzy najbardziej popularne platformy.
Przypomnę, że są to Android, który ma w Polsce i na świecie około 60-70% wszystkich urządzeń, jest
to iOS, który różnie to wygląda w różnych krajach, w Polsce ma około 10%, ale te statystyki trochę
rosną, ale np. w Skandynawii czy w Stanach ma zdecydowanie więcej udziału w rynku i również w krajach
bogatszych.
Jeśli chodzi o trzecią siłę to jest Windows Phone, który tutaj z kolei w Polsce ma bardzo duży udział,
nawet czasem się mówi że 15-20%, natomiast w innych krajach troszeczkę mniejszy, więc ma to swoją
specyfikę i możesz sobie te statystyki np. na StatCounterze porównać.
Natomiast musimy te wszystkie platformy zaadresować osobno
taką aplikacją, to również znacznie podwyższa jej koszty.
Musimy mieć różnych programistów, jedni piszą na Androida, a drudzy na iOS'a, trzeci na Windowsa i musimy utrzymywać te wszystkie
aplikacje oraz je aktualizować.
Czyli w zasadzie jest to dość mozolny proces, bo nie tylko wysyłamy coś raz na serwer, ale musimy przejść
przez taki specjalny proces certyfikacji, która prowadzi do poszczególnych sklepów mobilnych, takich jak
np. AppStore dla iOS'a czy Google Play dla Androida.
Żeby tam się dostać musimy przejść pewien proces.
Musimy też zapłacić za konto developerskie, zwykle około stu dolarów rocznie, no i to generuje dodatkowe
koszty.
I również zgłaszanie tych aktualizacji, to jest tak, że nie każdy użytkownik może od razu tą aktualizację
mieć, bo niektórzy sobie ich nie instalują i wtedy niektórzy użytkownicy korzystają ze starszej wersji
aplikacji niektórzy z nowszej. W przypadku stron internetowych
nie ma to miejsca - jedna rzecz na serwerze, użytkownik odświeża i ma aktualną wersję. No i początkowa faza,
czyli właśnie samo przemyślenie tych aplikacji na różne platformy.
Samo zaprototypowanie ich wymaga na pewno więcej czasu niż gdybyśmy robili jedną aplikację webową.
To są właśnie te różnice i chciałem żebyś o tym wiedział.
Teraz skoncentrujemy się już na tym co w tym kursie jest najważniejsze, czyli na tym jak działają nowoczesne
strony internetowe,
a jeśli mówimy o stronach internetowych mobilnych, czyli o aplikacjach Webowych, to musimy pomówić o RWD,
czyli o Responsive Web Design i zapraszam Cię w związku z tym do kolejnego działu tego kursu.