Projektowanie strony z AI po mojemu | Case study MattMedia - case study

Strona internetowa z AI, ale po mojemu. Case study mattolech.pl

Potrzebowałem strony z kilkoma linkami: do Patronite, Discorda, TikToka. Widz wchodzi, wybiera, klika -  proste. Skończyło się na eksperymencie z projektowaniem stron internetowych, kilkoma agentami AI i odwróceniem procesu, który dobrze znam z codziennej pracy.

Kiedy designer robi stronę dla siebie, najwyraźniej nawet przyciski do social mediów muszą mieć swoją historię…

Tak powstała strona internetowa mattolech.pl - moja strona, jako twórcy internetowego. Przy okazji sprawdziłem, jak połączyć autorski kierunek wizualny, pracę agentów AI i treści uwzględniające SEO, GEO oraz AEO (pozycjonowanie stron w Google oraz widoczność dla wyszukiwarek AI - w ogromnym uproszczeniu).

Z jednym warunkiem: nadal to ja podejmuję decyzje.

Najtrudniejszy klient? Ja sam

Na co dzień w MattMedia bardzo często projektuję dla branży medycznej. Po kilku latach pracy w jednym sektorze człowiek wie już, co się z czym je. Rozumie odbiorców, zna kontekst, potrafi przewidzieć część problemów, zanim te pojawią się w projekcie.

Przy własnej stronie ten komfort trochę znika.

Nagle jesteś jednocześnie klientem, designerem, autorem treści i osobą, która mówi: „A może spróbujmy jeszcze inaczej?”. Do tego masz mnóstwo materiałów, wspomnień i pomysłów. Każdy wydaje się wart pokazania.

Dlatego potrzebowałem konkretnego punktu odniesienia: najważniejsze linki mają być na górze. Kto przychodzi po Discorda albo Patronite, powinien od razu wiedzieć, gdzie kliknąć. Historia mojej działalności może pojawić się dalej.

Ten prosty cel porządkował późniejsze decyzje. Również wtedy, kiedy eksperyment zaczął się rozrastać.

Projektowanie strony z AI: co zmieniłem w procesie?

Znam dobrze taki scenariusz: najpierw projekt graficzny, później przekazanie go programiście, wdrożenie, korekty i dopiero gotowa strona. Zależnie od projektu potrafi to trwać tygodniami.

Przy mattolech.pl chciałem sprawdzić, co się stanie, jeśli nie zacznę od kompletnego projektu wszystkich sekcji.

Na co dzień zajmuję się designem i praktycznym wykorzystaniem sztucznej inteligencji. Postanowiłem więc przygotować kierunek wizualny, a do kolejnych zadań zaangażować agentów AI: do researchu, pierwszej wersji treści oraz budowy strony.

Mój proces obejmował cztery etapy: fundamenty wizualne w Figmie, zebranie źródeł, opracowanie i weryfikację tekstów, a następnie projektowanie oraz wdrożenie z korektami.

Zmieniła się kolejność pracy i sposób dochodzenia do gotowego rozwiązania. Nadal trzeba było wiedzieć, dla kogo powstaje strona, co ma robić i po czym poznam, że efekt jest dobry.

Etap 1. Figma, czyli zanim AI zacznie zgadywać

Zacząłem od Figmy, profesjonalnego narzędzia do projektowania interfejsów. Nie przygotowałem jednak pełnej makiety strony ani rozbudowanej księgi identyfikacji wizualnej.

Określiłem podstawy: kolory i ich zestawienia, typografię, wygląd podstawowych przycisków oraz ogólny charakter marki Matt Olech.

Powstało coś w rodzaju uporządkowanej tablicy kierunku wizualnego. Materiał, na podstawie którego można podejmować kolejne decyzje.

Jak uniknąć generycznej strony wygenerowanej przez AI?

W tym projekcie kluczowe było ustalenie języka wizualnego, zanim agent zaczął budować stronę. Dzięki temu miał konkretne wskazówki dotyczące kolorów, typografii i elementów interfejsu.

Jeśli zostawię AI wszystkie decyzje estetyczne, ryzykuję, że dostanę rozwiązanie poprawne, ale wyglądające jak miliony innych stron wygenerowanych za pomocą AI. Zmieniam nazwę, podmieniam zdjęcie i równie dobrze mogłaby to być strona kogoś innego.

A przecież własną stronę robię między innymi po to, żeby było widać, że jest moja.

Dlatego już na tym etapie potrzebny był designer. Ktoś musiał wybrać kierunek, ocenić zestawienia i zdecydować, które pomysły pasują do marki. W tym przypadku byłem to ja - zanim jeszcze zaczęło się właściwe składanie strony.

Etap 2. Agent AI przeszukuje lata mojej działalności

Duża część mojej aktywności internetowej przypada na lata 2010–2018. Sporo się wtedy działo. Pojawiały się materiały i wzmianki o mnie, między innymi w Polskim Radiu, Brief czy WhitePress.

Chciałem zebrać te źródła na stronie. Osobie, która dopiero mnie poznaje, dają kontekst: czym się zajmowałem i skąd wzięła się moja obecność w internecie.

Tyle że odnalezienie materiałów sprzed lat oznacza przekopywanie wyników wyszukiwania, archiwalnych publikacji i odnośników. Do tego zadania zaangażowałem kolejnego agenta AI. Przeprowadził szeroki research i wybrał informacje warte dalszego sprawdzenia.

Research to początek, nie gotowa bibliografia

Lista znaleziona przez agenta wymagała weryfikacji. Trzeba było sprawdzić, czy materiał rzeczywiście dotyczy mnie, czy zgadzają się informacje i czy źródło potwierdza to, co chcę napisać.

To istotne również przy treściach przygotowywanych z myślą o GEO i AEO. Zależało mi na spójnym opisie mojej działalności, który można zestawić z konkretnymi publikacjami.

Samo umieszczenie linku do znanego medium nie daje gwarancji widoczności w odpowiedziach AI. Daje za to czytelnikowi możliwość sprawdzenia, na czym opieram swoją historię.

Etap 3. Teksty pod SEO, GEO i AEO. A potem moja redakcja

Kolejny agent przygotował pierwszą wersję tekstów na stronę. Miał uwzględnić informacje z researchu, charakter marki i podstawy widoczności w wyszukiwarkach oraz systemach udzielających odpowiedzi.

Tutaj warto na chwilę rozszyfrować trzy skróty:

• SEO to optymalizacja strony pod kątem widoczności w wynikach wyszukiwania.

• GEO dotyczy widoczności treści w odpowiedziach generowanych przez systemy AI.

• AEO skupia się na takim opracowaniu informacji, żeby mogły posłużyć jako bezpośrednia odpowiedź na pytanie użytkownika.

W dużym uproszczeniu GEO i AEO można więc opisać jako pracę nad „widocznością dla sztucznej inteligencji”. To oczywiście ogromny skrót myślowy. Nie chodzi o dopisanie kilku modnych fraz. Google w swoich wskazówkach dotyczących funkcji AI w wyszukiwarce podkreśla znaczenie podstaw SEO oraz pomocnych, wiarygodnych treści.

Czy tekst napisany przez AI jest gotowy do publikacji?

U mnie pierwsza wersja trafiła do dokładnego sprawdzenia i redakcji. Weryfikowałem fakty, poprawiałem sformułowania i pilnowałem, żeby tekst brzmiał jak ja.

Jako osoba prowadząca zajęcia z praktycznego wykorzystania sztucznej inteligencji wiem, że płynnie napisany akapit może wyglądać bardzo przekonująco. To jeszcze nie oznacza, że wszystko się w nim zgadza.

Jest też kwestia tonu. Zdanie może być poprawne językowo, a jednocześnie zupełnie nie pasować do człowieka, którego ma przedstawiać.

Dlatego AI przygotowało materiał do pracy. Ostateczny tekst wymagał moich decyzji.

I jeszcze jedno: mattolech.pl miała przede wszystkim ułatwiać przejście do moich kanałów. SEO, GEO i AEO były częścią projektu, ale nie jego nadrzędnym celem. Najważniejsze cały czas pozostawały linki na górze strony.

Etap 4. Projekt i wdrożenie spotykają się w jednym procesie

Do właściwej budowy strony wykorzystałem kolejnego agenta AI, wyposażonego wcześniej w odpowiednie instrukcje i umiejętności.

Miał już kierunek wizualny oraz materiał tekstowy. Mimo to potrzebował doprecyzowania wielu szczegółów. I dobrze, bo między „mamy kolory i przyciski” a „mamy przemyślaną stronę” jest jeszcze sporo pracy.

Na tym etapie pojawiają się pytania takie jak:

• Czy nawigacja ma prowadzić do sekcji na jednej stronie, czy do osobnych podstron?

• Które linki powinny być najbardziej widoczne?

• Co użytkownik ma zobaczyć na pierwszym ekranie telefonu?

• Gdzie umieścić historię działalności i materiały z mediów?

• Jaką rolę ma pełnić zdjęcie i jak powinno być kadrowane na mniejszych ekranach?

To decyzje, które wpływają na codzienne korzystanie ze strony. Trzeba je podjąć niezależnie od tego, kto później pisze kod.

Pierwsza wersja i znajome: „tutaj coś nie gra”

Po pewnym czasie powstała pierwsza wersja strony. A razem z nią pierwsza lista korekt: tu coś jest nierówno; tam zdjęcie ucina się w niewłaściwym miejscu; ten element wymaga poprawy.

Designer zauważa takie rzeczy niemal automatycznie. Potrafi też określić, dlaczego dany fragment nie działa, zamiast poprzestać na „jakoś mi się nie podoba”.

Na tym etapie moje doświadczenie było równie potrzebne jak przy pracy w Figmie. Oceniałem efekt, wskazywałem problemy i dopracowywałem stronę z pomocą AI. Po korektach można było wdrożyć ją na serwer.

Co powstało z pomysłu na kilka linków?

Powstała strona, która łączy dostęp do moich kanałów z kontekstem mojej działalności internetowej. Własny kierunek wizualny, teksty po redakcji, zebrane źródła i najważniejsze odnośniki na górze.

Możesz zobaczyć efekt na mattolech.pl.

Z perspektywy projektowej najciekawsza była możliwość pracy nad wyglądem i działającą stroną w blisko powiązanym procesie. Mogłem oceniać kolejne rozwiązania i wprowadzać korekty, korzystając z pomocy agentów przy różnych zadaniach.

To case study opisuje sposób powstania strony. Na ocenę jej skuteczności w SEO, GEO i AEO potrzeba osobnych danych - samo uwzględnienie tych obszarów podczas pisania nie jest jeszcze wynikiem.

Czy AI zastąpiło mnie przy projektowaniu własnej strony?

AI wykonało część pracy związanej z researchem, przygotowaniem treści i budową strony. Ja określiłem cel, stworzyłem fundamenty wizualne, sprawdzałem informacje oraz oceniałem i poprawiałem kolejne wersje.

Tak właśnie podchodzę do projektowania stron z wykorzystaniem sztucznej inteligencji w MattMedia. Interesuje mnie to, gdzie można sensownie zmienić proces i wykorzystać możliwości narzędzi. Równie mocno interesuje mnie jakość tego, co ostatecznie zobaczy użytkownik.

Wizja, że wpiszę „zrób mi stronę, ale szybko, dla mojej branży” i za chwilę dostanę gotowy projekt idealnie dopasowany do moich potrzeb, brzmi wygodnie. No, ale tak to nie działa XD

Nadal trzeba umieć powiedzieć, czego się chce. Zauważyć, co nie działa. Sprawdzić, co jest prawdą. I wiedzieć, kiedy kolejna propozycja faktycznie poprawia projekt.

W tym eksperymencie AI przydało mi się najbardziej wtedy, kiedy miałem jasno określony cel i potrafiłem ocenić rezultat jego pracy.

Jeśli szukasz podobnego podejścia do swojej strony - z autorskim designem, przemyślaną treścią i praktycznym wykorzystaniem AI - porozmawiajmy o projekcie w MattMedia.

Bezpłatna konsultacja