Nowoczesny Webdesign: Grafika na ekrany HIDPI
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!
Witaj w kolejnej lekcji, w której kontynuujemy przygodę z grafiką, a chciałbym zacząć od popularnych standardów
aplikacji graficznych, a później wyjaśnić Ci na czym polega skalowanie i jak działa w kontekście
projektowania i eksportu grafiki na strony internetowe.
Korzystaliśmy w poprzednich lekcjach z dwóch branżowych standardów - Photoshopa i Illustratora.
Co to znaczy, że to branżowe standardy?
Po pierwsze, każda agencja reklamowa i każdy grafik freelancer powinien znać te aplikacje.
Po drugie każdy powinien móc otworzyć te pliki, pliki edycyjne, które są zapisane w Photoshopie i w Illustratorze.
Czyli pliki .psd oraz .ai. Jedna bardzo ważna rada, jeśli jeszcze tego nie wiesz,
jeżeli pracujesz z grafikiem czy z agencją powinieneś w umowie czy w jakikolwiek inny sposób zabezpieczyć
się, aby oprócz pociętych grafik, bitmap czy wektorów, przekazał Ci także te pliki edycyjne, czyli pliki odpowiednio
PSD czy pliki AI dla Illustratora, bez nich nie jesteś w stanie edytować później tego pliku i nie masz dostępu
do warstw, więc jest to bardzo, bardzo istotne.
Poza tymi dwiema aplikacjami, kolejnym standardem branżowym staje się Sketch. To jest świetna, dość nowa
aplikacja, która niestety jest dostępna tylko na Maca, co czyni ją trochę mniej popularną w Polsce, ale
na Zachodzie jest bardzo popularna.
Jest to aplikacja, która służy tylko i wyłącznie do tworzenia interfejsów i dlatego jest taka fajna, ponieważ
ludzie, którzy zajmują się projektowaniem aplikacji mobilnych czy stron internetowych, nie potrzebują np.
wszystkich dodatkowych funkcji do edycji fotografii, które znajdują się w Photoshopie, a Sketch jest niczym
skalpel chirurga dostosowany do tego aby tworzyć precyzyjnie i wycinać interfejsy.
W Sketchu, który ma bardzo prosty interfejs jak widzisz, możemy np. tworzyć sobie nowe pliki z szablonu
i mamy tutaj do wyboru np. szablon Material Design.
To co ciekawe to to, że Sketch ma szereg predefiniowanych już takich elementów graficznych
dla każdego z tych stylów, które możemy wykorzystać. To wszystko są elementy, które są na warstwach, np.
gotowe przyciski, gotowe
takie kafelki, które możemy wykorzystać w swojej aplikacji, slidery, które są w stylu Material Design, o którym będę
zresztą jeszcze mówił w odpowiedniej części tego kursu, ale zauważ, że mamy tu już gotowe możemy poprzerzucać sobie do
naszego projektu.
Co więcej, skaluje się to bezstratnie, to znaczy, że wiadomo że Sketch działa i operuje na wektorach, więc to
bardzo dobrze.
No i dodatkowo, to co jest bardzo fajne i do czego chciałbym teraz nawiązać, to możliwość wyeksportowania
takich zasobów graficznych.
Jeżeli wybierzemy w Sketchu Make Exportable to mamy możliwość zapisania do pliku np. PNG czy innych formatów,
ale mamy tutaj jeszcze coś takiego jak Size i mamy Size ustawiony na jeden raz.
Co to tak naprawdę znaczy?
No to właśnie jest coś, czym chciałbym się również zająć w tej lekcji i powiedzieć Ci co oznacza skalowanie.
Jeżeli mówimy o ekranach, tych nowych ekranach tzw. HiDPI, które występują w tym momencie często w tabletach
i telefonach, są to ekrany, które mają bardzo dużą gęstość pikseli i bardzo dużą rozdzielczość.
W efekcie jeżeli ktoś otwiera w przeglądarce naszą stronę na telefonie, ponieważ tam jest bardzo dużo
pikseli, wszystko by było super małe.
Dlatego takie firmy jak Apple czy Microsoft stosują sprzętowo na takich urządzeniach HiDPI
skalowanie.
Co to oznacza? Że po prostu biorą naszą grafikę i powiększają ją do określonej skali. Np. Microsoft robi
to do skali 100, 140 i 180.
Google robi to od 0,75 do skali 400. Apple zwykle 100 i 200%,
aczkolwiek teraz jest już też 300%, a więc mamy bardzo dużo różnych skal, czyli tych skal, do których
nasza grafika może zostać w górę czy w dół zeskalowana w ramach przeglądarki.
I teraz jakie to ma znaczenie?
Oczywiście ma takie znaczenie, że jeżeli korzystamy z wektorów to to, że ten wektor się zeskaluje to
nic nie szkodzi, on będzie zawsze idealnej jakości.
Ale jeżeli korzystamy z bitmap i zostanie ona taka bitmapa powiększona do 400% to naturalnie mamy
spadek jakości i zmniejszenie tej mapy też powoduje utratę jakości.
W związku z tym tak naprawdę zalecane jest przygotowanie dla takich ekranów HiDPI osobnych zestawów grafik.
To znaczy, że dla każdego Scale Factora tak zwanego, czyli dla tej skali 100, 140, 180, powinniśmy mieć przygotowaną
inną grafikę, inny plik JPG czy inny plik PNG.
I po to właśnie w skeczu jest możliwość dodania tutaj odpowiedniej skali np. razy 1.
Teraz jeżeli wybrałbym tutaj ikonkę plusa to okazuje się, że mogę jedną, zaznaczoną grafikę wyeksportować eksportować do więcej
niż jednego pliku np. PNG czy JPG.
I teraz na przykład mam skalę 1 i mam skalę 2. W skali 1 zróbmy sobie @1x żebyśmy wiedzieli
o co chodzi,
czyli tak będzie się nazywał nasz plik z taką końcówką i spróbujmy wyeksportować dwa te pliki.
Wybieram Export date picker i zapisuje sobie to na przykład, mam tutaj taki folder "grafiki", ja tutaj sobie stworzę w tym folderze
jeszcze jeden katalog.
Niech to będzie jedynka i wybieram export.
A następnie przejdę do tego katalogu i okazuje się, że w tym katalogu są teraz dwa pliki.
Jeden ma 31 drugi 77 kb, a więc to też jest istotne i jeden ma rozmiary 396x633, a drugi ma rozmiary
792x1266,
co znaczy, że jest dokładnie dwa razy taki duży. Czyli wyeksportowałem na raz dwie wielkości tego pliku.
I chodzi tutaj właśnie o to, że na potrzeby tych wyświetlaczy HiDPI będziemy mogli zaserwować ten większy plik,
po to, aby to lepiej wyglądało. Jak to się dzieje w praktyce, jak to się robi?
Chciałbym podać Ci jeden bardzo fajny adres, który prowadzi do strony css-tricks.com, tutaj znajduje się
artykuł, który jest często aktualizowany. Napisany przez Chrisa Coyier'a.
Zresztą polecam tego autora, naprawdę świetne zasoby udostępnia. Mamy tutaj plik, gdzie możemy wybrać sobie
na przykład telefony i np. stąd wybrać sobie iPhone'a.
Zauważ, że mamy linie kodu CSS, które pozwalają zaadresować właśnie na przykład iPhone'a 6 Plus.
Jeżeli skopiuję sobie taką linię kodu i w CSS po prostu wstawię ją na moją stronę to teraz mogę w trybie portretowym
czy w trybie landscape, zależy jak ktoś trzyma telefon, ale tak naprawdę nie ma to żadnego znaczenia,
ponieważ dalej jest to iPhone 6 Plus, który po prostu ma określone skalowanie, a to skalowanie to jest
300%, mogę tu w nawiasie sobie napisać, to mogę zaserwować dla tego iPhone'a odpowiednią grafikę. Tutaj w bloku instrukcji,
ponieważ ten cały blok instrukcji @media,
na pewno pamiętasz z lekcji o responsive web design, że pozwala właśnie jakąś instrukcję warunkową stworzyć, która
pozwoli zawęzić nasz kod CSS. W tym przypadku kluczowe jest tak naprawdę to. Tutaj nie chodzi o to i
nie robimy tak, że adresujemy osobno
iPhone 6, iPhone 4 itd.
Raczej najważniejsza będzie tutaj ta linia kodu, czyli device-pixel-ratio, czyli linia, która mówi, że to
urządzenie, które skaluje przynajmniej do 300%, powinno zrobić jakąś tam linię kodu, czyli np. ta
linia kodu to będzie w naszym przypadku background
i tutaj zaserwujemy grafikę podając po prostu URL do tej grafiki, jako grafika@3x.jpg
Tak
jak wyeksportowaliśmy przed chwilą w Sketchu, np. dwa razy, jeden raz.
Tak mogliśmy też trzy razy i wtedy zaserwować tą grafikę w taki sposób.
I chodzi właśnie głównie o device-pixel-ratio.
Jeżeli to będzie 2 to będzie grafika serwowana do wszystkich ekranów, które skalują przynajmniej 200%.
Jeżeli to będzie 1.8 to do wszystkich, które skalują przynajmniej 1.8, jeżeli 4 to przynajmniej 400.
Mam nadzieję, że rozumiesz o co tutaj chodzi.
I to jest wbrew pozorom dość istotne, ponieważ warto o tym pamiętać.
Teraz jeszcze jedna bardzo praktyczna wskazówka. Tak naprawdę nie ma sensu w przypadku bitmap zapisywać
nie wiadomo ilu plików dla każdego Scale Factora, których jest naprawdę bardzo dużo.
Przyjęło się, że w internecie w tym momencie stosujemy dwa Scale Factory, czyli 100 i 200%. Dokładnie
tak jak wyeksportowałem ze Sketcha.
Czyli robimy jeden obrazek w skali 100, np. 100x100px i drugi 200x200px i w razie potrzeby
odpowiedniego serwujemy.
Dlaczego tak?
Ponieważ pamiętaj, że każda zmiana rozmiaru w górę będzie też skutkowała większym plikiem.
Tak jak pokazałem Ci przed chwilą, ważył więcej kilo bajtów ten nasz plik 2 razy. I teraz musimy pamiętać
o pewnych ograniczeniach, które też narzucają prędkości łącz zwłaszcza na urządzeniach przenośnych, więc
nie serwujmy raczej grafik cztery razy większych po to żeby tylko idealnie się wyświetlały, raczej
dla sieci po prostu robimy skalę 1x i 2x, przy czym pamiętaj, jest też niezwykle ważne to żebyś
znów otrzymał te pliki edycyjne od np. autora Twoich grafik, ponieważ może się okazać, że za rok czy dwa
będziesz potrzebował tą skalę 4x, bo tak szybko będą rosły rozdzielczości i też prędkości łącz, no
i wtedy będziesz mógł z takiego pliku AI czy PSD np. sobie tą grafikę na nowo wyeksportować.
Także to wszystko jeśli chodzi o skalowanie i eksportowanie bitmap, tak na marginesie jeszcze dodam, że
nie tylko Sketch potrafi eksportować w skalach. Jeżeli chodzi o Photoshopa, ma on nową funkcję, po kliknięciu
prawym przyciskiem na warstwę możemy przejść do opcji Export as..., czyli do Eksportowania jako...
i tutaj znajduje się możliwość eksportowania do różnych skal np. jednej warstwy, a także jako ciekawostkę
powiem, że stąd wyjątkowo z Photoshopa można eksportować też do plików wektorowych, czyli do plików SVG.
Oczywiście tylko wtedy, jeżeli w samym Photoshopie w środku mamy wektory, a nie mamy bitmapę, bo eksportowanie bitmapy
do SVG i tak jej wcale nie zamieni na format wektorowy.
Także to wszystko co chciałem powiedzieć, poza kilkoma punktami na koniec, pamiętaj, że jeżeli tylko się
da korzystaj z wektorów i za wszelką cenę unikaj bitmap. Jeżeli już robisz bitmapy,
musisz je wyeksportować przynajmniej w skali 100 i 200%.
Znaczy, musisz...
Jeżeli tego nie zrobisz, to po prostu urządzenie weźmie Twoją grafikę 100% i powiększy ją do 200.
W ten sposób stracisz na jakości, więc unikaj bitmap jeśli możesz i korzystaj z wektorów.
Pamiętaj o tym żeby ktoś przekazał Ci pliki edycyjne do projektu.
Pamiętaj o skalowaniu na różnych rozdzielczościach.
Pamiętaj o tym, że aplikacje, które nie są branżowym standardem, mogą nie być obsługiwane przez Twoją kolejną
agencję reklamową, z którą będziesz pracował, a więcej na ten temat,
jak zaserwować grafiki, które będą szybko działały na stronach, dowiesz się w lekcjach o optymalizacji w
tym kursie.
Na razie to wszystko dziękuję za uwagę i do usłyszenia w kolejnej lekcji.