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 chciałbym pokazać Ci praktyczne aspekty profili kolorystycznych i dlaczego
w ogóle jest to ważne w kontekście projektowania stron internetowych.
Jeżeli masz z tej lekcji zapamiętać tylko jedną rzecz, to zapamiętaj proszę, że pracując w aplikacjach graficznych
czy projektując dla sieci na strony internetowe, powinieneś zawsze korzystać z profilu kolorystycznego
sRGB.
I na tym w zasadzie mógłbym skończyć, ale chciałbym jeszcze przekazać Ci kilka, myślę że przydatnych rzeczy, które
pozwalają zrozumieć dlaczego taki profil, a nie inny jest potrzebny. Przede wszystkim w aplikacjach graficznych,
np. w programie Adobe Photoshop,
możesz ustalić i robi się to na samym początku pracy,
tak zwany tryb kolorów. Tryb kolorów to jest ogólne określenie tego pod jakie profile będziemy kierować nasz
projekt i np. CMYK,
jest to profil ogólnie wybierany do druku, natomiast RGB to właśnie jest profil, który powinniśmy wybierać
do sieci. Jest on tutaj wybrany domyślnie i pracujemy zawsze w tym trybie kolorów RGB, natomiast w sekcji
Advanced mamy coś takiego jak konkretny profil i tutaj powinien być właśnie wybrany profil sRGB.
O co chodzi z tymi profilami? Jest ich jak zauważyłeś bardzo, bardzo dużo i każdy profil po prostu odpowiedzialny
jest za to jak wyświetlane i renderowane są kolory, tzn.
dany kolor w innym profilu może wyglądać zupełnie inaczej, chciałbym teraz Ci to udowodnić. W oprogramowaniu
graficznym, np. w programie Adobe Photoshop,
jest taka opcja jak Proof Colors
czy Proof Setup, w którym możemy ustawić, że chcielibyśmy podejrzeć jak nasz projekt wyglądałby w innym profilu
kolorów, np. w profilu przeznaczonym do druku czyli w CMYKu.
To się często przydaje jeżeli robisz np. projekt do sieci, ale chciałbyś również później wydrukować, to
w jaki sposób przygotować z tego np. jakiś materiał do druku i wtedy możesz podejrzeć jak będą wyglądały
takie kolory
z pomocą skrótu Ctrl czy Command + Y. Ja teraz spróbuję wyemulować Ci na takim kolorze czerwonym jak
zmieniłoby się to gdybyśmy z RGB chcieli pracować w trybie CMYK. Wybieram Command + Y i mam nadzieję, że widzisz tę
różnicę na wideo.
Dla mnie jest ona bardzo wyraźna, tutaj jeśli chodzi o ten profil CMYK, który możemy teraz zobaczyć na
zakładce się zmienia, to mam kolor czerwony zdecydowanie bardziej wyblakły, tutaj w samym profilu sRGB jest
bardziej intensywny. No i to jest właśnie ta różnica, jeżeli będziesz projektował w innym profilu kolorów
to bardzo prawdopodobne jest to, że użytkownicy mogą inaczej zobaczyć to jak wyświetla się Twój kolor.
Dlaczego w związku z tym w sRGB?
Odpowiedź jest prosta - dlatego, że tak fabrycznie kalibrowana jest jest zdecydowana większość monitorów,
które wychodzą właśnie z produkcji, które kupują użytkownicy,
są one profilowane i kalibrowane zgodnie z profilem sRGB. Również są to te wyświetlacze urządzeń przenośnych, telefonów
i tabletów, są kalibrowane z profilem sRGB, czyli tworząc w ten sposób projekt
istnieje bardzo duża szansa, że zaadresujes jak najwięcej potencjalnych użytkowników. Oczywiście nigdy nie
będą to wszyscy użytkownicy, ponieważ część osób ma profesjonalne monitory graficzne zkalibrowane np. do
przestrzeni Adobe RGB, która wyświetla zdecydowanie więcej kolorów, ale de facto musimy przyjąć wariant,
który pozwoli nam właśnie rysować jak najwięcej użytkowników,
więc wybieramy sRGB. Teraz trochę o kalibracji. Pierwszy rodzaj kalibracji i kalibracja Softwareowa, którą
może w zasadzie przeprowadzić każdy, nawet w oparciu o jakieś darmowe narzędzia, które znajdziesz w sieci
np. strona DisplayCalibration.com czy strona PhotoFriday gdzie możemy po prostu skalibrować
nasz monitor dostosowując jego ustawienia takie jak kontrast czy jasność.
Opiera się to na prostej kalibracji.
Po prostu jesteśmy proszeni o to żeby dotąd np. ustawiać jasność monitora aż zobaczymy jakiś tam szary
kolor i czy robić taką kalibrację?
Jeśli chodzi o projektowanie do sieci w zasadzie większość użytkowników takiej kalibracji nie robi, wiec
jestem na stanowisku, że raczej nie ma takiej potrzeby.
Chyba, że masz jakiś naprawdę niestandardowy monitor, jakiś monitor np. z najwyższej półki, który ma jakąś
inną matrycę niż wszyscy czy tam jeszcze inny, który rzeczywiście odbiega od rynkowych standardów. Wtedy
ewentualnie możesz spróbować przynajmniej wykonać taką prostą kalibracji z pomocą tych narzędzi. Mam tutaj
jeszcze jedno takie narzędzie, które Ci polecam w materiałach źródłowych,
natomiast co do zasady nie ma takiej potrzeby.
No i jeszcze jest kalibracja sprzętowa, o której też tylko chcę żebyś po prostu wiedział w tym momencie,
ponieważ też kalibracja sprzętowa może nie jest jakimś super pomysłem
jeżeli projektujemy do sieci, bo kalibracja sprzętowea jest już najczęściej wykorzystywana przy bardziej
profesjonalnych, zaawansowanych monitorach i co prawda możemy z Kalibrować sprzętowo praktycznie każdy monitor,
bo chodzi tu o to że kupujemy specjalne takie urządzenie, np. właśnie Spider czy jakieś inne narzędzie, które
wieszamy na monitorze, i które pozwala nam, w sposób taki automatyczny z pomocą kawałka software'u, który
instalujemy sobie na naszym komputerze, przeprowadzić automatyczną kalibrację.
Najczęściej wspierają to monitory grafkczne, takie jak np. monitory EIZO czy monitory z wyższej półki
i jest to potrzebne do zastosowań do druku, ponieważ osoby, które projektują np. zajmują się retuszem zdjęć
chcą, żeby te zdjęcia na monitorze wyglądały jeśli chodzi o kolory
tak samo praktycznie jak się to drukuje.
Wtedy można powiedzieć, że jest to trochę bardziej zaawansowana rzecz, ale chcę żebyś przynajmniej miał
świadomość tego czym kalibracja sprzętowa jest. Generalnie większość użytkowników tego nie robi, więc
raczej projektując do sieci nie powinieneś robić kalibracji sprzętowej, nawet jeżeli masz super drogi
monitor to raczej i tak proponuję pracować w tej przestrzeni sRGB, a nie w tej 'lepszej', ponieważ tak będą
to widzieć będzie widzieć większość użytkowników.
Jeżeli chcesz dowiedzieć się więcej, ponieważ sama kalibracja i kolory w tym kontekście nie są przedmiotem
tego kursu, ale mamy na Eduweb'ie mnóstwo materiałów, które mogą przekazać Ci więcej informacji na ten temat, z których
się dowiesz naprawdę ciekawych rzeczy o kalibracji monitora.
Polecam Ci warsztat, który nazywa się... na początku był Pixel, gdzie mówię więcej o tym o czym było
w poprzedniej lekcji - o przestrzeniach bitowych, o kolorach również pod kątem fotografii.
Polecam również warsztat Kalibracja monitora z Creative Roadshow 2015,
no i jest też na Eduweb'ie taki darmowy, krótki, kilkunastu minutowy tutorial, w którym pokazuje jak wygląda kalibracja sprzętowa
monitora, profesjonalnego monitora graficznego.
Mówię o tym jakie parametry tam dobrać.
Jeżeli jesteś tym zainteresowany to polecam ten materiał, aczkolwiek tak jak wspomniałem, podkreślam to
jeszcze raz - na potrzeby sieci, na potrzeby projektowania stron
po prostu zapamiętaj, że sRGB i ewentualnie jakaś podstawowa kalibracja z pomocą tych webowych narzędzi, powinna
w zupełności wystarczyć.
Podsumowując to co omówiliśmy w kontekście kalibracji oraz kolorów, pamiętaj aby korzystać z profilu sRGB
do sieci.
Po drugie, pamiętaj o opcji proof colors w oprogramowaniu jeżeli chciałbyś podejrzeć jak to będzie wyglądało
w innym profilu kolorystycznych.
Ustaw sobie gammę w monitorze na dwa i dwa.
Generalnie to jest poziom jasności, który ma większość monitorów fabrycznie, w związku z tym to jest moja
rekomendowana wartość i ustaw profil kolorów w oprogramowaniu również na sRGB, np. w Photoshopie temperatura
barwowa, raczej powinieneś ustalić 6,5 tys Kelvinów, a nie 5,5 tys Kelvinów, to jest bardziej
popularna wartość.
Uważaj na odcienie szarości w projekcie.
Dlaczego?
Dlatego, że zależą one od kontrastu i jasności w monitorze, a to są najczęściej modyfikowane przez użytkowników
rzeczy, ponieważ nie wiemy do końca jak użytkownik ma skonfigurowany monitor, czy jest on bardziej czy
mniej skontrastowany, to
okazuje się, że właśnie zwłaszcza w odcieniach szarości, w skalach takich właśnie jak kolorów jak jasno
szary, może być ten problem, że użytkownikom w ogóle ten jasnoszary może się nie wyświetlić, będzie on całkiem
biały albo np. będzie dużo ciemniejszy niż sobie założyłeś.
Także unikaj na stronach internetowych delikatnych odcieni szarości
i pamiętaj o tym, że mogą one być inaczej wyświetlane na różnych monitorach.
Jeśli chodzi o kalibrację sprzętową, poleciłem Ci materiał, ten tutorial, który tego dotyczy.
I to wszystko jeśli chodzi o kolory w kontekście kalibracji i profili kolorystycznych,
a już za chwilę zajmiemy się bardziej doborem kolorów na stronę i psychologią kolorów.
Do usłyszenia.