Kurs Nowoczesny Webdesign
Ten kurs jest wszystkim, czego potrzebujesz aby projektować nowoczesne, skuteczne i funkcjonalne serwisy
80 lekcji
11h 24min
5 (11 oceny)
Nowoczesny Webdesign - Projektowanie stron i UI/UX
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!
Czego 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!
Zawartość
Nowoczesny Webdesign
18 rozdziały 80 lekcji 11h 24min
-
Wstęp do kursu
7min
-
Technologie w sieci - Pojęcia
40min
Technologie Server i Client Side
10min
Domeny serwery
11min
Technologie Front Endu
10min
Pojecie UI oraz UX
4min
Skąd czerpać informacje i statystyki?
6min
-
Mobile First
38min
Czym jest podejście Mobile First?
7min
Dlaczego korzystać z Mobile First?
9min
Projektowanie pod dotyk
11min
Aplikacje natywne i webowe
10min
-
Responsive Web Design
1h 7min
Czym jest Responsive Web Design?
10min
Anatomia ekranów
10min
Przeglądarka a ekran
8min
Praktyczne wskazówki RWD
12min
Techniki Fluid i Media Queries
16min
Responsywne obrazki i tekst
11min
-
Projektowanie jako proces
21min
Nowy proces projektowania
11min
Etapy i proces w metogologii Scrum
10min
-
Podstawy pracy koncepcyjnej
27min
Cele i funkcje serwisu WWW
10min
Użytkownicy i testy
7min
Testy architektury informacji
10min
-
Treść i architektura informacji na stronie WWW
1h 17min
Tworzenie mapy witryny
5min
Koncepcje nawigacji
11min
Nawigacja w praktyce
13min
Organizacja i rodzaje treści
8min
Sposoby na organizacje treści
5min
Markdown i inne schematy
6min
Definiowanie podstron serwisu
12min
Wireframe oraz content design
9min
Praca z Balsamiq Mockups
8min
-
Prototypowanie
40min
Prototypowanie z Muse
9min
Praktyczne wskazówki do treści
7min
Prototypowanie flow
5min
Interakcje z UX Pin
16min
Podsumowanie pracy koncepcyjnej
3min
-
Atomowe komponenty
29min
Atomowe komponenty
6min
Graficzne biblioteki komponentów
7min
Projektowanie w przeglądarce
7min
Czym jest style guide?
9min
-
Język programowania - współczesne tredny
Stylistyka witryny
-
Grafika na stronach WWW
31min
Grafika i formaty
9min
Grafika na ekrany HIDPI
11min
-
Grid - projektowanie w oparciu o siatkę
20min
Czym jest Grid?
7min
Grid w praktyce oraz frameworki
13min
-
Projektowanie w oparciu o zasoby
25min
Zasoby w sieci
6min
Ikony, UI Kity i grafiki
18min
-
Typografia w sieci
1h 8min
Podstawowe pojęcia typografii
9min
Korzystanie z TypeKit
5min
Kerning, tracking, leading
7min
Rytm w typografii i na stronach
17min
Praca z Open Type
6min
Przegląd ciekawych fontów
6min
Dodatkowe wskazówki do typografii
7min
-
Kolory w sieci
47min
Kolory i przestrzeń bitowa
7min
Profile kolorystyczne i kalibracja
8min
Notacja, kolorystyka i CSS
10min
Dobór kolorów na stronę
9min
Psychologia kolorów
14min
-
Praca w zespole
1h
Podstawy nowoczesnej pracy
4min
Zarządzanie plikami
8min
Dokumentacja i chumura
7min
Skuteczna komunikacja
12min
Najciekawsze narzędzia
7min
Współpraca Designer-Developer
8min
Co zidentyfikować w kreacji?
5min
Czytanie kodu w przeglądarce
6min
Praktyczne wskazówki do pracy w zespole
3min
-
Wydajność stron WWW
37min
Wydajność i testy użyteczności
7min
Co wpływa na szybkość?
8min
Jak testować szybkość?
9min
Podsumowanie i dodatkowe porady
5min
-
Promocja i pozycjonowanie
48min
Współczesna promocja w sieci
8min
Anatomia wyszukiwania
11min
Narzędzia i diagnostyka SEO
11min
Wstęp do promocji w sieci
3min
Przegląd skutecznych narzędzi
8min
Monitoring i analityka
8min
Autor kursu
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Marzenna Kepka
8 lutego 2021
Bardzo dobry kurs, wiele przydatnej wiedzy, a Grzegorz to mistrz efektywnego nauczania :)
Mike Sosnowski
14 lutego 2021
Lekcje prowadzone merytorycznie i ciekawie. Pzdr
Michał
14 maja 2021
Jacek
19 czerwca 2021
Sporo rzeczy przez te lata, od kiedy kurs był tworzony, się przeterminowało, wciąż jednak kluczowe koncepcje mają zastosowanie. Kurs bardzo dobrze prowadzony, powoli, zdecydowanie dla początkujących.
Łukasz Dragon
27 czerwca 2021
Tak swoją drogą... W książce "100 rzeczy, które każdy projektant..." jest m.in. o tym, że powielana przez wiele osób informacja o +/-7 elementach, które się zapamiętuje, to mit i bujda - hipoteza wysnuta podczas prelekcji, nie poparta badaniami. :) Kurs od Grzegorza jak zwykle przyjemny.
Maciej
24 sierpnia 2021
Zaczynam być fanem tego Pana. Potężna dawka wiedzy, przyznam że ilość skrótówi terminów używana na minute , spowodowała że czułem się jakby ktoś ze mnie żartował .
Adam Grzanka
11 listopada 2021
Aleksander Baran
18 grudnia 2021
Hubert Proch
25 grudnia 2021
Jak dla mnie to taki zbiór wszystkiego i... niczego. Masa teorii, brak praktyki, wspólnego działania. Może innym to pasuje, ja wolę uczyć się praktycznie (np. obserwować i naśladować konkretne działania). Szybkie klikanie i omawianie przez 5-10min danego tematu jest mało zachęcające, a po pewnym czasie frustrujące= wiele tematów poruszonych, ale żaden nie jest porządnie przekazany. Kurs nie jest również aktualizowany- wielu stron nie ma, a niektóre programy zostały wycofane (np. Adobe Mu, na który poświęcone jest 9min-towy wykład). Miałam również nadzieję na konkretne projektowanie graficzne strony w PS czy AI. Kierowałam się pozytywnymi opiniami, ale niestety nie odpowiada mi taka forma nauki. Według mnie nie jest to kurs dla osób początkujących- może bardzo zniechęcić.
Jagoda Karczewska
21 września 2022
Robert Harezlak
7 września 2023
Kurs Nowoczesny Webdesign
-
80 lekcji wideo
-
11h 24min materiału
-
Ostatnia rewizja 12.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
Wiedza ekspertów
Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
Praktyczne przykłady
Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
Moi znajomi coraz częściej pytają: 'Jak nauczyć się UX?'. Praktycznie każdy kto chce zacząć jest przytłoczony ilością wiedzy, narzędzi pracy oraz jak to wszystko wykorzystać w swojej pracy. Swoim znajomym zawsze polecam eduweb, ponieważ pozwala krok po kroku zrozumieć świat UX od A do Z. Na platformie znajdziesz także bardziej zaawansowane techniki, które zaoszczędzą Ci dziesiątki, a może i setki godzin w pracy. Nie ucz się na swoich błędach - wykorzystaj wiedzę osób, które zrobiły to za Ciebie
Kamil Tatol
Product Design Lead, Pioner Labs
Zacznij naukę w Nowoczesny Webdesign
-
80 lekcji wideo
-
11h 24min materiału
-
Ostatnia rewizja 12.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Personal Branding
Aga Napłocha
Badania w UX
Łukasz Ogrodniczak
Psychologia w UX
Natalia Bienias
UX
Natalia Bienias
InVision i Craft
Grzegorz Róg
InVision Studio
Grzegorz Róg
Kariera w UX
Michał Mazur
Wprowadzenie do UX
Bartosz Jurkowski
UX Aplikacji Mobilnych
Monika Mikowska