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, w której zajmiemy się już konkretnymi receptami i konkretnymi rozmiarami, pod
które powinniśmy projektować strony internetowe.
Mówiłem Ci o tym, że RWD to jest jeden projekt, jedna strona internetowa, która zmienia się w zależności
od stylów jakie zastosujemy.
Zgadza się i tak jest na etapie już wdrażania naszej strony.
Natomiast na etapie projektowania powinniśmy przygotować przynajmniej trzy różne layouty, czyli układy
graficzne dla odpowiednio wariantu telefonowego, tabletowego oraz desktopowego dla naszej strony.
Mówię przynajmniej o trzech, ponieważ tych wariantów można przygotowywać więcej.
Czym są tak naprawdę break pointy, o których tutaj piszę. Break pointy to są konkretne rozdzielczości,
przy których decydujemy, że zmieniamy wersję, robimy inną wersję naszej strony. Czyli np. tutaj mamy przegląd
rozdzielczości w zależności od urządzeń. Jak widzisz w pikselach mamy szerokości 240, 480, 600, 768 itd.,
a tutaj mamy informacje o tym jakie urządzenia korzystają z tego typu rozdzielczości, np. tutaj starsze iPhone'y,
tutaj mamy jakieś nowsze iPhone'y, iPady mamy starsze desktopy, niektóre laptopy itd., więc można to uogólnić
w kontekście pewnych rodzajów i typów urządzeń i wybrać pewne optymalne break pointy przy zachowaniu
statystyk, o których mówiłem Ci wcześniej. Aczkolwiek moją radą jest to aby robić to zupełnie w oderwaniu
od urządzeń, bardziej bazować na tych statystykach, nie zastanawiać się jaką rozdzielczość tam ma HTC
albo jakiś Galaxy Tab nie wiadomo który, ponieważ tego jest zdecydowanie za dużo. Pokazywałem Ci fragmentację Androida,
ponad pięć i pół tysiąca urządzeń, więc nie jesteś w stanie fizycznie zaadresować wszystkich tych urządzeń,
jeśli chodzi o Twój projekt graficzny. Zapomnij o urządzeniach, będzie Ci znacznie wygodniej jeżeli będziesz
projektował w oparciu o pewne utarte standardy.
Te standardy, które ja wypracowałem prezentuję Ci tutaj, są to konkretne rozmiary, w których warto projektować,
ale pamiętaj o tym, że nie są one ponadczasowe, to znaczy rozdzielczości cały czas się zmieniają.
De facto cały czas rozdzielczości rosną i można spodziewać się tego, że przesunięcie tych break point'ów będzie
wkrótce jakoś gdzieś w górę na skali.
Aczkolwiek trzeba tutaj zwrócić uwagę na jeszcze jedną istotną rzecz.
Mówiłem Ci wcześniej o DPI, mówiłem o tym, że w miarę jak rozdzielczości rosną, rośnie też ta gęstość pikseli,
np. na fizycznym tym samym 3,5- czy 4-calowym ekranie telefonu i mówiłem Ci, że producenci aby
to wszystko nie było za małe na ekranie, stosują taki zabieg, który się nazywa skalowanie.
I teraz pamiętaj o tym, że zwłaszcza w przypadku urządzeń mobilnych rozdzielczości fizyczne, które podają
producenci mogą Cię zwieść, bo możesz sprawdzić rozdzielczość iPada i okaże się że jest to około dwa
i pół tysiąca pikseli.
Tymczasem na iPadzie z ekranem Retina jest zastosowane skalowanie razy 2 czyli 200 procent.
Co to znaczy? Że tak fizycznie to co będzie widać.
To nie będzie 2,5 tys pikseli tylko połowa tego, czyli około 1200.
Czyli pamiętaj o tym, że, czy tam chyba w nowym iPadzie jest 2100, a więc będzie około 1024.
Czyli pamiętaj o tym, że w tym momencie projektując pod 1024, będziemy adresować także nowe iPady. Pamiętaj
o DPI i skalowaniu.
Wybrałam kilka break pointów, które warto zaadresować, są to telefonowy 480 i 640, tabletowe 768 i 1024
i później mamy desktopowe od 1280 w górę.
Przy czym zaznaczyłem na zielono te, które moim zdaniem obowiązkowo trzeba jako niezbędne minimum zaprojektować.
Są to rozmiary 480, 1024 i 1366 odpowiednio dla telefonu, tabletu i desktopu.
Dla niektórych z Was może się to wydawać mało, więc można projektować więcej
break pointów, w praktyce to jest tak, że w programie graficznym, np. w Photoshopie robimy sobie grafikę i zaczynamy
od,
podejściem Mobile First,
od najmniejszego ekranu, a więc zaczynamy od telefonu i na ten moment robię to zwykle rozdzielczością
480.
Jeśli chodzi o wysokość, de facto mógłbym tutaj wpisać 800, ale zwykle wpisuję jakąś zdecydowanie większą wysokość.
Dlaczego tak robię? Dlatego, że mówiłem Ci o tym podejściu Linear Design, że projektujemy cały przepływ
informacji z góry na dół i staramy się unikać kliknięć, a bardziej projektować dłuższe strony.
Oczywiście nie idziemy na rekord, ale staram się jak najwięcej rzeczy zrobić w obrębie jednego widoku.
Dlatego ja robię taką taką długą stronę, a tylko sygnalizuje jakąś mniej-więcej to gdzie kończy się ten
główny ekran, czyli np. w Photoshopie można przejść do widoku, a następnie wstawić sobie nową linię
podziałki, dowolnie horyzontalną, którą umieszczę np. w okolicy 800 piksela.
Co to znaczy?
To znaczy, że teraz wyznaczyłem wizualnie to gdzie mniej więcej kończy się pierwszy ekran.
Dlaczego ten pierwszy ekran widoczny dla użytkownika jest taki ważny? Dlatego, że to właśnie na nim powinna
skupiać się najważniejsza,
ten najważniejszy content na naszej stronie, a poniżej dopiero umieszczamy jakieś informacje uzupełniające.
Dlatego jeżeli projektujemy taki długi interfejs, warto zrobić sobie jakąś linię podziałki, która nam
pokaże dokąd dochodzi ta główna treść.
Następnie widok tabletowy i tutaj robimy 1024 również na 3000. Czy 1024 czy 768
moim zdaniem nie ma to aż takiego dużego znaczenia. Jeśli chodzi o statystyki użycia tabletów to jest dokładnie
50 na 50, pół na pół.
Ludzie korzystają w wertykalnym i horyzontalnym widoku, układzie z tabletu, w związku z tym ja zaczynam od 1024
zwykle.
I tutaj też robię trzy tysiące wysokość, natomiast w widoku wybieram sobie nowego guide'a i po prostu linię horyzontalną
stawiam w okolicy 750 piksela.
Dlaczego nie 768?
Dlatego, że przypominam, że jeszcze mamy te elementy interfejsu przeglądarki, które są na górze, które też
zabierają nam troszeczkę miejsca.
No i w końcu ostatni layout to będzie layout desktopowy i ten layout ustawiam na 1366, również na
3000 i również robię sobie tutaj nowego guide'a, który będzie miał około 750 pikseli.
Dlaczego wybrałem akurat 1366 dla widoku desktopowego mojej strony?
To proste. Dlatego, że to jest najbardziej popularna rozdzielczość, w związku z tym staram się projektować
zaczynając od takiej rozdzielczości, w każdym z tych segmentów, powiedzmy telefon, tablet i desktop, gdzie
jest najwięcej ludzi, którzy korzystają z danej rozdzielczości. OK.
Czyli w ten sposób będziesz musiał zaprojektować prawdopodobnie, przynajmniej trzy układy Twojego layoutu.
Jedna rzecz, którą chciałem Ci jeszcze podpowiedzieć, to jest ciekawe narzędzie, które znajdziesz na
stronach bradfrost.com, narzędzie się nazywa ISH, aktualnie jest w wersji 2.0.
Mam nadzieję, że Brad będzie je wspierał. Jeżeli nawet go nie znajdziesz to istnieje mnóstwo innych różnych
narzędzi, które pozwalają w ten sposób właśnie zrobić, że wewnątrz przeglądarki po prostu zeskalować ją,
tak żeby podejrzeć jak będzie to wyglądało na różnych rozdzielczość.
Dlaczego to jest lepsze od skalowania samej przeglądarki?
No bo możemy zobaczyć tutaj rozmiar, a nawet wpisać konkretny rozmiar, który chcemy dostać,
no i możemy też przełączać się pomiędzy poszczególnymi widokami, np. S, M, L, czyli w skrócie
najpewniej będzie to mobilny widok, później tabletowy,
później jakiś desktopowy, no i Full, czyli to co mamy tutaj do dyspozycji.
Możemy też wybrać opcję Random i poklikać sobie, zobaczyć różne randomowe, losowe rozmiary, no i również znajdują
się tutaj dwa bardzo fajne tryby.
Po pierwsze tryb Disco.
Jeżeli włączymy Disco to będziemy mieli ciekawe tutaj porównanie losowych rozdzielczości, które się zmieniają.
Na chwilkę wybiorę Full i pokażę Ci jeszcze tą lewą część. Tutaj możemy wpisać adres Smashing Magazine
na przykład albo oczywiście adres Twojej strony, wybrać GO i teraz dopiero na takiej stronie zastosować
np. tryb Disco. To znaczy, że będziemy losowo mogli podejrzeć jak Smashing Magazine ładnie się skaluje.
Mamy tutaj jeszcze to animowane, więc możemy zobaczyć różne rozdzielczości jak są zaadresowane.
Jest jeszcze jeden tryb, który też Ci polecam.
Jest to tryb HAY! Tryb HAY!, który pozwala przejść sobie od najmniejszego rozmiaru.
Stopniowo rozszerzamy i stopniowo pokazuje nam się to jak wyglądałoby na różnych, innych rozdzielczościach.
Bardzo fajne w trybie HAY!, proponuję sobie odpalić kilka dobrze responsywnie zaprojektowanych stron i zobaczyć co
się zmienia.
Naprawdę jest to ciekawe doświadczenie, które może wiele wnieść do Waszych kolejnych projektów.
No i na przykład jeszcze jedno takie podejście, które zwłaszcza sprawdza się wtedy kiedy macie już np.
gotowy zrobiony jakiś layout, albo chcecie przerobić swoją stronę
tak aby była responsywna, polecam,
przy okazji wszedłem sobie na stronę Ministerstwa Cyfryzacji, żeby zobaczyć czy ich strona jest dostosowana do
nowych standardów.
Szczerze mówiąc zrobiłem to dlatego, żeby znaleźć jakąś stronę, która nie jest responsywna.
Chciałbym sobie wejść teraz na mac.gov.pl, ale obawiam się, że może to się nie udać na bradfrost. Ok, to
mniejsza o to, wejdę sobie na tą stronę w nowej karcie i strona Ministerstwa Cyfryzacji niestety responsywna nie
jest.
I to powoduje, że można skorzystać tutaj z jeszcze jednego sposobu na wyznaczanie break pointów.
Jak mamy już coś zaprojektowane, tak jak np. tutaj, to polega to na tym, że chwytamy sobie za okno przeglądarki,
zmniejszamy, zmniejszamy i zatrzymujemy się w miejscu, gdzie zaczyna to wyglądać, Stephen Hay
o tym mówił i użył tutaj trochę nawet mniej cenzuralnych słów, że zaczyna wyglądać jak kupa.
W momencie kiedy zaczyna to wyglądać jak kupa, czyli np. tutaj, to znaczy, że w tym miejscu powinniśmy
postawić break point.
Teraz, później stawiamy sobie break point, projektujemy, jedziemy, jedziemy, jedziemy dalej prawda.
Na przykład okazuje się, że w tym miejscu zaczyna to wyglądać źle, czyli jest coś za małe, coś warto
poprzestawiać, to stawiamy tutaj break point i w ten sposób generujemy takie nasze własne break pointy, które
są dostosowane i zależne od contentu na stronie, co jest świetnym podejściem, ponieważ nie postępujemy
tak jak wszyscy rozdzielczościami, tylko
każda strona może być inna, każdy content, treści wyświetlane na niej mogą prezentowane być inaczej i
to jest fajne podejście, które pozwoli Ci właśnie głównie dla projektu, który już masz zrobić break pointy,
które rzeczywiście będą do tego pasowały.
Jeżeli chodzi o samo projektowanie to z mojej strony to wszystko, jeszcze jeden Slide odnośnie skalowania
na urządzeniach. wspominałem Ci o tym, że nie sugeruj się do końca tym że jakiś iPhone na przykład ma
rozdzielczość około 1200, ponieważ może na nim być zastosowane skalowanie tak jak jest na wszystkich Retinach
dwa razy i wtedy fizycznie jakby przygotowujemy dla niego projekty w rozdzielczości 640, czyli dwa
razy mniejszej.
Także pamiętaj o tym, że te wysokiej jakości wyświetlacze tak czy inaczej będą skalować interfejs i
dzięki temu będziemy nadal cały czas przy małych ekranach oscylować w granicach tych np. 480,
320 czy 640 pikseli.
To się tak szybko nie zmieni, podobnie jak w przypadku tabletów.
Tutaj masz, gdybyś chciał z tego skorzystać, rozmaite warianty skalowania, natomiast dokładnie opisałem te
wszystkie zależności na blogu i myślę że warto żebyś skorzystał sobie z tego zasobu.
To jest blog.eduweb.pl
Co prawda projektowanie grafiki dla iOS i Retina, ale tutaj znajduje się lekcja o rozdzielczościach, która
moim zdaniem jest bardzo uniwersalna i w kilkanaście minut wytłumaczy Ci dokładnie na czym polega skalowanie
pod kątem tych różnych DPI.
Jeżeli jeszcze tego nie rozumiesz, myślę że jest to bardzo istotne również w kontekście tego jak projektujemy
strony internetowe.
Te responsywne strony internetowe.
Teraz to wszystko, zachęcam Cię do obejrzenia i przeczytania na blogu.
Do usłyszenia w kolejnej lekcji.