Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Lekcja 44/ 80Czym jest Grid?

0:00 / 0:00
UI, UX i WebdesignProjektowanie stron i UI/UX

Nowoczesny Webdesign: Czym jest Grid?

11 godz. 24 min wideo80 lekcji18 modułów

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!

Nowoczesny Webdesign - Projektowanie stron i UI/UX

Zajmujesz się, lub zamierzasz się zająć Tworzeniem Stron WWW? Jesteś programistą, grafikiem, chcesz stworzyć stronę firmy lub kierujesz zespołem? Ten kurs jest wszystkim, czego potrzebujesz aby projektować nowoczesne, skuteczne i funkcjonalne serwisy. Poznasz i zoptymalizujesz proces koncepcyjny, dowiesz się jak pracować wydajnie w zespole, optymalizować grafikę, wykorzystać RWD i podejście Mobile First. Powiem Ci jak skutecznie optymalizować i promować strony WWW. Poznasz też dziesiątki narzędzi oraz linków, które pomogą Ci usprawnić pracę i zebrać potrzebne zasoby. Pokażę Ci na setkach przykładów jak działają nowoczesne strony WWW oraz jakie są trendy w projektowaniu. Gwarantuję, że inwestycja w kurs zwróci się wielokrotnie w Twojej pracy!

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!

Kurs Nowoczesny Webdesign

18 rozdziałów80 lekcji11h 24min

Wstęp do kursu

7min
  • Wprowadzenie7min(zablokowana)

Technologie w sieci - Pojęcia

40min
  • Technologie Server i Client Side10min(zablokowana)
  • Domeny serwery11min(zablokowana)
  • Technologie Front Endu10min(zablokowana)
  • Pojecie UI oraz UX4min(zablokowana)
  • Skąd czerpać informacje i statystyki?6min(zablokowana)

Mobile First

38min
  • Czym jest podejście Mobile First?7min(zablokowana)
  • Dlaczego korzystać z Mobile First?9min(zablokowana)
  • Projektowanie pod dotyk11min(zablokowana)
  • Aplikacje natywne i webowe10min(zablokowana)

Responsive Web Design

1h 7min
  • Czym jest Responsive Web Design?10min(zablokowana)
  • Anatomia ekranów10min(zablokowana)
  • Przeglądarka a ekran8min(zablokowana)
  • Praktyczne wskazówki RWD12min(zablokowana)
  • Techniki Fluid i Media Queries16min(zablokowana)
  • Responsywne obrazki i tekst11min(zablokowana)

Projektowanie jako proces

21min
  • Nowy proces projektowania11min(zablokowana)
  • Etapy i proces w metogologii Scrum10min(zablokowana)

Podstawy pracy koncepcyjnej

27min
  • Cele i funkcje serwisu WWW10min(zablokowana)
  • Użytkownicy i testy7min(zablokowana)
  • Testy architektury informacji10min(zablokowana)

Treść i architektura informacji na stronie WWW

1h 17min
  • Tworzenie mapy witryny5min(zablokowana)
  • Koncepcje nawigacji11min(zablokowana)
  • Nawigacja w praktyce13min(zablokowana)
  • Organizacja i rodzaje treści8min(zablokowana)
  • Sposoby na organizacje treści5min(zablokowana)
  • Markdown i inne schematy6min(zablokowana)
  • Definiowanie podstron serwisu12min(zablokowana)
  • Wireframe oraz content design9min(zablokowana)
  • Praca z Balsamiq Mockups8min(zablokowana)

Prototypowanie

40min
  • Prototypowanie z Muse9min(zablokowana)
  • Praktyczne wskazówki do treści7min(zablokowana)
  • Prototypowanie flow5min(zablokowana)
  • Interakcje z UX Pin16min(zablokowana)
  • Podsumowanie pracy koncepcyjnej3min(zablokowana)

Atomowe komponenty

29min
  • Atomowe komponenty6min(zablokowana)
  • Graficzne biblioteki komponentów7min(zablokowana)
  • Projektowanie w przeglądarce7min(zablokowana)
  • Czym jest style guide?9min(zablokowana)

Język programowania - współczesne tredny

  • Stylistyka witryny(zablokowana)

Grafika na stronach WWW

31min
  • Grafika i formaty9min(zablokowana)
  • Zalety plików .svg i eksport11min(zablokowana)
  • Grafika na ekrany HIDPI11min(zablokowana)

Grid - projektowanie w oparciu o siatkę

20min
  • Czym jest Grid?7min(zablokowana)
  • Grid w praktyce oraz frameworki13min(zablokowana)

Projektowanie w oparciu o zasoby

25min
  • Zasoby w sieci6min(zablokowana)
  • Ikony, UI Kity i grafiki18min(zablokowana)

Typografia w sieci

1h 8min
  • Podstawowe pojęcia typografii9min(zablokowana)
  • Responsywna typografia12min(zablokowana)
  • Korzystanie z TypeKit5min(zablokowana)
  • Kerning, tracking, leading7min(zablokowana)
  • Rytm w typografii i na stronach17min(zablokowana)
  • Praca z Open Type6min(zablokowana)
  • Przegląd ciekawych fontów6min(zablokowana)
  • Dodatkowe wskazówki do typografii7min(zablokowana)

Kolory w sieci

47min
  • Kolory i przestrzeń bitowa7min(zablokowana)
  • Profile kolorystyczne i kalibracja8min(zablokowana)
  • Notacja, kolorystyka i CSS10min(zablokowana)
  • Dobór kolorów na stronę9min(zablokowana)
  • Psychologia kolorów14min(zablokowana)

Praca w zespole

1h
  • Podstawy nowoczesnej pracy4min(zablokowana)
  • Zarządzanie plikami8min(zablokowana)
  • Dokumentacja i chumura7min(zablokowana)
  • Skuteczna komunikacja12min(zablokowana)
  • Najciekawsze narzędzia7min(zablokowana)
  • Współpraca Designer-Developer8min(zablokowana)
  • Co zidentyfikować w kreacji?5min(zablokowana)
  • Czytanie kodu w przeglądarce6min(zablokowana)
  • Praktyczne wskazówki do pracy w zespole3min(zablokowana)

Wydajność stron WWW

37min
  • Wydajność i testy użyteczności7min(zablokowana)
  • Co wpływa na szybkość?8min(zablokowana)
  • Jak testować szybkość?9min(zablokowana)
  • Praktyczne wskazówki optymalizacji8min(zablokowana)
  • Podsumowanie i dodatkowe porady5min(zablokowana)

Promocja i pozycjonowanie

49min
  • Współczesna promocja w sieci9min(zablokowana)
  • Anatomia wyszukiwania11min(zablokowana)
  • Narzędzia i diagnostyka SEO11min(zablokowana)
  • Wstęp do promocji w sieci3min(zablokowana)
  • Przegląd skutecznych narzędzi8min(zablokowana)
  • Monitoring i analityka8min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Średnia ocen autora: 4,8

Bio

Od wielu lat projektuje serwisy internetowe, dużą wagę przykładając do ich funkcjonalności a także skutecznych technik promocji. Swoje umiejętności praktyczne zdobywa projektując grafikę oraz strony www dla wiodących polskich i zagranicznych agencji reklamowych. Współpracuje między innymi z Adobe, Microsoft, Wacom. Jako trener i spiker prowadzi szkolenia oraz eventy i warsztaty. Posiada szereg uprawnień i certyfikatów eksperckich.

W wolnych chwilach stara się przekazać Ci całą praktyczną wiedzę, pasję i doświadczenie. Zapraszamy do kursu - gwarantujemy, że ta świetna zabawa przyniesie Ci mnóstwo satysfakcji!