Nowoczesny Webdesign: Nowy proces projektowania
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 kursu, gdzie wkraczamy w pewien proces koncepcyjny, w którym będziemy rozpoczynali
pracę nad naszą witryną.
Najpierw trzeba witrynę zaplanować, ale najpierw trzeba też mieć świadomość tego, jak odbywa się cały
proces projektowania strony, na który składa się mnóstwo czynników i mnóstwo etapów, po których musimy
po kolei przejść. Chciałbym przybliżyć Ci moim zdaniem najlepszy proces jaki jest.
Ale uważam że też powinieneś dostosować go do swoich specyficznych potrzeb.
Nie zawsze mamy do dyspozycji cały zespół, który pracuje nad stroną. Czasem stronę tworzy człowiek orkiestra,
który występuje w wielu rolach w takim procesie.
W związku z tym proszę bierz poprawkę na to, że to co staram się przekazać to pewien idealny model czy
pewien dobrze wypracowany na tę chwilę najlepszy model, który znam, który pozwala efektywnie tworzyć i wdrażać
stronę internetową, a także coś co ma być dla Ciebie zahaczeniem o takie dobre praktyki tego co robić
po kolei, bo często zastanawiamy się jak w ogóle zacząć projektować.
Mając świadomość na temat tego jak przebiega cały proces, na pewno będziesz w stanie to sobie dobrze
poukładać.
Zatem projektowanie jako proces było kiedyś przedstawiane w zupełnie inny sposób niż ma to miejsce dzisiaj.
Mianowicie kiedyś odbieraliśmy proces projektowania liniowo. Począwszy od procesu koncepcyjnego, gdzie planowaliśmy
jakieś rzeczy na naszej stronie, robiliśmy burzę mózgów,
siadaliśmy i zastanawialiśmy się nad tym co ma się znaleźć na stronie, jakie są elementy istotne dla nas czy
dla naszego klienta, jakie cele walory ma spełniać strona, a następnie, np. w tym procesie koncepcyjnym
na flipchart'cie robiliśmy sobie proste rysunki,
gdzieś tam to wszystko rozpracowywaliśmy.
Następnym etapem tego było projektowanie grafiki, czyli proces koncepcyjny zwykle kończył się przygotowaniem
jakiegoś rodzaju szkiców, mockupów,
o tym będę mówił jeszcze później, które następnie przekazywane były do grafika, który zajmował się przygotowaniem
gotowych layoutów, gotowych plansz w ramach etapu, który nazwaliśmy kreacją.
Następnie to co się działo to było kodowanie, czyli grafiki były przekazywane do osób zajmujących się
technologiami Front i Back-End i nasz layout był kodowany najpierw od strony Front-End'owej, a następnie były dorabiane
do tego dynamiczne elementy Back-End'owe, no i cały proces kończył się publikacją naszej strony, czyli wrzuceniem
jej na serwery, a następnie podpięciem pod to domeny i w zasadzie tak wygląda ten proces,
również dzisiaj, ale nie jest on liniowy. Czyli wszystkie te elementy biorą w nim udział, aczkolwiek lepszym
podejściem do tego typu procesu jest równoległe stosowanie niektórych z tych etapów, ponieważ w tym momencie
wygląda to często tak, że grafik cały czas bierze udział w procesie, praca koncepcyjna jest wykonywana
równolegle aż do momentu publikacji po to, żeby wszystkie elementy na bieżąco można było poprawić.
To jest korzystne z wielu powodów. Między innymi dlatego, że cały czas mamy zaangażowanych wszystkich,
którzy są w projekcie.
Nie ma tak, że np. koder czeka ponieważ musi dostać grafiki, które grafik przygotuje za miesiąc. Rozpoczynamy
pewien proces i staramy się go przeprowadzić jak najszybciej angażując równocześnie wszystkie zasoby
i dostarczając elementy, które są potrzebne, np. do kodowania, po prostu w odpowiednim czasie.
Jednym z podstawowych terminów, które w tym momencie przyjmuje się za obowiązujące w kontekście samego
procesu pracy z projektami, ogólnie w IT, nie tylko nad stronami internetowymi jest SCRUM. SCRUM, który jest
pewną metodologią spod znaku Agile, o którym możesz oczywiście więcej dowiedzieć się z rozległych publikacji.
Na ten temat powstały naprawdę obszerne tomy.
Ja jedynie chcę przybliżyć Ci to co moim zdaniem w SCRUM jest najlepsze i dlaczego to rzeczywiście działa.
SCRUM jest to proces Agile, który pozwala na optymalizację czasu i efektów pracy nad oprogramowaniem, w tym nad
stronami internetowymi.
Właśnie przez to głównie, że ten proces czyni mniej liniowym i angażuje wszystkie strony na każdym etapie
procesu.
Zaletą w SCRUM jest zorientowanie na szybki efekt w ramach Sprintu, o czym zaraz, co pozwala uniknąć przestojów
z powodu pewnych problemów.
Chodzi o to, że w ramach takiego Sprintu, gdzie udział bierze ileś osób i dzieją się równolegle różne
rzeczy, nie mamy miejsca na np. jakiś ogromny przestój z powodu wykorzystania jakiejś konkretnej technologii,
z którą deweloper sobie nie potrafi poradzić, albo nie może jej dobrze zaimplementować na potrzeby naszej
strony.
W przypadku SCRUM, każdy na bieżąco bierze udział w projekcie i jesteśmy w stanie takie problemy szybko
rozwiązać.
SCRUM jest zorientowany biznesowo, jest robiony pod klienta stricte dlatego, że klient dostaje szybko rezultaty.
W ramach poszczególnych Sprintów, czyli takich etapów naszej pracy, generujemy jakiś fragment naszej pracy,
jakiś kawałek kodu i produkt jest widoczny na przestrzeni krótkiego okresu czasu, ponieważ ten Sprint trwa np. 1-2
tygodnie i w ramach takiego Sprintu powstaje działający kawałek serwisu, który można rozbudować, m.in.
to wprowadza się do głównych zalet SCRUM.
To jest szybka reakcja na potrzeby klienta, czyli szybko możemy, w postaci Sprintu, wdrożyć jakiejś
jakąś kolejną funkcjonalność, czy jakiś kolejny element naszego serwisu, no i dostarczanie działających rozwiązań
w krótkim czasie.
To też przekłada się na kooperację z klientem biznesową, która wcześniej wyglądała w ten sposób, że na
ogół tak naprawdę klient znikał w pewnym momencie z procesu i to z czym zostawali deweloperzy i czy
agencja kreatywna, czy ktoś kto zajmował się stroną, to była rozbudowana dokumentacja stworzona przez
klienta w postaci jakiegoś briefu czy innego dokumentu, który jasno wskazywał co ma zostać zrobione i był
ustalony z kimś np. z naszej firmy,
ale tak naprawdę wykonywał to zupełnie ktoś inny, kto tych ustaleń nie poczynił, więc mieliśmy z jednej
strony umowę z klientem, biznesową, wykonaną przez jedną osobę w firmie, później powiedzmy druga osoba
uwzględniała detale i to jak ma wyglądać funkcjonalny serwis, a dopiero trzecia, czwarta i piąta osoba,
które nie miały żadnego udziału w tym poprzednim procesie, miały serwis wdrażać. To jest po pierwsze coś
co powodowało liczne zgrzyty i takie rzeczy, że rozjeżdżaliśmy się z koncepcją, ponieważ nie
wszystko było rozumiane dosłownie tak jak w briefie.
No a po drugie, było to niepotrzebne generowanie dokumentacji.
Tymczasem teraz stawiamy zdecydowanie na to, aby klient, czy osoba, czy właściciel strony, sponsor strony,
już traktujmy go jakkolwiek chcemy go nazywać,
był cały czas obecny w tym procesie.
Oczywiście możesz być człowiekiem orkiestrą i robić wszystkie rzeczy od początku do końca, OK.
Wtedy trzymasz to wszystko, ale jeżeli to jest większy serwis, w pewnym momencie będziesz musiał, zacząć
polegać również na innych osobach i zacząć angażować w ten proces
inne podmioty. Więc zamiast dokumentacji, spotykamy się z klientem, rozmawiamy z nim na bieżąco, w ramach
udanego Sprintu, np. po tygodniu czy dwóch, wracamy do klienta i konsultuje to co zostało zrobione.
Pytamy czy to rozszerzać, czy np. rezygnujemy z tych funkcjonalności.
Zamiast tego, zamiast negocjacji, zakresu zadań na cały projekt ustalamy drobne kawałki, które mają zostać
krok po kroku wykonane. Nie realizujemy długoterminowego planu, np. na rok, dwa czy trzy do przodu.
Po pierwsze technologie się zmieniają, po drugie zmieniają się oczekiwania klienta.
Po trzecie, jeżeli nie będziesz na bieżąco z klientem dogadywał tego co jest robione, to na pewno w pewnym
momencie stanie się tak, że twoja praca okaże się że idzie w zupełnie złym kierunku i straciłeś mnóstwo
czasu. Dlatego proces projektowania dziś wygląda tak.
Mamy etap koncepcyjny, w którym to etapie bierze udział głównie osoba, która jest zaangażowana
w opiekę nad stroną czy w tworzenie stron, czyli sponsor, nasz klient i wszystkie rzeczy koncepcyjne, wszystkie
pomysły i wszystkie rzeczy, które mają znaleźć się na stronie w tym etapie są opracowywane.
Następnie mamy etap prototypowania, tworzenia pewnych szkicy funkcjonalnych, wireframe'ów, mockupów, coś co określa
nam pierwotny taki stan serwisu w jego bazowej, podstawowej formie, ale warto zrobić cały ten plan
na początku, ponieważ wiemy po prostu które elementy naszego serwisu będą funkcjonalnie odpowiedzialne
za poszczególne jego części.
Później mamy etap Sprintu tak naprawdę, gdzie w ramach tego sprintu pracujemy równocześnie trochę koncepcyjne,
ale też z grafiką, czyli tworzymy, robimy kreację na naszą stronę, pracujemy w Photoshopie, Illustratorze, no i jak zrobimy
część kreacji to kodujemy Front-End i Back-End naszej strony, czyli wszyscy jak gdyby równolegle zaangażowani w
ten proces.
Graficy dostarczają na bieżąco deweloperom grafiki, które mają zamienić w działający kod i jednocześnie
testujemy.
Czyli mamy też testerów, czy wysyłamy komuś, czy nawet u siebie w firmie,
zapytaj, jeżeli masz kogoś w firmie kogo możesz zapytać o zdanie, po prostu spróbuj to przetestować na
takiej zasadzie.
Jestem w zasadzie przeciwnikiem organizowania jakichś ogromnych Test Lab'ów itd.
Wydaje mi się, że, oczywiście na to tylko stać też duże firmy, ale z drugiej strony jest to jakieś duże przedsięwzięcie
i nawet w ramach jednej firmy, jak np. umawiamy się że wszyscy teraz będziemy testować jakieś rozwiązanie,
to na ogół to długo trwa, trzeba poczynić jakieś szczegółowe ustalenia.
Tymczasem stosuj metodę małych kroków.
Podejdź do jakiegoś swojego kolegi z piętra, z biurka i po prostu zapytaj o drobną rzecz - czy mu się to
podoba żeby poświęcił 5 minut czasu na to żeby powiedzieć ci co tutaj jest ok a co nie,
przetestował, przeklikał i taki Feedback jest najlepszy.
Z reguły to się sprawdza i nie jest wcale konieczne robienie jakichś skomplikowanych Lab'ów, a każdy
znajdzie dla Ciebie 5 minut. Taką małą pętelkę w tym procesie
w związku z tym nazywamy Sprintem i w zależności od tego jak duży jest projekt, a sprinty zwykle trwają około tygodnia
czy dwóch.
Aczkolwiek jeżeli mamy naprawdę mały projekt, robimy jakiś landing page, to możesz nawet robić jedno
czy dwudniowe sprinty i takich sprintów w ramach dużego projektu będzie na ogół bardzo dużo i pomiędzy
koncepcją, a publikacją mamy ileś Sprintów,
natomiast publikacja tak naprawdę nie kończy całego procesu.
Jak wiesz teraz strony internetowe to jest cały czas zmieniający się ekosystem, cały czas trzeba je aktualizować
i cały czas trzeba dokładać nowe Sprinty po to, aby ten proces przebiegał sprawnie.
Zatem jeżeli chodzi o podstawową koncepcję procesu, to wszystko co chciałem Ci powiedzieć, a w następnej
lekcji zajmiemy się jeszcze rolami w tym procesie i powiem Ci kto jest kim w procesie SCRUM.
Do usłyszenia.