🤝 Optymalizacja i narzędzia AI do projektowania
Praca z AI to sztuka optymalizacji, a małe triki mogą przynieść duże oszczędności. Numer jeden na naszej liście? Rozmawiaj z AI… po angielsku. 🇬🇧
W tym drobnym zabiegu tkwi głębszy sens – język angielski zużywa mniej tokenów (czyli jednostek tekstu, którymi „myśli” AI) niż polski. To oznacza, że w ten sposób działasz bardziej ekonomicznie.
Ale to nie wszystko. AI ma swoje limity pamięci (tzw. context window) i czasem może się pogubić w długiej rozmowie. Dlatego warto co jakiś czas poprosić o małe podsumowanie kluczowych punktów albo „przewietrzyć” konwersację, rozpoczynając ją w nowym oknie. To jak robienie notatek podczas długiej rozmowy – pomaga utrzymać skupienie i nie zagubić ważnych detali.
Oraz, aby przyspieszyć pracę nad projektem, możesz skorzystać z ciekawych narzędzi AI do usprawnienia całego procesu.
W bezpłatnych lekcjach Grzegorz poleca:
→ Colormind – do generowania palet kolorów marki. Możesz zarówno wygenerować zupełnie nowe kolory, zacząć od wgrania gotowego logo swojej marki, albo i wgrać obrazek, aby narzędzie pobrało z niego dominujące kolory.
→ Huemint – do przetestowania, jak kolory sprawdzają się w kontekście różnych projektów – na stronach www, koszulkach, czy… w magazynach. Oprócz podglądu kolorów, Huemint pozwala zobaczyć, jak będą wyglądać w praktyce na jasnym i ciemnym tle, oraz daje opcję wygenerowania gradientów, bądź jednolitych backgroundów.
→ Poolors – miejsce, gdzie znajdziesz gotowe palety kolorów wybrane przez designerów i artystów z całego świata. Możesz szybko przeglądać najbardziej popularne zestawienia kolorystyczne (coolors) lub poznać rzadziej używane (poolors), które… raczej do siebie nie pasują. Dzięki temu łatwiej unikniesz błędów kompozycyjnych.
.png)
🤸♀️ Niech Twoje strony będą jak… Elastyna!
Responsive design często wydaje się skomplikowany, ale jego założenie jest stosunkowo proste – strona ma wyglądać i działać dobrze niezależnie od tego, na jakim urządzeniu jest wyświetlana. Cała sztuka polega na sprytnym użyciu break pointów, czyli punktów granicznych, w których layout strony zmienia się, aby lepiej dopasować się do ekranu.
→ Większość developerów będzie doceni, jeśli dostarczysz im dwa podstawowe widoki: desktop (1440px) i mobile (375px).
→ Na desktopie warto trzymać się klasycznej siatki 12 kolumn z marginesami 40px i odstępami między kolumnami 20px – te liczby nie są przypadkowe, bo 12 dzieli się przez praktycznie wszystko, co daje mnóstwo możliwości układania elementów.
→ Na mobile sprawa jest prostsza – wystarczą 2 kolumny z marginesami 16px.
A o czym musisz pamiętać?
1️⃣ Teksty muszą się zmniejszać proporcjonalnie – im większy tekst na desktopie, tym mocniej go zmniejszamy na mobile (na przykład, nagłówek 100px na desktopie może spaść do 50px na mobile).
2️⃣ Z obrazkami też trzeba kombinować – często zdjęcie, które na desktopie jest poziome, lepiej przekonwertować na pionowe na mobile.
3️⃣ No i oczywiście layout – to co na dużym ekranie stoi obok siebie, na małym musi wylądować jedno pod drugim.
Sekretem dobrego responsive designu jest ciągłe testowanie na prawdziwych urządzeniach. DevTools w Chrome (F12) to podstawa, ale nic nie pobije testowania na prawdziwym telefonie. Warto też skorzystać z narzędzi jak np. Figma Mirror, żeby od razu widzieć jak nasz design wygląda na prawdziwym urządzeniu. To szczególnie ważne, bo na mobile używamy palców zamiast myszki - wszystkie przyciski i interakcje muszą być do tego dostosowane.
I najważniejsze - współpracuj z developerami od samego początku projektu. Każdy zespół ma swoje preferencje odnośnie break pointów i sposobu organizacji kodu. Lepiej wiedzieć o tym na starcie i dostosować design, niż później przeprojektowywać całą stronę.
A jak chcesz się nauczyć dobrych praktyk, to najlepiej podglądaj profesjonalne strony na siteinspire.com i analizuj jak zmieniają się przy różnych szerokościach. Dobre strony mają przemyślane wszystkie przejścia i to właśnie na nich najlepiej się uczyć!
🗣️ Branding sprzedawaj dzięki solidnym argumentom
Często się zdarza, że klienci myślą, że branding to tylko logo i system wizualny. Natomiast to cały ekosystem, który znacząco wpływa na postrzeganie marki – jak mówi Jeff Bezos, „marka to to, co ludzie mówią o tobie, gdy nie ma cię w pokoju”.
Dlatego kluczowe jest nadanie brandingowi kontekstu biznesowego. Identyfikacja wizualna to narzędzie, które potrafi zmieniać postrzeganie produktu – np. z taniego na luksusowy. Właśnie dlatego, rozmawiając z klientem, pokaż to na konkretach!
Musisz zbudować wartość swojej pracy używając twardych danych:
→ 60-90% decyzji zakupowych to emocje,
→ 55% pierwszego wrażenia to wrażenia wizualne.
Jednocześnie zbijaj nierealne oczekiwania typu „chcemy efektu wow”. Identyfikacja musi być przede wszystkim unikalna, łatwa w zrozumieniu i zapamiętaniu, skalowalna i zbalansowana między trendami, a ponadczasowością.
❌ W komunikacji z klientem unikaj języka projektowego („ładne”, „ciekawe”, „dynamiczne”).
✅ Zamiast tego mów językiem korzyści biznesowych: „buduje świadomość marki”, „wspiera komunikację”, „pomaga w pracy organizacji”, „podnosi wartość firmy”. I nie bój się pokazywać to na przykładach własnych realizacji, lub też znanych marek.
Najważniejsza rzecz to elastyczność. Inaczej rozmawiasz z korporacją zatrudniającą 3000 osób, a inaczej z MŚP. Dopasuj proces i jego skalę do klienta, żeby go nie wystraszyć.
Efekt? Klient widzi w Tobie zaufanego partnera biznesowego. Rozumie wartość tej inwestycji i czuje się bezpiecznie, bo wie, że pracuje z profesjonalistą, który realnie pomoże mu osiągnąć cele biznesowe. 🤝
.png)
💃 Niech Twoje portfolio będzie dynamiczne
Czas przestać prezentować design stron i aplikacji jako statyczne screeny – serio, to już nie te czasy! Jeśli chcesz, żeby Twoje portfolio robiło wrażenie i przyciągało najlepszych klientów, musisz wskoczyć w świat prototypowania i interakcji.
Czemu? Bo najlepsze projekty cyfrowe mają interakcję tak głęboko wplecioną w swoje DNA, że pokazanie ich na statycznych obrazkach to jak próba wytłumaczenia, jak działa rollercoaster przez zdjęcia. Kto nie odczuł na własnej skórze, ten nie wie z czym to się je! 🎢
Spójrz na aplikację Airbnb – płynne przejścia, naturalne interakcje i UX wzmocniony informacją zwrotną sprawiają, że aż chce się jej używać. Z drugiej strony masz stronę PKP Intercity, gdzie kiepsko zaprojektowane interakcje potrafią doprowadzić do szału. I właśnie dlatego projektowanie interakcji stało się tak kluczowe.
Wiem, co myślisz - ale ja nie koduję. 😬 Aleeee.. nie musisz! Jest cała masa narzędzi, które działają jak pomost między designem a developmentem.
1️⃣ Na początek masz Figmę – ma swoje ograniczenia, ale nawet na niej można wykręcić fajne prototypy.
2️⃣ Jak poczujesz się pewniej, wskakujesz na Principle – więcej możliwości, dalej przyjazny interfejs, możesz robić rzeczy, które wyglądają jak prawdziwa strona.
3️⃣ A jak chcesz naprawdę konkretnie pracować z animacjami, wypróbuj After Effects – co prawda nie zrobisz na nim interaktywnego prototypu, ale do portfolio czy pokazania konceptu developerom jest genialny.
Co zyskujesz robiąc prototypy?
→ Po pierwsze, możesz się pozycjonować jako designer(ka) interakcji (czyt. wyższe stawki!).
→ Po drugie, łatwiej przekonasz klienta do bardziej kreatywnych pomysłów, bo zobaczy je w akcji.
→ Po trzecie, developerzy z pewnością docenią Twoje starania, bo zamiast opisywać im „na sucho” jak ma działać animacja, pokażesz im konkretny przykład.
→ No i najważniejsze - Twoje portfolio przestanie być przeciętną galerią screenów, a stanie się pokazem możliwości nowoczesnego designu.
A wisienka na torcie? Jak już ogarniesz prototypowanie, to masz krótką drogę do motion designu, który jest teraz jedną z najbardziej pożądanych umiejętności w branży kreatywnej. Także przestań się bać interakcji i zacznij eksperymentować. Twoje przyszłe portfolio (i konto bankowe!) Ci podziękują!
✊ Garść typograficznych trików
Projektowanie geometrycznego logotypu może brzmieć nieco egzotycznie. Natomiast, nie taka straszna typo, jak ją malują – kilka prostych zasad może zrobić ogromną różnicę i ułatwić Ci pracę.
Oto co musisz wiedzieć:
1️⃣ Zacznij od dobrego gridu i trzymaj się zaokrąglonych wartości (lepiej 90 niż 91 punktów) – to pomoże Ci wyłapać wszelkie niedociągnięcia.
2️⃣ Pamiętaj, żeby pracować na czarno-białym tle. Taki zabieg poprawi czytelność liter, nad którymi pracujesz.
3️⃣ Korekty optyczne – okrągłe elementy zawsze wyglądają na mniejsze niż proste, więc musisz je delikatnie poszerzyć (plus minus 5 punktów z każdej strony). To samo tyczy się poziomych elementów – zawsze będą wyglądać na grubsze niż pionowe, więc trzeba je nieco odchudzić.
4️⃣ Kolejna ważna rzecz – negative space, czyli przestrzeń między literami. Często o tym zapominamy, skupiając się na czarnych kształtach, ale to właśnie te białe przestrzenie decydują o tym, czy logo wygląda pro, czy amatorsko.
💡 Sprytny trik: odwróć kolory i spójrz na białe litery na czarnym tle – od razu zobaczysz, gdzie trzeba poprawić spacing. Czarno na białym, biało na czarnym!
.png)
Przy projektowaniu poszczególnych liter pamiętaj:
→ „O” nigdy nie powinno być idealnym, matematycznym kołem – potrzebuje korekt optycznych.
→ Kropka nad „i” powinna wisieć między linią x-height, a ascenderem.
→ W literze „B” musisz odchudzić miejsca stresowe (czyli te, gdzie elementy łączą się ze sobą).
→ Litera „N” nie może być po prostu poskładane z prostych elementów – też potrzebuje korekty.
→ Przy literze „C” zawsze tnij prostopadle do szkieletu litery.
I najważniejsze: jeśli wprowadzasz jakąś zmianę (np. ścięcia czy ink trapy), rób to konsekwentnie w całym logo. Spójność to podstawa. ✅
Zacznij od prostszych form i stopniowo dodawaj kolejne elementy, zawsze sprawdzając, jak współgrają z resztą. I pamiętaj – w typografii diabeł tkwi w detalach, dlatego czasem przesunięcie o jeden pixel robi kolosalną różnicę.
