Kurs Sketch

Wprowadzenie

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

8 ocen

Lubię to! 336

Wprowadzenie

Sketch to aplikacja, która w ostatnim czasie zdobyła serca wszystkich, którzy projektują UI czy UX, choć tak naprawdę Sketch to program, którego nauczyć może się każdy. Oprócz licznych zalet, Sketch posiada także jedną dużą wadę - dostępny jest wyłącznie na platformę Mac OS. Jeśli jednak jesteś szczęśliwym posiadaczem Mac'a - grzechem byłoby nie wykorzystać potencjału, który tkwi w pracy w Sketch'u. Zapewniam Cię, że praca z grafiką i projektowanie interfejsów jeszcze nigdy nie było tak szybkie i przede wszystkim - przyjemne.

  1. Ustawienia Interfejsu
  2. Przeglad waznych technik i skrótów
  3. Tips & Tricks
  4. Eksport grafik
  5. Narzedzia wektorowe
  6. Kolory, Ikony i Typografia
  7. Praca z symbolami
  8. Praktyczny Projekt UI

Dlaczego Sketch?

Ponieważ to aplikacja, która została stworzona wyłącznie w jednym celu - pracy z grafiką wektorową pod kątem UI. To dlatego Sketch zyskał ogromną przewagę nad narzędziami takimi jak Pohotoshop czy Illustrator, które są przeładowane funkcjami, a co za tym idzie - praca w nich staje się mniej wydajna. To tak, jakby chirurg podczas operacji nie używał precyzyjnego skalpela, tylko scyzoryka Swiss z dziesiątkami narzędzi. Szybsza praca, mniejsze pliki, lepsza wydajność a także dedykowane dla UI narzędzia i setki przydatnych pluginów napisanych przez społeczność sprawią, że szybko uzależnisz się od Sketch'a! Nie wspominając już o cenie, która jest w zasięgu każdego i braku konieczności subskrypcji!

Co w Kursie?

Kurs opracowałem tak, abyś poznał Sketch'a od najlepszej strony, mogąc w pełni wykorzystać jego potencjał. Niektóre zagadnienia, jak eksport grafik, lepiej wypunktować w krótkich lekcjach teoretycznych, natomiast inne, jak przygotowanie pod tworzenie nowego projektu - w praktyce. Dlatego podzieliłem Kurs na dwie części - w pierwszej otrzymasz skompresowaną do granic pigułkę wiedzy z przeglądem setek ważnych technik i skrótów klawiaturowych, tipsów i trików. Ta część została nagrana z ekspresową narracją i dzieje się w niej tak dużo, że zapewne będziesz wiele razy zatrzymywał wideo... o to chodzi! Wracaj do tych lekcji, kiedy tylko będziesz potrzebował odświeżyć podstawowe informacje. Druga część jest w 100% praktyczna, gdzie koncentrujemy się na wykorzystaniu poznanych w teorii technik do zaprojektowania kilku ekranów aplikacji inteligentnego domu. Dopiero obejrzenie obu części gwarantuje efekt w postaci przyswojenia potrzebnej wiedzy z aplikacji, ale także tego, jak tą wiedzę przełożyć na codzienną pracę z projektami.

Nowa Era w Projektowaniu UI

Ten Kurs to esencja nowego podejścia do projektowania nowoczesnych interfejsów użytkownika. Z trudem mogę pohamować entuzjazm z powodu kierunku, który wyznacza materiał jaki dla Ciebie przygotowałem. Kurs jest uzupełniony dziesiątkami dodatkowych technik i materiałów - jego przerobienie zapewne sprawi Ci dużo frajdy, jednak dopiero kiedy dowiesz się, że to dopiero początek wspaniałej przygody z nowoczesnymi narzędziami dla UI i UX Designerów, zrozumiesz, że otwiera się dla Ciebie zupełnie nowy rozdział. Kolejno pochłoną Cię narzędzia do prototypowania, tworzenia mikrointerakcj, w końcu eksportowania designu do front-endu i aplikacji, od czego dzieli nas naprawdę niewiele! To, jak szybko przejdziesz na drugą stronę lustra zależy tylko od Ciebie i od tego, czy podejmiesz wyzwanie z tego Kursu.

Skompresowana Teoria

Część teoretyczna to kompendium niemal wszystkich narzędzi, skrótów, tipów i tricków w Sketch'u, które niczym niebieska pigułka w Matrixie napełnią Twoją głowę pomysłami i oswoją z aplikacją. Będziesz do niej często wracał, ponieważ prezentowane techniki to wiedza, niekiedy tajemna, w najczystszej postaci. Mimo, że to teoria, nie będzie nudno!

Interfejs Sketch'a i Narzędzia

Dowiesz się jak sprawnie poruszać się po interfejsie aplikacji, jak zorganizować swoje pliki w Page czy Artboard'y, jak wyciągnąć maksimum z możliwości organizacji warstw, grup czy symboli. Poznasz też narzędzia, z których będziemy korzystać w dalszych częściach kursu.

Eksport Grafik

Poznasz rozmaite warianty eksportu grafiki, czy to w postaci finalnych plików dopasowanych idealnie do nowoczesnych urządzeń, czy czystego kodu SVG czy CSS. Dowiesz się jak przygotować komponenty do eksportu w ten sposób, aby wszystkie rozmiary i niezbędne formaty eksportowane były automatycznie.

Narzędzia wektorowe

Sketch w całości opiera się o wektory. Tworzenie ikon i praca z kształtami jest prosta, szybka i przyjemna. Atut takiego podejścia to możliwość wyeksportowania projektu na dowlone urządzenie i skalę. Poznasz dobre podejście do pracy z wektorami a także najważniejsze techniki i skróty, które zapewnią wysoką wydajność.

Kolory, Ikony i Typografia

W pracy z praktycznym projektem dowiesz się jak stworzyć Style Guide z kolorami, typografią czy jak wykorzystać ikony w taki sposób, aby były reużywalne w projekcie i abyśmy mogli zachować spójność, co jest niezwykle ważne w tworzeniu profesjonalnych interfejsów.

Praca z Symbolami

Symbole w Sketch to reużywalne komponenty, dzięki którym możemy budować złożone, spójne aplikacje w rekordowym czasie. To jedna z najbardziej potężnych funkcji nowych wersji Sketch'a, a zagnieżdżanie Symboli i ich zaawansowane ustawienia jak Override'y wykorzystamy w praktyce w naszym projekcie. Dzięki Symbolom praca w konwencji tzw. Atomic Design, czyli atomów, molekułów i organizmów - nabiera sensu i jest niezwykle wygodna, a eksport do CSS czy SVG jest w zasięgu ręki.

Praktyczny Projekt UI

W drugiej części Kursu skupimy się na stworzeniu kompletnego projektu w schemacie Mobile First. Na jego przykładzie poznasz konkretne zestawienia technik wykorzystywane w kontekście projektowym. Zaczniemy od konfiguracji Grida i ustawień Artbordów, przez projektowanie ikon i Symboli aż do gotowych plansz aplikacji. Ta wycieczka po konkretnych funkcjach Sketch'a nie tylko pozwoli Ci uporządkować wiedzę z części teoretycznej, ale także zrozumieć właściwe praktyki płynące z wielu projektów wykonanych w tej aplikacji.

Działający Prototyp

Na koniec, w oparciu o prostą metodę (tzw. Rapid Prototyping) i darmową aplikację Marvel App, stworzymy działający prototyp, który będziesz mógł wysłać np. z pomocą SMS na telefon, na którym można będzie go uruchomić. Zaplanujemy przejścia plansz oraz animacje, a wszystko to zrobimy w rekordowym czasie!

Prototypowanie w Sketch!

Nowość - kurs został rozszerzony o lekcję, w której dowiesz się jak działają funkcje prototypowania w aplikacji Sketch, które pozwalają szybko stworzyć działający, interaktywny prototyp aplikacji. Metoda, którą wykorzystujemy to tak zwane Rapid Prototyping, czyli szybkie prototypowanie w oparciu o przejścia plansz i hotspoty, na razie nie możemy natomiast tworzyć bardziej złożonych animacji czy mikrointerakcji. Na potrzeby prezentacji flow w naszym projekcie jest to jednak świetne rozwiązanie, a możliwość zaprezentowania takiego prototypu przez udostępnienie go w chmurze Sketcha czy podgląd na urządzeniu z pomocą aplikacji Sketch Mirror pozwala na przetestowanie Twojego projektu jeszcze w Sketchu!

Sketch tylko na mac OS?

A co z użytkownikami systemu Windows? Cóż, to prawda, że Sketch dostępny jest tylko na komputery firmy Apple - istnieją jednak sposoby, aby korzystać z dobrodziejstw systemu mac OS również na PC i laptopach wyposażonych w bardziej popularny system Windows. Więcej o takich możliwościach przeczytacie tutaj. Nie jest to proste rozwiązanie i nie możemy polecać go dla każdego, ale wysiłek może okazać się wart zachodu - szczególnie, że większość nowoczesnych narzędzi do UI i UX designu dostępnych jest w wersjach na system mac OS.

Dla kogo jest ten kurs?

Sketch jest narzędziem, którego może (i powinien;) nauczyć się każdy użytkownik Mac'a. To prosta aplikacja, w której możesz pracować zarówno z grafiką wektorową, jak i edytować bitmapy. Osoby bardziej zaawansowane mogą zadać pytanie - po co się go uczyć, skoro to tak proste narzędzie. Okazuje się jednak, że pełny potencjał tego fantastycznego programu tkwi głębiej, a kolejne odkrywane techniki sprawią, że przeżyjesz wiele - 'a więc to tak można!' - momentów. Zdecydowanie jest to materiał, który zadowoli także osoby bardziej zaawansowane w projektowaniu UI, a nawet tych z Was, którzy już od jakiegoś czasu korzystają ze Sketch'a!

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ń.
7 godzin 30 minut

Kurs Sketch
Projektowanie UI

Sketch to aplikacja, która w ostatnim czasie zdobyła serca wszystkich, którzy projektują UI czy UX, choć tak naprawdę Sketch to program, którego nauczyć może się każdy. Oprócz licznych zalet, Sketch posiada także jedną dużą wadę - dostępny jest wyłącznie na platformę Mac OS. Jeśli jednak jesteś szczęśliwym posiadaczem Mac'a - grzechem byłoby nie wykorzystać potencjału, który tkwi w pracy w Sketch'u. Zapewniam Cię, że praca z grafiką i projektowanie interfejsów jeszcze nigdy nie było tak szybkie i przede wszystkim - przyjemne.

Grzegorz Róg

30 minut

Współpraca UI Designera i Developera z Zeplin

Projektowanie interfejsów stron WWW czy aplikacji to proces, który jest kontynuowany przez developera podczas jej wdrażania. Precyzyjne wytyczne to jedna z najważniejszych rzeczy podczas tzw. Handoff, czyli przekazywania projektu do developera. Niestety, w wielu przypadkach dalej budowane są obszerne dokumentacje, które są bardzo mało efektywnym sposobem współpracy. Nowe podejście opiera się na dialogu designera i developera a także użyciu narzędzi, które znacznie przyspieszą ten proces. Jednym z nich jest Zeplin i choć w tym Warsztacie zaprezentujemy to, jak może działać z plikami Sketch, możesz także wykorzystać go przy współpracy z Photoshopem czy Adobe XD. Zobacz, jak łatwe i przyjemne może być przekazanie wytycznych i projektu do developera i jak dużo on sam może wyciągnąć z plików projektowych, bez generowania dodatkowej pracy i dokumentacji! <br><br> Na Warsztat zaprasza Grzegorz Róg.

Grzegorz Róg

18 minut

Abstract - Git dla Designerów

Wreszcie projektanci doczekali się systemu kontroli wersji, który działa na podobnej zasadzie jak Git dla developerów. Abstract to system kontroli wersji i współpracy w zespole projektowym, aczkolwiek świetnie sprawdzi się też do zorganizowania projektów jednej osoby. Podobnie jak w Git, mamy możliwość pracy z wieloma projektami, tworzenie gałęzi i merge'owanie ich z wersją produkcyjną. Ponadto, możemy śledzić zmiany w Commitach a nawet poszczególnych elementach projektu jak Artboardy czy Symbole. Mamy też możliwość otrzymywania feedbacku i komentarzy.<br><br> Jedyną wadą jest fakt, że na razie Abstract działa wyłącznie na mac OS w połączeniu ze Sketchem. Jednak już wkrótce twórcy zapowiadają wsparcie dla większej ilości formatów. <br><br><a href="http://latozux.eduweb.pl/">Trwa Lato z UX! Zapisz się na powiadomienia i sprawdź najnowsze Kursy!</a>

Grzegorz Róg

60 minut

Chyba Sketch

Chyba tak... mimo ogromnego sentymentu do Photoshopa czy Illustratora, zaczniesz te narzędzia wykorzystywać do innych celów i wkrótce przeniesiesz cały swój UI workflow do Sketch’a. Z danych wynika, że UI Designerzy już w ubiegłym roku wykonali więcej projektów w Sketch’u, niż właśnie w narzędziach Adobe. Tymczasem, w Warsztacie poznasz jedne z najciekawszych funkcji aplikacji Sketch oraz kilka przydatnych technik pracy. Dowiesz się między innymi, jak można po zaprojektowaniu statycznego interfejsu, stworzyć działający prototyp, jak wykorzystać potencjał wtyczek generujących treści, a nawet jak wyeksportować ze Sketch’a gotową stronę WWW! Rozwinięcie Warsztatu znajdziesz w obszernym Kursie Sketch na eduweb.pl. <br><br> Odkryj potencjał drzemiący w prostocie - nie będziesz żałował! Na Warsztat zaprasza Grzegorz Róg.

Grzegorz Róg

Autor: Grzegorz Róg

**Idea Architect**

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!

eduweb.pl
@greg_rog

Recenzje Kurs Sketch

5

8 dodanych ocen

2017-07-04

Wspaniały kurs z którym możesz nauczyć się tworzenie wspaniałych interfejsów w niesamowitej aplikacji jaką jest Sketch.

Artur Gręziak

2017-07-06

Rewelacyjny kurs. Mimo, że pracuje ze Sketchem od 6 miesięcy dowiedziałem się dużo nowych i przydatnych rzeczy. Od teraz Sketch nie będzie miał przede mną żadnych tajemnic ;) Dzięki Grzegorz!

Łukasz Dmitruk

2017-07-30

Jak wiele kursów Grzegorza bardzo dobrze przekazana dawka wiedzy! Polecam!

Lukasz S Pierwola

2017-08-24

Czy da się w tym kursie wykorzystać np. Balsamic lub Uxpin z Windows zamiast Sketch?

Mariusz Kunc

2017-11-22

Bardzo dobry kurs dla designerów, którzy chcą przejść z Photoshopa i Illustratora na Sketch. Grzegorz Róg omawia temat "od góry do dołu".

Piotr Trzaskowski

2017-12-03

Przyjemnie się oglądało i słuchało, teraz tylko kupić Macbooka muszę i zacząć przygodę ze Sketchem. Polecam!

Lukasz Baprawski

2018-01-10

Bardzo fajnie wszystko omówione :) jeszcze nie przerobiłem całego kursu, ale gdy to zrobię wiem, że bez trudu będę posługiwał się sketchem.

Marcin Michalski

2018-05-23

Bardzo przyjemny kurs. Po obejrzeniu całości spokojnie można projektować nawet złożone interfejsy

Szymon Wanatowicz

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
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Grzegorz Róg

Czas: 7 godzin 30 minut

Wersja:

  • Pliki źródłowe
  • Certyfikat Ukończenia
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół

Wstęp do Kursu

  • Wprowadzenie

Interfejs i Nawigacja

  • Nawigacja i zmiana widoku

  • Tworzenie selekcji

  • Strony i Artboardy

  • Organizacja warstw

  • Operacje logiczne

  • Praca z kształtami

Praca z Narzędziami

  • Narzędzie Wektorowe

  • Transformacje kształtów

  • Jeszcze inne transformacje

  • Opcje wyrównania

  • Skalowanie i Resizing

  • Maskowanie

Przydatne Techniki

  • Eksport grafik

  • Operacje matematyczne

  • Pixel Grid

  • Tworzymy Symbole

  • Praca w skali 1x

  • Grid Layout

Koncepcja Projektu

  • Szkice oraz mockupy

  • Praca z Kolorami

  • Style Guide w Projekcie

  • Praca z Typografią

  • Type Ramp

Projekt Home App

  • Tworzenie Topu

  • Ekran Główny - dodatki

  • Organizacja i Nazewnictwo

Kolejne Artboardy

  • Iteracje Artboardu Home

  • Warianty przycisku

  • Podgląd na urządzeniu

Kolejne Ekrany Aplikacji

  • Ekran Logowania

  • Kolejny ekran i Ikony

  • Ekran Główny i Gradienty

  • Ekran Ustawień

  • Ekran Devices

  • Ekran Akcji

  • Ekran Szczegółów Akcji

Inne Elementy Home App

  • Menu Dolne

  • Ekran Alarmu

  • Ekrany Senses Blinds

  • Ekran Lampy

  • Ekran Temperatury

  • Ekrany Kamer

Portowanie na inne urządzenia

  • Ekran horyzontalny i widok tabletowy

Prototyp Aplikacji

  • Wprowadzenie do Marvel

  • Definiowanie Przejść i Hotspotów

  • Działający Prototyp

  • Sketch Cloud

  • Nowość - Prototypowanie w Sketch!

Zakończenie

  • Dziękuję za uwagę