Nowoczesny Webdesign: Grafika i formaty
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!
Witam Cię serdecznie w kolejnej lekcji, w której zajmiemy się tym razem grafiką na stronach internetowych.
Jest to oczywiście obok tekstu najważniejsza rzecz i to co najczęściej widujemy w przeglądarce,
a ja chcę żebyś z tej lekcji dowiedział się kilku podstawowych rzeczy o grafice. Będziemy jeszcze o grafice
mówić w dalszych częściach tego kursu, m.in. w lekcjach o optymalizacji,
ale teraz chcę abyś wiedział jakie są obecne standardy, normy i trendy w tym jakie formaty graficzne
powinny znaleźć się na stronie,
jak ewentualnie rozmawiać z wykonawcą czy grafikiem, który będzie przygotowywał Ci pliki graficzne tak,
aby były one optymalne i przygotowane w nowoczesny sposób.
Musimy rozpocząć od sprawdzenia formatów grafiki i zanim podam Ci konkretne rozszerzenia, które umieszcza
się na stronie internetowej to chciałbym żebyś wiedział doskonale czym różnią się tak naprawdę dwa abstrakcyjne,
dwa najbardziej popularne formaty grafiki, jakimi są formaty rasowe oraz formaty wektorowe. Raster to
inaczej bitmapa i czym się różni raster od wektora?
Chciałbym zaprezentować Ci to na dwóch aplikacjach, które są jednocześnie standardem branżowym jeśli chodzi
o tworzenie grafiki na potrzeby sieci, czyli w aplikacji Adobe Photoshop oraz aplikacje Adobe Illustrator.
Jestem w tym momencie w Illustratorze i jest to flagowa aplikacja Adobe
i w zasadzie charakteryzuje się tym, że w Illustratorze głównie pracujemy z grafiką wektorową.
Co to znaczy?
To znaczy, że grafika wektorowa, mianowicie jej największa zaleta jest taka, iż jest ona skalowalna
bezstratnie,
czyli możemy ją skalowaś dowolnie i powiększać bez utraty jakości.
Zwróć uwagę że w tym momencie jestem w powiększeniu 6400% i mogę bez problemu zobaczyć detale na
walizce, które są idealnie ostre. I to jest właśnie ta genialna i najlepsza cecha grafiki
wektorowej w przeciwieństwie do bitmapy.
Zanim jeszcze przejdziemy do omówienia bitmapy, spróbujmy zaznaczyć tę grafikę, którą mamy w Illustratorze
i zwróć uwagę na to, że po jej zaznaczeniu pojawiają się takie malutkie kropki.
To są właśnie punkty wektorowe, pomiędzy którymi są wyrysowane linie tej grafiki.
Dlaczego grafika wektorowa jest właśnie idealnie ostra bez względu na to jak się ją zeskaluje?
Właśnie dlatego, że na bieżąco po zmianie jej rozmiaru, procesor i nasza karta graficzna wyrysowuje linie
pomiędzy tymi punktami, które są tutaj zadane.
Co więcej, w Illustratorze wciskając Ctrl+Y możemy podejrzeć taką specjalną siatkę, czyli widok outline,
gdzie możesz zobaczyć jak skomplikowane, jak z wielu wyrysowanych linii jest ta grafika, z którą akurat tutaj
mamy do czynienia.
Jeżeli teraz wyjdę z tego trybu, a następnie znów zaznaczę grafikę i będę chciał ją teraz skopiować do
drugiej aplikacji, którą chcę Ci pokazać, czyli do Photoshopa, to wybieram po prostu Ctrl+C, Ctrl+V
i wklejam to jako piksele, czyli właśnie jako raster,
inaczej bitmapa. Bitmapy w przeciwieństwie do wektorów, który pokazywałem Ci przed chwilą, mają tę właściwość,
że skalują się stratnie, to znaczy gdybyśmy chcieli teraz powiększyć tę grafikę, to może przy takiej skali
jeszcze tego nie widać, ale im bardziej będziemy powiększali tym bardziej będą widoczne piksele, czyli
te najmniejsze składowe obrazu.
Bo właśnie z pikseli składa się grafika bitmapowa, czyli raster. Zauważ, że tutaj mamy doskonałą okazję po
to żeby sobie podejrzeć jak tak naprawdę jest zbudowany konkretny piksel.
Zauważ, że piksele mają tylko jedną właściwość tak naprawdę, czyli kolor. Każdy z pikseli składa się dokładnie
z jednego koloru, a więc ta najmniejsza składowa ekranu to jest tylko punkcik, który ma zadane jeden właściwy
kolor.
No i dlaczego korzystać właśnie z wektorów, a nie z bitmap?
No właśnie dlatego, że w tym momencie wszystkie nowoczesne urządzenia, które mają wyświetlacze bardzo
wysokiej jakości, np. wyświetlacze Retina w iPhone'ach czy w nowych Samsungach, HTC, mają to do siebie,
że skalują zawartość, ponieważ ta rozdzielczość jest aż tak duża, że wszystkie elementy dla niej byłyby
zbyt małe żeby je dostrzec, to automatycznie sprzętowo ta zawartość jest skalowana, do czego zresztą
zaraz dojdziemy. I teraz nigdy nie wiesz czy twoja grafika w skrócie jest wyświetlana w skali 100%,
140, 180, a nawet 400% i gdybyśmy mieli taką grafikę rastrową powiększyć razy 400% no to widoczne
są w niej już artefakty i te piksele.
Dlatego właśnie dużo lepszym rozwiązaniem jest korzystanie z grafiki wektorowej, którą możemy przeskalować
sobie bezstratnie
i tak właśnie działa to w przeglądarce. Teraz powstaje pytanie o to jakie formaty grafiki zastosować
na naszej stronie i odpowiedź jest w zasadzie jedna.
Jeżeli tylko możemy skorzystać z grafiki wektorowej to zawsze korzystajmy z formatu.
Format SVG, czyli Scalable Vector Graphics jest obecnie najbardziej wspieranym i najbardziej popularnym
formatem, który obsługują wszystkie nowoczesne przeglądarki. Przejdę teraz na stronę caniuse.com, czyli na
stronę gdzie mogę sprawdzić wsparcie dla poszczególnych, współczesnych standardów w przeglądarkach, a
więc wybieram svg no i widzę, że w zasadzie wszystkie nowoczesne przeglądarki wspierają bez problemu i
renderują pliki svg.
Poza Internet Explorerem 8,
ale jeżeli zerkniesz na Global Use, czyli to tutaj na dole, statystyki, to jest ok. tylko 1 procent użytkowników.
W związku z tym myślę, że absolutnie już nie musimy się tym przejmować, możemy spokojnie umieszczać pliki
bezpiecznie SVG na naszej stronie internetowej.
No chyba, że szczególnie chcesz zaadresować osoby, które korzystają z IE8, np. robisz stronę jakąś dla korporacji,
która ma wyłącznie tę wersję Internet Explorera.
To wtedy możesz oczywiście skorzystać z jakiś bibliotek, np. z biblioteki Modernizr, która wykryje
Ci wsparcie dla SVG, a następnie jeżeli tylko się okaże że przeglądarka go nie wspiera, czyli jest to
IE8 to wtedy zaserwuje inny format grafiki, który oczywiście de facto też będziesz musiał przygotować
jako taki backup, jako wersja zapasowa dla Twojej strony i prawdopodobnie będzie to plik rastrowy,
czyli plik w postaci bitmapy.
No i takie dwa oficjalne formaty, które się stosuje to są pliki JPG i pliki PNG.
Zaraz też wyjaśnię różnicę między nimi. Jeżeli chodzi o jakieś inne formaty np. GIF,
zdecydowanie odradzam, już się ich nie stosuje.
Te trzy formaty, które widzisz, są to najbardziej popularne i jednocześnie najlepsze formaty, które można
zastosować.
I przypominam, że jeżeli tylko jest to możliwe korzystajmy z wektorów, czyli z plików SVG.
Chciałbym pokazać Ci jeszcze jedną ciekawostkę, a mianowicie to jak można z Illustratora zapisać po prostu tę grafikę do
pliku SVG.
Wybieram polecenie Save as... i wybieram tutaj po prostu rodzaj pliku SVG.
Teraz nie będę zapisywał tego pliku, ale będę chciał pokazać Ci to jak taki plik wygląda w przeglądarce,
ponieważ Illustrator oferuje taką opcję. Możemy kliknąć tutaj na tą małą ikonkę z przeglądarką i okaże
się, że nasza grafika zostanie wyświetlona bezpośrednio w przeglądarce.
I to co jest ciekawe to jest fakt, że możemy tę naszą grafikę teraz powiększyć w przeglądarce, czyli wybrać
sobie Ctrl+ + czy Ctrl+ -
i zauważ, że ta grafika idealnie jest idealnie ostra, czyli skaluje się bez utraty jakości,
no i sam plik SVG został z powodzeniem w takiej przeglądarce osadzony.
Co więcej możemy tutaj podejrzeć sobie kod SVG, czyli jeżeli wybiorę opcję SVG Code... to okaże się, że nasza
grafika tak naprawdę pod spodem składa się z bardzo dużej ilości kodu.
Jak to pokazuje na Politechnice to wszyscy już od razu widzą tą grafikę, Ty niekoniecznie musisz
to wszystko sobie zwizualizować, aczkolwiek chcę żebyś po prostu miał świadomość tego, że jest to pod spodem
bardzo dużo kodu, który odpowiada za położenie wszystkich tych punktów, które pokazywałem Ci, czyli tych
punktów wektorowych, których współrzędne na osi X i Y są po prostu tutaj podane, również mamy kolor, a procesor
i nasz komputer w zasadzie odpowiada później za wyrysowanie tych wszystkich linii pomiędzy punktami wektorowymi,
które tutaj mamy.
No i możesz powiedzieć, że wow, to jest naprawdę sporo kodu.
I czy przypadkiem nie jest tak, że procesor musi się strasznie napracować po to żeby wyrenderować, czyli
wyświetlić tą grafikę w przeglądarce?
Absolutnie nie, widziałeś jak szybko to się dzieje w momencie gdy już załaduje nam się grafikę, otworzy się w
przeglądarce to jest dosłownie ułamek sekundy, także zupełnie nie musisz się przejmować tutaj kwestią wydajności,
chyba, że robiłbyś naprawdę bardzo skomplikowane animacje tej grafiki wektorowej w przeglądarce,
ale myślę, że to nie jest w tym momencie nasz główny problem. Także spokojnie możesz korzystać z SVG
no i wiesz już jak pod spodem to wygląda i dlaczego tak się dzieje, że ta grafika powiększona nie traci
w przeglądarce na jakości.
Skoro już wiesz czym różni się grafika wektorowa od rastra, no i masz świadomość tego, że powinniśmy korzystać
jak najwięcej z grafiki wektorowej do sieci, jest to aktualny trend.
Pliki SVG wiesz także jak się zapisuje, mogę teraz przejść do kolejnej lekcji, w której skoncentrujemy
się na samej grafice w postaci rastra, czyli bit mapy i dowiesz się jak sobie z tym typem grafiki radzić
na stronach internetowych.
Do usłyszenia.