Nowoczesny Webdesign: Podstawowe pojęcia typografii
Projektowanie stron i UI/UX
11 godz. 24 min · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Mobile First i RWD – Najlepsze Praktyki
- Praca koncepcyjna - UX, Uzytkownicy, Prototypowanie
- Grafika i UI strony WWW – Narzedzia, Formaty
- Typografia na stronach WWW
- Najlepsze, inspirujace przyklady serwisów
- Architektura Informacji i Nawigacja
- Optymalizacja stron WWW
- Praca w Zespole - Praktyczne Narzedzia
- Wstep do SEO - Pozycjonowanie i Promocja
- I wiele wiecej!
Technologie w sieci - Pojęcia
Poznasz 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.
Mobile first
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…
Responsive Web Design
Projektowanie jako proces
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.
Podstawy pracy koncepcyjnej
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.
Użytkownicy i testy
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.
Treść i architektura informacji na stronie WWW
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.
Atomowe komponenty
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.
Liczy się styl!
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.
BONUS! Inspirujące Strony WWW - Trendy 2016
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!
Grafika na stronach WWW
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.
Typografia w sieci
Kolory w sieci i Grid
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.
Praca w zespole
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.
Wydajność stron WWW
Promocja i pozycjonowanie
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!
Podsumowując, dowiesz się między innymi:
- Wprowadzenie do webdesignu i podstawowe pojęcia
- Proces projektowania stron WWW
- Mobile First jako nowoczesne podejście do projektowania
- Responsive Web Design – najlepsze praktyki
- Praca koncepcyjna nad serwisem
- Grafika na strony WWW – narzędzia, formaty i wiele więcej
- Typografia na stronach WWW
- Narzędzia wspierające proces kreatywny
- Najlepsze przykłady serwisów i rozwiązań
- Nawigacja na stronach WWW
- Optymalizacja stron WWW
- Praca w zespole i ciekawe narzędzia
- Wstęp do pozycjonowania i promocji
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
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 przedstawić Ci zagadnienia związane z typografią na stronach
internetowych. Jest to wstęp do dość obszernego działu o typografii, który mam nadzieję będzie dla Ciebie
bardzo ciekawy, ponieważ same zagadnienia związane z typografią na przestrzeni ostatnich miesięcy i
lat znacznie zmieniły się w Web Designie i teraz mamy do dyspozycji naprawdę fantastyczne możliwości jeśli chodzi
o wykorzystanie fontów na stronach internetowych.
Zanim w związku z tym zajmiemy się szczegółami i technikaliami, chcę Ci polecić kilka zasobów.
Jeżeli chcesz zainspirować się trochę tym jak funkcjonuje typografia i jak tworzy się fonty, jak wygląda
ich funkcjonowanie w ogóle w designie i w świecie, który nas otacza,
polecam Ci film Helvetica, który w całości znajdziesz i możesz obejrzeć go za darmo na YouTubie.
Tutaj jest dużo właśnie fajnych inspiracji, jest dużo o tym jak fonty są tworzone, czym są fonty, czym są kroje
pisma i myślę, że to jest taki ciekawy film, który trochę zmienia nasze podejście do tego jak postrzegamy
rzeczywistość w kontekście typografii i projektowania.
Polecam Ci też oczywiście kurs na Eduwebie, który dotyczy podstaw kompozycji i projektowania. Tam jest dużo o
typografii, o rodzajach krojów pisma, o tym jak powinno się je poprawnie stosować, ja tutaj w tej części typografii
skoncentruje się stricte na zastosowaniach webowych, ale mam nadzieję, że to też będzie interesujące.
Druga rzecz to galeria fontów na stronie
ui8.net.
Tutaj z sekcji zakładek wybrałem po prostu fonty i możesz znaleźć mnóstwo ciekawych przykładów tego jak
fonty w tym momencie mogą wzbogacić strony internetowe.
I to również obrazuje pewien współczesny trend, który chcę na samym początku Ci zaakcentować. To jest
to, że w tym momencie fonty powoli zaczynają wypierać grafiki na stronach WWW
i myślę, że to jest świetna sprawa. Dlaczego?
Dlatego, że fonty są wektorowe i mogą renderować się bezstratnie do dowolnej wielkości, jak również fonty
są dużo lżejsze i można szybciej dzięki temu załadować taką stronę.
Zauważ, że zbyt wiele nie różnią się od współczesnych grafik i dlatego myślę, że ciekawą rzeczą jest tutaj
za inspirowanie się tą galerią.
Oczywiście jeżeli spodobać się jakiś font, który tutaj jest,
możesz go również kupić i zastosować na swojej stronie.
Teraz przyjrzyjmy się już bardziej takim technicznym aspektom.
I jeszcze jedna rzecz odnośnie nazewnictwa. Często mówimy o fpontach jako o krojach pisma lub też czcionkach.
Te wszystkie rzeczy możemy używać zamiennie, aczkolwiek pamiętaj, że chyba najbardziej poprawnym określeniem
będzie tutaj font oraz krój pisma. Czcionka
jest to dokładnie to co widzisz na screenie. To jest pewna figura typograficzna, która służy do odciskania,
czyli coś fizycznego co służy do odciskania znaku na papierze.
W związku z tym może niekoniecznie nadaje się na określenie tego co znajduje się na ekranie monitora,
może bardziej font i krój pisma, aczkolwiek przyjęło się i już rzeczywiście też można te wszystkie nazwy
stosować zamiennie.
To co jest ważne to fakt, że stronę internetową budujemy w ramach pewnej hierarchii, a tą hierarchię właśnie
pozwala nam zbudować typografia. To znaczy operujemy głównie tekstem akapitów i nagłówkami na stronach
internetowych.
Tworzenie struktury, przejrzystej struktury i hierarchii strony dzięki nagłówkom, czyli stosowanie nagłówków
pierwszego typu dla najważniejszych elementów na naszej stronie, później nagłówki drugiego typu dla tych
mniej ważnych.
Trzeciego czwartego itd.
Czyli znaczniki odpowiednio HTML - h1, h2, h3 i kolejne pozwalają nie tylko określić hierarchię taką wizualną
dla użytkownika, bo zwykle te nagłówki są np. większe jeśli są tego wyższego typu, ale również pozwalają
robotom indeksującym wyszukiwarki lepiej zaindeksować treści na naszej stronie.
To znaczy, że w kontekście pozycjonowania, tworzenie hierarchii dzięki typografii i zastosowaniem odpowiedniego
markupu dla nagłówków jest bardzo istotne i np. zdecydowanie większą wagę robot indeksujący będzie przykładał
do nagłówku H1 i do słów kluczowych, które się w nim znajdują.
Następna ważna informacja to skąd przeglądarka bierze fonty.
Na początku ogólna informacja, ponieważ za moment trochę Cię przestraszę, ale najpierw chciałbym uzupełnić,
że tak naprawdę teraz mamy do dyspozycji ogromny wachlarz fontów, które możemy stosować na stronach internetowych,
ponieważ są różne alternatywne sposoby w stosunku do tego o czym zaraz powiem.
Natomiast domyślne zachowanie przeglądarki jest takie, że fonty renderowane są z systemu użytkownika.
Co to znaczy?
To znaczy, że jeżeli na naszej stronie zdefiniujemy, że np. akapit tekstu chcemy sformułować fontem
Arial, to wtedy przeglądarka zajrzy do systemu użytkownika, sprawdzi czy na komputerze, np. na dysku C w
Windows, Fonts ma on zainstalowany fot. Arial.
Jeżeli tak, wyrenderuje to fontem Arial.
Natomiast jeżeli nie, no to wtedy będzie problem. Zaraz Ci powiem co się wtedy stanie,
ale co do zasady, my definiujemy w CSS'ie te fonty, z których chcemy korzystać.
I co
ciekawe możemy zdefiniować właśnie z pomocą tej właściwości font-family więcej niż jeden krój pisma,
czyli na początku najważniejsza jest dla nas Verdana, czyli chcemy wyrenderować to Verdaną,
ale jeżeli użytkownik nie będzie miał zainstalowanej Verdany na komputerze,
to wtedy możemy skorzystać z Arial. Jeżeli nie będzie Ariala no to wtedy dopiero korzystamy z takiego zapisu
_sans albo _serif, czyli będzie to domyślny systemowy font bezszeryfowy lub też szeryfowy.
Co to znaczy bezszeryfowy i szeryfowy?
To ładnie ilustruje tutaj to co widzimy. Szeryfy
to takie malutkie wypustki na samym końcu liter i fonty szeryfowe, te np. Times New Roman.
I jeżeli użyjemy _serif to wtedy w przypadku braku tych fontów w systemie zostanie wyświetlony dowolny, ten
domyślny font systemowy z szeryfami,
czyli z tymi wypustkami. Jeżeli użyjemy sformułowania _sans, zostanie wyświetlony domyślny np. Arial, font
bezszeryfowy, czyli bez tych wypustek.
W związku z tym tak możemy w ostateczności powiedzieć jaki font ma być renderowany, ale tak naprawdę mamy
w tym momencie dużo większy wpływ tak jak powiedziałem na wybór kroju pisma.
Jeśli chodzi o różnice między fontami Sans i Serif, no to przyjmuje się, że te fonty szeryfowe trochę
bardziej sprzyjają czytaniu długich bloków tekstu, że jeżeli mamy takie długie rzeki tekstu to wzrok
trochę łatwiej podąża po tym tekście dzięki szeryfom,
ale szczerze mówiąc nowe badania dowodzą, że wcale do końca tak nie jest, że wcale użytkownicy szybciej
nie czytają tych fontów szeryfowych, więc... kiedyś przyjmowało się, że np. treści artykułów robiliśmy fontami
głównie szeryfowymi żeby łatwiej się czytało, a np. nagłówki mogły być fontami sans-serif.
Teraz szczerze mówiąc raczej się od tego odchodzi i mamy pełną dowolność w stosowaniu fontów szeryfowych
czy bezszeryfowych. zamiennie.
Wydaje mi się, że te fonty bezszeryfowe są po prostu troszeczkę bardziej nowoczesne, a fonty szeryfowe
takie trochę bardziej oldschoolowe, więc zależy co chcemy podkreślić na naszej stronie i jaki ma ona charakter
i wtedy możemy wykorzystać odpowiedni krój pisma.
Tak wygląda wyświetlanie i renderowanie fontów w CSS i trzeba wspomnieć o tych bezpiecznych fontach, które
są dostępne na każdym komputerze i powinny być zainstalowane u każdego użytkownika.
Jest to zestaw bezpiecznych fontów po lewej stronie, czyli Arial, Courier, Garamond, Georgia, Lucida, Tahoma, Times New Roman,
Trebuchet, Verdana i Palatino.
Korzystając z tych fontów, zapisując w font-family w CSS'ie np. Arial czy Garamond powinniśmy mieć pewność,
że praktycznie zawsze u użytkownika ten font jest i wyświetli się tak jak to zaplanowaliśmy.
Problem bezpiecznych fontów webowych jest jaki? No mianowicie jest taki, że wyglądają one strasznie i nie
powinniśmy z nich korzystać.
W związku z tym czy jest jeszcze jakaś inna metoda?
Oczywiście że tak.
Natomiast bezpieczne fonty powinieneś traktować w tym momencie jako taki backup, jako kopię bezpieczeństwa,
czyli na przykład po przecinku w CSS'ie po tym foncie, który chcesz wykorzystać, stosować ewentualnie jakieś
odwołanie do bezpiecznego fonta, który załadowałbyby się gdyby nasz główny font, o którym za chwilę powiem
jakie sposoby mamy, się nie załadował użytkownikowi.
Jeżeli chodzi o wprowadzenie do fontów to z mojej strony to tyle. Teraz zapraszam Cię na kolejną lekcję,
w której już będziemy odkrywać pozostałe sposoby,
te właściwe, w tym regułę font-face.
Jak możemy umieścić tą typografię, którą chcemy na stronie internetowej.
Do usłyszenia.