Nowoczesny Webdesign: Rytm w typografii i na stronach
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!
Cześć. W tej lekcji będę chciał pokazać Ci jak działa rytm, czyli grid,
jeśli chodzi o dobór fontów na stronach internetowych. Najpierw kilka słów teorii. Oczywiście na naszej
stronie znajdą się nagłówki różnego typu, a także treść i teraz kluczowa sprawa to dobranie pewnych
proporcji i zależności pomiędzy wielkościami tych rozmiarów dla nagłówków oraz dla naszego tekstu, a także
np. dla opisów miniaturek i innych rzeczy, po to żeby to wszystko ze sobą grało.
Wbrew pozorom nie jest to sprawa oczywista ani nie jest to tak, że wybranie np. bardzo dużego rozmiaru
nagłówka i bardzo małego rozmiaru body copy sprawi, że nasza strona będzie atrakcyjna wizualnie.
Dlatego w kontekście typografii warto jest nabrać pewnego rozeznania i liczy się tutaj zdecydowanie
doświadczenie.
Przede wszystkim oglądanie wielu projektów, które są dobrze typograficznie wykonane pomaga nam w tym, aby
później intuicyjnie dobierać te wartości.
Na szczęście dla osób początkujących i dla tych z Was, którzy jeszcze nie mają takiej wprawy, istnieje
sporo fajnych narzędzi, które będę chciał zaprezentować, które pomogą Ci dobrać rytm dla twojego tekstu.
Chciałbym jeszcze najpierw powiedzieć Ci o długości linii tekstu na stronie internetowej. To jest akurat
screen z wytycznych Google Material Design i są tutaj bardzo fajnie nakreślone poszczególne długości
jeśli chodzi o ilość znaków w linii kontra czytelność.
Czyli mamy tutaj kontener, który w optymalnym, w optymalnej wersji przyjmuje od 40 do 60 znaków, czyli
trochę za wąski jest ten pierwszy kontener, natomiast idealny będzie ten, gdzie w jednej linii tekstu
występuje od 40 do 60 znaków, włącznie oczywiście ze spacjami wszystkich literek jest około 60.
Mówi się też o tym, że około 75 do 90 to jest maksymalnie, aczkolwiek Google informuje nas, że to jest nieco
za szeroki akapit. Także pamiętaj, że optymalna ilość tekstu to od 40 do 60 przy czym mowa tutaj o
Desktopach.
W przypadku urządzeń mobilnych, mówiłem przy okazji podejścia mobile first, że trzeba zadbać o trochę
krótsze linie tekstu, około 35 do 40 znaków, to tam był optymalny rozmiar, więc warto też z pomocą media
queries i z pomocą Response web design, zmienić trochę wielkość takiego kontenera, albo trochę wystarczy
powiększyć tekst. Powiększenie tekstu o 10 czy 15 czy 20% spowoduje, że właśnie na urządzeniach przenośnych
ta linia, którą mamy zoptymalizowaną do 40 - 60 znaków, będzie ok 35 - 40 znaków.
Tak wygląda długość linii tekstu i tutaj w tym kontekście mam jeszcze jeden fajny artykuł, który polecę Ci
zresztą na końcu tej lekcji.
A teraz jeszcze coś o rozmiarach fontów na stronach internetowych.
Wartością taką bazową jest 16 pikseli.
I zaraz wrócę jeszcze do tego slajdu, ale najpierw przejdźmy do CSSdecka.
Skąd to wiemy?
Otóż wprowadziłem tutaj akapit, tekstu który po prostu renderuje się w przeglądarce i zauważ, że nie ma
on zadanego żadnego rozmiaru, a mimo wszystko wyświetla się.
Czyli mimo wszystko jest tak czy inaczej jakimś rozmiarem wyrenderowany.
Tak się składa, że ten rozmiar w przypadku przeglądarek to 16 pikseli i jest to domyślny, standardowy
rozmiar tekstu.
Wszystkie przeglądarki renderują domyślnie tekst właśnie wielkością 16 pikseli.
No i rzeczywiście jeżeli wpisałem 16, nic się tutaj nie zmieniło. Gdybym wpisał np. 26, od razu te zmiany są widoczne.
16 pikseli to tak jakbym nie wpisał nic, więc ten tekst jest domyślnie renderowany wielkością 16 pikseli.
Na slajdzie
powiedziałem Ci też i pokazałem wartość jednego em'a. Czym jest am? Em to jest wartość, która jest rekomendowana
do stosowania w przypadku jednostek w CSS'ie do tekstu zamiast pikseli.
Dlaczego?
Dlatego że em jest wartością w przeciwieństwie do pikseli relatywną. Mówiłem Ci przy okazji RWD, że powinniśmy
jak najwięcej korzystać z wartości relatywnych zamiast absolutnych i tam mówimy o procentach.
Teraz powiem Ci czym są emy.
Jeżeli skorzystamy z wartości 1em to nic się też tutaj nie zmieni, więc nadal to jest 16 pikseli.
Dlaczego?
Dlatego że 1em to jest 100% wartości bazowej.
Jeżeli chcielibyśmy zrobić 150% to po prostu wpisalibyśmy 1,5em'a i ten tekst jest teraz jeden
i pół razy większy.
Gdybyśmy wpisali 2em'y to mielibyśmy 200 proc. wielkości tekstu.
Czyli przyjmując wyjściową 16 pikseli,
w tym momencie mamy 32 piksele, to jest wielkość tego tekstu.
Jeżeli zamiast emów wpisałbym 32 piksele żeby Ci to udowodnić.
Zauważ że nic się tutaj nie zmieniło.
Czyli lepiej jest stosować emy,
i tutaj wartością bazową, do której się odnosimy, jest ta wartość szesnastu pikseli, jako wielkość podstawowa
tekstu.
Natomiast jest jeszcze jedna jednostka, czyli jednostka REM, z której często korzysta się nawet zastępując
emy, dlatego, że emy mają jedną właściwość - otóż bazują one na wartości nadrzędnej dla konkretnego kontenera. Jeżeli
wewnątrz tego akapitu tekstu zrobiłbym jeszcze np. jakiś kontener, jakiś div gdzie przypisał bym mu
wartość 1,2em'a i w środku tego divu zrobił jeszcze jeden np. element liniowy ,
to wtedy jeśli byśmy odnosili się do rozmiaru tego spana,
on czytałby jako wartość bazową wielkość diva, który jest przed nim, czyli jeżeli ustaliliśmy wcześniej
dla dużego kontenera wartość 150% dla tekstu i środku mamy jakiś mały kontener, to dla niego wartość
jednego em'a to będzie 150% dlatego, że taką wartość zawiera jego element rodzica, czyli ten
element nadrzędny. Czyli tak wygląda sprawa jeśli chodzi o em'y. Natomiast rem'y działają inaczej.
Rem będzie zawsze relatywny, to jest relative em, relatywny do pierwszego kontenera, czyli do tej wartości bazowej
16px. Czyli 1rem to w dowolnym miejscu naszego kodu CSS, będzie zawsze 16 pikseli. 2remy to będzie
zawsze 32 piksele.
I dlatego Remy zdecydowanie łatwiej się stosuje bo to zagnieżdżanie kontenerów może nam trochę utrudnić
życie i zdecydowanie jest tutaj prościej wyliczyć te jednostki. Także.
podsumowując, wiesz już czym są emy i remy.
Są to jednostki relatywne w relacji do jakiejś bazowej wielkości w naszym dokumencie. Tę wartością bazową
jest 16 pikseli domyślnie,
aczkolwiek gdybym wpisał body, text, wielkość tekstu, czyli font-size np. 10 pikseli, to wartością bazową byłoby
10 pikseli i nawet może łatwiej by nam się to liczyło, bo wtedy 1em to było 10, np. 1,6em'a to by było
16, więc tak jak najbardziej
możemy też zrobić. Rekomendowane jest stosowanie em'ów na stronie bądź rem'ów.
Ja jako osobie początkującej, ewentualnie jeśli mogę Ci coś doradzić, to stosuj rem'y, będzie tak najprościej,
zawsze będzie to relatywne do tej jednej wartości, którą na początek sobie wybierzesz.
Skoro to już wiemy, to teraz przejdźmy do zagadnienia Type Ramp i do zagadnienia właśnie tego Vertical Rhythm, czyli
tego rytmu dla tekstu na naszych stronach.
Jest on bardzo ważny i ogólnie Type Ramp to jest coś, co możesz znaleźć w wielu Brand Guide'ach, w wielu takich wytycznych
do stosowania np. w aplikacjach, czy w jakiś korporacjach, które mają wytyczne do swojego wizerunku, do
swojego Corporate Identity, Type Ramp określa jaką wielkością fontu mają być np. zrobione nagłówki, jaką mają
być subheading, czyli nagłówki np. drugiego typu, jaką wielkością ma być Body Copy, jak ma być określony
tracking czy leding dla tekstu czy jaka ma być wielkość interlinii.
I to są wszystko pewne wytyczne, które składają się na taki ogólny framework tekstowy na naszej stronie.
To jest bardzo ważne aby określić spójne zasady dotyczące tego jak np. prezentujemy Body Copy na stronie,
czyli np. treść artykułów.
Ona nie może być różna na każdej podstronie, bo będzie to niespójne i będzie to źle wyglądało.
Musimy najpierw stworzyć pewien framework, czyli właśnie pewien grid, pewną siatkę dla tekstu, gdzie określimy rozmiary dla
wszystkich elementów, a później musimy po prostu postępować zgodnie z tym schematem.
Zaraz przejdę do pokazania Ci jak to działa na konkretnych narzędziach, ale jeszcze chcę wspomnieć o
jednej ważnej rzeczy. Rytm w typografii można też określić biorąc pod uwagę pewne uniwersalne zasady, takie
jak np. właśnie złoty podział lub inne matematyczne zasady zbliżone do matematycznego ideału.
I to jest całkiem niezłe
na sam początek jeżeli właśnie nie masz jeszcze tak dużego doświadczenia w tych proporcjach tekstu i w zależnościach
między poszczególnymi elementami tekstu na Twojej stronie. Wtedy można posłużyć się takimi matematycznym
proporcjami po to żeby wyliczyć te wielkości do naszego text Frameworku.
I teraz chciałbym pokazać Ci te narzędzia.
Pierwsze z nich, w zasadzie dwa bardzo podobne, narzędzia to GridLover i ModularScale. GridLover polega na tym,
że wybieramy wartość bazową dla fontu i ogólnie najlepiej jest wybrać sobie po prostu najpierw font,
z którego korzystamy.
Jak już wybierzemy font to wtedy wybieramy i najczęściej rozpoczynamy od body copy, czyli wstawiamy
sobie w Photoshopie duży fragment tekstu, duży akapit tekstu i wybieramy taki rozmiar w pikselach, który będzie
w którym będzie ten duży akapit tekstu wyglądał najlepiej dla czytelności.
Czyli tak jakby miał być np. sformatowany
nasz artykuł.
Jeżeli już mamy taki rozmiar i on będzie różny dla każdego fontu tak naprawdę, jeżeli już mamy taki
rozmiar bazowy, który wygląda dobrze dla body copy, to ustalamy go tutaj, czyli zaczynamy od tego bazowego
rozmiaru, font-size np. 15.
To jest właśnie rozmiar frontu, który znajdzie się tutaj.
Następnie definiujemy sobie line-height, czyli wysokość linii. Mówiłem Ci, że line-height to wysokość linii, nie może
być za mała, bo wtedy tekst przestaje być czytelny i trudno tutaj przejść do następnej linii i powiedziałem
Ci, że jest to ok od 1,5 do 1,6.
To są dobre wartości dla line-height. Tutaj 1,6 myślę, że jest całkiem niezłe i ten tekst jest czytelny.
Nie możemy też przesadzić bo oczywiście będzie to wyglądało nienaturalnie, w związku z tym wybieramy wartość w
okolicy 1,6, a następnie Scale factor, czyli możemy wybrać jeszcze dla nagłówków zgodnie z jakimś presetem,
zgodnie z jakimś factorem ich wielkość w zależności od tego co wizualnie po prostu nam odpowiada, albo
skorzystać, jeżeli nie jesteśmy zbyt dobrzy jeszcze
właśnie z takiego dobierania na oko, skorzystać właśnie z tych sposobów, o których wspomniałem, czyli z
tej matematycznej skali i na przykład skorzystać z proporcji 8:9.
I w tym momencie mamy jakoś wybrane wielkości, albo 1:1,6 i też to wygląda inaczej, 1:1,618 i np.
1,66
jeśli chodzi o interlinie, to będą pewnie jedne z idealnych matematycznych wyliczeń, które możemy tutaj zastosować
i rzeczywiście ten tekst wygląda bardzo dobrze.
Tutaj kolejno możemy sobie włączyć i wyłączyć grida, ale też możemy zmodyfikować content, czyli jeżeli chcemy
wstawić tutaj już właściwy tekst dla naszej strony, jak najbardziej można to zrobić w sekcji content.
No i jeśli już mamy gotowy taki grid po prostu bierzemy kod CSS, który został tutaj wygenerowany.
Zauważ, że możemy mieć wielkości w pikselach, ale też możemy wygenerować sobie wielkości i w em'ach oraz w
rem'ach, także rekomenduję zdecydowanie tutaj wybór drugiej albo trzeciej, opcji zaznaczamy to w całości,
wrzucamy do naszego kodu CSS na samą górę,
ponieważ to jest pewna baza, pewien framework, z którego będziemy korzystać na całej stronie.
Drugim narzędziem jest Modular Sacel i działa ono bardzo podobnie.
Znów tutaj na początku wyznaczamy sobie bazę, czyli np. 1em.
Tu jak widzisz już operujemy w em'ach, czyli dla tekstu bazowego,
zejdźmy sobie tutaj do okolicy 1em'a.
No myślę, że w przypadku tego fontu akurat np. 1em jest trochę za mały, więc powiększmy to o 10%,
wybierzmy 1.1 no i powiedzmy, że to jest nasz ten tekst bazowy. Teraz wybieramy sobie odpowiednie
ratio i
jak widzisz są tutaj te matematyczne wielkości, spośród których możemy wybierać. To czym różni się to
narzędzie od poprzedniego,
to to, że w momencie gdy wybierzemy jakąś skalę, ono daje nam bardzo dużo rozmiarów, różnych rozmiarów
fontów, od najmniejszego do największego.
I dzięki temu możemy teraz sobie zerknąć tak wizualnie
które elementy nam pasują.
Wiemy, że na body copy nadaje się ten 1.1em'a, natomiast to zostało jak widzisz przeliczone na 1em, czyli
wartość jakby bazową, wyjściową, czyli jakby przemapowaliśmy to na 100%,
ten nasz 1.1 i teraz wszystkie pozostałe elementy sprawdzamy, które nam wizualnie pasują np. do
nagłówków pierwszego typu, no i myślę, że np. ta wartość będzie OK.
Więc patrzę, ok, jest to 2.88em'a. Następnie nagłówki drugiego typu, wizualnie np. pasuje mi 2.281em'a, no i trzeciego
typu np. 1.6em'a. I wtedy te wybrane wartości mogę po prostu zapamiętać czy skopiować do CSS'a, mogę
też wyświetlić sobie taką tabelę z wszystkimi tymi wartościami.
No i mogę skorzystać tylko z tych wybranych, które mi odpowiadają.
Następnie zastosować je w kodzie CSS.
Zwykle po prostu właśnie patrzę sobie na to jak to wygląda i zapamiętuje te wartości, wklejam je do CSS'a, ale
możesz też doinstalować specjalny dodatek do Twojej strony, który automatycznie wszystkie te wygenerowane
w Modular Scale wartości wrzuci właśnie do Twojego kodu.
Jeżeli będziesz chciał dowiedzieć się więcej na temat tego jak to działa, to wystarczy, że klikniesz opcję
tips
i tutaj jeszcze jest rozwijana taka dodatkowa podpowiedź do tego jak optymalnie wybrać wielkość
dla text Frameworku.
Następna strona, którą chciałbym pokazać to strona drewish.com.
Tutaj można bardzo łatwo wygenerować w zależności od fonta, który sobie wybierzemy, aczkolwiek nie ma tutaj zbyt
dużego wyboru, no ale np. jeśli wybierzemy sobie Helveticę to można określić wielkość bazową, np. 15 punktów
no i bazowy line-height to już trzeba wizualnie by było tutaj określić, ale to co jest fajne to to, że jest generowany
tutaj kod CSS automatycznie dla wszystkich elementów na naszej stronie. Dla akapitów, dla ewentualnie jakiś
nagłówków, które są tutaj sugerowane jako wielkości podane w Target font sizes. Możemy oczywiście to wszystko
zmieniać i mamy taki już gotowy
jak gdyby CSS'owy Framework, który możemy wkleić na naszą stronę. I jeszcze jedna strona, najpierw wstęp
do tego jak to działa, czyli taki krótki artykuł na webtypography.net, a później właściwe narzędzie, które
w zasadzie jest bardzo, bardzo fajne, ponieważ pozwala, jest to kalkulator, który pozwala wyliczyć idealne wielkości
dla zarówno wielkości dla kontenerów jak i wielkości dla tekstu czy interlinii, którą możesz sobie wybrać
i proponuję żebyś po tej lekcji chwilę poeksperymentował z tym kalkulatorem,
ponieważ wystarczy tutaj podać jedną lub więcej wartości, np. wystarczy podać wartość 15 pikseli i poniżej
mamy Content Width albo Desired CPL. Width to szerokość kontenera, w którym ma się znaleźć nasz tekst. Możemy to
zostawić puste i możemy wpisać Desired CPL, czyli ilość znaków w linii. Jeżeli chcielibyśmy być idealni
no to zgodnie z wytycznymi Googla wpiszemy maksymalnie np. 60 znaków w linii i wybierzemy polecenie
Set.
Teraz dostaliśmy tutaj sformatowany blok tekstu, w którym jest dokładnie 60 znaków w linii i zobaczmy
po kolei - font sisze 15, czyli ten, który określiliśmy, wysokość linii została automatycznie dobrana i zasugerowana
nam jako 23. Content Width, czyli szerokość kontenera również za nas została wybrana 396.
I wtedy wyjdzie sformatowany Georgią 60 znaków.
Możemy wybrać tutaj sobie jakiś inne font np. Arial,
no i tu jest mała różnica, np. 61. Czyli możemy to zrobić w ten sposób, ewentualnie możemy poprosić o to żeby
nam wybrało to font size, czyli np. mamy do dyspozycji kontener 500 pikseli no i chcemy mieć 60 znaków w linii.
Wybieramy set my type i okazuje się, że font size to powinien być wtedy 19 pikseli.
Myślę, że łatwo jest załapać te wszystkie zależności i to co polecam Ci zrobić to właśnie wygenerować sobie
kilka takich przykładów w tym kalkulatorze i popatrzeć trochę jak wyglądają akapity. Będziesz mógł wtedy
wizualnie zobaczyć jak wygląda dobrze dobrana ilość znaków w linii oraz interlinia w ramach akapitu
tekstu. I myślę, że to jest naprawdę świetne ćwiczenie, do którego Cię teraz zachęcam.
A ja już dziękuję Ci za uwagę w tej lekcji.
Korzystaj proszę z tych narzędzi jak najczęściej,
one naprawdę pozwalają w fajny sposób ustalić ten vertical rhythm dla tekstu na Twojej stronie. Dziękuję za
uwagę w tej lekcji i do usłyszenia.