Ach, bycie samoukiem! Bardzo popularne rozwiązanie, zwłaszcza w nauce nowych zawodów z IT. Niestety, takie podejście wymaga naprawdę wysokiej determinacji i dobrych zdolności researchu. Dlaczego?
👉 Internet pęka w szwach od źródeł, z których można czerpać wiedzę. I to zupełnie za darmo! Trzeba jednak wiedzieć, w czym i jak przebierać, żeby nie zaśmiecać głowy tym, co (prędzej czy później), rynek zweryfikuje jako niesłuszne, niepotrzebne, i po prostu: złe.
Teraz, w tym wpisie, chcę wskazać Ci, gdzie warto zainwestować swoje zasoby, żeby cały trud włożony w naukę zaczął jak najszybciej dawać owoce. 🍇
🕹️ Interaktywność i animacja
Jedną z pierwszych rzeczy, które przychodzą na myśl, jest szeroko pojęta interaktywność i animacja. Te elementy odgrywają kluczową rolę w odbiorze projektu i w tym, jak projekt wzbudza emocje w odbiorcy.
Cały mechanizm interakcji użytkownika z produktem cyfrowym może być ponownie wynaleziony, otwierając nowe i nieskończone możliwości dla projektowania. A to wszystko za sprawą animacji!
Teraz pytanie: jak to robić, żeby nie przesadzić?
👉 To proste. Ćwiczyć oko. Najważniejszym elementem rozwoju i nauki jest codzienny przegląd inspiracji i dobrych projektów stron.
Gdzie szukać inspiracji?
→ hoverstat.es,
Poprzez badanie nowych projektów i dokładne przyglądanie się temu, w jaki sposób strony wchodzą z nami w interakcję, możemy wiele się nauczyć na temat znaczenia interaction designu w projektowaniu.
🕹️ W ogóle, jako Design Practice, prowadzimy taki kurs projektowania interakcji – Interaction Designer. Sprawdź, czy przypadkiem nie zbliża się termin zapisów! A jeśli nie, to umil sobie oczekiwanie i skorzystaj z bezpłatnych lekcji projektowania interkacji i animacji z Tomkiem Biskupem.
🤳 Prototypowanie
Kolejna, super istotna umiejętność.
Dzięki umiejętności projektowania animacji i interakcji będziesz w stanie stworzyć działające prototypy, np. w Figmie.
⚠️ Ważne jest, aby pamiętać, że strona internetowa to produkt cyfrowy, który ma nie tylko dobrze wyglądać, ale również działać, tak jak każdy inny produkt, prawda?
→ Podobnie jak krzesło służy do siedzenia, a pilot do telewizora służy do przełączania kanałów, strona internetowa również ma spełniać określone zadania. To świętość.
Dzięki technologiom prototypowania sprawisz, że Twoje projekty zaczną działać, a nie będą jedynie statycznymi obrazkami. I właśnie tak łatwiej oddasz ich cel.
To nie wszystko. Taki prototyp możesz testować na każdym etapie projektowania. I szybciej reagować na błędy!
👀 Oko na szczegóły
UI to przywiązanie uwagi do detali.
Każdy produkt cyfrowy, tak jak strona internetowa czy aplikacja, składa się z puzzli. Te małe elementy są ze sobą zestawiane, tworząc większą układankę.
Sztuką w UI jest zagłębienie się w szczegóły tych puzzli i świadomość licznych decyzji, jakie należy podjąć, aby każdy z elementów był gotowy do użycia w dalszym kontekście. 🧩
A każdy mini-projekt to kilkadziesiąt decyzji do pojęcia 🤯 I to lekką ręką licząc!
Zaczynasz na kolorach, idziesz przez typografię i wszystko z nią związane, po drodze mijasz paddingi, marginesy, animacje… ajaj.
Jeśli chcesz, żeby detale w Twoim projekcie idealnie ze sobą współgrały, musisz kłaść na nie bardzo duży nacisk. Dzięki temu zaczniesz tworzyć projekty dopracowane na, serio, wielu poziomach.
👉 Więcej o UI, a dokładniej – 5 protipów, jak projektować interfejsy, znajdziesz w tym wpisie na blogu.
🙌 Stop! Jeszcze jedna rzecz. Najważniejsze zasady web designu (z naszej perspektywy) znajdziesz też na blogu. O tutaj.
💭 Myślenie modułowe
Albo też myślenie komponentami i reużywalność rzeczy.
Oznacza to, że można używać tych samych komponentów w różnych miejscach projektu, aleee z drobnymi wariacjami, aby zachować spójność i różnorodność wizualną.
Recykling elementów projektowych pozwala zaoszczędzić czas i wysiłek przy tworzeniu designów.
W narzędziu projektowym, takim jak Figma, które jest powszechnie używane do projektowania cyfrowego, istnieją funkcje wspierające pracę z komponentami.
Po prostu: robisz raz, a możesz wykorzystać wiele razy! Win-win. 🏆
⌨️ Technikalia web designu
To, co projektujesz, to tak naprawdę instrukcja dla developera lub developerki, co i jak ma zakodować. Musisz umieć sprzedać swoje pomysły i zapewnić, że developerzy będą w stanie je odpowiednio zinterpretować i zaimplementować.
→ Ostateczna jakość projektu zależy od efektywnej komunikacji między projektantami a programistami. A do tego warto znać techniczne aspekty projektowania!
Nauka HTML i CSS jest podstawą. Nie, że musisz umieć wszystko na tip top, ale chociaż poruszać się po tych pojęciach technicznych. I będzie git! Tak na przykład, box model w HTML może pomóc w lepszym zrozumieniu struktury stron internetowych.
Cały internet składa się z elementów, które są zapakowane w pudełka, a te pudełka mogą zawierać kolejne pudełka. Taka baba w babie, matrioszka.
Musisz rozumieć w jaki sposób te elementy są ze sobą powiązane.
⚠️ Ściągnij Outliner CSS i zacznij podglądać struktury różnych stron. Tak zrozumiesz, jak dane komponenty rzeczywiście na siebie wpływają!
🧠 Co musi umieć taki designer? Sprawdź w tym wpisie!
✅ Zawsze na plus
Jest jeszcze kilka cennych skilli.
→ Strategia user experience. Czyli coś, co pozwala rzeczywiście zrozumieć i dostosować produkt pod potrzeby i oczekiwania użytkowników. Dobrze zaprojektowany UX to też większa skuteczność biznesu!
→ Dbałość o content wizualny. Oj, serio, ciężko zepsuć projekt, który już ma dobrze dobraną zawartość. I w drugą stronę – projekt, który tego nie ma, ciężko uratować. Pracuj nad wrażliwością na kolor, światło i kompozycję.
→ Grupowanie i strukturyzowanie. Praca projektanta często zaczyna się od analizy otrzymanych materiałów i zrozumienia ich hierarchii. Jakie elementy są najważniejsze, jak mają być ułożone i jak mają ze sobą współgrać? Przy współpracy z klientami, którzy często nie posiadają wiedzy na temat projektowania, projektant musi przejrzeć otrzymane materiały i wykonać wstępną strukturyzację. Stworzyć listę podstron, zastanawiać się nad funkcjonalnością każdej z tych podstron, jak mają być powiązane i jak nawigacja między nimi powinna działać.
→ Redakcja tekstu i copywriting. Komunikacja to podstawa każdego produktu cyfrowego. Stworzysz nią nie tylko charakter marki, ale i ułatwisz poruszanie się po nim!
Mam nadzieję, że ten wpis nieco rzuci światło 💡 na Twoją dalszą, edukacyjną ścieżkę. A może uważasz, że czegoś na tej liście brakuje? Daj znać (np w komentarzu pod spodem)! ❤️
