Spotkałam się ze stanowiskiem, że szkicować projekty to może sobie tylko grafik, który pracuje nad wielkim projektem, który trwa miesiącami i że nikt normalny nie ma na to czasu. I całkiem się z tym stwierdzeniem nie zgadzam. Niezależnie czy pracowałam w agencji i robiłam coś na wczoraj, czy pracując w domu robiłam projekt, który trwał dwa dni, czy dwa miesiące – zawsze znalazł się czas na to aby coś naszkicować.
Czym jest szkic, czym jest makieta?
I teraz żeby nakreślić co rozumiem przez szkic – chodzi o szybki, nawet kilkusekundowy rysunek, zarys koncepcji, który pozwoli mi na samym początku znaleźć a – pomysł, b – kompozycję, c – proporcję. Nie mówię tu o wymuskanych rysunkach, które same w sobie mogą stanowić dzieło godne pokazywania na dribblu czy behancie. Nie, to są raczej rzeczy, których nie pokazuje się szerszej publiczności, no może poza zespołem, z którym się pracuje.
Inna sprawa jest z makietami. Makiety mogą być dostarczone w formie szkicu ale nie każdy szkic będzie przecież makietą. Na stworzenie makiety będziemy potrzebować trochę więcej czasu. Czym różni się makieta od szkicu? Makieta ma przede wszystkim za zadanie pozwolić nam na analizę i przebadanie gotowego projektu pod względem jego funkcjonalności. Na makietach możemy już przeprowadzać pierwsze testy z użytkownikami. Nie każdy projekt będzie wymagał makietowania ale jako freelancerzy możecie spotkać się z taką prośbą od strony zlecającego. W idealnym świecie robieniem makiet i prototypów zajmują się UX designerzy.
Jeżeli do tej pory nie zajmowaliście się prototypowaniem i nie macie podstawowej wiedzy dotyczącej usability ten poradnik Wam jej nie dostarczy 🙂 To bardzo obszerny dział projektowania nieograniczający się jedynie do rysowania szarych prostokątów. Grzechem byłoby jednak nie wspomnieć o etapie makiet, chciałam choć trochę przybliżyć ten temat.
szkice i materiały referencyjne do projektu aplikacji mobilnej
No i tak, uściślając jeszcze. Wszystkie teksty, które tworzę to wynik mojej pracy, doświadczenia i doświadczeń osób, z którymi pracuję i którzy byli chętni się swoimi doświadczeniami podzielić. Nie oznacza to wcale, że jeśli Twój proces pracy wygląda zupełnie inaczej, to robisz coś źle. Wręcz przeciwnie. Każdy proces jest dobry, pod warunkiem, że przynosi oczekiwane efekty. Są ludzie, którzy przed namalowaniem obrazu muszę poślinić pędzelek i dopiero zamoczą go w farbie, są tacy, którzy bez porządnego researchu nie siądą do zaprojektowania na przykład mailingu. A są tacy, którzy mają na tyle dużo wiedzy, umiejętności i doświadczenia, że od razu mogą usiąść do komputera i trzasnąć w godzinę super projekt. Ideą tych wpisów jest raczej pokazanie osobom, które dopiero za-czy-na-ją, że mogą pracować na różne sposoby i dzięki temu wybiorą sobie ten, który im najbardziej odpowiada.
Czy trzeba szkicować?
Nie. Nie ma żadnego złotego przykazania, przymusu, zasady, która mówiłaby, że bez szkicowania żaden z Ciebie projektant. Nie zmienia to faktu, że szkicowanie może (nie musi) bardzo Ci pomóc. Dlaczego ja szkicuję? Jak wspomniałam, dla mnie to szybki sposób na nakreślenie jakiegoś pomysłu, idei, którą będę mogła potem rozwinąć.
Projektując stronę, w zależności od rodzaju zlecenia zazwyczaj ma się od kilku godzin do kilkunastu dni na przedstawienie swojego projektu. I w sumie nie ma zasady, bo zdarza się, że zarówno mali klienci, jak i duże firmy i agencje reklamowe dadzą nam mniej lub więcej czasu na przygotowanie. Moja praca zaczyna się w momencie otrzymania briefu lub wstępnego birefowania na spotkaniu lub przez telefon. Zazwyczaj mam pod ręką jakąś kartkę i długopis, w torebce trzymam mały notes lub kalendarz, więc w razie potrzeby, kiedy wpadnie mi do głowy jakiś pomysł, mogę go od razu zanotować lub narysować.
Mając kilka dni na pracę, mamy czas na to aby dokładnie przemyśleć i przeanalizować to, co jest naszym zadaniem. Jest czas na to aby odpalić komputer, przejrzeć inspirujące strony, strony konkurencyjne, zagraniczne odpowiedniki. Poznać specyfikę produktu lub usługi, o którym będzie strona. I mamy czas żeby szkicować. I szkicować i jeszcze więcej szkicować.
W moim przypadku to czasem też krótkie notatki, notowanie słów, skojarzeń, spostrzeżeń. To taki mały, słowny moodboard, z którego czasem robi się mała sterta papierów.
No to warto szkicować?
Warto! To prosty sposób na przetestowanie pomysłów nie inwestując w to zbyt dużo czasu. Możemy wyprodukować całkiem sporo drobnych szkiców w krótkim czasie a potem wybrać najlepsze z nich. Na nich skupimy większą uwagę i dopracujemy je na etapie makietowania lub projektu graficznego. Poza tym, nie potrzebujemy specjalnych umiejętności do szybkiego przelania pomysłów na papier. Nie ogranicza nas w żaden sposób narzędzie, które stosujemy – o moment kiedy skupiamy się na najważniejszym – POMYŚLE, a nie zastosowaniu konkretnego efektu wizualnego (tu gradiencik, tam gradiencik, ten zielony bardziej zielony, a ten czarny bardziej czarny ;)).
przykłady makiet dla dwóch różnych projektów, aplikajci webowej i responsywnej wersji strony
A co z makietami?
Wiadomo, że inaczej wygląda proces projektowania strony kiedy jesteśmy freelancerami a zupełnie inaczej, kiedy siedzimy w biurze i pracuje nad projektem cały zespół. Pracując samodzielnie klientowi pokazuję wstępne projekty (czasem jeden, czasem kilka), na bazie, których powstaje ostateczna wersja. Wielu klientów nie rozumie idei makietowania i otrzymując szkice lub makiety lo-fi możemy spotkać się z zarzutem, że co my w ogóle robimy, przecież tam nie ma kolorów! 😉 Możemy obrać dwie drogi, nauczyć klienta co właściwie prezentujemy lub pominąć etap prezentacji makiet i pracować na nich samodzielnie (np. aby przetestować układ i proporcje elementów).
Pracując dla agencji lub biur projektowych prawdopodobnie dostaniemy makiety, na których mamy opierać się tworząc grafikę do strony. Często również jedna osoba zajmuje się makietowaniem i grafiką. To jak obszerny będzie zakres Waszych usług zależy tylko od Was. Można równie dobrze makietować, projektować i kodować. Ba, zajmować się również SEO. Ja w moich poradnikach ograniczę się tylko do warstwy wizualnej 🙂
Trójkąty i kwadraty…
No może nie całkiem trójkąty. Ale szare kwadraty i prostokąty to pierwsze co kojarzy się z makietami. Bo z grubsza tak to wygląda. Zamiast używać zdjęć ze stocka i pięknie dopracowanych grafik używa się w makietach placeholderów (najczęściej w formie przekreślonego prostokąta), zamiast skupiać się na palecie kolorów używamy odcieni szarości, rozbudowane interakcje w statycznych makietach zastąpią natomiast komentarze. Dlaczego tak? To przede wszystkim oszczędność czasu, a czas ten można poświęcić na dopracowanie funkcjonalności zamiast zastanawianie się nad odpowiednim kształtem ikonek w przyciskach.
Makiety lo-fi i hi-fi
O ile w przypadku szkiców, które robimy dla siebie nie ma żadnych wymagań o tyle w przypadku makiet i prototypów możemy spotkać się z określeniem lo-fi lub hi-fi. Co oznaczają te tajemnicze skróty?
Makieta lo-fi to makieta, która charakteryzuje się małym stopniem szczegółowości. Znajdziemy na niej zarysy najważniejszych elementów na stronie – pola tekstowe, przyciski, formularze. Makiety lo-fi robi się szybko co pozwala na szybkie stworzenie kilku alternatywnych wersji układów poszczególnych elementów. Do stworzenia takiej makiety wystarczy kartka i ołówek, można ją również zrobić w Axure lub po prostu w Photoshopie. Nieważne jest tu narzędzie, liczy się efekt. Kiedy mam pełną dowolność w jakim formacie dostarczyć makiety wybieram zazwyczaj Photoshopa. Łatwo jest wtedy z makiet lo-fi przejść na hi-fi a następnie pracować nad grafiką na ich podstawie.
Makieta hi-fi to już makieta, która pokazuje więcej detali. Jest dużo bliższa końcowego efektu niż makieta lo-fi. To makieta, nad którą pracuję kiedy mam zaakceptowaną jedną koncepcję oraz wstępny układ elementów. Poprawki w takiej rozbudowanej makiecie robi się dużo wolniej. W hi-fi tkwi też pewien mały haczyk, który może okazać się problematyczny. Przez to, że makieta przypomina końcowy produkt klient może za bardzo zafiksować się na wyglądzie poszczególnych elementów niż samym układzie i poszczególnych funkcjonalnościach.
Podsumowując…
Etap szkicowania może być elementem researchu lub po prostu kolejnym etapem pracy nad projektem strony. Warto poświęcić na niego chociaż kilka minut. Potraktujmmy to raczej jako szybki sposób na generowanie pomysłów zamiast skupiać się na pięknej formie – szkice nie muszą być piękne 🙂
