Kurs Projektowania Stron WWW

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

24 ocen

Wprowadzenie

Kurs, który masz przed soba jest uzupelnieniem i praktycznym rozwinieciem kursu Nowoczesny Webdesign. Zdecydowanie zalecamy obejrzenie kursu Nowoczesny Webdesign w pierwszej kolejnosci. Witaj w praktycznym kursie Projektowania Stron WWW, gdzie na przestrzeni 6 godzin materialów wideo dowiesz sie, jak przygotowac, krok po kroku, funkcjonalny layout serwisu WWW. W kursie omówimy zagadnienia zwiazane z uzytecznoscia oraz praca koncepcyjna a takze z pomoca narzedzi takich jak Photoshop, Illustrator, UX Pin czy Invision stworzymy funkcjonalny prototyp i layout strony WWW. Jesli zajmujesz sie projektowaniem stron i chcesz poznac nowoczesne techniki tworzenia layoutów - nie mogles lepiej trafic

  1. Narzedzia w procesie koncepcyjnym
  2. Projektowanie grafiki w Photoshop i Illustrator
  3. Prototypowanie oraz tworzenie interakcji
  4. Projekt layoutu strony WWW krok po kroku
  5. Zastosowanie typografii i przydatne narzedzia
  6. Praca w oparciu o urzadzenia i testowanie
  7. Eksport i optymalizacja grafik
  8. I wiele wiecej!

Projektowanie w praktyce

Projektowanie nowoczesnych interfejsów stron WWW staje się zarazem coraz prostsze i coraz bardziej skomplikowane. Po pierwsze, mamy do dyspozycji genialne narzędzia takie jak Photoshop, Sketch, narzędzia do prototypowania oraz setki gotowych, świetnej jakości zasobów. Z drugiej strony jednak fragmentacja ekranów, zagadnienia związane z wyświetlaczami HiDPI i optymalizacją na nie grafik może przyprawić o ból głowy największego graficznego wyjadacza. Ten Kurs stanowi praktyczne rozwinięcie zagadnień omawianych w kursie Nowoczesny Webdesign o projekt, który wykonamy krok po kroku od procesu koncepcyjnego aż do cięcia gotowej grafiki.

Narzędzia oraz zasoby

Tworzenie layoutu krok po kroku

W kursie nastawimy się na praktykę. Jest on doskonałym uzupełnieniem teorii z kursu Nowoczesny Webdesign - tutaj jednak koncentrujemy się na wykorzystaniu dobrych praktyk począwszy od zebrania pomysłów, przez wireframe na papierze, prototypowanie na urządzeniu mobilnym, aż do projektowania w Photoshop i Illustrator oraz tworzenia interakcji z UX Pin.

Płynny proces tworzenia

Dzięki wykorzystaniu nowych technologii w projektowaniu dowiesz się jak zautomatyzować większość procesów projektowych - takich jak ustawianie odpowiedniego grida, praca w skali, przenoszenie zasobów między projektami czy aktualizowanie ich w jednym miejscu tak, aby zmiany widoczne były w całym projekcie.

Nowe ekrany HiDPI i eksport grafik

W kursie poznasz także narzędzia oraz techniki pracy zorientowane na dostarczenie jak najlepszych grafik także dla nowoczesnych wyświetlaczy, takich jak Retina. Dowiesz się jak łatwo wykorzystać potencjał nowych narzędzi eksportu w Photoshop oraz Adobe Extract, dzięki któremu zapomnisz o wycinaniu z pomocą przestarzałych metod takich jak plasterki.

Interakcje i funkcjonalne prototypy

Mobile first, RWD i testowanie

Projekt naszej witryny zorientujemy na podejście Mobile First, dzięki czemu uzyskamy w krótkim czasie szereg koncepcji, które postaramy się następnie zeskalować na większe ekrany - tablet i desktop. Postaramy się pracować tak, aby coraz większe ekrany oferowały więcej funkcjonalności dla użytkownika, a te mniejsze były zoptymalizowane pod pracę z ekranami dotykowymi.

Podsumowując, w trakcie kursu omówimy między innymi:

  • Narzędzia w procesie koncepcyjnym
  • Projektowanie grafiki w Photoshop i Illustrator
  • Prototypowanie oraz tworzenie interakcji
  • Projekt layoutu strony WWW krok po kroku
  • Zastosowanie typografii i przydatne narzędzia
  • Praca w oparciu o urządzenia i testowanie
  • Eksport i optymalizacja grafik
  • I wiele, wiele więcej!

Dla kogo jest ten kurs?

Kurs jest przeznaczony dla wszystkich osób, które chcą dowiedzieć się jak w praktyce wygląda projektowanie nowoczesnych interfejsów stron WWW. Zdecydowanie zalecamy wcześniejsze przerobienie kursu Nowoczesny Webdesign - kurs, który masz przed sobą jest jego praktycznym rozwinięciem. Wymagane są także podstawy Photoshopa lub innej aplikacji graficznej w której będziesz projektował layouty.

Dlaczego wybrać właśnie ten kurs?

  1. 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!
  2. 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.
  3. 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ń.

Autor: Grzegorz Róg

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. <br><br> 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!

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. <br><br> 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!

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Grzegorz Róg

Czas: 5 godzin 48 minut

Aktualizacja: 11.05.2020

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp

  • Wprowadzenie

  • Proces tworzenia stron WWW

Praca koncepcyjna

  • Koncepcja i skojarzenia

  • Użytkownicy witryny

  • Cele strony WWW

  • Architektura informacji

  • Mapa witryny

  • Markdown i projektowanie w tekście

Tworzenie logotypu

  • Inspiracje do logotypu

  • Logo - szkicowanie

  • Import plików do Illustrator

  • Detale logotypu

  • Praca z Adobe Comp

Wireframe i urządzenia mobilne

  • Szkic wireframe

  • Tworzymy wireframe

  • Testy na urządzeniu

  • Praca z prototypem

Typografia

  • Typografia w projekcie

  • Style tekstu

Organizacja bibliotek

  • Organizacja warstw

  • Atomy i biblioteki

  • Praca z bibliotekami

Tworzymy Wireframe

  • Widok tabletowy

  • Tworzymy footer

  • Widok desktopowy

  • Gotowy wireframe

Interaktywne prototypy

  • Interakcje i layer comps

  • Praca z UX Pin

  • Prototypy w InVision

  • InVision - interakcje

Inspiracje i Stylistyka

  • Inspiracje od stylistyki

  • Inspiracje i zbieranie zasobów

Praca z grafiką

  • Praca z tłem dla strony

  • Pozostałe elementy graficzne

  • Style atomów

  • Praca z bibliotekami

Omówienie projektów

  • Omówienie strony głównej

  • Widoki mobile

  • Eksport grafiki

}