Kategorie
Ukryta

Design WorkFlow

Budowa i rozwój systemów informatycznych z roku na rok wchodzi w bardziej zaawansowany etap. Kiedyś pracowaliśmy na jednorodnych systemach (Monolitach) gdzie elementy wizualne przetrzymywane były w arkuszach styli CSS i po roku utrzymania takiego systemu mieliśmy już niezły bajzel.

Potem zakochaliśmy się w Mikroserwisach i komunikacji poprzez API i dzięki temu przeszliśmy na budowę elementów wizualnych z podziałem na Elementy i Komponenty wykorzystując np. Idee Atomic Design, co doprowadziło do powstania Design Systemów, Storybooków itp.

Powstało wiele nowych sposobów, ale firmy nadal mierzą się z utrzymaniem i flow pracy projektowej pod dyktando programistów1, backlogów i krótkich terminów.

1 I tu nie chodzi o to, żeby odbierać IT dominującą rolę, a zbudować tak rozwiązanie, aby dla obu stron budowa nie była uciążliwa, a jednocześnie proporcje skupienia na obie dyscypliny były mniej więcej równe.

Będąc tu i teraz szukam rozwiązania dla własnych zespołów, korzystając z obecnych rozwiązań tak aby rola projektantów nie stanowiła jedynie dostawcy makiet / grafik w pośpiechu, a posiadała najważniejszą część, w której pracuje już IT, czyli iteracje. Możliwość powtarzania, wyciągania wniosków i ulepszania daje jakościowe rezultaty.

Tym sposobem powstał pierwszy własny Design WorkFlow:

Był rok 2019, flow nie było doskonałe, nie bazowało na metodyce Atomic Design, ale już posiadało wybranie reguł ogólnych do osobnego pliku CSS, który mógł być szybko nadpisywany oraz do CSS dla poszczególnych komponentów z wykorzystaniem nazewnictwa w konwencji BEM.

Wyciągając wnioski z błędów popełnionych w takim rozwiązaniu i w związku ze zmianami technologicznymi budując Flow w drugiej wersji, wykorzystujemy pracę projektową w oparciu o Elementy i Komponenty w Design Systemie po stronie Projektowej i Storybooku po stronie Programistycznej.

WorkFlow wygląda mniej więcej tak:

Sam Design System po stronie projektowej, czyli tam, gdzie sami możemy wprowadzić ulepszenia jest najistotniejszy, ponieważ to my projektanci jeśli nie opracujemy sposobu własnej pracy nie możemy oczekiwać że IT nam ją przedstawi w taki sposób jak nam odpowiada, bo po prostu jej nie zna. IT zawsze będzie oczekiwać materiałów do wdrożenia w terminie, to jest zrozumiałe i to się nie zmieni.

Projektanci muszą wymyślić swoje flow pracy tak, aby było jakościowe i dostarczało na czas rozwiązania. Dlatego na flow pracy projektowej składa się flow pracy nad Design Systemem, który jest ciągłym procesem doskonalenia.

Design System Flow może wyglądać tak:

Najważniejszym elementem rozwoju DS jest przestrzeń dla projektantów gdzie mogą swobodnie nanosić zmiany, komentarze i uspójnienia na przyszłość pracując dalej w wersji obecnego DS. Dzięki przestrzeni, wymogi czasu i pchania projektów do przodu, utrzymujemy pamięć na spójności i jakości, którą możemy wdrożyć w kolejnej iteracji DS.

Dodatkowo bardzo ważnym czynnikiem jest dopuszczenie do pracy projektowej interesariuszy projektu, nieraz osób bezpośrednio z biznesu lub pracowników różnego szczebla firmy. Stąd wciąż zmieniany proces projektowy oparty jest o wciąż rosnące w popularności narzędzie Figma i może wyglądać tak:

Kategorie
Estetyka

2021

Kategorie
Projektowanie

Komponent finansowy

Miałem możliwość realizować bardzo ciekawy projekt nietypowego komponentu w standardowym procesie zakupowym
wraz z zespołem z global4net.

Przejście z koszyka do płatności (Krok 1) oraz z płatności (Krok 2) do podsumowania (Krok 3) to typowy proces e-commercowy, który w przypadku systemu MyBenefit (dla którego był projektowany) potrzebuje dodatkowych elementów takich jak źródła finansowania (nietypowe, bo banki punktów) oraz musi uwzględniać różne typy produktów: produkty jednorazowe, turystykę i produkty abonamentowe.

1 Banki punktów to miejsca, w które firmy przelewają środki dla pracowników. Pracownicy mogą z punktów kupować różne usługi / kody wartościowe / abonamenty np. medyczne, ubezpieczeniowe itp.

Komponent, o którym mowa zaznaczyłem zakreśleniem.

Krok I – Koszyk
Krok II – Płatność

Krok III – Podsumowanie

Jeśli się przyjrzeć z bliska, posiada bardzo dużo informacji wymaganych przez dział prawny, ale dostosowany jest tak aby zminimalizować poczucie przytłoczenia, poprzez wydzielenie przestrzeni zgodnie z zasadami Gestalten.

Proces zakupowy dla produktów jednorazowych

Proces zakupowy dla turystyki

Komplikacja pojawia się wtedy, gdy chcemy każdy proces zakupowy obsłużyć w podobnej ścieżce, a posiadamy różne segmenty produktów, w tym przypadku turystykę.

Proces zakupowy dla abonamentów

Pewnie w kolejnych iteracjach będzie można zrobić to lepiej, ale jak na pierwszy cykl, uchwycone zostały wszystkie wymagania biznesowe, prawne i uspójnienie estetyczne tak trudne dla wielu segmentów produktowych.

Kategorie
Projektowanie

Pełne wykorzystanie Breadcrumbs

Ścieżka powrotu wykorzystywana w szczególności w e-commerce stała się dla mnie inspiracją do stworzenia menu kontekstowego, wraz z dynamiczną rolą powrotu. Temat z 2017 ale cały czas aktualny.

Typowa ścieżka powrotu (breadcrumbs):

Głównym założeniem menu była możliwość wchodzenia w głąb oraz prosty sposób powrotu w zależności od zagłębienia.

Tak powstało menu z podziałem na 3 konteksty:

Element klikalny to ikona oraz napis. Ikona resetuje wartości wybrane lub prowadzi do danego kontekstu. Napis otwiera menu kategorii.

Samo działanie możemy zobaczyć na filmie poniżej we wdrożonym projekcie EduFox dla systemu zarządzania przedszkolami.

Pierwszy sposób użycia odnosi się do przejścia po każdej kategorii, aż wybierzemy docelowy oraz szybki powrót poprzez wybranie ikony.

Drugi sposób przedstawia ominięcie jednej z kategorii i przejście do konkretnego wybranego.

W zależności od wybranego kontekstu, dodawanie nowego elementu powoduje automatyczne wrzucenie go do danej kategorii. Przyśpieszamy dzięki temu proces wyboru, pozostawiamy dobre praktyki z możliwością pozostawienia ścieżki powrotu oraz wprowadzamy kontekstową budowę elementów.

Komponent ten został sprawdzony na bardzo wymagającej grupie docelowej, w której sprawdził się doskonale.

Kategorie
Lab

Dyferencje

Jakiś czas temu udało się wydać mikro artykuł nt. badań wizerunku i wykorzystania dyferencji w ramach wydania publikacji Katedry Grafiki Uniwersytetu SWPS, w której autorzy dokonują pewnej rewizji 10-letniej działalności poprzez próbę autoprezentacji.

Książka:
http://libron.pl/katalog/czytaj/id/368

Do pobrania wersja elektroniczna:
https://www.researchgate.net/…/352522679_dyferencje_vol_1

Kategorie
Estetyka

lepiejmniej

Koniec roku to moment, kiedy można znaleźć czas i „wydać” w końcu projekt, który przez cały rok był zbywany, nie mniej projekt w swojej idei mocno dopracowany. Zbywany, bo dla bliskiej mi osoby projektowany, a jak wiadomo, projekty te „dla siebie” są najtrudniejsze i najdłużej budowane.

Marka lepiejmniej to blog osobisty związany z ideą popularyzacji życia w duchu minimalizmu, może trochę zen ale też z dużą dawką zdrowego rozsądku i dystansu.
Osoba, która prowadzi blog „od zawsze” stara się tak otaczać przestrzeń, aby nie zabrudzać go niepotrzebnymi detalami lecz jak to w życiu, nie zawsze udaje się to zrealizować.

Kategorie
Estetyka

2020

Kategorie
Estetyka

Czekolada

Przygotowanie marki dla producenta czekolady to czysta przyjemność. Zadanie nie jest jednak proste, kiedy budujemy całą strukturę portfela marek.

Sygnet powstał na prośbę właścicieli. Nawiązuje do ich nazwiska. Mimo początkowego sceptycyzmu, udało się wykonać znak odpowiadający cechom wizerunkowym obranym na początku zadania.

Czekolada to najczęściej wybierany comfort food
na świecie.

Towarzyszy nam w chwilach sukcesu
i momentach zadumy. Kiedy jesteśmy z najbliższymi
i kiedy jedynym towarzystwem, na jakie mamy ochotę,
jest właśnie Ona.


Powyżej tekst wizerunkowy przygotowany dla marki Arteda Enterprise

Logo ułożone na siatce umożliwia przewidywalny układ
na różnych materiałach, buduje stały element
i rozpoznawalność mimo zmian w funkcji.

Współpraca z firmą Arteda Enterprise to ciągły proces szukania najlepszego rozwiązania dla określonych celów. W ramach projektu zostaną również wdrożone dwie submarki i opakowania.

Kategorie
Estetyka

Mewa

Ten przedziwny ptak jest dla mnie od jakiegoś czasu szczególny. Poznałem tego dziwaka na molo w Sopocie, jakiś czas temu, jak odgrywał chojraka.

Po jakimś czasie okazał się nietypowym archetypem dla nowej marki, którą tworzę.

Obserwuję z wielkim podziwem wykorzystanie animacji w projektach webowych. Narzędzia typu Lottie umożliwiają dzisiaj w sposób szybki wygenerować małą animację, a co najważniejsze osadzić ją responsywnie w html. Kosmos.

Kategorie
Estetyka

Święto pogardy

Co roku dowiadujemy się, że jakiś dzień staje się wolny od pracy. Może powstałby dzień wolny od pogardy. Abyśmy raz w roku mogli przypomnieć sobie czym jest.

Proponuję datę 22 października – kiedy zapadło orzeczenie „Trybunału Konstytucyjnego” w środku pandemii. Bo kiedy miną te ponure dni, szybko przejdziemy do normalności, a powinniśmy czuwać, aby przyszli rządzący wprowadzili bezpieczniki uniemożliwiające powtórzenie obecnej sytuacji.

Mało mam czasu na projektowanie grafiki, ale obecna sytuacja zmusiła mnie do działania, a inspiracja oczywiście płynie z protestów.