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 lekcji, w której poznasz podstawowe pojęcia dotyczące typografii na stronach
internetowych i nie tylko.
Oczywiście są to uniwersalne prawdy jeśli chodzi o typografię i chciałbym rozpocząć od pojęć Kerningu
oraz Trackingu.
Kerning to jest odległość pomiędzy jedną parą znaków, czyli pomiędzy np. znakami S i A w wyrazie sans,
natomiast Tracking to odległość pomiędzy wszystkimi znakami w danym akapicie czy w danej linii
tekstu.
Jeśli chodzi o zastosowanie np. w narzędziach graficznych, mam tutaj otwartego Photoshopa i chciałbym wrzucić
w zasadzie do niego jakąś, jakiś zestaw, jakąś linię tekstu.
Skorzystam tutaj w takiej ramce tekstowej z polecenia Type i znajduje się tutaj polecenie Paste Lorem
Ipsum, czyli Wklej Lorem Ipsum.
Można po prostu wygenerować sobie jakiś przykładowy tekst.
Obiecałem Ci też wcześniej, że powiem Ci czym jest Lorem Ipsum, więc Lorem Ipsum jest takim standardowym tekstem
po łacinie, który wstawia się po to żeby wyemulować jakieś bloki tekstu, np. w interfejsie, który tworzymy.
Dzięki temu, że to jest tekst po łacinie to też nie koncentrujemy się na tym co tam jest napisane, a raczej
staramy się ogarnąć to wizualnie, czyli chodzi o to żeby rozplanować w pewien sposób layout i nie koncentrować
się na samym tekście, a na tym jak to jest wszystko rozmieszczone i czy to ze sobą działa.
Jeżeli nie masz Photoshopa, chcesz skorzystać z Lorem Ipsum to polecam stronę lipsum.com, znajduje się
tutaj generator Lorem Ipsum, gdzie możesz np. wygenerować sobie 15 akapitów i wybieramy polecenie generuj.
Dzięki temu dostajemy cały tekst Lorem Ipsum, który można sobie wkleić w dowolne miejsce.
Poza takimi zwykłymi, nudnymi generatorami przykładowego tekstu Lorem Ipsum można znaleźć też na przykład
Veggie Ipsum albo Bacon Ipsum, gdzie można wygenerować 15 wersów słoniny.
Wybieramy polecenie Give Me Bacon i dostajemy wszystkie słowa związane z właśnie zapotrzebowaniem na
na wysokiej jakości mięso.
Jeśli chodzi o takie ciekawe rzeczy, które tu widziałem kiedyś, to była chyba kiełbasa nawet, o jest kiełbasa,
no to mamy wszystko, żeberka, kiełbasę, frankfurterki i wszystko inne, więc można taki kawałek przykładowego
tekstu po prostu wrzucić sobie na stronę i już. Jeśli chodzi o te podstawowe parametry, które pokazywałem,
czyli Kerning oraz Tracking. Jedna sztuczka w Photoshopie, Ctrl+A zaznacza cały tekst, a Ctrl+H
ukrywa selekcję. Po co mi ukrycie selekcji? Bo teraz wszystko jest zaznaczone i mogę na tym operować, np. powiększać
czy zmniejszać tekst, ale jednocześnie nie jest on zaznaczony, znaczy jakby nie widać tej selekcji, więc to
jest OK. To co chcę Ci pokazać to, no właśnie - Kerning i Tracking,
więc jeśli chodzi o Kerning to może przybliżę się do jakiejś pary znaków i teraz można skorzystać w Photoshopie z
takiego skrótu Alt i strzałka na klawiaturze w prawo bądź w lewo, pozwala zwiększyć odstęp pomiędzy parą
znaków czyli w lewo i w prawo.
W zasadzie tutaj nie musimy tego robić i nie będziemy tego robić na przykładzie bloków tekstu, ale czasem
jeśli mamy np. logotyp i chcemy lepiej rozegrać przestrzenie między literami to można dopasować Kerning.
Jeśli chodzi o Tracking to jest tutaj jako opcja w Photoshopie, która pozwala zwiększać Tracking, czyli odstępy pomiędzy literami
w całym bloku naszego tekstu. Jeżeli nie masz zbyt dużego doświadczenia w typografii to w zasadzie nie
powinieneś nic robić z Kerningiem i Trackingiem na swojej stronie internetowej.
Wystarczy, że wiesz co znaczą te pojęcia.
Myślę że to jest dodatkowo wartościowe.
A jeżeli chciałbyś potrenować zabawę z kerningiem, polecam stronę type.method.ac.
Tutaj znajduje się specjalna gra, dzięki której możesz właśnie sprawdzić swój skill w dostosowywanie
odstępów pomiędzy poszczególnymi literami, na przykład właśnie robimy to w ten sposób i sprawdzamy ile
punktów zdobyliśmy, no A teraz tutaj troszeczkę
nie za bardzo, ale ogólnie mój Score tak na szybko to 84/100, więc całkiem nieźle. Wybieram sobie następne
i właśnie próbujemy tutaj rozmieścić odpowiednio literki, więc polecam Ci potrenować trochę Kerning na
tej stronie, ale de facto za mocno się nimi nie przejmować jeśli chodzi o modyfikacje na Twojej stronie
internetowej.
Natomiast jeżeli chodzi o Leding, czyli interlinie to już zdecydowanie jest parametr, który warto zmienić.
Leding w CSS'ie to parametr line-height i możesz go określić np. na 1, 1,5, 2 itd.
Jeśli chodzi o narzędzia graficzne, operujemy trochę innymi wartościami, ponieważ tutaj po prostu w pikselach
ustala się interlinie.
Zauważ, że tekst, który jest zdecydowanie bardziej ściśnięty jest trudno przeczytać,
natomiast im większa jest interlinia,
oczywiście nie możemy też przesadzić, ale tym ten tekst staje się bardziej przejrzysty, bardziej przyjazny
do czytania. Interlinia na stronach internetowych powinna oscylować w granicy 1,6, 1,5
i proponuję abyś od takiej wartości zaczynał dobieranie parametru line-height i to jest bardzo, bardzo ważne. Domyślne
właściwości interlinii jeśli chodzi o akapity są złe i praktycznie zawsze trzeba je przedstawić w CSS'ie.
Następnie mamy wyrównanie, czyli wyrównanie do lewej czy do prawej strony. Rzecz jasna
to jest jedna z podstawowych właściwości, którą znajdziemy w sekcji Paragraph
w większości aplikacji graficznych, więc wyrównujemy do lewej, do prawej strony czy też do środka, ewentualnie
mamy opcję justowania.
Tutaj moja wskazówka jeśli chodzi o strony internetowe, absolutnie nie justujmy tekstu. Tekst wyjustowany jest
tekstem, który trudniej się czyta.
Poza tym w takim tekście wyjustowanym powstają takie specyficzne przerwy pomiędzy, czyli odstępy pomiędzy
poszczególnymi wyrazami są różne i powstają takie charakterystyczne rzeki w tekście.
To się nazywa właśnie w ten sposób i
trudno się czyta taki wyjustowany tekst, on jest mniej przyjazny dla użytkownika, dlatego tam gdzie się da,
znaczy... Nigdzie nie justujmy tekstu, tak się umówmy, ogólnie tekst justowany na stronach internetowych,
od biedy można przyjąć, że można to zrobić w jakiś takich naprawdę bardzo małych,
np. jednozdaniowy blok tekstu, jakiś opis do miniaturki i to chcemy wyjustować i wtedy wygląda dobrze,
więc możemy to zrobić, ale raczej stosujemy zawsze wyrównanie do lewej strony.
Czasem można też tekst wyśrodkować, zwłaszcza jeżeli rzeczywiście jest to mniejszy blok tekstu, ale pamiętaj,
że wyrównanie do lewej strony będzie najbardziej wygodne, ponieważ to właśnie, że ten tekst jest zróżnicowany
na końcach linii powoduje że użytkownikowi łatwiej jest jakby okiem przeskoczyć do następnej linii tekstu.
Łatwo jest rozróżnić tą linię, na której się skończyło czytać i dlatego tekst wyrównany do jednej strony
jest zdecydowanie lepszy. Pamiętaj, że ogólnie czytanie na ekranie monitora, jest to zadanie trudne i należy
dopełnić wszelkich starań żeby to zadanie ułatwić, więc wyrównujmy do lewej i róbmy dużą interlinię pomiędzy
poszczególnymi liniami tekstu, ok. 1,6 na stronie.
Wydaje mi się, że te dwie wskazówki są takie kluczowe, jeśli chodzi właśnie o te podstawowe pojęcia, które
chciałem Ci zaprezentować. Na teraz to już wszystko,
a w kolejnej lekcji porozmawiamy o bardzo ważnej rzeczy, jaką jest rytm w tekście na stronie internetowej
i pokażę Ci pewne ciekawe narzędzia, które pozwolą dobrać optymalne wielkości dla właściwych elementów
na Twojej witrynie. Do usłyszenia.