Makietowanie treści strony
W tej lekcji przyglądamy się procesom pracy w programach do projektowania - Dokumenty Google, Figma, Miro i Adobe XD. Pokazuję Ci skąd pozyskać dane elementy i schematy kompozycyjne oraz inspiracje. Tłumaczę też jak rozumieć i "widzieć" treści w układach responsywnych.
Linki do przykładów z lekcji
Narzędzia
Narzędzie do przechwycenia obrazu całej strony - wtyczka do przeglądarki Chrome: Go Full Page
https://www.figma.com/community: Wireframing in Figma (wpisz w wyszukiwarkę)
Baza komponentów i inspiracji
Jeśli chcesz bliżej przyjrzeć się dokładnie każdemu komponentowi w produkcie cyfrowym, koniecznie zajrzyj do tych dwóch baz:
➡️ https://component.gallery/components
Zbiór, opis i przykłady dotyczące wszystkich elementów interfejsu.
➡️ https://mobbin.com/
Duża biblioteka różnych rozwiązań w aplikacjach mobilnych.
Słownik
Wireframe Kit - szablon, zestaw komponentów strony, który pozwala na użycie ich w środowisku projektowym. Często tego pojęcia używam zamiennie ze sformułowaniem "design system", choć nie jest to pojęcie do końca definujące Wireframe Kit. Wireframe Kit wymaga stylowania (personalizacji pod kątem kolorów, obrazów, użytych fontów).
Szablon strony, template - szablon, który został stworzony w środowisku deweloperskim, zatem jest już gotową publikacją internetową, a nie tylko projektem. Przykładem jest tu platforma Easy LMS, którą uruchomiłam od razu w systemie Weblow i po złożeniu i ostylowaniu komponentów mogłam ją od razu opublikować. Szablon ten zawiera design system, czyli przewidywalny, stały schemat prezentacji treści (sposób użycia nagłówków, akapitów, czcionek), a także jego warianty (różne rodzaje stylowania przewidziane przez twórców szablonu).
Responsywność - Responsive Web Design (RWD) - taki sposób projektowania strony, który pozwala dostosować ją do każdego typu i wielkości ekranu (desktopu, tabletu, smartfona).
📝 Notatki ze wszystkich lekcji do pobrania [dokument Google]
Kompleksowy kurs projektowania tekstów do interfejsów
✏️ 30 lekcji wideo
✏️ 15 kreatywnych ćwiczeń
✏️ notatki i listy kontrolne do pobrania
✏️ nauka o narzędziach projektowych (Miro, Notion, Framer)
✏️ wiedza o systemach no-code (do samodzielnego tworzenia produktów)
✏️ tworzenie portfolio i certyfikat ukończenia kursu
✏️ możliwość dokupienia konsultacji indywidualnych
Na co dzień pracuję jako projektantka i kreatorka treści. Tworzę treści na strony internetowe i do social mediów, przygotowuję scenariusze filmów promocyjnych i edukacyjnych, a także strategie komunikacji dla produktów cyfrowych (gry, aplikacje) i nowych marek (nazwy, sposoby komunikacji z klientami).
Zajmuję się tworzeniem i wdrażaniem efektywnej komunikacji w organizacjach zarówno wewnątrz, jak jak na zewnątrz - dla pracowników, klientów i odbiorców. Jestem autorką szkoleń i kursów online. Przeprowadziłam warsztaty m.in. dla pracowników firm i instytucji takich jak: Aviva, Bonami.pl, Narodowy Fundusz Zdrowia, Uniwersytet Szczeciński, Książnica Pomorska, czy Niepubliczna Szkoła Podstawowa im. I. J. Paderewskiego w Szczecinie.
Moje wieloletnie doświadczenie jako wykładowczyni i autorki projektów edukacyjnych sprawia, że każde szkolenie to przygoda i solidna dawka wiedzy idealnie skrojona do potrzeb organizacji.