Nowoczesny Webdesign: Etapy i proces w metogologii Scrum
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!
Kontynuujemy omawianie procesu projektowania, czyli krok po kroku
to co powinieneś zrobić żeby stworzyć działającą stronę internetową. Mówiłem o procesie SCRUM i o tym,
że w ramach naszego projektu staramy się tworzyć Sprinty, w których będą brały udział określone
osoby.
No i właśnie teraz chciałbym o tych osobach porozmawiać.
Jakie są role w procesie
przede wszystkim, czyli kto jest potrzebny do zbudowania strony internetowej?
Na pewno potrzebna jest osoba odpowiedzialna za treść i od razu przyjmij tutaj pewien warunek, że to
wszystko nie muszą być inne osoby.
Często jedna osoba będzie występowała w kilku rolach, jeżeli to jest mało skomplikowany projekt, czy też
projekt autorski jednej osoby, bardzo często będzie ona prawie we wszystkich rolach, które tutaj wymieniam.
Więc mamy najpierw rolę odpowiedzialną za treść, czyli agregację treści, przygotowanie całego contentu
na stronę, przejrzenie go, zreagowanie i upewnienie się, że jest on spójny z samym głosem, z samym wizerunkiem,
który chcemy stworzyć, wyprodukować z pomocą naszej strony. O treści będzie jeszcze cała osobna część
tym kursie, więc nie martw się, powiem Ci dokładnie o tym jak ją przygotować.
Następnie mamy architekta.
Architekt projektuje to jak ma wyglądać przepływ informacji na naszej stronie i, de facto jako rezultat
też jego pracy powstaje cały taki schemat funkcjonalny i schemat nawigacyjny po naszej stronie, a także
pewien schemat zależności poszczególnych stron od siebie.
Czy są to strony w ramach jednej hierarchii, czy są to strony siostrzane, czy są to strony dzieci.
O tym również będziemy mówić w jednej z kolejnych lekcji omawiania procesu.
W każdym razie architekt projektuje nam właśnie tą architekturę informacji, które miejsca strony mają być
odpowiedzialne za co
i co zrobić na poszczególnych stronach.
Mamy też testera lub testerów.
Wiele osób, które zajmują się klikaniem i znajdowaniem błędów również w naszej aplikacji. Projektant interfejsu,
grafik to jest osoba odpowiedzialna za przygotowanie kreacji, czyli de facto plików Photoshopa czy JPG
czy plików PNG, które finalnie będą obrazowały złożony layout naszego produktu, ale z drugiej strony
grafik to coraz częściej też osoba, która zajmuje się elementami UX'owymi i projektuje nam również takie
elementy, jak bierze udział trochę w prototypowaniu, bierze udział w projektowaniu User Experience, trochę przepływów,
więc warto żeby architekt informacji pracował już nawet trochę z grafikiem, o ile grafik ma tego typu
kompetencje i umiejętności.
Obok grafika może natomiast być w projekcie i powinien oczywiście być, jeżeli grafik takich kompetencji
nie ma, UX Designer. UX Designer, czyli osoba, która zaprojektuje nam właśnie całe UX'y na stronie, czyli cały
User Experience, czyli wszystkie doznania, które użytkownik u nas na stronie, których może się spodziewać
i ma tutaj,
mam tutaj na myśli np. takie elementy, jak to aby nasza strona była przyjazna dla odwiedzającego, żeby
potrafił on znaleźć informacje w odpowiednim miejscu, te które go interesują, żeby struktura nawigacji była odpowiednia,
żeby strona ładowała się szybko. Nawet takie drobne rzeczy na pewno User Experience Designer, będzie zwracał
na to wszystko uwagę.
Ponadto jest potrzebny Front-End Developer, czyli osoba odpowiedzialna, tak jak mówiłem wcześniej o tych
poszczególnych funkcjach w Web Designie,
osoba odpowiedzialna za kodowanie naszej strony frontowej, czyli HTML, CSS i JavaScript głównie. Mamy też
Back-End Developera, który jest odpowiedzialny za architekturę i za kod serwerowy, czyli np. PHP czy ASP.NET
oraz za bazę danych.
No i jeszcze dodatkowo możemy na górze teraz wyróżnić sobie, jeżeli pracujemy w ramach procesów SCRUM i postanowiliśmy,
że nasza struktura strony i projekt jest na tyle złożony, że wdrażamy go w ramach SCRUM, to jeszcze dodatkowo
można wyróżnić sobie role SCRUM, czyli właściciela projektu, sponsora czy zleceniodawcy naszej strony.
Mamy również SCRUM Master'a, czyli kogoś kto jest de facto menadżerem projektu.
Kto wie wszystko na temat tego projektu, wie jakie jest podejście klienta, jakie cele mamy zrealizować
i nadzoruje całą grupę tak, aby było to robione właśnie zgodnie z tym co założył sobie właściciel projektu.
No i mamy zespół, na który składają się te osoby, które wymieniłem po lewej stronie, przy czym oczywiście
tak jak wspomniałem, SCRUM Masterem i właścicielem może być jedna osoba i może być ona jednocześnie
UX Designerem i architektem, a dodatkowo wziąć sobie do pomocy tylko te role, które są potrzebne.
Skoro już znamy role w procesie to jeszcze ramy czasowe. Istotne są ramy czasowe z tego powodu, że jeżeli
zdecydujemy się na jakiś przynajmniej fragment zastosowania SCRUM'a w naszym projekcie, to warto jest na początku
ustalić sobie plan działania.
Do planu zbieramy wszystkich w jednym miejscu i ustalamy wszystkie zadania, które są do wykonania,
przy czym dzielimy to nawet na bardzo drobne zadania, które trzeba zrobić.
Następnie przydzielamy je określonym osobom i kolejno definiujemy czas na realizację takiego zadania, w zależności
od stopnia jego złożoności, od stopnia jego trudności. Czyli w ten sposób definiujemy cały plan zadań
w ramach jednego Sprintu, określamy zadania i napisałem 1-15 godzin, bo to jest średni czas realizacji,
gdyby takiego jednego zadania.
Chodzi o to żeby zadanie, które wyróżniamy, nie było mniej złożone niż na godzinę i nie było bardziej
złożone niż na 15 godzin, czyli tego typu zadania definiujemy, żeby nie było tego w setki, ani z kolei
nie było tego tylko kilka.
Musimy wybrać złoty środek. Jeżeli już to mamy to mamy tak naprawdę plan najbliższego Sprintu. Możemy
rozpocząć Sprint, który trwa 1 czy 2 tygodnie i w ramach takiego Sprintu robimy zawsze dniówkę, czyli
cały zespół, może to być np. w jakimś narzędziu, które służy współpracy, ja Ci te narzędzia jeszcze pokaże
np. na Slack'u czy na Skype czy na czymkolwiek innym, możemy podsumować sobie dniówkę,
gdzie cały zespół w ciągu 15 minut mówi jakie zadania udało mu się zrealizować, albo dlaczego mu się nie udało
zrealizować założonego planu.
No i Sprint to tak jak powiedziałam jest ten okres pracy nad zadaniami, a po samym Sprincie mamy jeszcze
jego podsumowanie, czyli sprawdzenie założeń, ewentualnie wdrożenie jakichś poprawek,
cały zespół bierze też w tym udział i ewentualnie możemy poświęcić jeszcze chwilę na modyfikację tego
co zostało zrobione w trakcie całego Sprintu.
I tak właśnie wyglądają ramy czasowe, przy czym jeszcze jedna rzecz do podkreślenia, SCRUM nie nadaje się
do wszystkich projektów, czyli czasem SCRUM to jest za dużo, jeżeli mamy prosty projekt strony, nie ma
sensu wyznaczać tych wszystkich ról, mieć SCRUM Mastera, robić dodatkowo plany, dniówki, Sprinty. Nie, czasem SCRUM
to będzie za dużo. Dla takiego standardowego projektu dość dużej strony internetowej natomiast, sprawdzi
się na pewno świetnie i sprawi, że Twój klient na pewno będzie bardzo zadowolony z tego jak został ten
projekt przeprowadzony.
I ostatnia rzecz, o której chcę powiedzieć w tej lekcji to w zasadzie podsumować cały proces. W kolejnych
częściach tego kursu,
będę rozkładał na czynniki pierwsze i szczegółowo omawiał każdy z etapów tego procesu, więc teraz chciałbym
żebyś wiedział jak wygląda krok po kroku proces tworzenia strony internetowej, żebyś miał pewność, że
wszystko robisz po kolei.
Najpierw jest praca koncepcyjna, czyli wymyślanie naszej strony, robienie badań, analizy konkurencji, kupowanie
domeny, wymyślanie nazwy, tworzeniem mockupów, prototypów itd. To wszystko zawiera się w pracy koncepcyjnej,
burza mózgów i różne inne narzędzia, które pokaże Ci w dalszych częściach tego kursu.
Następnie koncentrujemy się na użytkownikach i testach.
Co to znaczy?
To znaczy, że zbieramy użytkowników i robimy testy, które też Ci polecę, po to żeby sprawdzić czy założenia
naszej pracy koncepcyjnej mają odzwierciedlenie w rzeczywistych potrzebach użytkowników.
Warto to zrobić wcześniej, bo później może się okazać, że robimy stronę, z której tak naprawdę nikt
nie chce korzystać.
Jeżeli już mamy to zamknięte to agregujemy i planujemy strategię treści na naszą stronę. Zbieramy wszystkie
treści, które są nam potrzebne do przygotowania witryny.
Mając to gotowe, wkraczamy dopiero w sekcje tak naprawdę Sprintów, Design, Development oraz testy, które
prowadzą osoby odpowiedzialne za klikanie i znajdowanie błędów w naszym projekcie, w kreacji oraz w kodzie,
który już jest prawie produkcyjny.
Następnie, jeżeli mamy to już zrobione w ramach iluś tam Sprintów, to prowadzimy optymalizację, czyli wyrzucamy
to co jest niepotrzebne, optymalizujemy,
teksty, grafiki na stronie, wszystko co jest z tym związane.
O tym też będę szczegółowo mówił.
No i dopiero wtedy publikujemy stronę, czyli wrzucamy ją na serwer produkcyjny, spinamy domenę no i możemy
zająć się promocją tej strony, bo to jeszcze nie koniec oczywiście procesu.
Natomiast w samym, w trakcie możemy wyróżnić ten taki element sprintu, czyli tą pętelkę, którą obejmuje Design,
Development, testy i optymalizacja.
To są elementy, które po optymalizacji mogą wracać z powrotem i możemy prowadzić ileś takich
części po to żeby powstała gotowa witryna, no i o każdym z tych elementów, począwszy od pracy koncepcyjnej aż
do promocji,
opowiem Ci szczegółowo w kolejnych działach tego kursu.
Tak jak wspomniałem na początku tych lekcji o procesie projektowania, jest to pewne uogólnienie i pewien
spory skrót w kontekście tego co można przeczytać, czego można dowiedzieć się ogólnie o procesach tworzenia
oprogramowania, a także o Agile oraz metodologii SCRUM.
W związku z tym nie chciałbym żebyś traktował to jako kompletny podręcznik, na pewno osoby, które zajmują
się tym profesjonalnie miałyby tutaj mnóstwo do dodania.
Ja jedynie chciałem zasygnalizować pewne tematy i uważam, że już nawet taka podstawowa wiedza znacznie
pomoże Ci w tym aby skuteczniej prowadzić proces tworzenia strony WWW.
Natomiast jeżeli chcesz doczytać, dowiedzieć się na ten temat więcej, to polecam m.in. link, który znajdziesz
w plikach źródłowych. Jest to link do prezentacji na SlideShare, która w obszernej ilości stu pięćdziesięciu
slajdów pokazuje różne podejścia do technik właśnie produkcji oprogramowania, w tym omawia bardzo szczegółowo
podejście, o którym wspominaliśmy i szereg różnych procesów, które możesz wykorzystać na swoje potrzeby.
Także z tym linkiem Cię zostawiam jeżeli jesteś zainteresowany i zachęcam do obejrzenia kolejnych lekcji.
Do usłyszenia.