Branża interaktywna to obszar, który nieustannie się rozwija. Aby nie pozostać w tyle należy nieustannie śledzić nowinki. Dziś przedstawiam Wam alternatywę do scrollowania Facebooka po raz n-ty w ciągu dnia. Oto moja lista miejsc w sieci, która pozwala mi być na bieżąco. Dla ułatwienia podzieliłam ją na dwie kategorie: Polska i świat.

Świat

Polska

Przejrzenie awwwardsów to jeden z moich rytuałów dnia powszedniego. I wcale nie chodzi o to, że te wszystkie strony są idealne - nie. Często dziwi mnie dlaczego w zestawieniu znalazła się strona, która nie jest dostępna w rozdzielczości 1366 x 768 px, stanowiącej 30% rynku. Bądź wygląda na niej tak źle, że ciężko ją oglądać, nie mówiąc o tym, żeby cokolwiek się z niej dowiedzieć. Jest tam jednak tyle inspirujących projektów, że ciężko tam nie wracać.




Boli jednak to, że tak rzadko pojawią się w tym miejscu dokonania polskich webdesignerów i developerów. I to wcale nie chodzi o to, że Polacy robią to gorzej niż na zachodzie. Chodzi o to, że mamy mniej ufnych, mniej otwartych, a za to bardzo zachowawczych klientów. Nie dziwne więc, że większość docenianiach polskich website'ów to głównie witryny samych agencji.

Najczęściej zaczyna się to tak:

Brief

Chcemy atrakcyjną, nowoczesną stronę, stworzoną przy użyciu najnowszych technologii dostosowującą się do urządzeń mobilnych.

Makietowanie

Co ja mam tutaj akceptować? Przecież tą są tylko jakieś szare kwadraty i lorem ipsum, które nawet nie wiem co znaczy. Aaaa. Taki będzie układ strony? No ok. Akceptuję!

Pierwszy projekt strony głównej

Dlaczego te zdjęcia są takie małe? O co w ogóle chodzi z tymi przyciskami tutaj? Te kolory są beznadziejne. Co z tego, że w logo mamy takie same? A czcionka czemu taka mała? Dajcie A, A+ i A-, żeby każdy mógł sobie sam ustawić wielkość. A tak w ogóle to dlaczego to się nie rusza i jak kilkam to nic się nie dzieje?

Drugi projekt strony głównej (zmienione rozmiary zdjęć i fontów, przestawione sekcje)

No teraz jest lepiej, ale zmieńmy jeszcze ten kolor tekstu na ciemniejszy i pogrubmy go. I napiszmy dużymi literami DOSTAWA ZA DARMO. Tu na dole i na górze pod menu. I w stopce jeszcze. A i logo większe i na środek.

Projekt wersja 123  (z pierwszym wspólne ma jedynie zdjęcie w tle na pierwszym ekranie i kolor menu)

No teraz jest idealnie! Akceptuję.

Kodowanie

Na projekcie wyglądało to całkiem inaczej! Dlaczego te czcionki są takie duże na moim komputerze? A u Zośki ten kolor to jest jaśniejszy. Ja chcę taki sam wszędzie. No ale jak to się nie da? Pan to w ogóle coś potrafi? I dlaczego na telefonie jak chcę wybrać z rozwijanej listy to mi się wyświetla inaczej niż na komputerze? To video w tle to tak będzie długo się ładować? A tak w ogóle to u Zenka strona w ogóle nie działa. Jak to jakiej przeglądarki używa? No Internet Explorer. Wersja? To one mają jakieś wersje? Ok, pisze, że 8.1. Ale że jak to nie będzie działać u Zenka? Co z tego, że 2% ludzi jeszcze używa tej przeglądarki. Dla nas każdy procent jest ważny!

Kiedy na końcu padnie słowa AKCEPTUJĘ, patrząc na wdrożenie po poprawkach klienta i pierwszych projekt zaproponowany przez agencję, można pobawić się w znajdź różnicę. Tylko odwrotnie - znajdź punkt wspólny.

Po przerwie urlopowej serwuję wam porcję inspiracji,  które dołączyły do mojej kolekcji zakładek w tym miesiącu  (nigdy nie wiadomo co kiedy się przyda ;) ). Have fun!

1. Jimmysaysyes

Zaręczynowo/ślubne strony internetowe to coraz bardziej popularna forma zawiadomienia gości (i reszty świata) o planowanym weselu. Pozwalają one nie tylko na przekazanie mnóstwa informacji w niekonwencjonalny sposób (podzielenie się listą mile widzianych prezentów, wskazówkami dojazdu do lokalizacji przyjęcia, itd.), ale także usprawniają komunikację pomiędzy gośćmi a Młodą Parą.

Dziś podrzucam niebywale piękny przykład, który urzekł mnie:

• prostym, minimalnym designem, 
• pięknymi zdjęciami, 
• pomysłem sklepu 
• oraz wykorzystania Pinteresta do przekazania dresscode'u.

2. Egnistill

3. Squarespace

4. Endeavour Capital

Strona Endeavour Capital zasługuje na wyróżnienie z co najmniej dwóch powodów: za zachowanie biznesowego charakteru, a jednocześnie ciekawą prezentację (co rzadko zdarza się w branży jaką reprezentuje) oraz wykorzystanie ciekawych rozwiązań. Ode mnie plusy za:

• świetny, nietypowy slider,
• typografię,
• kolorystykę,
• animację,
• wersję mobilną (szczególnie sposób podania menu).

Kiedy zaktualizowałam Androida na moim nowym smartfonie do najnowszej wersji i zobaczyłam efekt, łzy stanęły mi w oczach. Lollipop okazał się cukierkowy do porzygu (teraz już wiem, że swoją rękę do wyglądu interfejsu przyłożył także producent urządzenia - Samsung). Wybór i połączenie kolorów w niektórych aplikacjach (z naciskiem na kontakty i wiadomości) oraz brak możliwości ich dostosowania sprawił, że resztę popołudnia spędziłam na przeszukiwaniu for internetowych i artykułów w odpowiedzi jak wrócić do kochanego Kitkata. W związku z tym, że nie okazało się to zbyt proste, zrezygnowałam i zaczęłam oswajać się z nową wersją. Co nie znaczy jednak, że się do niej przekonałam.

przykład aplikacji zaprojektowanej przy użyciu Material Design

Dlaczego tak bardzo nie lubię lizaka? Bo to Material Design w najgorszym wydaniu. Wszechobecny ostatnio framework od Google wpisujący się w trend flat design w wersji 2.0. powoli zaczyna mnie przytłaczać. Przy początkowym zachwycie nad nową wersją Gmaila czy Kalendarza, nadmiar pastelowych kolorów, powtarzalnej typografii i schematycznego layoutu staje się po prostu nudny. Co jeszcze bardziej przerażające, trend ten zyskuje coraz większą popularność i jest widoczny w niemal każdej aplikacji, która ostatnio przeszła redesign. Idealnym tego potwierdzeniem są Material Design Awards. Wygląda na to, że za niedługo jedną aplikację od drugiej będzie rozróżniać tylko nazwa.

Czytelnicy poprzedniego postu wiedzą, jak ważny jest sposób w jaki dostarczamy projekt do klienta. Jednym z moich ulubionych narzędzi ułatwiających przebrnięcie przez etap graficzny jest Invision. Co więcej, autorzy aplikacji nieustannie dbają o jej ciągły rozwój, dzięki czemu z tygodnia na tydzień staje się ona jeszcze lepsza, a jej funkcje wykraczają już szeroko poza to co oferuje nam choćby proste Symu.co. Co czyni ją jednak moją faworytką? Ano fakt, że jest w wersji free jedynym ograniczeniem jest liczba aktywnych projektów (max. 1) bez obcinania funkcjonalności. A tych jest naprawdę sporo!



Nie oszukujmy się - Invision było robione z myślą o grafikach, freelancerach. Jego podstawową zaletą, uwielbianą z resztą przez mojego designera, jest synchronizacja z Photoshopem, która pozwala na sprawne wprowadzanie zmian i dodawanie nowych widoków.  Od początku istnienia aplikacja jednak bardzo się rozwinęła (i robi to nadal!), więc teraz jest doskonałym narzędziem do pracy zespołowej.

Jako Project Manager uwielbiam Invision głównie z jednego powodu: doskonale sprawdza się przy wymianie komunikacji między klientem, PM a grafikiem. Możliwe jest to przede wszystkim dzięki współdzieleniu i udostępnianiem projektu. Czym różnią się te dwie opcje między sobą?

Współdzielenie projektu w Invision

Współdzielenie przeznaczone jest dla członków zespołu, których grafik dołącza do swojego projektu. Members mają dostęp do wszystkich widoków w projekcie, którymi mogą dowolnie zarządzać - archiwizować, zmieniać ich status, udostępniać. W tym tygodniu autorzy Invision dodali nową funkcję - Work flow. Zbliżone do trello narzędzie pozwala jeszcze sprawniej zarządzać projektem. Oczywiście team ma także przeznaczone specjalnie dla niego rodzaje komentarzy (więcej o tym niżej).

Udostępnianie projektu w Invision

Najważniejszą część aplikacji są jednak tryby, po między którymi możemy przełączać się na konkretnym widoku.

1. Tryb podglądu / preview mode

2. Tryb budowania / build mode

3. Tryb komentarzy / comment mode

Wyobraź sobie, że dostajesz od ukochanego wasze wspólne zdjęcie opatrzone w piękną drewnianą ramkę, owinięte papierem i przewiązane wstążeczką wraz z karteczką, że jest to jedne z jego najpiękniejszych wspomnień. Jest Ci miło, prawda? A jakbyś się czuł/-a gdyby dał Ci do ręki to samo zdjęcie wydrukowane na domowej drukarce mówiąc "masz"?



To samo tyczy się dostarczania projektu do klienta. Zwłaszcza pierwszego - strony głównej, prototypu. Nawet najlepszy projekt grafika jest bowiem bezbronny wysłany w .jpg albo co gorzej .psd (tak, nie wszyscy mają photoshopa) jako załącznik do maila o treści: "W załączniku projekt strony głównej. Pozdrawiam" (oczywiście może być jeszcze gorzej, możesz nie napisać nawet tego i wysłać e-mail bez tematu). Jak więc zrobić to dobrze?

1. Pokaż swój projekt w przeglądarce/na urządzeniu mobilnym

2. Stwórz historię

3. Zakończ e-mail call to action.