Ustaliliśmy ostatnio, co chcemy osiągnąć i czego do tego użyjemy. Co powinno być następnym krokiem?

Cóż, podczas budowania aplikacji dobrze jest mieć pod ręką przygotowany wcześniej projekt tego, jak ma ona wyglądać. Im bardziej szczegółowy - tym lepiej. Sama koncepcja nie wystarczy, szczególnie jeśli mówimy o większym projekcie.

Dobry design powinien uwzględniać poszczególne elementy w różnych stanach, ciemny motyw (jeśli planujemy taki zastosować), poszczególne podstrony, interakcje z użytkownikiem, stany ładowania itp.

Mając coś takiego, nie musimy wymyślać poszczególnych elementów na bieżąco. Nie zastanawiamy się, jak będą się komponować z całością. Ot, jest projekt, który pokazuje wszystko.

Projektować, czy nie projektować - oto jest pytanie!

Czy da się zbudować aplikację bez przygotowanego designu? Tak, jednak im więcej elementów, tym więcej rzeczy może pójść nie tak. I finalnie dopasowywanie wszystkiego metodą prób i błędów (czyli głównie błędów) zajmie więcej czasu, niż zrobienie designu.

Inna sprawa, jeśli mamy pod ręką designera, który robi to za nas. Jednak trzeba mieć na uwadze, że z projektem od kogoś pracuje się zazwyczaj nieco inaczej. Oraz, że raczej za darmo takiego projektu nie dostaniemy.

Decyzja jest łatwiejsza, jeśli działamy w zespole. Na przykład robimy to w ramach naszej pracy. Wówczas zazwyczaj designer przesyła zaakceptowany projekt, a naszym zadaniem jest jego wierne odwzorowanie. Jasne, zawsze jest miejsce na poprawki - ale te trzeba omówić z autorem projektu oraz/lub osobą decyzyjną. Może to być lider zespołu, PM albo klient.

Jeśli pracujemy sami i technicznie sami jesteśmy swoim klientem - wówczas mamy większą dowolność i zmiany w projekcie możemy wprowadzać swobodnie - bez względu na to, czy design zrobiliśmy sami, czy kupiliśmy za ciężko zarobione pieniądze.

Paaaaanie, ale ja nie umiem w fotoszopy!

Nic nie szkodzi. Chociaż nadal można spotkać projekty statyczne, wykonane w Photoshopie czy innym programie graficznym, to do projektowania designów służą inne narzędzia. Najpopularniejszymi są chyba Adobe XD, Figma oraz Sketch - nie chcę się kreować na eksperta, którym nie jestem. Jednak z tymi trzema narzędziami się spotykałem najczęściej.

Wszystkie one oferują, poza możliwością wizualizacji layoutów, opcję prototypowania - czyli stworzenia działającego podglądu, na którym możemy zobaczyć, jak powinny zachowywać się poszczególne elementy naszego projektu.

Figma z makiem.

Do przygotowania projektu naszej aplikacji zdecydowałem się wykorzystać Figmę. Dlaczego? Cóż, jak powszechnie wiadomo, za darmo to uczciwa cena.

Jasne, Figma posiada plan płatny, oferujący zdecydowanie więcej. Jednak na potrzeby developera bawiącego się tylko w designy opcja darmowa w zupełności wystarczy.

Kolejnym argumentem za Figmą jest to, że z nią - jak do tej pory - pracowałem najczęściej. I chociaż nie nazwę się zaawansowanym użytkownikiem, to coś tam umiem w niej zaprojektować.

Dizajny, ach te dizajny...

W pierwszej kolejności chciałem się skupić na MVP, czyli Minimum Viable Product. Czym to jest? MVP to produkt, który spełnia minimalne założenia, które pozwolą go udostępnić użytkownikom. W naszym przypadku będzie to automatyczne pokazanie danych z najbliższej stacji pomiarowej lub ręczny wybór dowolnej stacji. I na tym się skupiłem, przygotowując projekt.

Design musiał zatem uwzględnić wersję mobilną oraz desktopową, oferując dla obu dodatkowy tryb ciemny (czyli popularny dark mode).

Ponieważ designerem czy grafikiem nie jestem (i raczej nie będę), to nie chcę się skupiać na samym procesie tworzenia projektu. Głównie dlatego, żeby nie nagadać jakichś głupot - co byłoby wielce prawdopodobne.

Dlatego zwyczajnie poprzestanę na podrzuceniu wam gotowego już projektu, który będziemy odwzorowywać podczas dalszych prac. Nie będę stosował podejścia pixel perfect, bo chciałbym sobie jednak zostawić pewną elastyczność. Jednak co do zasady - design będę chciał odwzorować jak najwierniej.

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FaPI1H1mz0rSakbrmlPCR6p%2FSmoggyFoggy%3Fnode-id%3D0-1%26t%3DUgl88zg4tDAXRAEx-1" allowfullscreen></iframe>

Link do prototypu: MOBILE, DESKTOP

Link do projektu: PROJEKT

Zapraszam do przejrzenia naszego designu. W razie uwag czy pomysłów - mój twixer jest do waszej dyspozycji 😉

W następnej części przejdziemy już do edytora kodu, także stay tuned 😁

Do następnego!