Czas, aby projektanci przeszli z projektowania opartego na obrazie na projekt oparty na kodzie

Po co przechodzić z projektowania opartego na obrazie na projekt oparty na kodzie?

Od zarania projektowania produktów cyfrowych istnieje duży problem. Projektanci są oddzieleni od procesu rozwoju produktu i zmuszeni są do pracy tylko z oprogramowaniem.

Projektanci używają grafiki rastrowej lub narzędzi do projektowania wektorowego do rysowania obrazów, ponieważ są one oddzielone od reszty organizacji. Proces w większości przypadków pozostaje identyczny, nawet jeśli działają w innym oprogramowaniu, takim jak Photoshop, Gimp, Sketch lub Fireworks. Zestaw statycznych obrazów jest wysyłany do inżynierów jako intencja renderowana przez projektantów.

Niezwykle żmudne jest pokazywanie różnych stanów interfejsu za pomocą statycznych tablic graficznych. Stąd wszystko nie jest szczegółowo dopracowane przez projektantów. I ostatecznie cały interfejs użytkownika jest budowany przez inżynierów za pomocą zestawu niekompletnych statycznych obrazów. Często w długiej komunikacji tam iz powrotem wszystkie stany interakcji są zwykle eliminowane.

Doświadczenie nie jest dokładnie odwzorowane w projektach statycznych, dlatego testy są zwykle męczące dla użytkowników. To z powodu tych nieefektywnych procesów organizacja prowadzi do nieudanych produktów i sfrustrowanych zespołów.

Dzięki ewolucji technologii mamy dziś lepszy sposób projektowania rzeczy. Narzędzia do projektowania oparte na obrazach są szybko zastępowane paradygmatem narzędzi projektowania opartych na kodzie. Statyczne reprezentacje projektu narysowane za pomocą narzędzi do projektowania wektorowego lub rastrowego są zastępowane projektami renderowanymi, w których projektanci zamierzają to zrobić bezpośrednio w kodzie, nie wiedząc, jak kodować.

Nowy przepływ pracy zapewnia nowy zestaw narzędzi, w którym:

• Zarówno projektanci, jak i inżynierowie ustanawiają jedno źródło prawdy
• Bez żadnego doświadczenia w kodowaniu, daje projektantom pełną moc kodowania
• Duet projektantów i inżynierów jest połączony poprzez jeden wspólny proces twórczy, który tworzy spektakularną ewolucję przepływu pracy

Projektowanie od obrazu do kodu z UXPin

Pierwsze i podstawowe pytanie dotyczy tego, co nie jest dobre lub nieefektywne w przypadku projektowania opartego na obrazie przed przejściem z projektowania opartego na obrazie do projektowania opartego na kodzie. Być może dobrze zdajesz sobie sprawę, że istnieją dwa paradygmaty narzędzi projektowych, tj. narzędzia do projektowania oparte na kodzie i narzędziach opartych na obrazach.

Narzędzie do projektowania oparte na obrazie to podejście, które jest stosowane od wielu dziesięcioleci i jest dość stare. Projektanci muszą budować grafikę wektorową lub rastrową, kiedy rysują coś, co jest ideą tego podejścia narzędziowego.

Dzięki takiemu podejściu projektanci mają maksymalną elastyczność. Od zaawansowanych ilustracji po proste ikony, wszystko można w ten sposób skutecznie narysować, łącznie z najpiękniejszym poziomem szczegółów. Chociaż jeśli chodzi o profesjonalny rozwój produktów cyfrowych, zwykle się psuje. Oto powód, dla którego tak się dzieje.

1. Brak współdziałania: Rzeczywisty interfejs produktu, z wyjątkiem zdjęć, ilustracji i ikon, nigdy nie jest zbudowany z tych grafik. Projektanci pracują poza ograniczeniami ustawionymi w kodzie podczas pracy nad projektowaniem interfejsu w narzędziach do projektowania opartych na obrazach. Dzięki temu mogą tworzyć rzeczy drogie w kodowaniu i takie, które są trudne w nieznany sposób.

2. Brak dokładności: Oprócz tworzenia wspaniałych projektów, które są szczegółowe, najbardziej niedokładne wyniki w procesie rozwoju często dotyczą narzędzi opartych na obrazach. Praca projektanta renderowana jest w zupełnie innym procesie.

Dlatego istnieje różnica w kodzie gradientów, tekstu i koloru wybranego przez projektanta i przez inżyniera, nawet przy zastosowaniu tych samych specyfikacji. Z tego powodu zespoły są dotknięte masową niewspółosiowością.

3. Projektowanie statyczne: Przepływ pracy skupia się na narzędziu do projektowania opartego na obrazach, polegającym na tworzeniu statycznych obszarów roboczych dla wszystkich stanów interfejsu, które ostatecznie są ze sobą połączone. W przypadku profesjonalnych projektów jest to podejście typu break-in. W statycznym oknie najprostsze wzorce stają się jak rozwijane menu, którym nie można zarządzać.

Dzieje się tak z powodu braku możliwości zachowania elementów interaktywnych do ponownego użycia oraz ze względu na znaczną ilość obszarów roboczych. Co więcej, te narzędzia pozwalają tylko na podstawową interakcję bez możliwości ustawiania zmiennych dla treści, stanów elementów, logiki warunkowej i innych.

4. Słaba współpraca w projektowaniu-inżynierii: Proces inżynierski jest zupełnie inny niż to narzędzie i nie można go łączyć. Dorobek obu światów jest oderwany od swojej natury.

Technologie używane przez użytkowników są końcowym produktem pracy programistów, a dodatkowe warstwy abstrakcji, dalekie od końcowego doświadczenia użytkownika, wprowadza projektowanie oparte na obrazach.

Projektanci i inżynierowie są rozłączeni i sfrustrowani sobą z powodu interaktywnych komponentów wielokrotnego użytku, braku rzeczywistych interakcji i możliwości importowania połączeń z kodu.

Wyjątkowość w projektowaniu opartym na kodzie

Ważne jest, aby wiedzieć, co jest specjalnego w tym projekcie, ponieważ kładziemy nacisk na przejście z projektowania opartego na obrazie do projektowania opartego na kodzie. Kiedy użytkownik rysuje coś za pomocą narzędzia do projektowania opartego na kodzie, tworzy odpowiedni CSS/HTML/JS i angażuje przeglądarkę. Powoduje to, że silnik wyświetla wyniki wizualnie.

Poniżej przedstawiono korzyści dla projektantów po przejściu z projektowania opartego na obrazie do projektowania opartego na kodzie.

1. Wierność: W przypadku projektowania opartego na kodzie istnieje stuprocentowa zgodność między intencją projektanta a możliwym do zakodowania wynikiem. Aby renderować wszystkie projekty projektowe, technologia używana w projektowaniu opartym na kodzie jest taka sama, jak w przypadku tworzenia stron internetowych.

2. Eliminuje różnice między projektantami a programistami: Rzeczy, które są trudne do zaprojektowania i niemożliwe do odtworzenia w kodzie, mogą być tworzone przez projektantów za pomocą narzędzi opartych na obrazie. Te dokładnie te same ograniczenia dotyczą zarówno projektantów, jak i programistów w narzędziach opartych na kodzie. Dzięki temu zapewnia, że ​​zarówno projektanci, jak i programiści pozostają zsynchronizowani.

3. Zastępowanie plansz graficznych komponentami interaktywnymi: Zamiast połączonych plansz graficznych narzędzie do projektowania oparte na kodzie wykorzystuje najbardziej zaawansowane interakcje na komponentach. Takie podejście bezpośrednio umożliwia projektantom tworzenie interaktywnych systemów projektowania wielokrotnego użytku, a także naśladuje rozwój.

4. Realistyczne i wydajne interakcje: wraz z przejściem od projektów opartych na obrazie do projektów opartych na kodzie, obiekty mogą wchodzić ze sobą w interakcje, poruszać się po ekranie i tworzyć złożone wzory. Nie wymaga znajomości kodowania, co jest najważniejsze przy współpracy z inżynierami i testowaniu z użytkownikami.

5. Tworzy najsilniejszą współpracę w historii: Całkowicie nowe, rewolucyjne podejście do współpracy inżynieryjnej i projektowej jest osiągane poprzez paradygmat oparty na kodzie.

Powiązany artykuł

Web Designer vs. Web Developer Różnica