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 dowiesz się kilku ciekawostek związanych z nowoczesnym wykorzystaniem
fontów na stronach internetowych.
Chciałbym żebyś wiedział czym jest format Open Type, czyli nowoczesny format Cross Platformowy, czyli dostępny
na wielu systemach i platformach, który dodatkowo oferuje wiele bardzo fajnych CSS'owych możliwości manipulacji
fontem.
Open Type jest bardzo fajnie zaprezentowany w demo, którego adrestutaj Ci podrzucam.
Możesz wybrać najpierw jakiś konkretny font, z którego korzystamy, np. może zostańmy nawet przy foncie
Baskerville, a następnie po lewej stronie możesz wybrać rozmaite funkcje, które są dostępne w ramach
Open Type w CSS 3.
Na samym dole dostaniesz po prostu instrukcję CSS3, czyli właściwości i wartości CSS3, które trzeba
zastosować, wkleić do naszego kodu CSS
aby to zadziałało. Przykładowo zobaczmy jak działa ligatura.
Ligatura to jest możliwość połączenia w pewien sposób dwóch znaków, które znajdują się obok siebie.
Nie dotyczy to wszystkich znaków, ale w przypadku niektórych możemy zastosować właśnie coś takiego jak
ligatura co jest takim eleganckim zabiegiem typograficznym, np. zauważ, że gdy użyjemy ligatury historycznej, dwie
literki F, które występują obok siebie, zostają w ciekawy sposób połączone.
Jeżeli np. użyjemy tej ligatury, która tutaj jest jako druga, na drugiej pozycji, to zauważ, że też np. literki C z
literką T oraz literka S z literką T zostały w pewien interesujący sposób połączone.
Jest to bardzo ciekawe, ponieważ możemy tym sposobem 1 font, który występuje na naszej stronie zaprezentować
w dość ciekawej formie i tutaj mamy np. coś takiego jak font-feature-settings: "dlig" 1; i to wpisując w CSS'ie,
czyli kopiując te wszystkie linie CSS'u,
ponieważ jeszcze w ramach ciekawostek to te przedrostki w CSS'ie, takie jak np. moz, ms, o czy webkit są dla konkretnych
silników renderujących w przeglądarkach.
Czyli jeśli funkcje są implementowane do przeglądarek, nowe funkcje CSS'a, są one najczęściej na samym
początku jako eksperymentalne, oznaczane takimi przedrostkami przeglądarek, np. webkit, będą to przeglądarki
Safari oraz Chrome, które korzystają właśnie z tego silnika.
O to będzie Opera.
MS to oczywiście Edge i przeglądarki Microsoftu, moz to Mozilla Firefox, więc wszystkie te linie kodu będziemy
musieli skopiować, a w miarę jak ta implementacja będzie pewna, wystarczy nam linia kodu font-feature-settings,
no i myślę, że może to też była przydatna dla Ciebie informacja, a więc np. ligatura, następnie lettercase,
czyli możemy sobie tutaj zrobić różne warianty liter i ich wielkości.
Następnie jeśli chodzi o Numbercase, czyli formatowanie cyferek, które występują w naszym tekście, też w
ramach jednego fonta, jak widzisz możemy zrobić różne formatowania.
Oczywiście nie wszystkie fonty wspierają też te wszystkie funkcje, które tutaj są, ponieważ musi to być
zaprojektowane i odpowiednie znaki muszą znaleźć się w tym kroju pisma, w związku z tym warto żebyś poeksperymentował sobie
tutaj z różnymi krojami pisma i zobaczył które właściwości działają w tym przypadku, np. mamy superscript
i postscript
w przypadku cyferek.
No i myślę, że możesz spokojnie tutaj poeksperymentować już dalej we własnym zakresie, ja jedynie chciałem pokazać
Ci gdzie jest to narzędzie i co można z jego pomocą zrobić, wygenerować gotowy kod CSS, który umieścimy
na naszej stronie.
No i mamy jeszcze informacje o wsparciu dla poszczególnych przeglądarek, to też jest ważne, ponieważ część
funkcji CSS3 Open Type to funkcje eksperymentalne, więc pamiętaj o tym żeby upewnić się, że są one wspierane
przez właściwą przeglądarkę, aczkolwiek z drugiej strony to, że nie ma jej w jakiejś przeglądarce to wcale
nie znaczy, że mamy ich nie stosować, ponieważ no po prostu jeżeli przeglądarka nie wspiera tej funkcji to
nie będzie np. wyświetlana odpowiednia ligatura, ale tak czy inaczej będzie wyświetlany nasz tekst tak
jak normalnie jest renderowany.
Kolejna rzecz, ciekawa wskazówka, którą chcę Ci pokazać to korzystanie z Icon Fontów.
Czym są Icon Fonty?
Ogólnie koncepcja jest taka, że zamiast literek czy cyferek w ramach fonta, który instalujemy na stronie,
znajdują się ikony, czyli po prostu znaki.
Jeśli zerkniesz sobie na stronę CSS-tricks gdzie jest przedstawiony dlaczego te Icon Fonty są takie świetne
to będziesz mógł szybko zorientować się, że stosując i po prostu chodzi o to, że kopiujemy sobie i wklejamy
taki znaczek na naszą stronę, a pojawia się ikonka i to jest możliwe wtedy kiedy po prostu skorzystamy
z zaembedowania, z dołączenia do naszej strony tego konkretnego fontu, który możemy wykorzystać i zauważ,
że dzięki temu możemy bardzo łatwo np. skalować bezstratnie te ikony, czyli zachowują się one jak tekst
na stronie, w związku z tym nie musimy dostarczać różnych rozmiarów, możemy nawet w CSS'ie bardzo łatwo
powiedzieć, że mają być takiego albo innego rozmiaru.
Możemy też bardzo łatwo zmieniać kolor tych ikon, też CSS'owo możemy zdeterminować
jaki mają mieć kolor i dzięki temu można np. bardzo łatwo dorabiać dodatkowe stany
hover, czyli po najechaniu na taką ikonkę, czyli możemy po najechaniu po prostu w CSS'ie powiedzieć
zmień kolor na taki i taki. W momencie gdy korzystamy z obrazków, musielibyśmy wrzucić na serwer dwa obrazki
i zamieniać je po prostu, więc to jest naprawdę bardzo proste.
A co więcej możemy korzystać z takich ciekawych właściwości CSS'owych, jak np. dorobienie cienia do
tych ikon i wiele naprawdę innych bardzo fajnych rzeczy. Z Icon Fontów warto korzystać.
Jednym z największych i najfajniejszych zbiorów Icon Fontów jest właśnie fontawesome.github.io, to są
darmowe Icon Fonty.
Jest ich naprawdę bardzo, bardzo dużo, zauważ, że tu jest masa po prostu tych ikon, które możemy wykorzystać na
naszej stronie, więc zdecydowanie warto, polecam korzystać z Icon Fontów i polecam doczytać trochę o tym
jak je wdrożyć na stronę,
a jest to naprawdę bardzo, bardzo proste i sprowadza się do właśnie tego co omawialiśmy w poprzednich lekcjach.
Do instalowania sobie tego fonta na naszą stronę. I w tej lekcji to już wszystko, a w następnej będę
chciał podsumować całą część o fontach i jeszcze przekazać Ci kilka bardzo fajnych wskazówek.
Przede wszystkim parę narzędzi, ale także zestawienie moim zdaniem najbardziej interesujących fontówm
które teraz możesz znaleźć w sieci.
Do usłyszenia.