Nowoczesny Webdesign: Zalety plików .svg i eksport
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ść, witam Cię w kolejnej lekcji, w której zajmiemy się drugim rodzajem grafiki, czyli grafiką w postaci
bitmapy, czyli inaczej plikami JPG oraz plikami PNG, które de facto jeżeli musimy to oczywiście znajdą się
na naszej stronie.
Tak jak wspomniałem jeszcze aparaty nie robią zdjęć w formacie wektorowym, ponieważ tak to już próbowaliśmy
wszystko zamieniać na wektory po to aby się idealnie skalowało na stronach WWW, aczkolwiek w kontekście
właśnie wektorów i zamiany bitmapy na wektor,
mam dla Ciebie kilka ciekawych wskazówek i ponieważ chcę żeby ten kurs też otwierał Ci oczy na pewne
kwestie to teraz jestem w programie Adobe lIlustrator i w przeciwieństwie do tego co powiedziałem wcześniej
w Illustratorze nie zawsze mamy wektory. To jest akurat kawałek zdjęcia, czyli kawałek bitmapy, który wrzuciłem
do Illustratora. Jest w Illustratorze taka opcja, która pozwala zamienić bitmapę na wektor.
Ta opcja nazywa się image trace i ta opcja jest dostępna tutaj na samej górze.
Możemy z niej skorzystać. Jeżeli skorzystamy z niej po prostu klikając na image trace,
to co zrobi dla nas Illustrator to zamieni tę bitmapę na wektor w dosyć nieszczęśliwy sposób. Jak widzisz
mało to ma wspólnego z oryginałem.
W związku z tym cofam tę operację i przechodzę do tej opcji Tracing Presets, która znajduje się obok
polecenia Image Trace. Tutaj poza możliwością wyboru jakichś np. trzech czy sześciu kolorów, mamy coś takiego
jak High i Low Fidelity Photo i to jest właśnie opcja, która pomaga nam gdy mamy jakiś skomplikowany, skomplikowaną
bitmapę i chcemy zamienić ją na wektor.
Nie będę wybierał High Fidelity Photo tylko wybiera sobie Low Fidelity Photo dlatego, że pewnie
przy High Fidelity Photo, ponieważ mamy tutaj mnóstwo szczegółów, czekali byśmy zbyt długo, a w przypadku
Low Fidelity i tak pozwoli mi to osiągnąć lepszy efekt niż ten, który pokazałem Ci przed chwilą
i zaraz Illustrator powinien zakończyć tą prace.
I w tym momencie już przekształcił nam bitmapę na wektor.
Oczywiście to widać, aczkolwiek jeżeli wybierzemy teraz opcję Expand, możemy podejrzeć sobie jak wygląda
ta grafika, że rzeczywiście pod spodem są tutaj elementy wektorowe.
No i rzecz jasna nie ma to sensu w przypadku takich elementów jak tutaj, czyli zdjęć w zasadzie nie przerabiamy
w ten sposób na grafikę wektorową,
ale jeżeli na przykład masz do umieszczenia logotyp jakiegoś partnera na stronie i koniecznie musi to
być wektorowo, a Ty nie masz dostępu do pliku wektorowego, możesz w ten sposób spróbować to zrobić.
I druga rzecz, którą chciałbym Ci pokazać.
W zasadzie ciekawostka jest związana z właśnie wykonywaniem zdjęć w formacie wektorowym. Mówiłem Ci, że jeszcze
nie jest to możliwe, no ale chciałbym pokazać Ci jedną z rzeczy, która jest w stanie nas do tego przybliżyć.
Jest to nowa aplikacja Adobe, która jest dostępna na urządzenia przenośne, tablety i telefony z Androidem
i iOS'em.
Tutaj mamy do dyspozycji możliwość, nazywa się Adobe Shape, a de facto teraz nowa aplikacja to Adobe Capture.
Więc mamy tutaj możliwość wybrania nowego kształtu z aparatu i to co w tym momencie się dzieje to włącza
się aparat i możemy nakierować na dowolny element, a następnie określić stopień szczegółowości wektorów,
które chcemy z tego elementu uzyskać.
Jeżeli np. najadę sobie na klawiaturę i spróbuję teraz w małym stopniu zdetalowania zrobić właśnie np. w ten
sposób zdjęcie, to muszę poczekać chwilę, a Photoshop jeszcze będę mógł sobie wybrać elementy, które np.
chcę z tego zdjęcia np. wymazać, mogę tak zrobić, mogę tutaj dodać te elementy, powiedzmy, że chcę wszystko,
wybieram ok i nie Photoshop, a właśnie narzędzie Shape
w tym momencie wyrysowuje krzywe z tego zdjęcia, które zrobiłem. I to naprawdę też przydaje się przy takich
elementach jak na przykład jakieś teksty, treści z gazet, z książek, coś chcemy od razu mieć w formacie
wektorowym, robimy zdjęcie i proszę bardzo, prawie już jest gotowe.
Mogę w trakcie zmienić nazwę, mam tutaj "Kształt 1", mogę zapisać sobie to pod dowolną nazwą, wybieram polecenie
zapisz.
I jeszcze jedna ciekawostka, to co się z tym dzieje to automatycznie ląduje to w takich specjalnych bibliotekach,
które są powiązane z kontem Adobe Creative Cloud, jeżeli ktoś takie konto posiada i de facto bez żadnej
mojej ingerencji zaraz będę mógł w Illustratorze czy w Photoshopie otworzyć sobie taki panel, który nazywa
się Biblioteki, czyli Library i przejść do biblioteki, którą stworzyłem, do biblioteki kształty.
I jak widzisz, już ta grafika tutaj w sposób automatyczny została wstawiona, ja mogę umieścić ją w dowolnym
pliku Illustratora i jest to zdjęcie, które przed chwilą wykonałem telefonem, a więc to tytułem ciekawostki
jak możesz spróbować przynajmniej zrobić wektorowe zdjęcie, a także jak możesz spróbować zamienić grafikę
bitmapową na wektor, a teraz już właściwa część tej lekcji, czyli przenosimy się do aplikacji Adobe Photoshop,
ponieważ Photoshop to jest właśnie aplikacja, która de facto obsługuje grafikę w postaci bitmap, no i to
jest jej naturalne środowisko, to jest właśnie taka grafika jak tutaj mamy, czyli zdjęcie, na którym będę
pracował.
To co będę chciał zrobić i pokazać Ci to jak to zdjęcie zapisać prawidłowo do sieci.
Mówiłem o tym, że te podstawowe formaty z których korzystamy to format JPG i PNG. Kiedy z jakiego formatu
korzystać?
To właśnie chciałbym teraz Ci pokazać.
Korzystam z okienka Save for web, czy inaczej Zapisz dla sieci i w tym okienku Save for web
mogę sobie podejrzeć moją grafikę, w ten sposób i mamy tutaj formaty plików do wyboru.
Photoshop zaproponował mi format PNG-24 i przypominam, że JPEG albo PNG-24 to właśnie są te dwa formaty, z których
ewentualnie będziemy chcieli skorzystać.
Nie korzystamy z GIF'a, PNG-8 to w zasadzie jest to samo co GIF. 8 bitów daje nam po prostu 256 kolorów
i o tym będę mówił jeszcze dokładnie w lekcji poświęconej kolorom,
natomiast chcę żebyś wiedział, że te 256 kolorów, czyli to co kiedyś stosowaliśmy do sieci, w tym momencie
zupełnie jest już pieśnią przeszłości i zdecydowanie powinniśmy korzystać z formatów, które oferują
12 czy 24 bity, takich jak JPEG czy PNG-24 właśnie. Teraz
to na co trzeba zwracać uwagę to są informacje o rozmiarze naszego pliku, akurat Photoshop je tutaj podaje na
dole.
Zauważ że na łączu 2 Mbps takie zdjęcie ma 8 Mb i ładowałoby się 42 sekundy.
Pierwsza rzecz, którą musimy zrobić to zweryfikować ustawienia tego zdjęcia pod kątem jego rozmiaru.
Jest on zdecydowanie za duży, mamy 4400 na 2955px. I teraz jest to ważne również w kontekście stron
internetowych, ponieważ bardzo często na stronach WWW spotyka się zdjęcia, które tak naprawdę są prezentowane
większe niż zostały przygotowane.
Czyli mamy tutaj np. rozmiary zdjęcia, width oraz height 250 na 250.
Wymuszone jest to w kodzie.
Tymczasem zdjęcia np. pod spodem oryginalnie ma rozmiary 1000 na 1000 albo 300 na 300 chociażby. Jest
to zdecydowanie zły zabieg, jest to niepotrzebne i nie róbmy tego w ten sposób, nie róbmy większych zdjęć
a później nie skalujmy ich w kodzie, ponieważ po pierwsze, będą one traciły na jakości, nawet zdjęcia skalowane
w dół bitmapy tracą na jakości co ciekawe, no a po drugie oczywiście zajmują one niepotrzebnie dużo
miejsca.
Zwróć uwagę na to że, mając 8 mega bajtów tego zdjęcia, jeżeli byśmy tylko zmniejszyli je do wielkości
50%, czyli do rozmiarów 2200px na 1400 co jest zdecydowanie już i tak w zupełności wystarczające
na potrzeby każdej strony internetowej, ponieważ to jest rozmiar nawet większy niż Full HD, to teraz zauważ,
że rozmiar tego zdjęcia zmniejszył się do 2,63MB i już będzie tylko ładował się 14 sekund na
łącze 2 Mbsp, co jest też zdecydowanie za dużo.
Dlatego w przypadku tego typu zdjęć zwykle będziemy chcieli skorzystać nie z formatu PNG 24, a z formatu
JPEG. Dlaczego?
Ponieważ JPEG ma tę ogromną zaletę nad formatem PNG-24, że oferuje nam możliwość ustawienia jakości
tego zdjęcia. W jakości domyślnej, czyli tej najwyższej 100%, maksymalnej to zdjęcie ma 1,4 MB,
a więc już jest zdecydowanie mniejsze od pliku PNG.
Ponadto zwykle operujemy tutaj wartościami dla sieci od 65 do 75, a jeżeli np. jest to duże zdjęcie, które
na naszej stronie pojawia się w efekcie Parallax jako tło, to nawet możemy zejść poniżej 50% i
nie będzie aż tak widoczna ta utrata jakości.
Naturalnie różnica między 100%, a między jakością 1 będzie tutaj zauważalna również w podglądzie, ale
jeżeli ustalimy sobie np. 75% to gwarantuję Ci, że nie będzie tu aż tak znaczącej różnicy, a uda
nam się oszczędzić i zredukować rozmiar tego pliku do 500 KB.
Będzie to ładowane już w 4 sekundy na 2 Mbps łączu, a więc zdecydowanie, zdecydowanie szybciej.
Gdybyśmy jeszcze zmniejszyli sobie rozmiar, np. do rozmiaru 1600 na około 900, czyli 36% tutaj,
to otrzymamy już rozmiar 315 KB, no i jeżeli miałoby być to zdjęcie na tło, prawdopodobnie zrobiłbym jakość
w okolicach 50.
Przy okazji jedna sztuczka z Photoshopa.
Jeżeli zbliżasz się do jakości pięćdziesięciu to najlepiej jest zamiast np. 51, gdzie mamy tu 167 KB,
ustawić sobie wartość 50, bo to pozwoli nam oszczędzić zdecydowanie więcej, ponieważ tutaj włącza się
wtedy taki specjalny drugi tryb,
drugi mechanizm optymalizacji w Photoshopie, który pozwala zredukować tą wartość do aż 140, do tylko 145
KB.
Z drugiej strony, kolejna sprytna sztuczka to możliwość kliknięcia sobie w to miejsce i wybrania opcji Optimize to
File Size... i większość aplikacji graficznej, w tym oczywiście Photoshop tak jak pokazuję, posiada tę opcję, która
pozwala tak naprawdę dostosować wielkość tego zdjęcia do konkretnego rozmiaru w KB.
Jeżeli chcemy aby zdjęcie miało nie więcej niż 100 KB, to możemy zaznaczyć taką wartość, wybrać OK.
I wtedy okazuje się, że jakość tego zdjęcia została zmniejszona do 36.
Jest to często wartościowe w momencie kiedy np. przygotowujemy banner do wyświetlania w jakimś serwisie i
najczęściej serwisy takie jak duże portale, mają pewne ograniczenia i mówią, że baner może mieć tylko
np. do 20 KB i wtedy przygotowując grafikę możemy wybrać tutaj optymalizację do wybranego rozmiaru
pliku i będzie to ok.
Kiedy wybierać JPEG, a kiedy w takim razie PNG-24 i czy w ogóle stosować PNG-24?
Otóż zdecydowanie tak.
PNG-24 musimy stosować, ponieważ wspiera ono przezroczystość
i wtedy kiedy tej przezroczystości potrzebujemy, czyli kanału Alpha w naszej grafice, nie ma innego wyjścia.
Jeżeli nie mamy wektora musimy w przypadku bitmap zastosować format PNG-24.
Jeżeli nie jest nam potrzebna przezroczystość, zwykle będziemy wybierać JPEG'a, ponieważ będzie on po prostu
miał mniejszy rozmiar i będzie mógł zostać załadowany szybciej.