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
ostatniej już z działu o typografii, w której przygotowałem dla Ciebie szereg dodatkowych wskazówek no i pewne podsumowanie
tego co zrobiliśmy na przestrzeni tego całkiem obszernego działu.
Przede wszystkim pamiętaj o tym, że czytanie na ekranie jest trudne, dużo trudniejsze niż czytanie na
papierze.
W związku z tym zadbaj o to aby tego tekstu maszynowego, tego tekstu do przeczytania na Twojej stronie
było mniej, żeby był on konkretny.
I zadbaj również o wysoki kontrast. W tych narzędziach, które Ci pokazałem
przypominam, że było narzędzie do badania kontrastu kolorów pomiędzy tekstem i tłem
i proponuję Ci z niego korzystać,
natomiast ja jeszcze w części na temat contentu, mówię o tym jak najlepiej jest dobrać teksty żeby były
jak najkrótsze i najbardziej spójne.
Następna wskazówka - nie używaj,
błagam, nie używaj wielkich liter poza nagłówkami.
To jest tak jakbyś po prostu na kogoś krzyczał, wiec nie rób tego.
Nie ma żadnych dowodów na to, że te wielkie litery są mniej wygodne do czytania, ale po prostu tego nie
rób.
Fonty sans i serif czyta się równie wygodnie.
Czyli można powiedzieć, że jest to o czym mówiłem wcześniej. Kiedyś uważano, że te fonty szefowe jakoś
sprzyjają czytaniu, ale zrobiono szereg badań i ludzie czytali je równie szybko, fonty szeryfowe jak i bezszeryfowe
przynajmniej na ekranie.
Ponadto z kolejnych badań wynika i to jest dość ciekawe, że długie linie sprzyjają szybkiemu
czytaniu.
Ale ludzie jednak wolą krótsze.
Co to znaczy?
To znaczy, że linie w okolicach 90 znaków w tekście będą powodowały, że ludzie szybciej przeczytają np.
nasz artykuł.
Aczkolwiek wypowiadając się na temat wygody czytania, ludzie jednak preferowali te krótsze linie.
To jest bardzo interesujące, ale jak się okazuje prawdopodobnie ten moment gdzie trzeba przeskoczyć z
jednej linii do drugiej powoduje, że zwiększa się czas czytania, ale proponuję iść za preferencjami ludzi,
a nie za czasem czytania i jednak wybierać te krótsze linie, optymalnie około sześćdziesięciu znaków. Rozbijaj
teksty na wersy i korzystaj z wypunktowań.
Zdecydowanie to jest świetna technika jeśli chodzi o strony internetowe.
Nie korzystamy z jednego zlanego, wielkiego bloku tekstu nawet jeśli wybierzemy idealnie interlinie. Rozbijajmy
tekst na wersy tak jak to było też w tych narzędziach, które Ci pokazywałem, to po pierwsze, a po drugie korzystajmy
z wypunktowań i z wykropkowań tzw. i wypunktowań.
To jest naprawdę bardzo dobre.
Ludzie przeglądając strony internetowe nie czytają wszystkiego od góry do dołu.
Musisz wiedzieć, że ludzie tylko skanują treść na stronach i dowodzą tego badania, tzw. badania eyetrackingowe,
o których chcę jeszcze wspomnieć.
Są to badania, które polegają na założeniu specjalnej aparatury, która śledzi ruch gałki oka i wtedy pokazywane
są poszczególnym osobom strony internetowe i śledzone jest generowane w ramach takiej specjalnej
heatmapy jest generowane to jak ludzki wzrok porusza się po stronie internetowej, więc zauważ, że tam gdzie jest
najcieplejszy, tam gdzie są cieplejsze kolory, tam jest największy.
Najwięcej ludzi tam patrzy w pierwszej kolejności, czyli można powiedzieć, że wzrok jakoś nie czyta od
lewej do prawej tylko, że ten wzrok skacze po poszczególnych fragmentach strony, np. na tej stronie wygląda
to w ten sposób - mamy duży kontrast i duży tekst, więc w gruncie rzeczy wzrok skoncentrowany był właśnie
na tej części.
Oczywiście możesz przeprowadzić badania eyetrackingowe dla layoutów, które robisz, ale w gruncie rzeczy warto
trzymać się tych podstawowych reguł i nie trzeba takich kosztownych badań przeprowadzać.
Największy komfort zapewnia linia 40-60 znaków, o tym już mówiliśmy, inaczej jest w przypadku layoutów mobilnych.
Tam mówiłem o tym żeby ograniczyć to do 35-40.
No i przede wszystkim pamiętaj żeby treść była wartościowa.
Wiem że jest to oczywiste, ale jednak jak przeglądam strony internetowe to czasem dochodzę do wniosku,
że powinna być to pierwsza lekcja i najważniejsza z naszego kursu.
Następna rzecz to jeszcze więcej wskazówek - traktuj słowa w tekście jak cegiełki i korzystaj z Lorem Ipsum.
O co chodzi?
Chodzi o to żeby najpierw w momencie gdy robisz ten text framework, o którym ci mówiłem,
potraktować to wizualnie, spojrzeć z odległości na ten tekst tak żeby nie koncentrować się na tym co
jest napisane, ale jak wygląda layout. Czy proporcje są dobre, czy ilość linii w ilość liter w linii
jest odpowiednia.
Czyli korzystaj z tego Lorem Ipsum, bo ono pozwoli Ci nie czytać tekstu, a zobaczyć jak wygląda to wizualnie
i traktuj każde słowo jak taką cegiełkę, która buduje spójny layout.
Następna rzecz to odstępy w tekście.
One są jak zaczerpnięcie powietrza, jak pauzy.
Staraj się dawać ludziom jak najwięcej, czyli rób kolejne akapity,
gdzie ktoś będzie mógł na chwilę się zatrzymać i jakby nabrać powietrza po to żeby dalej skoncentrować
się na Twojej treści.
Im mniejszy font wybierzesz, tym większe odstępy są potrzebne.
To prawda im mniejszy font, tym potrzebujesz trochę większej interlinii żeby to nie było za bardzo zlane ze sobą, nie było
po prostu niewygodne do czytania. Zadbaj o odpowiednie kolory dla różnych urządzeń.
To też jest istotne z tego powodu, że tak jak wspomniałem, urządzenia mobilne np. potrzebują nieco większego
kontrastu i to jest kolejna istotna wskazówka.
Jeśli nie musisz, nie baw się kerningiem. To mówiłem, ani tracking ani kerning nie są to rzeczy, które powinieneś
zmieniać, tylko w ostateczności powinieneś się tym zająć i tylko wtedy jeśli wiesz co robisz.
Następna wartościowa wskazówka to pamiętaj o różnych orientacjach na urządzeniach przenośnych tzn.
Chodzi mi tutaj o to, że jeżeli ktoś przekręca telefon np. z tego widoku wertykalnego w horyzontalny, to być
może to jest dobry moment na to żeby w twoim kontenerze np. zmienić ilość kolumn i w CSS'ie da się
to zrobić.
To jest ciekawe, że w kontekście RWD możesz skorzystać z takiej właściwości CSS, która pozwoli Ci podzielić
tekst w ramach np. jednego kontenera, jednego akapitu na więcej niż jedną kolumnę.
To jest świetna sprawa i właśnie np. też często się to robi w połączeniu z media queries, że jeżeli mamy
np. tego typu szerokość, no to zostawiamy jedną kolumnę,
natomiast jeżeli mamy jakiś większy viewport, czyli np. tablet, no to wtedy już okazuje się, że tutaj jest
zdecydowanie za dużo znaków w jednej linii i wtedy w zależności od tego jak wykryjemy to z pomocą media query,
możemy zrobić sobie coś takiego jak column-count:
czyli to jest właściwość, która odpowiada za podział na kolumny i
jeżeli wpiszemy 2 to dostaniemy dwie kolumny, proste.
Jeżeli piszemy 3, dostaniemy 3 kolumny, 4 to 4 itd.
Więc warto np. zrobić sobie dla takiego bloku tekstu, dla takiej rozdzielczości jedną kolumnę.
Następnie kolejny break point będziemy mieli np. w okolicy 80 czy 90 znaków np. zrobimy wtedy dwie
kolumny, no i kolejny break point będziemy mieli np. jeszcze dalej, tam gdzie znowu będziemy mieli z 200
znaków czy 300, np. trzy kolumny.
Następna rada, nie ma następnej rady.
To wszystko co chciałem powiedzieć Ci w tej części, to wszystko o fontach.
Bardzo dziękuję Ci za uwagę. Jestem przekonany, że ta wiedza o typografii na stronach WWW jest jedną z
kluczowych rzeczy, którą powinieneś wynieść z tego kursu, także raz jeszcze dzięki i do usłyszenia.