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. Na temat pracy w zespole mówiliśmy już w kontekście współpracy nad projektem
developerów z pomocą systemu subwersji proponowałem Ci Git.
Teraz pomówmy o procesie projektowania, czyli recenzjach, komentowaniu i ogólnie procesie związanym z projektem
graficznym naszej witryny.
Mamy również szereg możliwości, z których możemy skorzystać jeśli chodzi o wersjonowanie i pokazywanie
czy komentowanie plików.
Jednym z nich jest Pixelapse, który pozwala właśnie na tworzenie, np. zapisywanie plików z Photoshopa.
Następnie ten plik automatycznie aktualizuje się na serwerach Pixelapse, jest wysyłany z jakiegoś naszego
folderu na dysku, no i również zachowywana jest tam kontrola wersji tego pliku.
Możemy przywrócić w dowolnej chwili jakąś wersję wcześniejszą.
Możemy również dyskutować ten plik z naszymi klientami po jego udostępnieniu w taki sposób, że dają nam
oni jakieś jasne komentarze w określonym miejscu
co należy w tej grafice zmienić.
Kolejno mamy całą historię zmian i aktualizacji tego pliku jak również komentarzy i jego zatwierdzania.
No i również nawet porównywanie jakichś różnych wersji w przeglądarce Side by Side, czy np. poprzez przesuwanie.
To jest wiele naprawdę ciekawych funkcji, które możesz sprawdzić.
Ja osobiście nie korzystam z Pixelapse, ponieważ korzystam z narzędzi Adobe, które później Ci pokażę,
ale jest to jakaś alternatywa.
Podobnie strona redpen.io
to jest fajne narzędzie, które w łatwy sposób umożliwia tworzenie projektów, czy też singli czyli
pojedynczych plików i wrzucanie tutaj takiego pliku spowoduje, na przykład wrzućmy sobie tutaj jakiś plik JPG,
że plik zostanie dodany i możemy bardzo łatwo go udostępnić, np. do naszego klienta, któremu otworzy się ten plik właśnie
w takiej wersji przeglądarkowej i będzie mógł w ramach tego pliku wybrać sobie dowolne miejsce i
np. powiedzieć, że ta ikona do zmiany i wybieram polecenie Post comment.
Taki komentarz został zapisany, oznaczony odpowiednim kolorem naszego klienta, albo np. dajemy tutaj powiększ
font i najlepiej żeby był jeszcze żółty na różowym tle. Żartuję, a tak naprawdę to jest to naprawdę bardzo
fajne narzędzie, które umożliwia tworzenie takich komentarzy kontekstowych, które możemy edytować,
Możemy się z nimi zgadzać lub nie, możemy również mieć tutaj jakąś szerszą dyskusję, a nawet udostępnić
czy właśnie wyedytować ten komentarz.
Także tak działa np. redpen, z którego też możesz korzystać.
Ja natomiast chciałbym trochę więcej powiedzieć o narzędziach Adobe,
ponieważ są to bardzo fajne narzędzia, które pozwalają nam całą pracę z pomocą branżowych standardów jak
Photoshop czy Illustrator, przeglądać również z pomocą tak zwanego właśnie Adobe Creative Cloud, czyli naszej
przestrzeni dyskowej w chmurce.
Robimy to na takiej zasadzie. Mamy w ramach aplikacji Adobe, jeśli mamy subskrypcję Adobe CC, doinstalowaną,
zainstalowaną aplikacje Creative Cloud, która zarządza wszystkimi naszymi aplikacjami, ale także
zasobami. Mamy w sekcji zasoby również pliki i mamy na komputerze taki folder, który jest powiązany z
naszą usługą Adobe CC.
Mogę sobie otworzyć ten folder no i mam go, dostępny ten folder w Finderze, a także mam przy każdym pliku
informację z zieloną strzałeczką, że ten plik jest aktualny również na serwerach Creative Cloud. W momencie
kiedy do tego folderu zapisuję jakiekolwiek pliki z moich aplikacji, one automatycznie lądują w chmurce
Adobe
i możemy też do nich się dobrać z pomocą takiego webowego katalogu. Na assets.adobe.com znajdują się wszystkie
te pliki, nad którymi pracowaliśmy,
no i stąd możemy wejść sobie do takiego pliku, czyli np. wybrać jakiś konkretny plik i
zauważ, że jest to plik PSD, a następnie zobacz jego właściwości.
Możemy taki plik udostępnić albo wykonać jakieś operacje, polegające na jego archiwizacji czy sprawdzeniu
również historii wersji. To co jest ciekawe to mamy tutaj zakładki, takie jak działanie, a także zakładki
Extract, o której zaraz Ci opowiem.
W zakładce działanie mamy informacje o wersjonowaniu tego pliku i możemy przywrócić tutaj historię wersji gdybyśmy
ją mieli.
No to jest akurat plik, który tutaj się pojawił jednorazowo, ale możemy także udostępnić ten plik i teraz
mamy kilka możliwości. Pokazywałem Ci wcześniej usługę Slack, a przynajmniej wspominałem o tym co ona robi.
Możemy z pomocą takiego nowego hashtagu na Slacku, czyli nowego kanału w usłudze Slack otworzyć dyskusję
bardzo łatwo
na temat właśnie tego projektu, nad którym pracujemy. Polecam Ci ten sposób, czyli właśnie połączenie tego
Adobe CC ze Slackiem. To jest moim zdaniem jedno z najlepszych wyjść, które teraz możemy zrobić, ponieważ
drugą alternatywą jest to, że po prostu tworzymy sobie łącze publiczne do takiego pliku i wysyłamy je
do naszego klienta.
W momencie kiedy klient sobie to łącze otwiera w przeglądarce, to pojawia mu się w taki sposób. Nie musi
mieć zainstalowanego Photoshopa żeby podejrzeć sobie jak wygląda ten plik PSD, ponieważ on wyświetla się w
przeglądarce.
Jednak tutaj dyskusja nad zmianami np. nad tym plikiem nie jest aż taka fajna.
Na Slacku to wygląda zdecydowanie bardziej intuicyjnie.
Tutaj mamy na dole komentarze, które możemy dodawać, ale nie mamy za bardzo możliwości odpowiadać na komentarze
i rzeczywiście warto te dwa narzędzia ze sobą w tym kontekście połączyć. To czym jest Adobe Extract
pokażę Ci natomiast szczegółowo w kolejnej lekcji, natomiast teraz lekki podgląd, ponieważ okazuje się,
że w ramach Adobe Extract, mamy coś takiego jak możliwość podglądania warstw, co znaczy, że użytkownik czy
np. właśnie nasz klient, który ma ocenić czy współpracować z nami nad takim plikiem, może bez problemu
na warstwach przełączać się po poszczególnych widokach naszej aplikacji.
Możemy na przykład, może wyłączyć sobie jakieś elementy systemowe, ale możemy zrobić w poszczególnych katalogach,
o czym będę mówił w kolejnej lekcji.
Przejrzyste i intuicyjne grupy, które pozwalają np. podglądać kolejne podstrony naszej aplikacji. W ten sposób
to wygląda.
Można również pobrać taki plik jako prevkę czy jako pierwotny plik PSD i go edytować, a wszystkie zmiany,
które wykonamy na takim pliku PSD, który znajduje się w tym folderze usługi Creative Cloud, zostają
automatycznie zapisane i wgrane na serwery Adobe CC.
Także to jest naprawdę bardzo fajny sposób na usprawnienie narzędzi procesu projektowania no i właśnie
trzymanie takich wersjonowanych plików np. PSD i udostępnianie ich dalej. To wszystko co chciałem powiedzieć
tytułem wstępu w tej lekcji, a w kolejnej powiem Ci jeszcze nieco więcej o tym jak powinniśmy organizować
pliki przy okazji współpracy designerów z deweloperami.
Zatem do usłyszenia już za chwilę.