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, w której porozmawiamy o projektowaniu w oparciu o zasoby.
Wspominałem już parę razy o tym w tym kursie, że wykorzystujemy wielokrotnie w procesie projektowania
stron internetowych zasoby, które są już gotowe po to aby oszczędzić czas, aby przyspieszyć swoją pracę
i w tej lekcji chciałbym zebrać na razie pewne dobre praktyki odnośnie projektowania w oparciu o zasoby.
Natomiast w kolejnej podam Ci mnóstwo ciekawych i przydatnych linków, które możesz wykorzystać do rozmaitych
zasobów do użycia na Twojej stronie internetowej.
Jeśli chodzi o projektowanie w oparciu o zasoby to mówiłem wcześniej o UI Kits, z których bardzo często korzystamy,
czyli są to pewne zestawy komponentów, zestawy gotowych grafik, które mogą być w pewnym sensie elementem
bazowym, wyjściowym czy czymś z czego poskładamy nasz gotowy layout.
Jest ich naprawdę mnóstwo i będę chciał pokazać Ci później różne UI Kity, które są naprawdę
jakościowe i również dostępne są za darmo.
Ponadto korzystamy bardzo często jeśli chodzi o projektowanie, ze stockowych fotografii, czyli ze zdjęć, które
znajdziemy w rozmaitych serwisach. Zarówno zdjęć darmowych jak również zdjęć płatnych, które nie kosztują
zbyt dużo i na pewno wychodzi to taniej niż tworzenie od podstaw jakiegoś, jakiejś sesji fotograficznej
dla naszego produktu.
Więc jeżeli, znaczy dla produktu prawdopodobnie będziemy musieli zorganizować jakąś sesję, ale jeżeli to nie
jest konieczne i tworzymy stronę, która nie jest stroną produktową, to najczęściej właśnie korzystamy
ze stocków.
Następna rzecz to ikony. Ikonografia, którą możemy wykorzystać na naszej stronie.
Pokażę Ci zarówno pewne fajne narzędzia, które potrafią agregować i zarządzać ikonami, jak również linki
do samych ikon, których nie musimy projektować sami, możemy spokojnie opierać się o naprawdę mnóstwo zasobów,
które znajdziemy w sieci.
Kolejna rzecz i ostatnia w zasadzie, o której sobie powiemy i do której pokażę Ci linki, to gotowe szablony,
które można wykorzystać.
Czyli w zasadzie nie trzeba korzystać z jakichś bibliotek graficznych, bibliotek zdjęć i ikon. Można od
razu kupić szablon gotowej strony internetowej.
Zwykle takie szablony są dostępne, opierają się jakiś system CMS dodatkowo, czyli np. WordPress'a i to pozwoli
nam bardzo szybko i łatwo również stworzyć stronę, która jest dynamiczna i zarządzać jej treścią.
No i te gotowe szablony również są oferowane bezpłatnie czy płatnie
i możemy jak najbardziej z nich z nich skorzystać.
Jeśli chodzi o wady i zalety takich rozwiązań to trzeba wziąć pod uwagę to, iż na pewno istnieje szereg
zalet korzystania z komponentów i powinniśmy to robić, ponieważ to co do zasady - przyspiesza naszą pracę,
a także znacznie zmniejsza budżet, który musielibyśmy zaadresować na tworzenie np. od podstaw jakiejś sesji
zdjęciowej.
No i również możemy korzystać z doświadczenia innych designerów, także mamy pewną wolność wyboru. Jeśli
jesteśmy klientem, czasem zlecając grafikę dedykowaną jakiejś osobie,
uzyskujemy efekt, który nie do końca nas satysfakcjonuje.
W tym przypadku możemy wybrać dokładnie to co jak najbardziej nam odpowiada.
Natomiast istnieją oczywiście wady takiego rozwiązania i korzystania z gotowców.
Przede wszystkim jest to brak unikalności, bo musimy wziąć na siebie ryzyko tego, że ktoś inny w tym również
nasza konkurencja, może kupić tą samą np. grafikę stockową, której my używamy i użyć u siebie na stronie, no
i niestety w tym momencie nie będziemy mogli mieć jakichkolwiek tutaj pretensji i musimy jak najbardziej się
z tym liczyć.
Czasem na stockach są licencje, które można kupić w takiej formie na wyłączność, ale na ogół są one bardzo,
bardzo drogie i oscylują,
to są rzędy wielkości jakby stworzenia tego od podstaw,
więc czasem takie rozwiązania tylko się wybiera.
Trudność w adaptacji, to jest kolejna rzecz, którą trzeba wziąć pod uwagę. To zwłaszcza dotyczy gotowych
szablonów stron internetowych, które ściągane z internetu,
może się okazać, że tam jest jakaś niespodzianka w środku, ponieważ nie wiemy tak naprawdę co jest pod
spodem, jak wygląda kod źródłowy takiego szablonu.
Najczęściej nie mamy do niego dostępu, a po ściągnięciu może się okazać, że jest on nieuporządkowany, że
trudno się w ogóle tam połapać i zwykle jeżeli bazujemy na gotowym szablon, to i tak musimy uzbroić się
w pewną dozę zasobów, po to aby później ten szablon dostosować do naszych potrzeb.
Najczęściej gotowe szablony, które znajdziemy w internecie są bardzo ciekawe graficznie, już są wypełnione
treścią, wypełnione zdjęciami.
Natomiast po pobraniu i po zakupie takiego szablonu, czasem możemy się rozczarować, ponieważ okazuje się,
że tej treści ani zdjęć tam nie ma, ponieważ nie mogły być dołączane przez autorów i jest jakaś drobna wzmianka
pod szablonem, że rzeczywiście te zdjęcia nie będą dołączone.
No i wtedy mamy pusty szablon, który już nie wygląda zbyt dobrze, który musimy zapełnić treścią i zapełnić
jeszcze innymi zasobami, no i czasem jest to bardzo pracochłonne.
Brak kompletnych źródeł to jest właśnie to o czym wspomniałem, no i jeszcze na sam koniec trzeba wspomnieć
o czymś takim jak zapisy licencyjne.
Tak jak powiedziałem co do zasady, zasoby, które kupujemy czy zasoby darmowe, takie jak zasoby stockowe, są na licencjach
typu Royalty Free,
a to oznacza, że oprócz nas różne inne osoby także mogą taki szablon sobie kupić i go wykorzystać
i nie mamy absolutnie na to wpływu.
Niektóre zdjęcia czy niektóre fonty, czy inne rzeczy z zasobów, z których korzystamy, mają swoją indywidualną
licencję i warto zawsze sprawdzić zapisy licencyjne, ponieważ może się okazać, że użycie takiego takiej
fotografii np. wymaga zgody autora jeśli robimy to komercyjnie.
Może się też zdarzyć, że licencja obejmuje możliwość wykorzystania komercyjnie, ale wyłącznie wtedy, kiedy
dodamy tzw. atrybucję, czyli po prostu na naszej stronie podpiszemy autora i napiszemy, że to zdjęcie
jest Jego
czy podlinkujemy jego stronę internetową. W związku z tym proszę nie sugeruj się tym, że coś jest napisane,
że jest free,
ponieważ jeżeli to jest darmowe, nie jest wykluczone, że jest darmowe, ale z wyjątkiem jakichś konkretnych
ograniczeń, np. za wyjątkiem wykorzystywania komercyjnie czy za wyjątkiem takim, że musimy wspomnieć o
autorze na naszej stronie internetowej.
Ja w kolejnej lekcji pokażę Ci szereg źródeł i zasobów, które możesz pobrać praktycznie darmowo lub kupić
za dosłownie parę dolarów i wykorzystać na swojej stronie komercyjnie, również bez konieczności atrybucji.
Zatem zapraszam Cię do kolejnej lekcji, w której przejrzymy kilka stron z darmowymi i płatnymi, ale niezbyt
drogimi zasobami.
Do usłyszenia.