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 pierwszej części tego kursu, w której chciałbym przyjrzeć się tym podstawowym, elementarnym zagadnieniom
związanym z projektowaniem nowoczesnych stron internetowych.
Ta część kursu znalazła się tutaj ponieważ chcę aby był on jak najbardziej kompletny, a więc również
aby osoby początkujące mogły jak najwięcej z tego kursu wyciągnąć.
W związku z tym ta część jest adresowana właśnie do osób, które stawiają swoje pierwsze kroki w Web Designie
lub też osób, które np. prowadzą czy nadzorują zespoły tworzące nowoczesne interfejsy stron internetowych.
Zapraszam Cię na wycieczkę po kilku przydatnych narzędziach oraz po podstawowej terminologii z zakresu
projektowania stron internetowych.
Zacznijmy od pojęć Server-Side oraz Client-Side, które trzeba wyraźnie rozdzielić i trzeba mieć świadomość
różnych technologii, które działają z jednej strony po stronie naszego serwera, czyli tam gdzie nasza
witryna jest hostowana, tam gdzie się znajduje i tam gdzie działa na serwerze, który będzie
nam potrzebny i z drugiej strony mamy technologię Client-Side, czyli z grubsza to co użytkownikowi wyświetla
się w przeglądarce.
Technologie Server Side to grupa technologii, które działają na serwerze i obsługują żądania wysyłane
przez użytkownika.
Inaczej określa się zestaw tych technologii Back-End'em, czyli jeśli mówimy o kimś, że programuje Back-End
czy technologie Server-Side,
jest to jedno i to samo i oznacza te technologie, które działają na zapleczu naszej strony internetowej,
bardzo często związane są np. z obsługą zapytań
bazodanowych i technologiami, które nie są widoczne dla klienta, które działają pod spodem. Client-Side
to z kolei grupa technologii, które działają po stronie użytkownika, które wpływają bezpośrednio na to
co użytkownik widzi w przeglądarce, co mu się wyświetla, a także pozwalają wykonywać proste, a nawet trochę
bardziej zaawansowane operacje u użytkownika czy bezpośrednio na komputerze użytkownika i obciążają tym
samym troszeczkę również nasz serwer.
Inaczej te technologię Client-Side określa się mianem Front-End'u i również osoba, która zajmuje Front-End'em
to właśnie będzie ktoś, kto pracuje z tego typu technologiami. Najczęściej osoby odpowiedzialne za Server-
i Client-Side
są to różni programiści, aczkolwiek czasem programiści zajmują się i jedną i drugą technologią. Jeśli
chodzi o Server-Side to możemy tutaj wymienić najbardziej popularne języki projektowania i popularne
technologie. Są to PHP, ASP.NET od Microsoftu.
Jest to oczywiście Java no i technologie bazodanowe, które działają z tymi językami, na przykład PHP działa
z bazą danych MySQL.
Z kolei ASP.NET będzie działał z serwerem SQL. Jeśli chodzi o technologię Client-Side
są to technologie, z którymi pewnie już się spotkałeś takie jak HTML, CSS, JavaScript czy ActionScript.
Najbardziej popularne z tych technologii w tym momencie to HTML, CSS i JavaScript, które będę omawiał
szczegółowo w kolejnych lekcjach tego wprowadzenia.
Chciałbym teraz wytłumaczyć Ci dobrze różnicę między technologiami serwerowni a Client-Side .
Jeśli chodzi np. o PHP, który jest językiem serwerowym, niedostępnym dla użytkownika, którym np. możemy
obsługiwać naszą bazę danych, możemy z jego pomocą wykonywać również różne bezpieczne operacje, takie
jak logowanie użytkownika, odwoływanie się do bazy po to aby pobrać jego dane, sprawdzić hasła, loginy
itd.
Natomiast JavaScript to język, który jest widoczny dla klienta w przeglądarce, język Client-Side, który
każda osoba może podejrzeć oraz zmodyfikować.
Chciałbym teraz pokazać Ci jeden prosty przykład na działanie technologii serwerowych technologii Client-Side.
Jestem na stronie, na której wyświetlam kod PHP.
Jak już wiesz plik PHP to jest taki plik, który działa pod spodem na serwerze i z tego powodu zegarek,
który mam przedstawiony prezentuje nam czas serwerowy.
Jest to 5:03 rano.
Jak się domyślasz o tej porze nie nagrywam kursu,
w związku z tym jest to czas, który nie jest u mnie lokalnie na komputerze tylko jest to czas serwerowy
jakiegoś serwera, który znajduje się gdzieś np. w Stanach Zjednoczonych.
No i jeśli chodzi o ten kod PHP to gdybym nawet chciał np. podejrzeć sobie w jakiś sposób to jak wygląda
ten kod PHP z pomocą narzędzi deweloperskich.
No niestety nie mogę tego zrobić, nie mogę też pobrać samego pliku PHP i zobaczyć jak wygląda kod pod
spodem. Jest on dla mnie niedostępny.
Natomiast jeżeli byśmy mówili o technologiach Client-Side no to są to technologie, które działają w przeglądarce
i ja mam otwarty bardzo prosty programik do edycji i pisania HTML'a, jest to program Brackets, który zresztą
mogę Ci polecić, jest w pełni darmowy i służy on do Authoringu HTML'a, czyli inaczej do pisania stron internetowych
i również w tych technologiach Front-Endowych.
A więc mam tutaj różne pliki CSS, skrypty JavaScript i pliki HTML.
To jest bardzo prosta struktura pliku HTML gdzie jak widzisz możemy wyróżnić rozmaite znaczniki. W ramach
kodu HTML możemy tutaj wyróżnić podstawowe elementy jego struktury czyli znaczniki no i te znaczniki mają
odnoszą się do całości naszej strony, a w ramach poszczególnych znaczników możemy także dodawać np. skrypty i tutaj mam bezpośrednio
w HTML'u kawałek skryptu JavaScript, skryptu, który właśnie odpowiedzialny jest również za wyświetlanie
zegara.
Zauważ że mamy tutaj pobraną po prostu JavaScript'owo datę, następnie pobrane godziny, minuty, sekundy i przetrzymujemy
to wszystko w odpowiednich zmiennych, a następnie wyświetlamy do elementu w naszym dokumencie HTML, który
nazwaliśmy "txt".
Ten element "txt" znajduje się w ciele naszego dokumentu.
Jest to div, który ma właśnie taki identyfikator no i w tym div'ie zostanie po prostu wyświetlony czas.
Jak się łatwo domyślić, jest to element działający po stronie przeglądarki, więc czas klienta Spróbujmy
teraz to przetestować.
Brackets
posiada bardzo fajną funkcję Live Preview, która umożliwia nam za pomocą jednego kliknięcia podejrzeć to
jak ten kod wygląda w naszej przeglądarce.
No i zauważ, że rzeczywiście mamy tutaj zupełnie inną godzinę, czyli godzinę 14:05, co jest aktualnym czasem,
który mam ustawiony na komputerze. Więc tym się właśnie różni czas serwerowy, który podaje mi czas jakiegoś komputera,
który jest w Stanach i czas lokalny, czas, który ja sobie tutaj wyświetlam z pomocą JavaScript'u u klienta czyli
w mojej przeglądarce.
Jeżeli teraz wybiorę polecenie zbadaj element, no to okazuje się, że mam dostęp do wszystkich elementów,
które znajdują się tutaj w HTML'u i mogę sobie spokojnie podejrzeć cały znacznik head, a także mogę podejrzeć
sobie skrypt, który jest wykonywany, to są akurat skrypty Adobe, ale mogę, zaraz trafię na skrypt, który jest wykonywany
w celu właśnie podania mojej godziny.
Czyli wszystko to mam widoczne na wierzchu.
Co więcej mogę oczywiście też w jakiś sposób nawet to zmodyfikować w przeglądarce.
Nie będziemy już teraz tego robić,
jestem przekonany, że ten prosty przykład pozwoli Ci się zorientować czym są technologie serwerowe i technologie
klienckie, jak np. JavaScript. No i pliki Cookies mają też określoną pojemność, nie możemy w nich zapisać
więcej niż kilka kilobajtów danych,
w związku z tym są one dość małe i dlatego zamiast plików Cokies stosujemy różne rozwiązania, tj.
zmienne sesyjne, które są zapisywane u nas na serwerze, ewentualnie korzystamy z baz danych, które właśnie działają
już po stronie serwera i w bazie danych możemy zapisać zdecydowanie więcej informacji.
No i co więcej możemy zapisać te informacje na stałe, w związku z tym pamiętaj, że bazy danych tj.
bazy MySQL czy SQL działają u nas na serwerze i dane, które są tam przechowywane nie są dostępne dla
klientów, nie są dostępne na zewnątrz, również są bezpieczne i możemy tam przechowywać większe ilości
danych i obsługujemy komunikację pomiędzy bazą danych, a właśnie naszym serwerem z pomocą języka serwerowego
np. PHP.
Natomiast pliki Cookies to pliki takie podręczne, pomocne, które możemy zapisywać u użytkownika na komputerze.
Mogą to być małe pliki zawierające mało informacji i musimy liczyć się z tym, że użytkownik może wyczyścić
sobie pliki Cookies, a więc nie możemy do końca na nich polegać.
I ostatnią już rzeczą, którą chciałbym powiedzieć Ci w tej lekcji jest to jak wygląda współpraca serwera
z bazą danych, więc baza danych, czym w ogóle jest?
Jest to pewnego rodzaju oprogramowanie na serwerze, które służy w aplikacjach WWW do przetrzymywania
różnych informacji, tj. lista użytkowników, jak artykuły na naszym blogu, posty, komentarze i wiele,
wiele więcej. Jeśli chodzi o komunikację pomiędzy bazą danych,
no to najprostszy schemat właśnie jest przy okazji logowania.
Jeśli użytkownik wprowadza login i hasło to robi to, dokładnie, wiesz już pewnie w jakiej części naszej
witryny, w części Client-Side,
czyli wprowadza dane z pomocą formularza HTML, obsługiwanego przez JavaScript, który wysyła z kolei dane
do naszego serwera. Teraz wysyła je z pomocą takiej specjalnej metody, czyli np. metody POST,
no i w ramach naszego serwera, język PHP sprawdza czy login, który podał użytkownik zgadza się z konkretnym
hasłem, które zostało wpisane i sprawdza to właśnie w tej aplikacji
bazodanowej, czyli w naszych tabelkach. W bazie danych możesz bazę danych w uproszczeniu przyjąć jako
taki duży arkusz kalkulacyjny Excela, który zawiera poszczególne kolumny oraz rzędy i dzięki temu można
w poszczególnych elementach odnaleźć te rzeczy, które do siebie pasują, więc
sprawdzamy czy użytkownik wpisał poprawny login i poprawne hasło, ale już po stronie serwera, żeby było
to bezpieczne, a następnie jeżeli to się udało to wyświetlamy odpowiedni komunikat na naszej stronie
i logujemy użytkownika.
To wszystko co chciałem wytłumaczyć Ci w tej lekcji wprowadzającej dotyczącej technologii Client-Side
oraz Server-Side.
Mam nadzieję, że teraz rozumiesz różnicę między tymi technologiami,
znasz podstawowe języki, w których możemy pisać, a także wiesz czym jest baza danych i jak możemy ją obsługiwać.
To wszystko co chciałem powiedzieć Ci w tej lekcji, a więc dziękuję bardzo za uwagę i do usłyszenia już
za chwilę.