Ta lekcja jest w bazie eduweb

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

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 14/ 50Eksport grafik

0:00 / 0:00
UI, UX i WebdesignSketchProjektowanie UI

Sketch: Eksport grafik

7 godz. 34 min wideo50 lekcji12 modułów

Grzegorz RógIdea Architect
Wszystkie kursy autora

Czego się nauczysz

  • Ustawienia Interfejsu
  • Przeglad waznych technik i skrótów
  • Tips & Tricks
  • Eksport grafik
  • Narzedzia wektorowe
  • Kolory, Ikony i Typografia
  • Praca z symbolami
  • Praktyczny Projekt UI

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.

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!

Kurs Sketch

12 rozdziałów50 lekcji7h 34min

Wstęp do Kursu

3min
  • Wprowadzenie3min(zablokowana)

Interfejs i Nawigacja

41min
  • Nawigacja i zmiana widoku6min(zablokowana)
  • Tworzenie selekcji6min(zablokowana)
  • Strony i Artboardy7min(zablokowana)
  • Organizacja warstw4min(zablokowana)
  • Operacje logiczne8min(zablokowana)
  • Praca z kształtami10min(zablokowana)

Praca z Narzędziami

57min
  • Narzędzie Wektorowe11min(zablokowana)
  • Transformacje kształtów9min(zablokowana)
  • Jeszcze inne transformacje8min(zablokowana)
  • Opcje wyrównania11min(zablokowana)
  • Skalowanie i Resizing10min(zablokowana)
  • Maskowanie9min(zablokowana)

Przydatne Techniki

53min
  • Eksport grafik12min(zablokowana)
  • Operacje matematyczne6min(zablokowana)
  • Pixel Grid5min(zablokowana)
  • Tworzymy Symbole13min(zablokowana)
  • Praca w skali 1x9min(zablokowana)
  • Grid Layout8min(zablokowana)

Koncepcja Projektu

41min
  • Szkice oraz mockupy7min(zablokowana)
  • Praca z Kolorami11min(zablokowana)
  • Style Guide w Projekcie8min(zablokowana)
  • Praca z Typografią8min(zablokowana)
  • Type Ramp7min(zablokowana)

Projekt Home App

35min
  • Tworzenie Topu11min(zablokowana)
  • Ekran Główny - dodatki11min(zablokowana)
  • Organizacja i Nazewnictwo13min(zablokowana)

Kolejne Artboardy

21min
  • Iteracje Artboardu Home10min(zablokowana)
  • Warianty przycisku8min(zablokowana)
  • Podgląd na urządzeniu3min(zablokowana)

Kolejne Ekrany Aplikacji

1h 16min
  • Ekran Logowania13min(zablokowana)
  • Kolejny ekran i Ikony10min(zablokowana)
  • Ekran Główny i Gradienty9min(zablokowana)
  • Ekran Ustawień13min(zablokowana)
  • Ekran Devices15min(zablokowana)
  • Ekran Akcji11min(zablokowana)
  • Ekran Szczegółów Akcji6min(zablokowana)

Inne Elementy Home App

1h 3min
  • Menu Dolne8min(zablokowana)
  • Ekran Alarmu12min(zablokowana)
  • Ekrany Senses Blinds12min(zablokowana)
  • Ekran Lampy14min(zablokowana)
  • Ekran Temperatury6min(zablokowana)
  • Ekrany Kamer10min(zablokowana)

Portowanie na inne urządzenia

15min
  • Ekran horyzontalny i widok tabletowy15min(zablokowana)

Prototyp Aplikacji

46min
  • Wprowadzenie do Marvel8min(zablokowana)
  • Definiowanie Przejść i Hotspotów16min(zablokowana)
  • Działający Prototyp6min(zablokowana)
  • Sketch Cloud7min(zablokowana)
  • Nowość - Prototypowanie w Sketch!9min(zablokowana)

Zakończenie

2min
  • Dziękuję za uwagę2min(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

Grzegorz Róg
Ś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!

Inne kursy tego autora

Pokaż więcej kursów