W przypadku dużych i skomplikowanych stron koniecznym etapem przed rozpoczęciem projektowania graficznego jest makietowanie, czyli tworzenie prototypu strony skupiającego się na jej strukturze, rozłożeniu poszczególnych elementów, ich wielkości oraz zachodzących pomiędzy nimi interakcjach.

Jednym z darmowych narzędzi do tworzenia makiet jest Mockingbird. W prawdzie w wersji free możemy posiadać tylko jeden aktywny projekt, aczkolwiek nie ogranicza nas żaden okres próbny.

Kto zajmuje się makietowaniem?

W zależności od wielkości agencji tworzenie makiet stron może leżeć w obowiązkach: UX Designera, grafika bądź PM'a. Nawet jeśli nie leży to w twojej gestii, aplikacja ta jest niezbędna do przedstawienia prototypu klientowi.

Zalety Mockingbird

• nielimitowana czasowo wersja free,
• dowolna ilość podstron w projekcie,
• projektowanie w gridzie,
• duplikowanie projektów,
• opcja aktywnych linków,
• szeroka biblioteka gotowych elementów,
• łatwość wprowadzenia zmian (przenoszenie kilku elementów jednocześnie, kopiowanie gotowych elementów),
• opcja wybierania kolorów tła i tekstów, ładowania własnych grafik,
• udostępnianie projektu innym osobom z opcją edycji lub podglądu.

A wy jakiego programu używacie do makietowania?

Kim tak właściwe jest ten freelancer?

Wolny strzelec, człowiek bez etatu, pracujący na zlecenie, często sprzed własnego biurka bądź w lokalu coworkingowym czy ulubionej kawiarni. Dumny ze swojej niezależności, przeciwnik korpo i wszelkich granic nakładanych przez umowę o pracę. Najczęściej jest grafikiem, developerem, programistą, copywriterem, fotografem bądź dziennikarzem.



Przez nieustanne zapotrzebowanie na rynku, agencje często są zmuszone do pracy z freelancerami w ramach realizacji konkretnych projektów. Czego ja osobiście bardzo nie lubię, dlaczego?

1. Brak kontroli
   
   Moja praca w znacznej mierze polega na kontrolowaniu tego co robią moi współpracownicy i sprawdzaniu czy projekt idzie w dobrym kierunku. Freelancerzy bronią się przed tym rękami i nogami. W końcu narusza to ich świętą niezależność.
2. Pojęcie dnia pracy
   
   Mój dzień pracy to 8.00-16.00. Ewentualnie 8.00-17.00, więc kiedy mówię, że potrzebuję tego na dzisiaj, znaczy, że chcę to wysłać przed 17.00. Nie o 23.50.
3. Problem z komunikacją
   
   Praca na odległość sprowadza się do tego, że kontakt ogranicza się do komunikatorów internetowych, maili i telefonów. A freelancerzy tych bardzo nie lubią. Tempo ich odpisywania i częstotliwość odbierania telefonów zostawia wiele do życzenia.
4. Deadline, ale co to?
   
   Czasami odnoszę wrażenie, że to pojęcie jest dla nich obce lub wręcz wzbudza w nich panika. gdy jego termin się zbliża potrafią zapaść się pod ziemię.
   
5. Poczucie wyższości
   
   Wolni strzelcy często uważają się za lepszych od nas - ludzi na etach i równie często lubią to pokazywać.

Kiedy wchodzimy do branży jedną z pierwszych barier jaka przed nami staje to bariera komunikacyjna. To nic dziwnego, jeśli przez pierwszy miesiąc będziecie się czuć jakbyście trafili do innego kraju bądź na inną planetę. I nic złego, jeśli będziecie pytać się o znaczenie niezrozumiałych wyrażeń czy sprawdzać je w Google. Aby ułatwić wam proces aklimatyzacji przygotowałam zbiór najczęściej padających wyrażeń w biurze agencji interaktywnej. Dziś część pierwsza alfabetu: A-F.

A jak Account

B jak brief

C jak call to action

https://www.facebook.com/klauzuladobregosmaku/

D jak deadline

F jak Fuckup (fakap)

źródło: https://www.facebook.com/klauzuladobregosmaku/

Znaczna część z Was pamięta zapewne jeszcze czasy, kiedy pisma urzędowe, CV czy nawet magisterkę pisało się na maszynie bądź ręcznie. Trudno mi pojąć tą udrękę (w moim przypadku skończyło się na pracach domowych w gimnazjum). W dzisiejszych czasach trudno wyobrazić sobie, aby oddać któryś z tych dokumentów w takiej formie. To samo tyczy się wszelkich innych pism biznesowych.

Aby projekt przebiegał sprawnie każdy z jego uczestników powinien jasno znać swoje zadania. Zarówno te, które ma do wykonania teraz jak i te, które powinien zrobić w najbliższym czasie. Co więcej project manager nadzorujący całość powinien nieustannie mieć kontrolę nad tym co jest w planach, nad czym aktualnie pracują jego ludzie oraz co zostało jeszcze do zrobienia. Dlatego dzisiaj zaczynam cykl opisujący darmowe narzędzia przydatne dla każdego zespołu projektowego.

Czym jest trello?

Żyjemy w czasach kiedy wszystko przenosi się do sieci - począwszy do prasy, telewizji, relacji międzyludzkich na zakupach kończąc. Dzięki trello do internetu przeniosła się także biała tablica wisząca w każdym biurze. Co więcej daje nam niż ta offline?

• możemy tworzyć nieskończoną ilość tablic, do której mamy dostęp z każdego miejsca na ziemi podłączonego do internetu (trello funkcjonuje także w formie aplikacji mobilnej),
• naszą tablicę widzą jedynie ludzie, który nadamy dostęp (opcja tworzenia organizacji),
• możemy dowolnie zmieniać nazwy tablic, list i kart oraz mnożyć ich ilość,
• możemy na bieżąco podglądać status zmian,
• do każdej karty możemy załączyć plik, dodać zdjęcie, przypisać osobę, dodać deadline oraz nadać labelkę.

Jak zorganizować board na trello?

Struktura boardu w trello

W każdym moim boardzie projekt podzielony jest na poszczególne etapy powstawania wyznaczone przez listy:

• info
• in progress
• waiting for accept
• design
• development
• implementation
• tests
• bugs
• done.

Jest to najprostszy sposób na to, aby zobaczyć na jakim etapie znajduje się projekt.

widok karty

Każda karta jest kolejnym zadaniem do wykonania i jak każda może mieć pod-zadania (checklisty). Dzięki komentarzom oraz opcjom dodawania plików możemy rozbudowywać ją o informacje niezbędne do wykonania zadania. Dodawanie członków (members) pozwala na przypisywanie tasków do konkretnych osób. Bardzo istotną opcją jest także "due date", dzięki któremu możliwe jest wyznaczenie czasu na jego wykonanie. Dodatkowo trello udostępnia nam funkcję labelek. Ja wykorzystuję ją do oznaczenia priorytetu zadania (każdy kolor to inny priorytet). Ważne! Pamiętacie, żeby kliknąć "subscribe", jeśli chcecie być informowani o zmianach zachodzących na karcie.

Jedną z cech, za którą kocham tą branżę to nieustanny rozwój. Tempo zmian, pojawiania się nowych technologii i trendów jest zadziwiające. Wystarczy porównać strony sprzed 10, ba! 5 lat, do dzisiejszych, by zobaczyć jak bardzo internet poszedł do przodu (dla tych, którzy już wyparli te czasy z pamięci w galerii screen z Facebooka z 2004 r.).



To zabójcze tempo narzuca 2 rzeczy: po pierwsze należy dbać o odświeżanie layoutu strony internetowej nie rzadziej jak co 3 lata (nie wspominając o bieżącej aktualizacji frameworka, na którym jest zaimplementowana). Po drugie, aby nie zostać w tyle, powinniśmy na bieżącą śledzić najnowsze trendy. W tym celu zamieszczam moją bazę inspiracji, do której zaglądam minimum raz w tygodniu.

Facebook 11 lat temu.

1. Awwwards

Zdecydowanie mój nr 1. Wprawdzie rozwiązań użytych na stronach będących wysoko w rankingu nie wprowadzisz na stronie salonu fryzjerskiego, aczkolwiek nie znaczy to, że nie zainspirują cię bądź twojego grafika to stworzenia wspaniałego layoutu.

2. Codrops

Dużo darmowych, ciekawych rozwiązań, które możesz podpowiedzieć swoim programistom i designerom. Znajdziesz tam interesujące pluginy, biblioteki efektów i minimalistyczne layouty, a wszystko to z live preview i szerokim opisem zawierającym kod html i css. Ponadto na stronie jest mnóstwo tutoriali oraz aktualizowany co tydzień dział colletive, będący zbiorem najnowszych trendów w projektowaniu i kodowaniu stron oraz linków do darmowych fontów czy kolekcji ikon.

3. Behance

Facebook dla designerów. Tutaj każdy może pochwalić się swoimi pracami i podejrzeć czyjeś, które możesz przeglądać względem kategorii, popularności i kraju.

4. Creative market

Portal, na którym możesz zakupić szablony, fonty i grafiki. Co tydzień też świeża porcja darmowych rzeczy do pobrania.

5. Envato market

Kolejny market, który nie tylko dzięki zaawansowanej wyszukiwarce jest wspaniałą bazą inspiracji (m.in, wyszukiwanie po tagach czy branżach), ale także rozdaje wiele za free! W każdym miesiącu coś innego. Za darmo ściągnąć można nawet szablony rozbudowanych stron, kosztujących standardowo blisko 60$. Warto, więc zaglądać ;)

Więcej na temat zmian znajdziecie w raporcie przygotowanym przez Interaktywnie.com


Jeśli macie własne bazy, wrzucajcie je w komentarzach. Chętnie powiększę swoją! ;)

Przy współpracy z niektórymi klientami miałam wrażenie jakbym pracowała z dzikim zwierzęciem, a nie cywilizowanym stworzeniem poruszającym się w świecie biznesu. Jednak i takie osobniki można ujarzmić. Oto 11 złotych zasad, dzięki którym poskromisz każdego klienta.

1. Wyznacz zasady.

Nie ma nic gorszego niż praca bez ustalonych zasad współpracy. Dlatego jeszcze przed rozpoczęciem projektu powinieneś wyjaśnić sobie z klientem jak będzie realizowane zlecenie, ile poprawek może wnieść, jakie terminy będą was obowiązywać. Tak - was, bo nie tylko ty powinieneś oddawać poszczególne etapy na czas, ale i on powinien zgłaszać uwagi i płacić w określonym przedziale czasu. Śmiem zaryzykować, że 80% projektów kończy się niepowodzeniem dla którejś ze strony właśnie przez brak ustaleń. I pamiętaj! Wszystko miej na piśmie.

2. Trzymaj się zasad.

Niekonsekwentny project manager to zły project manager. Kiedy raz dasz się złamać klientowi, będzie to wykorzystywał przeciwko Tobie przy każdej nadarzającej się okazji. Nie dość, że narobisz sobie pleców z budżetem to stracisz w oczach swojego zespołu, a tego chyba nie chcesz, prawda?

3. Bądź empatyczny.

Wszystko ma swoje granice, także konsekwencja. Nie szantażuj więc klienta, jeśli spóźni się 1 dzień z odpowiedzią. On, tak jak i ty, miewa fuckupy w swojej pracy. Wykaż się zrozumieniem, a zobaczysz, że wróci ono do ciebie w kryzysowej sytuacji.

4. Bądź szczery.

Nigdy nie okłamuj klienta. Jeśli zdarzyło się coś, czego nie przewidziałeś, pojawiła się komplikacja ważąca na powodzeniu projektu, nie mydlij oczów klientowi, że wszystko idzie jak z płatka. Oczywiście ważne, aby nie siać zbędnej paniki. Informuj klienta o problemach, kiedy naprawdę wyczerpałeś już wszystkie możliwe sposoby na jego rozwiązanie.

5. Nie składaj obietnic bez pokrycia.

Dzwoni do Ciebie Pani Asia i ślicznie prosi, że potrzebuje projekt tego plakatu na jutro, bo inaczej szef ją udusi. Naprawdę bardzo lubisz Panią Asię, ale twoi graficy są zawaleni robotą na cały najbliższy tydzień i nie znajdziesz nawet godziny, aby wepchnąć im ten plakat. Dobrze zdajesz sobie z tego sprawę. Jednak pod urokiem Pani Asi obiecujesz, że dostarczysz jej ten plakat. Pani Asia jest w siódmym niebie. Twój grafik za to ma ochotę Cię zabić. Robi plakat, ale "na odpierdol". W związku z tym, że ani Ty, ani on nie macie czasu na jego szlifowanie, wysyłasz to coś klientce. Pani Asia dzwoni oburzona co do jakoś wykonania i żąda poprawek i to natychmiast! Znasz to skądś? To zacznij wyciągać wnioski.

6. Edukuj klienta.

Powód, dla którego ludzie od pradziejów decydują się na skorzystanie z usług innych jest jeden - nie posiadają umiejętności bądź wiedzy potrzebnej do zrealizowania danego produktu. Dlatego też nie wymagaj od swojego klienta, żeby wiedział co to jest hover, submenu czy zafiksowany sidebar. Nie dziw się także, że ma on zazwyczaj mylne pojęcie co do czasu potrzebnego na wykonanie danego zadania. Twoją funkcją jest nauczenie go tego co konieczne (przede wszystkim cierpliwości i wyrażania jasno swoich oczekiwań), aby wasza współpraca przebiegała pomyślnie.

7. Nie daj ponieść się emocjom.

Czasami słowa mogą zaboleć i wyprowadzić z równowagi. Kiedy czujesz, że jesteś już na skraju załamania, zakończ rozmowę. Zrób kilka głębokich wdechów, uderz pięścią w ścianę, poprzeklinaj, ponarzekaj koledze z biurka obok. Nigdy jednak nie pozwól na to, aby wybuch wystąpił przy kliencie, bo wówczas wasze relacje nigdy nie wrócą już na prawidłowe tory. Nawet na najbardziej obraźliwe maile i telefony odpowiadaj ze spokojem i profesjonalizmem. Daj sobie czas. Nie musisz odpowiadać w ciągu 30 sekund. Z resztą to nigdy nie jest dobre rozwiązanie.

8. Rób swoje.

Jeden z najczęstszych błędów początkującego project managera, który ja też swojego czasu popełniałam, jest rzucanie wszystkiego i natychmiastowe reagowanie na prośbę klienta. Chaos, który wprowadzasz takim działaniem, zmniejsza twoją produktywność co najmniej o 50 %. Dlatego jeśli jesteś zajęty jakimś zadaniem, uczestniczysz w spotkaniu, nie odbieraj telefonów, nie odpowiadaj na e-maile. Wyślij tylko grzecznościową wiadomość, że nie możesz teraz rozmawiać i skontaktujesz się jak to tylko będzie możliwe (to bardzo ważne, bo zbywany, niepoinformowany klient to wściekły klient). Działaj według planu i uświadom delikatnie klienta, że nie jest on jedynym. Pamiętaj jednak, aby go przy tym nie obrazić.

9. Przyznawaj się do błędów.

Nikt z nas nie jest nieomylny. Ja i ty także. Dlatego nie bój się przyznać, że nie miałeś racji. Klient na pewno to doceni.

10. Potwierdzaj mailowo.

Nie ma jednej prawdy. Są tylko jej wersje. Dlatego wszystkie ustalenia zawarte ustnie, potwierdzaj na piśmie - w e-mailu czy umowie. Tym sposobem zawsze będziesz mógł do nich wrócić, gdy pamięć zawiedzie Ciebie bądź twojego klienta.

11. Pamiętaj kto jest sponsorem projektu.

Właśnie założyłeś własną firmę. W związku z tym, że jesteś świadomym przedsiębiorcą, wiesz, że to czego nie ma w internecie nie istnieje. Jednym z pierwszych celów na twojej liście jest więc firmowa strona internetowa. I tak jak w przypadku samochodu, jej cena zależy od wielu parametrów.

Pierwsza zasada kontaktu z klientem: wszystko miej na piśmie. 

Nie ważne jak bardzo wydaje się uczciwy, jak miło wam się rozmawia i jak długo się znacie. Wszystkie ustalenia ustne potwierdzaj mailowo. Korzyści z tego jest wiele:

• pamięć ludzka jest zawodna. a dzięki mailom zawsze możesz wrócić do uzgodnień,
• nikt nie wmówi Ci, że zostało coś obiecane, powiedziane inaczej - na wszystko zawsze masz potwierdzenie,
• dzięki pisaniu poprawiasz swoją pamięć - powtarzanie sprzyja przyswajaniu.

Na potrzeby tego artykułu załóżmy, że mail to twoja pierwsza broń. Oto kilka złotych zasad jak zachować porządek w skrzynce, tak aby odnalezienie maila sprzed 2 tygodni nie zajęło Ci 2 godzin.

Jeśli na co dzień pracujesz przy budowie stron, aplikacji czy serwisów internetowych, wiesz jak ważnym narzędziem jest przeglądarka i jak wiele od niej zależy. Osobiście należę, tak jak blisko 1/3 internautów, do fanów Chrome. I to nie tylko ze względu na jego design, komunikację z kontem Google i jego narzędziami, ale przede wszystkim za jego rozszerzenia. Oto kilka z nich, który każdy PM powinien mieć w swojej przeglądarce.

1. Perfect Pixel
   
   Twój projekt przeszedł już tą nieszczęsną fazę projektowania grafiki, wszystkie widoki są zaakceptowane. Frontend rozpoczął pracę. Czas na testy. Funkcjonalność to pierwsza rzecz jaką sprawdzasz. Nie należy jednak zapominać także o tym, czy to co przygotował designer pokrywa się z tym co zostało zakodowane. I w tym momencie właśnie przydaje się Perfect Pixel. To proste rozszerzenie pozwoli Ci nałożyć dowolny plik graficzny na stronę otworzoną w przeglądarce, dzięki czemu będziesz mieć pewność, że odległości i wielkości są takie same jak na projekcie.
2. Page Ruler
   
   Klient albo programista zadaje Ci to niezręczne pytanie jakie wielkości ma być ten obrazek czy guzik. Zamiast przykładać linijkę do ekranu, włącz ją w przeglądarce. Dzięki Page Ruler łatwo zmierzysz każdy element strony, a wynik zostanie Ci podany w pixelach.
3. WhatFont 
   
   "Chcę taką czcionkę (albo lepiej trzcionkę) jak na tej stronie ...!" - wykrzykuje klient. Pierwsze co powinieneś zrobić to poprawić klienta, iż w internecie nie ma czcionek (czy trzcionek) a FONTY. Drugą rzeczą jest uruchomienie zgrabnego dodatku WhatFont. Wystarczy najechać kursorem na daną treść, a zaraz poznasz wszystkie parametry użytego fontu - jego rodzinę, wielkość, kolor. Możesz nawet podejrzeć jak wyglądają pozostałe litery. Uwaga: Pamiętaj, że dodatek działa tylko na tekstach. Jeśli jakiś geniusz wrzucił tekst jako obrazek i WhatFont nie pomoże.
4. ColorPick Eyedropper
   
   Kolor zachmurzonego nieba, świeżo ściętej trawy, 50-letniego wina - z ColorPickerem nic nie będzie Ci już straszne. Wystarczy Ci stroną, na której użyty jest nazwany przez klienta kolor. Następnie włączać rozszerzenie, maczasz pędzel i dostajesz odpowiedź w postaci kodu. Proste, prawda?
5. Adblock
   
   Jeśli należysz do grupy świadomych użytkowników internetu to reklamy po pierwsze na Ciebie nie działają, po drugie instalujesz Adblocka i ich po prostu nie widzisz. Koniec z wyskakującymi okienkami, irytującymi automatycznie odtwarzającymi się reklamami. Nic tylko cieszyć się czystymi stronami :)

Uwaga: Niektóre z dodatków zainstalowanych w twojej przeglądarce mogą powodować, że niektóre strony wyświetlają się nieprawidłowo. Zanim wszczniesz alarm, sprawdź czy bug występuje także w trybie incognito.

Kiedy mówię rodzinie, że pracuję jako Project Manager w agencji interaktywnej, słyszę pytanie: to znaczy co robisz? I nie jest to związane z użyciem angielskiego odpowiednika stanowiska, bo fraza "kierownik projektów" dla osób nie pracujących nigdy w organizacji czy firmie, gdzie figuruje takie stanowisko, mówi równie wiele.

Koordynowanie, nadzorowanie, organizowanie, dbanie o komunikacje, terminy i zgodność liczb - tym w wielkim skrócie zajmuje się na co dzień. I wbrew temu co może się wydawać, nie jest to łatwa praca. Wymaga bowiem wielozadaniowości, empatii, doskonałych wręcz zdolności komunikacyjnych, radzenia sobie ze stresem i problemami, umiejętności zarządzaniem czasem swoim i innych i przede wszystkim, jak przyszło nam mówić w mojej pierwsze agencji - jest to nieustająca walka z debilami.

Walczysz z klientami, którzy nie potrafią zrozumieć dlaczego to tyle kosztuje i dlaczego ta strona nie działa na przeglądarce IE 8 (która wyszła 6 lat temu); walczysz z szefem, który zmusza cię do zrobienia czegoś co nie będzie dobre ani dla projektu, ani dla twojego zespołu, ani dla klienta (choć teraz może mu się wydawać inaczej); walczysz z zespołem - z grafikiem, który nie chce zmienić przycisków na prostokątne, bo to nie pasuje do jego wizji, z programistą, który uważa że ten element specyfikacji jest zbędny i on nie będzie tracił na niego czasu; walczysz z samym sobą - żeby nie wyjść, nie trzasnąć drzwiami i nie wyzwać ich wszystkich od debili. Ot taka codzienność.


Mimo wszystko kochasz tą pracę. Za satysfakcję, którą Ci daje, gdy znajomi korzystają ze stron, których projekt prowadziłeś. Za to że codziennie uczysz się czegoś nowego. Za atmosferę i tempo. Za to, że czasami udaje Ci się wygrać te małe bitwy. Za brak nudy i emocje. Za poznawanie nowych ludzi i pracę z różnymi branżami.

I choć o tym wcale nie marzyłeś (czy ktoś z Was zapytany w przedszkolu, ba nawet po maturze, marzył o pracy jako PM?) i ta praca trafiła Ci się całkiem przypadkiem, to nie wyobrażasz sobie, żeby robić w życiu coś innego.