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!
Cześć, witaj w kolejnej lekcji, w której opowiem Ci o projektowaniu w oparciu o siatkę, czyli poznasz coś
takiego, czym jest Grid.
Podstawowa koncepcja, która w designie w zasadzie występuje od dawien dawna, jeszcze jest sprzed ery internetu,
natomiast przyjęła się bardzo dobrze jeśli chodzi o tworzenie layoutów, a także implementowanie i kodowanie
layoutów stron internetowych.
Zastanówmy się w związku z tym czym jest siatka, ale wyjdźmy od pewnych konwencji i projektowania, które
również chciałbym żebyś po tym kursie znał, m.in. chciałem nawiązać do Swiss, czyli inaczej International
Typographic Style, który był stylem, który rozwinął się w Szwajcarii w latach 50.
i był to styl, który bardzo mocno nawiązywał do prostoty, do upraszczania, do znaków, do symboliki, do topografii
i również do siatki jako tego elementu, który jest bardzo ważny w projektowaniu, i który pozwala na uzyskanie
takich bardzo spójnych i solidnych layoutów.
Czym jest ta siatka zaraz Ci pokażę, a jeśli chcesz dowiedzieć się więcej o International Typographic Style, czyli
o Swiss'ie, zajrzyj proszę na Wikipedię, jest to bardzo fajny artykuł na temat jego historii, ale jeszcze
ciekawszy link,
moim zdaniem to jest link przedstawiający na Flickr'ze zbiór zasobów powiązanych ze Swiss'em, czyli te
grafiki, które powinny wyrobić w Tobie jakiś taki estetyczny, estetyczne pojęcie czym jest Swiss. Jak
widzisz,
są to intensywne kolory.
Jest to bardzo prosta topografii.
Są to jednolite tła.
Są to kontrastują ze sobą elementy.
Jest tutaj bardzo dużo grafiki w takich wyrazistych, jaskrawych kolorach, a także bardzo dużo typografii
i bardzo dużo cyfr i liter.
No i także ikonografii, czyli jakiś wskazówek.
Ogólnie Swiss np. mi bardzo mocno kojarzy się z takimi miejscami jak miejsca publicznego transportu czy
przykładowo lotniska.
No i rzeczywiście to jest
myślę, że dobre skojarzenie, ponieważ oddaje ono ducha Swiss i ducha pewnej prostoty i diagramów pewnego upraszczania,
np. na lotniskach spotyka się mnóstwo ludzi różnych kultur, różnych kręgów językowych, w związku z tym
oni wszyscy znajdują się w jednym miejscu i potrzebują szybko, w jakiejś trochę stresowej sytuacji np. dotrzeć
na odpowiedni terminal czy odebrać swój bagaż.
No i właśnie wszystkie znaki na lotnisku i cała komunikacja wizualna z użytkownikiem jest przemyślana
i zrobiona w taki sposób, aby była ona jak najbardziej intuicyjna, jak najprostsza, w odpowiednim miejscu, no
i dużo tam jest moim zdaniem nawiązań do Swiss'a.
Również Swiss możesz porównać i poszukać jeżeli chcesz dowiedzieć się więcej
z takim właśnie, taką koncepcją jak Bauhaus. Bauhaus był szkołą projektową, zresztą nadal jest, aczkolwiek
chyba czasy świetności może miał troszeczkę wcześniej, która nawiązywała właśnie do prostoty i do takiego
koordynowania treści, a nie formy, czyli ważniejsze było to, ważniejsza była ta funkcja naszego layoutu czy
naszego projektu, a mniej istotne było to jak on wygląda, ta forma miała być jak najprostsza po to żeby
esencja, czyli treść, mogła być z niej wydobyta, a więc tutaj sporo inspiracji.
W zasadzie Bill Gates ma przypisaną takie sformułowanie, że Content is the King, to o czym powtarzam
też na przestrzeni tego kursu i myślę, że Swiss jak i Bauhaus bardzo mocno nawiązuje do tej koncepcji.
W skrócie czym jest GRID jeśli chodzi o strony internetowe?
Jest to pewnego rodzaju siatka, którą narzucamy sobie w projektowaniu, i która nie ma tak do końca wytyczonych
zasad.
Czyli możemy skorzystać z siatki o określonej szerokości, o określonych marginesach.
Jest ona dla nas dostępna przy projektowaniu po to, abyśmy wszystkie elementy wizualne strony, czyli takie
rzeczy jak np. nagłówki, akapity, jak przyciski, kontenery, żebyśmy starali się w miarę,
jeżeli to jest tylko możliwe, wyrównać do krawędzi tego grida, zostawić również marginesy, które sobie narzuciliśmy
w grid'zie i co to daje? To daje to, że nasz layout jest spójny wizualnie, że wygląda jak taki dobrze zaprojektowany
fundament, gdzie wszystkie rzeczy są jakby do siebie wyrównane.
Więc to jest z grubsza koncepcja gridu,
natomiast samo wykorzystanie gridu w Web Designie jest bardzo ciekawe z tego powodu, że mamy z jednej
strony pewne standardy i pewne fundamenty, które narzucają nam jakieś konkretne wartości do przyjęcia
przy projektowaniu w oparciu o grid, na przykład jest nim Modern UI, czyli projektowanie dla głównie na platformy
Windows, w Material Design też dla Androida.
Mamy pewne wytyczone granice, czyli np. mamy opisane cały Adaptive UI, gdzie oprócz takich stałych break pointów,
które, z których możemy skorzystać, mamy również bardzo dokładnie opisanego i omówionego grida, jak on ma
wyglądać. Że grid np. material'owy to jest grid, który składa się z dwunastu kolumn, które mają określone
odstępy, określone marginesy.
I zauważ, że wszystkie rzeczy, wszystkie elementy, które wyrównujemy sobie, które znajdują się na naszej stronie, np. tabele czy
menu,
czy headery itd.,
staramy się wyrównać do tego 12 elementowego grida, również same marginesy, czyli odstępy między elementami
grida w Material UI są wyraźnie określone, np. jest to o 8, 16, 24 czy 40.
Podobnie w Modern UM mamy też podział na 5 i 20 pikseli.
Jeśli np. chodzi o przestrzenie i odstępy pomiędzy liniami grida, no i teraz ciekawą koncepcją jest
grid typu Fluid, czyli taki grid gdzie nie mamy wyznaczonych stałych wielkości, jeśli chodzi o piksele,
czyli jednostek absolutnych jeśli chodzi o szerokość grida, tylko są to np. jednostki relatywne.
I wtedy zauważ, że bardzo fajnie możemy zorganizować również responsywną wersję naszej strony, ponieważ
ten grid np. z 12 kolumn, zmieni się w wersji tabletowej na 8 kolumn, a w wersji telefonowej na 4 i wtedy
do tego grida dopasowujemy elementy, odpowiednio reorganizujemy czy zmieniamy położenie kontenerów tak, aby
wizualnie wyglądało to najlepiej, pozostawiając relatywnie, procentowo te same wartości, jeśli chodzi
np. o odstępy pomiędzy tymi kolumnami grida.
W związku z tym myślę, że teraz już doskonale rozumiesz ten pomysł, na którym opiera się grid i samą koncepcję
grida, a w kolejnej lekcji będę chciał z kolei pokazać Ci pewne takie narzędzia, które już wywodzą się
z samej praktyki kodowania stron internetowych w oparciu o grid i pokazać Ci kilka rozwiązań, które bazując
na gridzie pozwalają nam stworzyć i zakodować gotową stronę internetową.
Zatem do usłyszenia w kolejnej lekcji.