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ść, witam Cię w kolejnej części tego kursu, w której zajmiemy się kolorami.
Powiem Ci o tym jakie kolory wykorzystać na Twojej stronie internetowej tak, aby Twoi odbiorcy byli zadowoleni,
ale również powiem Ci trochę więcej o technikaliach, czyli o profilach kolorystycznych, o kalibracji, powiem Ci
o tym ile kolorów wykorzystać, z czego składa się kolor.
No i oczywiście też pokażę Ci szereg bardzo fajnych narzędzi, które pomogą Ci zoptymalizować i wybrać
odpowiednie kolory na Twoją stronę.
Zaczynamy od tego ile kolorów ma internet.
Przyjęło się kiedyś i mówiło o tym, że możemy wykorzystać w internecie tylko tzw. bezpieczną, webową paletę czy
bezpieczną paletę kolorów
i było to wyłącznie 256 kolorów.
Podobnie jak kiedyś sprzedawano iPhone'y w każdym kolorze pod warunkiem, że był to czarny albo biały,
tak właśnie w internecie mogliśmy skorzystać z dowolnej ilości kolorów pod warunkiem, że było to nie
więcej niż 256.
Skąd to się wzięło? Zeby to wytłumaczyć
będę chciał teraz powiedzieć Ci o czymś, czym jest przestrzeń bitowa
i właśnie co definiuje kolor w pikselu.
Wiesz już, że piksel to najmniejsza pojedyncza składowa ekranu i piksel może przyjąć tylko jeden kolor.
To nie jest tak, że może tam być jakieś przejście tonalne, piksel ma dokładnie jeden kolor.
Natomiast to spośród jakiej ilości kolorów możemy wybierać dla piksela, to właśnie zdefiniowane jest
przez tak zwaną przestrzeń barwną, czy inaczej przestrzeń bitową.
Można spotkać się też z zapisem BPP i jest to Bits Per Pixel, czyli ilość bitów na piksel.
Inaczej, po prostu ilość kolorów, które mogą przypadać na jeden piksel.
No i teraz czym są te bity? 1 bit,
ponieważ pracujemy na komputerach, mamy system binarny, 0 1 to na pewno kojarzysz, w związku z tym
1 bit to dokładnie dwa kolory.
To znaczy, że jeżeli jeden bit na piksel mamy do dyspozycji, to piksel może być albo czarny albo biały.
Jeżeli mamy dwa bity to będziemy mieli 2 do drugiej, a więc 4 kolor piksel, przy czterech bitach 2 do czwartej,
więc 16 kolorów i uwaga przy 8 bitach 256 kolorów.
I to właśnie kiedyś była wartość dla Internetu.
Obecnie absolutnie nie ma to zastosowania ale o tym jeszcze zaraz powiem.
Na moment przenieśmy się do programu Adobe Photoshop i pokażę Ci już znajome okienko.
Mówiliśmy o tym w lekcji o kolorach, że możemy tutaj zapisać coś w odpowiednim formacie i teraz jednym
z formatów, które mamy do wyboru jest właśnie np. format GIF.
Przypominam, że kiedyś właśnie grafiki i większość grafik do sieci zapisywał się jako gify i możesz przypomnieć
sobie tego typu grafiki.
Jeżeli mieliśmy przejścia tonalne w takim GIF'ie to fatalnie wyglądało, również przezroczystość była bardzo
kiepska, takie brzydkie krawędzie robiły się w momencie kiedy chcieliśmy zapisać takiego GIF'a
a to właśnie dlatego, że mieliśmy do dyspozycji tylko i wyłącznie gamę 256 kolorów
w takim GIF'ie. Teraz możemy pracować z innymi formatami plików i mamy też format PNG-8, który też jest 8 bitowy,
to jako ciekawostka, on też ma tylko 256 kolorów.
Więc to z jakich formatów korzystamy,
o tym mówię w lekcjach o grafice.
To są formaty PNG-24 i JPG. PNG-24, np. 24 bity koloru czyli bardzo dużo, aż 16,8 miliona kolorów
i to jest zresztą wartość, którą konsorcjum W3C, takie które zajmuje się badaniem sieci
w 2014 roku zbadało, że ponad 98 nawet procent użytkowników posiada już wyświetlacze czy
może wyświetlić te przynajmniej 16,8 miliona kolorów.
Jeżeli chodzi o to jak pracujemy obecnie, to właśnie mamy do dyspozycji przynajmniej te 24 bity, więc
16,8 miliona kolorów i spokojnie możemy używać tych rozmaitych kolorów na naszych stronach internetowych.
Jedna rzecz praktyczna, która być może zwróciła Twoją uwagę.
Jeżeli pracujesz w oprogramowaniu graficznym, często jest tak, że tworząc np. nowy plik, masz do dyspozycji
tryb kolorystyczny, a także informacje o tym, o trybie powiem w następnej lekcji, ale informacje o tym ile bitów
będzie w takim trybie, no właśnie i tutaj mamy domyślnie w Photoshopie 8 bitów.
Niektórzy to zmieniają, ponieważ 256 kolorów, myślą, że za imało zmieniają to na jakieś inne wartości.
Tymczasem powinniśmy zdecydowanie zostawić to tak jak jest.
Dlaczego?
Dlatego że aplikacje graficzne, w tym Photoshop, pracują w takim trybie bitów na kanał, czyli inaczej na
kolor, w którym pracujemy.
I nawet w Photoshopie jest takie okienko, które nazywa się Channels.
Jeżeli ja je teraz rozwinę to będziesz mógł zaobserwować, że mamy tutaj wszystkie kanały razem, ale mamy
też osobno kanał czerwony, osobno kanał zielony i osobno kanał niebieski.
Dlaczego?
Ponieważ mamy wybrane RGB, czyli Red Green Blue, pracujemy w tym trybie kolorystycznym gdzie mamy trzy
kolory i Photoshop i inne aplikacje graficzne działają tak, że przyjmują ilość bitów na konkretny kanał,
więc w tym przypadku będziemy mieli po 8 bitów na każdy kanał, a więc 3 x 8, 24 bity łącznie, czyli 16,8 miliona
kolorów. W związku z tym mamy zdecydowanie wystarczającą ilość kolorów i nie należy tego zmieniać.
Dodatkowo nawet jeszcze jest tutaj 8 bitów na kanał alfa, czyli na przezroczystość i dlatego możemy
spokojnie sobie tutaj też robić takie grafiki, które będziemy eksportować przezroczystością.
To taka wskazówka dotycząca właśnie tych przestrzeni barwnych i na koniec chciałbym polecić Ci jeszcze
dodatkowe zasoby, czyli stronę CambridgeInColour.com
Na potrzeby tej i następnej lekcji, gdzie będziemy mieli informacje o profilowaniu,
o tym jak skalibtować monitor na potrzeby sieci.
Jeśli interesują Cię tego typu zagadnienia, zdecydowanie polecam stronę CambridgeInColour.com.
Ja tu spędziłem mnóstwo czasu, są naprawdę bardzo fajnie rzetelnie napisane artykuły na temat tego jak
technicznie działa kolor.
Jeżeli to Cię interesuję to myślę, że jest to jeden z fajnych zasobów.
No i jeszcze jedna strona na Wikipedii.
Strona, która ilustruje paletę kolorów, tą bezpieczną paletę webową.
Jeżeli chcesz poczytać o przeszłości i zobaczyć jakie kolory tutaj mamy i nie mieliśmy do dyspozycji
to na tej stronie możesz to zrobić.
Tak jak wspomniałem, teraz absolutnie się tym nie przejmujemy.
Pracujemy w 24 bitach, wszystkie urządzenia obsługują te kolory.
Mamy do dyspozycji aż 16,8 miliona kolorów,
przynajmniej do wyboru w odpowiednim profilu i o tym jak te kolory wybrać i które kolory działają.
Powiem Ci w kolejnych lekcjach. Do usłyszenia.