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 cały czas mówimy o pracy w zespole, a teraz chciałbym opowiedzieć Ci
o zarządzaniu plikami i o systemach zarządzania plikami, które są dostępne, z których naprawdę warto korzystać.
Czym w ogóle są systemy zarządzania plikami, inaczej systemy subwersji? Mogłeś wcześniej spotkać się i być może
korzystałeś już z takiego trochę starszego systemu, który oczywiście jeszcze działa, nazywa się SVN, jego
popularnym klientem był taki żółwik, czyli TortoiseSVN
i rzeczywiście był to jeden z najbardziej popularnych systemów. W tym momencie
polecam zdecydowanie korzystanie z innego systemu, jakim jest git.
Bardzo dużo deweloperów i wszystkie współczesne firmy, które właśnie zajmują się web developmentem korzystają
z gita, wdrażają go w swoich rozwiązaniach.
Co to w ogóle jest ten system kontroli wersji i co on nam daje?
Można powiedzieć, że jest to taki zbiór naszych wszystkich plików z naszej witryny.
Na ogół są to tylko pliki z kodem witryny, ponieważ do plików graficznych, layoutów i innych, pokażę Ci jeszcze
inne narzędzia, więc jeśli chodzi o samo repozytorium i o Gita najczęściej składa się on właśnie z plików
HTML, CSS, JavaScript, wszystkich plików kodu serwisowego naszej witryny, które są zgromadzone w jednym
miejscu, najczęściej jest to jakiś serwer, na którym po prostu stoi takie repozytorium.
I teraz do tego repozytorium podłączeni są członkowie naszego zespołu i mogą oni zarówno pobierać z
niego aktualną wersję strony jak i komentować, czyli wrzucać te rzeczy, które zmodyfikowali u siebie.
Innymi słowy, na centralnym serwerze mamy jedną właściwą wersję naszego repozytorium,
natomiast poszczególni członkowie zespołu mają pobrane również swoje wersje repozytorium, na którym mogą
pracować. Za każdym razem kiedy rozpoczynają pracę, pobierają sobie aktualną wersję repozytorium, która
jest na serwerze i w ten sposób mają zawsze aktualne pliki. Oczywiście nie pobiera się całość, tylko te
pliki, które zostały zaktualizowane przez innych w tym czasie.
Ponadto system kontroli wersji umożliwia współpracę nad taką stroną bez wzajemnego nadpisywania plików.
W momencie kiedy kończymy prace nad jakimś plikiem, to następuje tzw. commit, czyli my chcemy włożyć
ten plik do tego głównego repozytorium, czyli np. na nasz ten główny serwer i wtedy gdyby jakieś problemy
z tym plikiem wyniknęły, np. był on na serwerze zmieniony i ta wersja różniła się od naszego,
zostaniemy o tym poinformowani,
co więcej, mamy bardzo łatwo w przypadku jakichkolwiek konfliktów podczas ściągania czy wrzucania plików,
zastosować na przykład polecenie diff i sprawdzić to jakie są konkretne różnice w tych poszczególnych plikach
i możemy np. zdecydować aby te różnice połączyć, aby zastąpić starszy plik nowszym czy nowsze starszym
itd.
Czyli mamy bardzo dużo możliwości jeśli chodzi o pracę nad tymi plikami, przy czym nigdy nie nadpiszemy sobie
plików, nawet jeżeli wiele osób pracuje nad tym samym plikiem równocześnie. Kolejno mamy możliwość przywrócenia
starszej wersji strony, czyli np. mamy całą historię naszej subwersji i całą historię plików.
Gdybyśmy robili promocję, która trwa jeden dzień i na potrzeby tej promocji gdybyśmy modyfikowali znacząco
stronę np. robili jakieś alerty, jakieś ekrany modalne, jakieś powiadomienia dla użytkowników, to to wszystko
moglibyśmy opublikować, a następnego dnia moglibyśmy powiedzieć tylko "wyciągnij mi repozytorium czy
historię mojej strony z wczoraj i uznaj to za bieżącą, aktualną wersję" i w tym momencie wracamy sobie do wersji
z wczoraj i nasza strona wygląda tak jak przed promocją.
Ponadto mamy np. możliwość wyodrębnienia czegoś takiego jak gałęzi z naszego głównego repozytorium, czyli
jeśli uznamy to główne repozytorium za ostateczną wersję produkcyjną naszej strony, który później jest
jakoś połączony z serwerem i się też aktualizuje razem z serwerem, no to wtedy uznajemy, że chcemy zrobić,
np. wdrożyć jakąś funkcjonalność eksperymentalną i w tym celu nie chcemy pracować nad tymi głównymi
plikami, nad którymi inni pracują, ale chcemy wydzielić sobie jakiś klon tego repozytorium po to abyśmy
mogli wyrażać te eksperymentalne funkcje.
Tym jest właśnie Branch, czyli tak zwana gałąź repozytorium.
Możemy to zrobić dopiero wtedy, gdy uznamy, że nasze eksperymentalne funkcje są gotowe, możemy zacommitować
całość czy złączyć ją z naszym głównym repozytorium tak, aby było dostępne już oficjalnie jako wersja
produkcyjna.
To są tylko niektóre możliwości systemów zarządzania plikami, z których zdecydowanie polecam Git'a.
Tak jak wspomniałem i teraz jesteśmy na stronie Gita, bo jeszcze chcę powiedzieć Ci czym różni się Git
od Githuba, o to też bardzo często mnie pytacie.
W związku z tym Git to nie jest to samo co Github,
który jest bardzo często, te rzeczy są utożsamiane ze sobą. Git
to jest właśnie zestaw tych wszystkich narzędzi, czyli kontrola wersji, również porównywanie plików, commitowanie,
jest to właśnie zestaw jak gdyby wszystkich tych funkcji, o których wspomniałem.
Natomiast nie jest to jeszcze kompletna usługa i kompletne rozwiązanie serwerowe,
czyli nie jest to coś, co z pomocą jednego przycisku możemy sobie gdzieś stworzyć naszą przestrzeń na nasze repozytorium, aktualizować ją
itd.
Możemy zaimplementowane Gita jako swoje rozwiązanie, np. zainstalować u siebie lokalnie czy na swoim
serwerze, oprzeć go jeszcze na Dropboxie, tak aby robić kopie zapasowe.
Jak najbardziej możemy to samodzielnie skonfigurować, ale możemy również skorzystać z Githuba, który jest
właśnie obudowaniem Gita o wszystkie narzędzia typu narzędzia komentowania, wyciągania poszczególnych
branchy, dzielenia się nimi z innymi,
hostowania naszych projektów, czyli miejsca na serwerze przeznaczonego na te nasze repozytoria no i zdecydowanie
polecam właśnie korzystanie z Gita z pomocą Githuba. Github jest co prawda narzędziem płatnym, ale
tylko wtedy jeżeli swój kod będziesz chciał ukryć.
Dla darmowych projektów jest to zawsze projekt, dla otwartych projektów, czyli takich publicznych, jest to
zawsze projekt darmowy i możesz stworzyć sobie konto po to, żeby takie projekty publikować, ale też jak
gdyby przejmować projekty od innych.
Są setki tysięcy projektów na Githubie, które możesz sobie po prostu przeglądać i
jeżeli spodoba Ci się jakiś fragment tego projektu, możesz zrobić tzw. pull
request, możesz wyciągnąć te rzeczy, które chcesz dla siebie. Pokazywałem Ci
jeden z takich projektów na Githubie, jest to projekt Google Fonts. Jak widzisz ma on swojego autora,
ma on swoje branche, czyli mogą tutaj być jakieś różne gałęzie eksperymentalne, które też możemy sobie przeglądać
i filtrować,
no ale tutaj jest Branch Master, czyli ta główna gałąź, czyli ten główny projekt, gdzie mamy listowane wszystkie
katalogi, które w ramach niego się znajdują
wszystkie pliki, możemy je tutaj podejrzeć, mamy również link do tego repozytorium, możemy je w całości
zapisać właśnie np. sobie na naszym pulpicie
czy możemy wybrać pull request, czyli po prostu przenieść to do swojego repozytorium na Githubie.
W związku z tym mamy tutaj te wszystkie funkcjonalności umożliwiające np. komentowanie,
mamy jakieś informacje o statystykach, mamy możliwość komentowania, obserwowania itd.
Mamy możliwość wzięcia udziału jako contributor, jako ktoś, kto również dołącza coś i daje coś od siebie
do tego projektu.
No i to właśnie oferuje nam Github.
W związku z tym mam nadzieję, że teraz rozumiesz te zalety korzystania z systemów subwersji i
w wersjonowania plików.
Polecam zdecydowanie korzystanie z Gita, a jeżeli chcesz dowiedzieć się o nim więcej, w tym momencie
serdecznie polecam Ci warsztat, który jest na Eduweb Live.
Jest to warsztat Wprowadzenie do Git'a, gdzie szczegółowo omawiamy jego instalacje i proces właśnie rozpoczęcia
przygody z tym systemem kontroli wersji. To już wszystko co chciałem powiedzieć Ci w tej lekcji. Do
usłyszenia już za chwilę.