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 zajmiemy się koncepcją Koła Kolorów.
Niezwykle przydatną dla wszystkich osób, które mają małe problemy z doborem kolorów, które do siebie pasują,
ale także bardzo fajne jako inspiracja dla tych z Was, którzy mają to szczęście, że potrafią dobrać kolory
na przykład na stronę internetową.
Koło kolorów jest konwencją niezbyt nową, ponieważ pochodzi z XVII wieku, kiedy Isaac Newton po raz pierwszy udokumentował
pryzmat koloru białego światła rozszczepionego w postaci koła i rzeczywiście ujął te wszystkie kolory w takiej
postaci z jakiej korzystamy z nich do dzisiaj, no i na kole kolorów znajdują się w pewien specyficzny
sposób rozmieszczone kolory, gdzie mamy kolory podstawowe, czyli ten kolor żółty, niebieski i czerwony,
umieszczone w taki sposób, jakby wpisując trójkąt w to koło.
Następnie mamy kolory drugiego typu, czyli kolory powstałe ze zmieszania tych kolorów podstawowych
i są to kolory zielony, pomarańczowy no i mamy fiolet, który znajduje się na dole koła kolorów.
No i jeszcze kolory trzeciego typu, które znów powstały ze zmieszania kolorów podstawowych z najbliższym kolorem
drugiego typu, czyli kolorem dopełniającym.
Może nie jest to w teorii takie super intuicyjne, ale okaże się zaraz, że sama konwencja koła kolorów jest
bardzo fajna i reguły na tym kole kolorów możemy bardzo łatwo zastosować tak, aby uzyskać dobre zestawy
barw
na strony internetowe. Jestem na stronie color.adobe.com, którą serdecznie polecam.
Jest to darmowy serwis od Adobe, który operuje na kole kolorów po to, abyśmy mogli wybrać kolory pasujące
do siebie, do strony internetowej na przykład. Możemy oczywiście na tym kole kolorów manipulować poprzez po
prostu złapanie tego koloru, który jest kolorem głównym, a następnie przesuwanie tego koła kolorów czy
tego zestawu kolorów w dowolną stronę.
Możemy to robić również w górę i w dół. Zauważ, że na dole mamy kolory zdecydowanie mniej nasycone, takie
blade, natomiast na górze na tych krawędziach koła kolorów znajdą się kolory najbardziej nasycone.
I teraz co jest fantastyczne w Kole kolorów? Mianowicie to, że mamy do dyspozycji szereg reguł, które zresztą
są fatalnie przetłumaczone, ale rzeczywiście możemy z nich korzystać na stronie Adobe Color CC.
Reguły Koła Kolorów to też jest dosyć stara sprawa i nawet jest taki jeden fajny artykuł na blogu pewnego
fotografa, który fotografował przyrodę i robił zdjęcia np. kwiatów, a następnie próbował samplować próbki
kolorystyczne
z tych zdjęć przyrody i okazywało się, że idealnie one wpisują się w te reguły na kole kolorów.
To znaczy, że te kolory w przyrodzie, one idealnie do siebie pasują, w związku z tym rzeczywiście coś w
tym jest i
reguły koła kolorów poprawnie zastosowane, mogą nam znaleźć kolory idealnie do siebie pasujące. Mamy reguły kolorów
analogicznych do siebie, czyli te kolory podobne, które, spośród których teraz wybieram, mamy również kolory
monochromatyczne,
czyli jak widzisz na jednym jakby promieniu tego koła kolorów, mamy też triady, jeżeli chcemy wybrać takie kolory przeciwstawne,
jak widzisz tutaj możemy też wybrać nawet właśnie kolory podstawowe czy kolory dopełniające, ale ogólnie
możemy manipulować w taki sposób, że rzeczywiście dostajemy zestaw kolorystyczny kolorów różnych, aczkolwiek
pasujących do siebie idealnie, ponieważ są stworzone zgodnie z tą regułą triady. Mamy kolory dopełniające
na przeciwległych krawędziach, brzegach Koła Kolorów.
Mamy również możliwość stworzenia takiego złożonego profilu dla kolorów, gdzie nawet możemy jakieś swoje
własne modyfikacje wprowadzić.
No i też mamy np. możliwość pracy z odcieniami danego jednego koloru lub też możemy stworzyć jakiś własny
profil. Zwykle np. możemy zacząć sobie od triady, a następnie pracować z kolorami dopełniającymi i z odcieniami.
I to zdecydowanie wystarczy żeby wybrać jakąś paletę kolorystyczną na stronę.
Natomiast oprócz tego, że możemy sami tutaj eksperymentować z kolorami i później jak widzisz nawet każdy taki
kolor jeszcze jakoś dostosować, czyli dostosować poziom poszczególnych jego składowych, a także np. kolor,
poziom jasności, który tutaj mamy, no i wyeksportować to w różnych formatach, czyli np. w formacie LAB, o
którym wspominałem czy w formacie heksadecymalnym, szesnastkowym, czy w formacie RGB, które to wszystkie formaty omówiliśmy
w poprzedniej lekcji.
Ale możemy oprócz wybierania samodzielnie kolorów też przejść do sekcji Eksploruj
i tutaj mamy do dyspozycji szereg zestawień kolorystycznych, które zostały stworzone przez kogoś innego,
ale są bardzo fajne i możemy z tych zestawień kolorystycznych sobie skorzystać, np. możemy zapisać takie zestawienie
kolorystyczne do naszego zestawu kolorów Adobe Color CC.
Co to takiego jest?
Jeżeli mamy dostęp do Creative Cloud to w ramach naszego np. Photoshopa czy Illustratora znajdzie się
panel Libraries, czyli panel bibliotek, do którego możemy dodawać rozmaite zasoby.
Co ciekawe, możemy do niego dodawać również kolory. Jeżeli jako kolor foreground wybiorę np. sampluję sobie
ze zdjęcia jakiś konkretny kolor, to ten kolor mogę teraz łatwo, za pomocą jednego kliknięcia, dodać do mojej
biblioteki, do mojego zestawienia kolorów i takie biblioteki są synchronizowane z naszym kontem Creative
Cloud, czyli będą one dostępne w tym momencie w każdej aplikacji.
Możemy sobie tworzyć różne.
Jak widzisz ja tutaj mam szereg bibliotek, bo nie tylko kolory możemy trzymać w bibliotekach, o czym jeszcze będę mówił, ale
np. właśnie jedna z bibliotek, którą mam to jest biblioteka Flat Colors, gdzie mam same takie zestawienia
kolorystyczne, które są tutaj przygotowane i z pomocą Kulera możemy właśnie łatwo dodać do naszej biblioteki to
w ten sposób, ale możemy też skopiować sobie łącze, albo możemy wejść do tego zestawienia i skopiować
wartości szesnastkowe kolorów, które się tutaj znajdują.
Jeszcze jedna ciekawa rzecz, którą można zrobić w Adobe Color CC.
To jest wgranie zdjęcia, na podstawie którego możemy wygenerować zestaw kolorów. Możemy wybrać tutaj polecenie
"Utwórz z obrazu", ale też fajną ciekawostką jest możliwość skorzystania z aplikacji mobilnej, która jest
dostępna na systemy iOS i Android.
Teraz ona nazywa się Adobe Capture,
wcześniej nazywała się Adobe Color i chciałbym pokazać Ci jak ona działa.
Jeśli uruchamię sobie tutaj kolonowanie na iPhone'ie to w tym momencie mamy do dyspozycji możliwość dodania nowego
koloru i z poziomu telefonu możemy zrobić zdjęcie.
Teraz to będzie ciekawe, ale ok, możemy zrobić zdjęcie i zauważ, że z tego zdjęcia zostanie wygenerowany schemat
kolorystyczny, zostanie wygenerowany ten zestaw, który możemy nazwać, np. Color Theme, odpowiednio
wybrać jakąś bibliotekę, do której chcemy go wrzucić, np. ta moja biblioteka Flat Colors i zapisujemy sobie
ten zestaw kolorystyczne i okazuje się, że teraz wystarczy chwilę poczekać i dosłownie za moment w naszym
oprogramowaniu pojawi się zestaw kolorystyczny Color Themes.
Jak widzisz jest on już dostępny w bibliotekach właśnie tutaj gdzie go zapisałem.
Taka fajna sztuczka jak możemy,
jeżeli dysponujemy Adobe CC, jak możemy pomóc sobie w organizacji bibliotek i wygenerować fajne kolory. W samym
Photoshopie
mamy też w menu Window, Extensions, możliwość odpalenia Adobe Color Themes, co sprawia, że nie musimy iść
do darmowej aplikacji webowej i mamy do dyspozycji to koło kolorów wewnątrz Photoshopa, które zaraz
mi się tutaj powinno załadować.
Mamy możliwość zarówno stworzenia zgodnie z jakąś regułą, np. regułą triady sobie zestawienia kolorów, jak również
mamy sekcję Explore, gdzie możemy sprawdzić te zestawienia kolorystyczne, o których Ci mówiłem, które zostały
zrobione przez innych użytkowników.
A jeżeli zrobimy, stworzymy sobie takie zestawienie kolorystyczne, możemy na przykład szybko dodać kolory,
które tutaj wygenerowaliśmy.
Do takiego panelu Swatches, czyli do panelu próbek, który się tutaj znajduje, albo zapisać go jako po prostu
zestawienie kolorów do bibliotek. To tak krótko narzędziowo, na pewno zapamiętaj sobie Kulera, ponieważ
to jest świetne narzędzie, które oferuje zbiór bardzo fajnych zestawień kolorów.
No i to, że możemy pracować na tych regułach na kole kolorów no i tytułem tej narzędziowej części i wybierania
kolorów, dobierania odpowiednich barw do siebie na strony internetowe to wszystko. W kolejnej lekcji zajmiemy
się psychologią tych kolorów, czyli będę chciał powiedzieć Ci które kolory lepiej działają na stronach
internetowych,
w jakim kontekście i dla jakich użytkowników.
To wszystko w tej lekcji.
Do usłyszenia.